feat: per-workload resources, storage GiB metrics, optional service disks
- Expose DB/Redis/RabbitMQ usage plus sidecars in getResourceUsage - Storage API: GiB fields, Redis/Rabbit PVC usage, fix du/exec container names - PATCH /resources accepts workload; persist entity fields only for app - App detail: workload cards, disk bars, DB expand, scale target select Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
keyhan
@@ -239,18 +239,28 @@ export class ApplicationsController {
|
||||
const isStaff = req.user.role === UserRole.ADMIN || req.user.role === UserRole.TECHNICAL;
|
||||
const app = await this.applicationsService.findOne(id, isStaff ? undefined : req.user.id);
|
||||
|
||||
// Update in K8s (live)
|
||||
await this.kubernetesService.updateResources(app, dto);
|
||||
const workload = dto.workload || 'app';
|
||||
if (dto.replicas !== undefined && workload !== 'app') {
|
||||
throw new BadRequestException('Replicas can only be changed for the main application workload.');
|
||||
}
|
||||
|
||||
// Update in DB
|
||||
// Update in K8s (live)
|
||||
await this.kubernetesService.updateResources(app, dto, workload);
|
||||
|
||||
// Update in DB — only main app resources are stored on the Application entity
|
||||
const updateFields: any = {};
|
||||
if (workload === 'app') {
|
||||
if (dto.cpuRequest) updateFields.cpuRequest = dto.cpuRequest;
|
||||
if (dto.cpuLimit) updateFields.cpuLimit = dto.cpuLimit;
|
||||
if (dto.memoryRequest) updateFields.memoryRequest = dto.memoryRequest;
|
||||
if (dto.memoryLimit) updateFields.memoryLimit = dto.memoryLimit;
|
||||
if (dto.replicas !== undefined) updateFields.replicas = dto.replicas;
|
||||
}
|
||||
|
||||
const updated = await this.applicationsService.update(id, app.userId, updateFields);
|
||||
const updated =
|
||||
Object.keys(updateFields).length > 0
|
||||
? await this.applicationsService.update(id, app.userId, updateFields)
|
||||
: app;
|
||||
this.logger.log(`Updated resources for ${app.name}: ${JSON.stringify(dto)}`);
|
||||
return updated;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Min,
|
||||
Max,
|
||||
Matches,
|
||||
IsIn,
|
||||
} from 'class-validator';
|
||||
import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
|
||||
import { AppRuntime, DatabaseType } from '../../common/enums';
|
||||
@@ -283,6 +284,14 @@ export class CheckDnsDto {
|
||||
}
|
||||
|
||||
export class ScaleResourcesDto {
|
||||
@ApiPropertyOptional({
|
||||
enum: ['app', 'database', 'redis', 'rabbitmq'],
|
||||
description: 'Which deployment to scale. Default: main application.',
|
||||
})
|
||||
@IsOptional()
|
||||
@IsIn(['app', 'database', 'redis', 'rabbitmq'])
|
||||
workload?: 'app' | 'database' | 'redis' | 'rabbitmq';
|
||||
|
||||
@ApiPropertyOptional({ example: '100m' })
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Injectable, Logger, OnModuleInit } from '@nestjs/common';
|
||||
import { Injectable, Logger, OnModuleInit, BadRequestException } from '@nestjs/common';
|
||||
import { ConfigService } from '@nestjs/config';
|
||||
import * as k8s from '@kubernetes/client-node';
|
||||
import * as fs from 'fs';
|
||||
@@ -42,6 +42,17 @@ interface ManifestContext {
|
||||
logPaths: string[];
|
||||
}
|
||||
|
||||
type StorageUsageSlice = {
|
||||
allocatedRaw: string;
|
||||
allocatedGi: number;
|
||||
usedGi: number;
|
||||
availableGi: number;
|
||||
usedPercent: number;
|
||||
allocated: string;
|
||||
used: string;
|
||||
available: string;
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class KubernetesService implements OnModuleInit {
|
||||
private readonly logger = new Logger(KubernetesService.name);
|
||||
@@ -1452,67 +1463,48 @@ export class KubernetesService implements OnModuleInit {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get real-time resource usage (CPU/Memory) for an app's pods via metrics-server.
|
||||
* Also returns the configured requests/limits and pod status.
|
||||
*/
|
||||
async getResourceUsage(app: Application): Promise<any> {
|
||||
const { coreApi, appsApi, kc } = await this.getK8sClient(app.clusterId);
|
||||
const namespace = `user-${app.userId.split('-')[0]}`;
|
||||
|
||||
// Get deployment info for configured resources
|
||||
let deployment: k8s.V1Deployment | null = null;
|
||||
try {
|
||||
const depResponse = await appsApi.readNamespacedDeployment(app.name, namespace);
|
||||
deployment = depResponse.body;
|
||||
} catch {
|
||||
// Deployment may not exist yet
|
||||
/** Map optional workload keys to Deployment + primary container name */
|
||||
workloadDeploymentTarget(
|
||||
app: Application,
|
||||
workload: 'app' | 'database' | 'redis' | 'rabbitmq',
|
||||
): { deploymentName: string; containerName: string } | null {
|
||||
switch (workload) {
|
||||
case 'app':
|
||||
return { deploymentName: app.name, containerName: app.name };
|
||||
case 'database':
|
||||
if (!app.databaseType || app.databaseType === DatabaseType.NONE) return null;
|
||||
return { deploymentName: `${app.name}-db`, containerName: `${app.name}-db` };
|
||||
case 'redis':
|
||||
if (!app.enableRedis) return null;
|
||||
return { deploymentName: `${app.name}-redis`, containerName: 'redis' };
|
||||
case 'rabbitmq':
|
||||
if (!app.enableRabbitmq) return null;
|
||||
return { deploymentName: `${app.name}-rabbitmq`, containerName: 'rabbitmq' };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Get pods
|
||||
const podsResponse = await coreApi.listNamespacedPod(
|
||||
namespace,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
`app=${app.name}`,
|
||||
);
|
||||
|
||||
const pods = podsResponse.body.items.map((pod) => ({
|
||||
name: pod.metadata?.name,
|
||||
status: pod.status?.phase,
|
||||
ready: pod.status?.conditions?.find((c) => c.type === 'Ready')?.status === 'True',
|
||||
restarts: pod.status?.containerStatuses?.[0]?.restartCount || 0,
|
||||
startedAt: pod.status?.startTime,
|
||||
}));
|
||||
|
||||
// Try to get metrics from metrics-server via custom API
|
||||
let podMetrics: any[] = [];
|
||||
private async fetchNamespacePodMetrics(kc: k8s.KubeConfig, namespace: string, appLabelValue: string): Promise<any[]> {
|
||||
try {
|
||||
const metricsClient = new k8s.CustomObjectsApi(kc.getCurrentCluster()?.server);
|
||||
// Use the kc to make a raw request to metrics API
|
||||
const opts: any = {};
|
||||
await kc.applyToRequest(opts);
|
||||
|
||||
const metricsUrl = `${kc.getCurrentCluster()?.server}/apis/metrics.k8s.io/v1beta1/namespaces/${namespace}/pods`;
|
||||
|
||||
const https = require('https');
|
||||
const http = require('http');
|
||||
const url = new URL(metricsUrl);
|
||||
const labelQ = `labelSelector=${encodeURIComponent(`app=${appLabelValue}`)}`;
|
||||
|
||||
podMetrics = await new Promise((resolve) => {
|
||||
return await new Promise((resolve) => {
|
||||
const client = url.protocol === 'https:' ? https : http;
|
||||
const reqOpts: any = {
|
||||
hostname: url.hostname,
|
||||
port: url.port,
|
||||
path: url.pathname + `?labelSelector=app%3D${app.name}`,
|
||||
path: `${url.pathname}?${labelQ}`,
|
||||
method: 'GET',
|
||||
headers: opts.headers || {},
|
||||
rejectUnauthorized: false,
|
||||
};
|
||||
|
||||
// Apply TLS from kubeconfig
|
||||
if (opts.ca) reqOpts.ca = opts.ca;
|
||||
if (opts.cert) reqOpts.cert = opts.cert;
|
||||
if (opts.key) reqOpts.key = opts.key;
|
||||
@@ -1525,6 +1517,11 @@ export class KubernetesService implements OnModuleInit {
|
||||
const parsed = JSON.parse(data);
|
||||
const items = (parsed.items || []).map((item: any) => ({
|
||||
name: item.metadata?.name,
|
||||
containers: (item.containers || []).map((c: any) => ({
|
||||
name: c.name,
|
||||
cpu: c.usage?.cpu || '0',
|
||||
memory: c.usage?.memory || '0',
|
||||
})),
|
||||
cpu: item.containers?.[0]?.usage?.cpu || '0',
|
||||
memory: item.containers?.[0]?.usage?.memory || '0',
|
||||
}));
|
||||
@@ -1538,41 +1535,208 @@ export class KubernetesService implements OnModuleInit {
|
||||
req.end();
|
||||
});
|
||||
} catch {
|
||||
this.logger.warn(`Metrics not available for ${app.name}`);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Get configured resources from deployment
|
||||
const container = deployment?.spec?.template?.spec?.containers?.[0];
|
||||
private async getSingleWorkloadUsage(
|
||||
app: Application,
|
||||
namespace: string,
|
||||
appsApi: k8s.AppsV1Api,
|
||||
coreApi: k8s.CoreV1Api,
|
||||
kc: k8s.KubeConfig,
|
||||
opts: {
|
||||
key: string;
|
||||
title: string;
|
||||
deploymentName: string;
|
||||
primaryContainerName: string;
|
||||
fallbackCpuRequest?: string;
|
||||
fallbackCpuLimit?: string;
|
||||
fallbackMemoryRequest?: string;
|
||||
fallbackMemoryLimit?: string;
|
||||
fallbackReplicas?: number;
|
||||
},
|
||||
): Promise<any | null> {
|
||||
let deployment: k8s.V1Deployment | null = null;
|
||||
try {
|
||||
const depResponse = await appsApi.readNamespacedDeployment(opts.deploymentName, namespace);
|
||||
deployment = depResponse.body;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
|
||||
const podsResponse = await coreApi.listNamespacedPod(
|
||||
namespace,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
`app=${opts.deploymentName}`,
|
||||
);
|
||||
|
||||
const pods = podsResponse.body.items.map((pod) => ({
|
||||
name: pod.metadata?.name,
|
||||
status: pod.status?.phase,
|
||||
ready: pod.status?.conditions?.find((c) => c.type === 'Ready')?.status === 'True',
|
||||
restarts: pod.status?.containerStatuses?.reduce((s, c) => s + (c.restartCount || 0), 0) || 0,
|
||||
startedAt: pod.status?.startTime,
|
||||
}));
|
||||
|
||||
const podMetrics = await this.fetchNamespacePodMetrics(kc, namespace, opts.deploymentName);
|
||||
|
||||
const container =
|
||||
deployment.spec?.template?.spec?.containers?.find((c) => c.name === opts.primaryContainerName) ||
|
||||
deployment.spec?.template?.spec?.containers?.[0];
|
||||
|
||||
const sidecars =
|
||||
(deployment.spec?.template?.spec?.containers || [])
|
||||
.filter((c) => c.name !== opts.primaryContainerName)
|
||||
.map((c) => ({
|
||||
name: c.name,
|
||||
cpuRequest: c.resources?.requests?.cpu,
|
||||
cpuLimit: c.resources?.limits?.cpu,
|
||||
memoryRequest: c.resources?.requests?.memory,
|
||||
memoryLimit: c.resources?.limits?.memory,
|
||||
}));
|
||||
|
||||
const configured = {
|
||||
cpuRequest: container?.resources?.requests?.cpu || app.cpuRequest,
|
||||
cpuLimit: container?.resources?.limits?.cpu || app.cpuLimit,
|
||||
memoryRequest: container?.resources?.requests?.memory || app.memoryRequest,
|
||||
memoryLimit: container?.resources?.limits?.memory || app.memoryLimit,
|
||||
replicas: deployment?.spec?.replicas ?? app.replicas,
|
||||
readyReplicas: deployment?.status?.readyReplicas || 0,
|
||||
availableReplicas: deployment?.status?.availableReplicas || 0,
|
||||
cpuRequest: container?.resources?.requests?.cpu || opts.fallbackCpuRequest,
|
||||
cpuLimit: container?.resources?.limits?.cpu || opts.fallbackCpuLimit,
|
||||
memoryRequest: container?.resources?.requests?.memory || opts.fallbackMemoryRequest,
|
||||
memoryLimit: container?.resources?.limits?.memory || opts.fallbackMemoryLimit,
|
||||
replicas: deployment.spec?.replicas ?? opts.fallbackReplicas ?? 1,
|
||||
readyReplicas: deployment.status?.readyReplicas || 0,
|
||||
availableReplicas: deployment.status?.availableReplicas || 0,
|
||||
};
|
||||
|
||||
const metrics = podMetrics.map((m: any) => {
|
||||
const matchC =
|
||||
m.containers?.find((c: any) => c.name === opts.primaryContainerName) || m.containers?.[0];
|
||||
return {
|
||||
name: m.name,
|
||||
cpu: matchC?.cpu || m.cpu || '0',
|
||||
memory: matchC?.memory || m.memory || '0',
|
||||
containers: m.containers,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
key: opts.key,
|
||||
title: opts.title,
|
||||
deploymentName: opts.deploymentName,
|
||||
configured,
|
||||
pods,
|
||||
metrics: podMetrics,
|
||||
metrics,
|
||||
sidecars: sidecars.length ? sidecars : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get real-time resource usage (CPU/Memory) for an app's pods via metrics-server.
|
||||
* Includes application workload, database, and optional Redis / RabbitMQ when enabled.
|
||||
*/
|
||||
async getResourceUsage(app: Application): Promise<any> {
|
||||
const { coreApi, appsApi, kc } = await this.getK8sClient(app.clusterId);
|
||||
const namespace = `user-${app.userId.split('-')[0]}`;
|
||||
|
||||
const workloads: any[] = [];
|
||||
|
||||
const appW = await this.getSingleWorkloadUsage(app, namespace, appsApi, coreApi, kc, {
|
||||
key: 'app',
|
||||
title: 'Application',
|
||||
deploymentName: app.name,
|
||||
primaryContainerName: app.name,
|
||||
fallbackCpuRequest: app.cpuRequest,
|
||||
fallbackCpuLimit: app.cpuLimit,
|
||||
fallbackMemoryRequest: app.memoryRequest,
|
||||
fallbackMemoryLimit: app.memoryLimit,
|
||||
fallbackReplicas: app.replicas,
|
||||
});
|
||||
if (appW) workloads.push(appW);
|
||||
|
||||
if (app.databaseType && app.databaseType !== DatabaseType.NONE) {
|
||||
const dbW = await this.getSingleWorkloadUsage(app, namespace, appsApi, coreApi, kc, {
|
||||
key: 'database',
|
||||
title: 'Database',
|
||||
deploymentName: `${app.name}-db`,
|
||||
primaryContainerName: `${app.name}-db`,
|
||||
fallbackCpuRequest: '100m',
|
||||
fallbackCpuLimit: '500m',
|
||||
fallbackMemoryRequest: '256Mi',
|
||||
fallbackMemoryLimit: '512Mi',
|
||||
fallbackReplicas: 1,
|
||||
});
|
||||
if (dbW) workloads.push(dbW);
|
||||
}
|
||||
|
||||
if (app.enableRedis) {
|
||||
const r = await this.getSingleWorkloadUsage(app, namespace, appsApi, coreApi, kc, {
|
||||
key: 'redis',
|
||||
title: 'Redis',
|
||||
deploymentName: `${app.name}-redis`,
|
||||
primaryContainerName: 'redis',
|
||||
fallbackCpuRequest: '50m',
|
||||
fallbackCpuLimit: '200m',
|
||||
fallbackMemoryRequest: '64Mi',
|
||||
fallbackMemoryLimit: '256Mi',
|
||||
fallbackReplicas: 1,
|
||||
});
|
||||
if (r) workloads.push(r);
|
||||
}
|
||||
|
||||
if (app.enableRabbitmq) {
|
||||
const mq = await this.getSingleWorkloadUsage(app, namespace, appsApi, coreApi, kc, {
|
||||
key: 'rabbitmq',
|
||||
title: 'RabbitMQ',
|
||||
deploymentName: `${app.name}-rabbitmq`,
|
||||
primaryContainerName: 'rabbitmq',
|
||||
fallbackCpuRequest: '100m',
|
||||
fallbackCpuLimit: '500m',
|
||||
fallbackMemoryRequest: '256Mi',
|
||||
fallbackMemoryLimit: '512Mi',
|
||||
fallbackReplicas: 1,
|
||||
});
|
||||
if (mq) workloads.push(mq);
|
||||
}
|
||||
|
||||
const primary = workloads.find((w) => w.key === 'app') || workloads[0];
|
||||
const loggingNote = app.enableElasticsearch
|
||||
? 'Elasticsearch log forwarding is enabled via Fluent Bit sidecar on application pods.'
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
workloads,
|
||||
loggingNote,
|
||||
configured: primary?.configured,
|
||||
pods: primary?.pods || [],
|
||||
metrics: primary?.metrics || [],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Update resource limits/requests and replicas on a live K8s deployment.
|
||||
* @param workload Which deployment to patch (default: main application). Replicas only apply to `app`.
|
||||
*/
|
||||
async updateResources(
|
||||
app: Application,
|
||||
resources: { cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string; replicas?: number },
|
||||
workload: 'app' | 'database' | 'redis' | 'rabbitmq' = 'app',
|
||||
): Promise<void> {
|
||||
const { appsApi } = await this.getK8sClient(app.clusterId);
|
||||
const namespace = `user-${app.userId.split('-')[0]}`;
|
||||
|
||||
const target = this.workloadDeploymentTarget(app, workload);
|
||||
if (!target) {
|
||||
throw new BadRequestException(
|
||||
workload === 'database'
|
||||
? 'This application does not have a database deployment.'
|
||||
: `Workload "${workload}" is not enabled for this application.`,
|
||||
);
|
||||
}
|
||||
|
||||
const patch: any = { spec: {} };
|
||||
|
||||
if (resources.replicas !== undefined) {
|
||||
if (resources.replicas !== undefined && workload === 'app') {
|
||||
patch.spec.replicas = resources.replicas;
|
||||
}
|
||||
|
||||
@@ -1581,7 +1745,7 @@ export class KubernetesService implements OnModuleInit {
|
||||
spec: {
|
||||
containers: [
|
||||
{
|
||||
name: app.name,
|
||||
name: target.containerName,
|
||||
resources: {
|
||||
requests: {
|
||||
...(resources.cpuRequest && { cpu: resources.cpuRequest }),
|
||||
@@ -1599,7 +1763,7 @@ export class KubernetesService implements OnModuleInit {
|
||||
}
|
||||
|
||||
await appsApi.patchNamespacedDeployment(
|
||||
app.name,
|
||||
target.deploymentName,
|
||||
namespace,
|
||||
patch,
|
||||
undefined,
|
||||
@@ -1610,7 +1774,7 @@ export class KubernetesService implements OnModuleInit {
|
||||
{ headers: { 'Content-Type': 'application/strategic-merge-patch+json' } },
|
||||
);
|
||||
|
||||
this.logger.log(`Updated resources for ${app.name}: ${JSON.stringify(resources)}`);
|
||||
this.logger.log(`Updated resources for ${target.deploymentName} (${workload}): ${JSON.stringify(resources)}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2053,30 +2217,28 @@ export class KubernetesService implements OnModuleInit {
|
||||
|
||||
/**
|
||||
* Get comprehensive storage usage for an application.
|
||||
* Returns allocated, used, and available storage for database and app (wp-content) PVCs.
|
||||
* Includes app + DB PVCs and optional Redis/RabbitMQ data volumes when enabled.
|
||||
*/
|
||||
async getStorageUsage(app: Application): Promise<{
|
||||
database: { allocated: string; used: string; available: string; usedPercent: number } | null;
|
||||
appStorage: { allocated: string; used: string; available: string; usedPercent: number } | null;
|
||||
database: StorageUsageSlice | null;
|
||||
appStorage: StorageUsageSlice | null;
|
||||
redisStorage: StorageUsageSlice | null;
|
||||
rabbitmqStorage: StorageUsageSlice | null;
|
||||
totalAllocatedGb: number;
|
||||
totalUsedGb: number;
|
||||
}> {
|
||||
const { coreApi } = await this.getK8sClient(app.clusterId);
|
||||
const namespace = `user-${app.userId.split('-')[0]}`;
|
||||
|
||||
const result: {
|
||||
database: { allocated: string; used: string; available: string; usedPercent: number } | null;
|
||||
appStorage: { allocated: string; used: string; available: string; usedPercent: number } | null;
|
||||
totalAllocatedGb: number;
|
||||
totalUsedGb: number;
|
||||
} = {
|
||||
database: null,
|
||||
appStorage: null,
|
||||
const result = {
|
||||
database: null as StorageUsageSlice | null,
|
||||
appStorage: null as StorageUsageSlice | null,
|
||||
redisStorage: null as StorageUsageSlice | null,
|
||||
rabbitmqStorage: null as StorageUsageSlice | null,
|
||||
totalAllocatedGb: 0,
|
||||
totalUsedGb: 0,
|
||||
};
|
||||
|
||||
// Helper to parse size strings to GB
|
||||
const parseToGb = (size: string): number => {
|
||||
if (!size) return 0;
|
||||
const match = size.match(/^(\d+(?:\.\d+)?)(Ki|Mi|Gi|Ti)?$/i);
|
||||
@@ -2092,7 +2254,6 @@ export class KubernetesService implements OnModuleInit {
|
||||
}
|
||||
};
|
||||
|
||||
// Helper to format GB to human readable
|
||||
const formatSize = (gb: number): string => {
|
||||
if (gb >= 1) return `${gb.toFixed(1)}Gi`;
|
||||
const mb = gb * 1024;
|
||||
@@ -2100,7 +2261,21 @@ export class KubernetesService implements OnModuleInit {
|
||||
return `${(mb * 1024).toFixed(0)}Ki`;
|
||||
};
|
||||
|
||||
// Get database PVC usage
|
||||
const makeSlice = (allocatedStr: string, allocatedGb: number, usedGb: number): StorageUsageSlice => {
|
||||
const availableGb = Math.max(0, allocatedGb - usedGb);
|
||||
const usedPercent = allocatedGb > 0 ? Math.round((usedGb / allocatedGb) * 100) : 0;
|
||||
return {
|
||||
allocatedRaw: allocatedStr,
|
||||
allocatedGi: allocatedGb,
|
||||
usedGi: usedGb,
|
||||
availableGi: availableGb,
|
||||
usedPercent,
|
||||
allocated: allocatedStr,
|
||||
used: formatSize(usedGb),
|
||||
available: formatSize(availableGb),
|
||||
};
|
||||
};
|
||||
|
||||
if (app.databaseType && app.databaseType !== DatabaseType.NONE) {
|
||||
try {
|
||||
const pvcName = `${app.name}-db`;
|
||||
@@ -2108,27 +2283,22 @@ export class KubernetesService implements OnModuleInit {
|
||||
const allocatedStr = pvc.body.spec?.resources?.requests?.storage || app.dbStorageSize || '1Gi';
|
||||
const allocatedGb = parseToGb(allocatedStr);
|
||||
|
||||
// Try to get actual usage from pod exec (du command)
|
||||
let usedGb = 0;
|
||||
try {
|
||||
usedGb = await this.getPvcUsageFromPod(app, `${app.name}-db`, '/var/lib/postgresql/data', namespace);
|
||||
if (usedGb === 0 && app.databaseType === DatabaseType.MYSQL) {
|
||||
usedGb = await this.getPvcUsageFromPod(app, `${app.name}-db`, '/var/lib/mysql', namespace);
|
||||
const dbDep = `${app.name}-db`;
|
||||
const dbContainer = `${app.name}-db`;
|
||||
if (app.databaseType === DatabaseType.POSTGRESQL) {
|
||||
usedGb = await this.getPvcUsageFromPod(app, dbDep, '/var/lib/postgresql/data', namespace, dbContainer);
|
||||
} else if (app.databaseType === DatabaseType.MYSQL || app.databaseType === DatabaseType.MARIADB) {
|
||||
usedGb = await this.getPvcUsageFromPod(app, dbDep, '/var/lib/mysql', namespace, dbContainer);
|
||||
} else if (app.databaseType === DatabaseType.MONGODB) {
|
||||
usedGb = await this.getPvcUsageFromPod(app, dbDep, '/data/db', namespace, dbContainer);
|
||||
}
|
||||
} catch {
|
||||
// Estimate ~10% usage if we can't get actual
|
||||
usedGb = allocatedGb * 0.1;
|
||||
}
|
||||
|
||||
const availableGb = Math.max(0, allocatedGb - usedGb);
|
||||
const usedPercent = allocatedGb > 0 ? Math.round((usedGb / allocatedGb) * 100) : 0;
|
||||
|
||||
result.database = {
|
||||
allocated: allocatedStr,
|
||||
used: formatSize(usedGb),
|
||||
available: formatSize(availableGb),
|
||||
usedPercent,
|
||||
};
|
||||
result.database = makeSlice(allocatedStr, allocatedGb, usedGb);
|
||||
result.totalAllocatedGb += allocatedGb;
|
||||
result.totalUsedGb += usedGb;
|
||||
} catch (e: any) {
|
||||
@@ -2136,48 +2306,74 @@ export class KubernetesService implements OnModuleInit {
|
||||
}
|
||||
}
|
||||
|
||||
// Get app storage PVC usage (all app types have storage now)
|
||||
try {
|
||||
// Try new unified name first, then legacy wp-content name for backward compatibility
|
||||
let pvc;
|
||||
let pvcName = `${app.name}-storage`;
|
||||
try {
|
||||
pvc = await coreApi.readNamespacedPersistentVolumeClaim(pvcName, namespace);
|
||||
} catch {
|
||||
// Fallback to legacy WordPress PVC name
|
||||
pvcName = `${app.name}-wp-content`;
|
||||
pvc = await coreApi.readNamespacedPersistentVolumeClaim(pvcName, namespace);
|
||||
}
|
||||
|
||||
const allocatedStr = pvc.body.spec?.resources?.requests?.storage || app.appStorageSize || '2Gi';
|
||||
const allocatedGb = parseToGb(allocatedStr);
|
||||
|
||||
// Determine mount path based on runtime
|
||||
const mountPath = this.getStorageMountPath(app.runtime);
|
||||
|
||||
// Try to get actual usage from pod exec
|
||||
let usedGb = 0;
|
||||
try {
|
||||
usedGb = await this.getPvcUsageFromPod(app, app.name, mountPath, namespace);
|
||||
usedGb = await this.getPvcUsageFromPod(app, app.name, mountPath, namespace, app.name);
|
||||
} catch {
|
||||
usedGb = allocatedGb * 0.1;
|
||||
}
|
||||
|
||||
const availableGb = Math.max(0, allocatedGb - usedGb);
|
||||
const usedPercent = allocatedGb > 0 ? Math.round((usedGb / allocatedGb) * 100) : 0;
|
||||
|
||||
result.appStorage = {
|
||||
allocated: allocatedStr,
|
||||
used: formatSize(usedGb),
|
||||
available: formatSize(availableGb),
|
||||
usedPercent,
|
||||
};
|
||||
result.appStorage = makeSlice(allocatedStr, allocatedGb, usedGb);
|
||||
result.totalAllocatedGb += allocatedGb;
|
||||
result.totalUsedGb += usedGb;
|
||||
} catch (e: any) {
|
||||
this.logger.warn(`Failed to get app storage usage for ${app.name}: ${e.message}`);
|
||||
}
|
||||
|
||||
if (app.enableRedis) {
|
||||
try {
|
||||
const redisPvc = `${app.name}-redis-data`;
|
||||
const pvc = await coreApi.readNamespacedPersistentVolumeClaim(redisPvc, namespace);
|
||||
const allocatedStr = pvc.body.spec?.resources?.requests?.storage || '1Gi';
|
||||
const allocatedGb = parseToGb(allocatedStr);
|
||||
let usedGb = 0;
|
||||
try {
|
||||
usedGb = await this.getPvcUsageFromPod(app, `${app.name}-redis`, '/data', namespace, 'redis');
|
||||
} catch {
|
||||
usedGb = allocatedGb * 0.05;
|
||||
}
|
||||
result.redisStorage = makeSlice(allocatedStr, allocatedGb, usedGb);
|
||||
result.totalAllocatedGb += allocatedGb;
|
||||
result.totalUsedGb += usedGb;
|
||||
} catch (e: any) {
|
||||
this.logger.warn(`Failed to get Redis storage usage for ${app.name}: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (app.enableRabbitmq) {
|
||||
try {
|
||||
const mqPvc = `${app.name}-rabbitmq-data`;
|
||||
const pvc = await coreApi.readNamespacedPersistentVolumeClaim(mqPvc, namespace);
|
||||
const allocatedStr = pvc.body.spec?.resources?.requests?.storage || '1Gi';
|
||||
const allocatedGb = parseToGb(allocatedStr);
|
||||
let usedGb = 0;
|
||||
try {
|
||||
usedGb = await this.getPvcUsageFromPod(app, `${app.name}-rabbitmq`, '/var/lib/rabbitmq', namespace, 'rabbitmq');
|
||||
} catch {
|
||||
usedGb = allocatedGb * 0.05;
|
||||
}
|
||||
result.rabbitmqStorage = makeSlice(allocatedStr, allocatedGb, usedGb);
|
||||
result.totalAllocatedGb += allocatedGb;
|
||||
result.totalUsedGb += usedGb;
|
||||
} catch (e: any) {
|
||||
this.logger.warn(`Failed to get RabbitMQ storage usage for ${app.name}: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -2185,10 +2381,15 @@ export class KubernetesService implements OnModuleInit {
|
||||
* Get PVC usage by executing du command in a pod.
|
||||
* Returns usage in GB.
|
||||
*/
|
||||
private async getPvcUsageFromPod(app: Application, deploymentName: string, mountPath: string, namespace: string): Promise<number> {
|
||||
private async getPvcUsageFromPod(
|
||||
app: Application,
|
||||
deploymentName: string,
|
||||
mountPath: string,
|
||||
namespace: string,
|
||||
containerName: string,
|
||||
): Promise<number> {
|
||||
const { coreApi, kc } = await this.getK8sClient(app.clusterId);
|
||||
|
||||
// Find a running pod for this deployment
|
||||
const pods = await coreApi.listNamespacedPod(namespace, undefined, undefined, undefined, undefined, `app=${deploymentName}`);
|
||||
const runningPod = pods.body.items.find(p => p.status?.phase === 'Running');
|
||||
|
||||
@@ -2206,7 +2407,7 @@ export class KubernetesService implements OnModuleInit {
|
||||
exec.exec(
|
||||
namespace,
|
||||
runningPod.metadata!.name!,
|
||||
deploymentName === `${app.name}-db` ? 'db' : app.name,
|
||||
containerName,
|
||||
['du', '-sb', mountPath],
|
||||
stdout,
|
||||
null,
|
||||
@@ -2221,7 +2422,7 @@ export class KubernetesService implements OnModuleInit {
|
||||
|
||||
const output = Buffer.concat(chunks).toString().trim();
|
||||
const bytes = parseInt(output.split(/\s+/)[0], 10) || 0;
|
||||
return bytes / (1024 * 1024 * 1024); // Convert to GB
|
||||
return bytes / (1024 * 1024 * 1024);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -69,6 +69,8 @@ export default function AppDetailPage() {
|
||||
memoryLimit: '',
|
||||
replicas: 1,
|
||||
});
|
||||
const [scaleWorkload, setScaleWorkload] = useState<'app' | 'database' | 'redis' | 'rabbitmq'>('app');
|
||||
const [showDbDiskExpand, setShowDbDiskExpand] = useState(false);
|
||||
const [dbStorageSize, setDbStorageSize] = useState('1');
|
||||
const [dbStorageLoading, setDbStorageLoading] = useState(false);
|
||||
const [showSnapshots, setShowSnapshots] = useState(false);
|
||||
@@ -93,6 +95,13 @@ export default function AppDetailPage() {
|
||||
queryFn: () => api.get(`/applications/${appId}`).then((r) => r.data),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!app) return;
|
||||
if (scaleWorkload === 'database' && app.databaseType === 'none') setScaleWorkload('app');
|
||||
else if (scaleWorkload === 'redis' && !app.enableRedis) setScaleWorkload('app');
|
||||
else if (scaleWorkload === 'rabbitmq' && !app.enableRabbitmq) setScaleWorkload('app');
|
||||
}, [app, scaleWorkload]);
|
||||
|
||||
const { data: deployments = [] } = useQuery<Deployment[]>({
|
||||
queryKey: ['deployments', appId],
|
||||
queryFn: () => api.get(`/deployments/applications/${appId}`).then((r) => r.data),
|
||||
@@ -146,9 +155,21 @@ export default function AppDetailPage() {
|
||||
}, [dbStorageData]);
|
||||
|
||||
// Fetch comprehensive storage usage (allocated/used/available)
|
||||
interface StorageUsageSlice {
|
||||
allocatedRaw: string;
|
||||
allocatedGi: number;
|
||||
usedGi: number;
|
||||
availableGi: number;
|
||||
usedPercent: number;
|
||||
}
|
||||
interface StorageUsageData {
|
||||
database: { allocated: number; used: number; available: number } | null;
|
||||
appStorage: { allocated: number; used: number; available: number } | null;
|
||||
database: StorageUsageSlice | null;
|
||||
appStorage: StorageUsageSlice | null;
|
||||
redisStorage?: StorageUsageSlice | null;
|
||||
rabbitmqStorage?: StorageUsageSlice | null;
|
||||
totalAllocatedGb?: number;
|
||||
totalUsedGb?: number;
|
||||
configured?: { dbStorageSize: string; appStorageSize: string };
|
||||
}
|
||||
const { data: storageUsage, isLoading: storageUsageLoading } = useQuery<StorageUsageData>({
|
||||
queryKey: ['storage-usage', appId],
|
||||
@@ -191,6 +212,7 @@ export default function AppDetailPage() {
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message || 'Database storage expanded!');
|
||||
queryClient.invalidateQueries({ queryKey: ['db-storage', appId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['storage-usage', appId] });
|
||||
} else {
|
||||
toast.error(res.data.message || 'Failed to expand storage');
|
||||
}
|
||||
@@ -445,18 +467,27 @@ export default function AppDetailPage() {
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
// Sync form when resource data loads
|
||||
// Sync form when resource data loads (selected workload)
|
||||
useEffect(() => {
|
||||
if (resourceUsage?.configured) {
|
||||
const workloads = resourceUsage?.workloads;
|
||||
const w =
|
||||
workloads?.find((x) => x.key === scaleWorkload) ||
|
||||
(scaleWorkload === 'app' && resourceUsage?.configured
|
||||
? {
|
||||
key: 'app' as const,
|
||||
configured: resourceUsage.configured,
|
||||
}
|
||||
: undefined);
|
||||
if (w?.configured) {
|
||||
setResourceForm({
|
||||
cpuRequest: resourceUsage.configured.cpuRequest,
|
||||
cpuLimit: resourceUsage.configured.cpuLimit,
|
||||
memoryRequest: resourceUsage.configured.memoryRequest,
|
||||
memoryLimit: resourceUsage.configured.memoryLimit,
|
||||
replicas: resourceUsage.configured.replicas,
|
||||
cpuRequest: w.configured.cpuRequest || '',
|
||||
cpuLimit: w.configured.cpuLimit || '',
|
||||
memoryRequest: w.configured.memoryRequest || '',
|
||||
memoryLimit: w.configured.memoryLimit || '',
|
||||
replicas: w.configured.replicas ?? 1,
|
||||
});
|
||||
}
|
||||
}, [resourceUsage?.configured]);
|
||||
}, [resourceUsage, scaleWorkload]);
|
||||
|
||||
// Auto-scroll logs to bottom
|
||||
useEffect(() => {
|
||||
@@ -544,6 +575,23 @@ export default function AppDetailPage() {
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to update resources'),
|
||||
});
|
||||
|
||||
/** CPU/memory for DB / Redis / RabbitMQ — applies directly in Kubernetes (no billing wizard). */
|
||||
const directPatchResourcesMutation = useMutation({
|
||||
mutationFn: (data: {
|
||||
workload: 'database' | 'redis' | 'rabbitmq';
|
||||
cpuRequest?: string;
|
||||
cpuLimit?: string;
|
||||
memoryRequest?: string;
|
||||
memoryLimit?: string;
|
||||
}) => api.patch(`/applications/${appId}/resources`, data),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
queryClient.invalidateQueries({ queryKey: ['resources', appId] });
|
||||
toast.success('Resources updated');
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to update resources'),
|
||||
});
|
||||
|
||||
// Calculate upgrade cost before applying
|
||||
const calculateUpgradeCostMutation = useMutation({
|
||||
mutationFn: (data: { cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string; replicas?: number }) =>
|
||||
@@ -555,14 +603,22 @@ export default function AppDetailPage() {
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to calculate upgrade cost'),
|
||||
});
|
||||
|
||||
// Handler to check upgrade cost before applying
|
||||
// Handler: app uses billing upgrade path when subscribed; other workloads patch directly.
|
||||
const handleScaleResources = () => {
|
||||
// If app doesn't have billing cycle (free/unmanaged), apply directly
|
||||
if (scaleWorkload !== 'app') {
|
||||
directPatchResourcesMutation.mutate({
|
||||
workload: scaleWorkload,
|
||||
cpuRequest: resourceForm.cpuRequest || undefined,
|
||||
cpuLimit: resourceForm.cpuLimit || undefined,
|
||||
memoryRequest: resourceForm.memoryRequest || undefined,
|
||||
memoryLimit: resourceForm.memoryLimit || undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!app?.billingCycle) {
|
||||
scaleMutation.mutate(resourceForm);
|
||||
return;
|
||||
}
|
||||
// Otherwise, calculate cost first
|
||||
calculateUpgradeCostMutation.mutate(resourceForm);
|
||||
};
|
||||
|
||||
@@ -1637,87 +1693,96 @@ export default function AppDetailPage() {
|
||||
<div className="text-center py-6 text-gray-400 text-sm">Loading metrics...</div>
|
||||
) : resourceUsage ? (
|
||||
<>
|
||||
{/* Cluster Status */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-blue-50 rounded-xl p-4 text-center">
|
||||
<p className="text-xs text-blue-500 font-medium">Replicas</p>
|
||||
<p className="text-2xl font-bold text-blue-700">
|
||||
{resourceUsage.configured.readyReplicas}/{resourceUsage.configured.replicas}
|
||||
</p>
|
||||
<p className="text-xs text-blue-400">ready</p>
|
||||
{resourceUsage.loggingNote && (
|
||||
<p className="text-xs text-gray-600 bg-slate-50 border border-slate-100 rounded-lg px-3 py-2">{resourceUsage.loggingNote}</p>
|
||||
)}
|
||||
|
||||
{(resourceUsage.workloads && resourceUsage.workloads.length > 0
|
||||
? resourceUsage.workloads
|
||||
: resourceUsage.configured
|
||||
? [
|
||||
{
|
||||
key: 'app' as const,
|
||||
title: 'Application',
|
||||
deploymentName: app?.name || '',
|
||||
configured: resourceUsage.configured,
|
||||
pods: resourceUsage.pods,
|
||||
metrics: resourceUsage.metrics,
|
||||
sidecars: undefined,
|
||||
},
|
||||
]
|
||||
: []
|
||||
).map((w) => (
|
||||
<div key={w.key} className="border border-gray-200 rounded-xl p-4 space-y-4 bg-slate-50/50">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h3 className="text-sm font-semibold text-gray-800">{w.title}</h3>
|
||||
<span className="text-[11px] text-gray-400 font-mono truncate max-w-[200px]" title={w.deploymentName}>{w.deploymentName}</span>
|
||||
</div>
|
||||
<div className="bg-green-50 rounded-xl p-4 text-center">
|
||||
<p className="text-xs text-green-500 font-medium">Pods</p>
|
||||
<p className="text-2xl font-bold text-green-700">{resourceUsage.pods.length}</p>
|
||||
<p className="text-xs text-green-400">
|
||||
{resourceUsage.pods.filter((p) => p.ready).length} ready
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="bg-blue-50 rounded-lg p-3">
|
||||
<p className="text-[10px] text-blue-600 font-medium">Replicas</p>
|
||||
<p className="text-lg font-bold text-blue-800">
|
||||
{w.configured.readyReplicas}/{w.configured.replicas}
|
||||
</p>
|
||||
<p className="text-[10px] text-blue-500">ready</p>
|
||||
</div>
|
||||
<div className="bg-purple-50 rounded-xl p-4 text-center">
|
||||
<p className="text-xs text-purple-500 font-medium">Metrics</p>
|
||||
<p className="text-2xl font-bold text-purple-700">
|
||||
{resourceUsage.metrics.length > 0 ? <CheckCircle className="w-6 h-6 mx-auto text-purple-700" /> : <Clock className="w-6 h-6 mx-auto text-purple-400" />}
|
||||
</p>
|
||||
<p className="text-xs text-purple-400">
|
||||
{resourceUsage.metrics.length > 0 ? 'Available' : 'Waiting...'}
|
||||
<div className="bg-green-50 rounded-lg p-3">
|
||||
<p className="text-[10px] text-green-600 font-medium">Pods</p>
|
||||
<p className="text-lg font-bold text-green-800">{w.pods.length}</p>
|
||||
<p className="text-[10px] text-green-500">{w.pods.filter((p) => p.ready).length} ready</p>
|
||||
</div>
|
||||
<div className="bg-purple-50 rounded-lg p-3">
|
||||
<p className="text-[10px] text-purple-600 font-medium">Metrics</p>
|
||||
<p className="text-lg font-bold text-purple-800 flex justify-center">
|
||||
{w.metrics.length > 0 ? <CheckCircle className="w-5 h-5 text-purple-700" /> : <Clock className="w-5 h-5 text-purple-400" />}
|
||||
</p>
|
||||
<p className="text-[10px] text-purple-500">{w.metrics.length > 0 ? 'Live' : 'Waiting…'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Per-Pod Metrics */}
|
||||
{resourceUsage.metrics.length > 0 && (
|
||||
<div className="text-xs text-gray-600 grid sm:grid-cols-2 gap-2 border-t border-gray-200 pt-3">
|
||||
<div>
|
||||
<span className="text-gray-400">CPU: </span>
|
||||
<span className="font-mono">{w.configured.cpuRequest} → {w.configured.cpuLimit}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Memory: </span>
|
||||
<span className="font-mono">{w.configured.memoryRequest} → {w.configured.memoryLimit}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{w.metrics.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-gray-700">Pod Usage</h3>
|
||||
{resourceUsage.metrics.map((metric) => {
|
||||
<h4 className="text-xs font-semibold text-gray-600">Live usage</h4>
|
||||
{w.metrics.map((metric) => {
|
||||
const cpuUsed = parseCpuToMillicores(metric.cpu);
|
||||
const cpuLimit = parseCpuToMillicores(resourceUsage.configured.cpuLimit);
|
||||
const cpuLimit = parseCpuToMillicores(w.configured.cpuLimit);
|
||||
const cpuPercent = cpuLimit > 0 ? Math.min((cpuUsed / cpuLimit) * 100, 100) : 0;
|
||||
|
||||
const memUsed = parseMemoryToMi(metric.memory);
|
||||
const memLimit = parseMemoryToMi(resourceUsage.configured.memoryLimit);
|
||||
const memLimit = parseMemoryToMi(w.configured.memoryLimit);
|
||||
const memPercent = memLimit > 0 ? Math.min((memUsed / memLimit) * 100, 100) : 0;
|
||||
|
||||
return (
|
||||
<div key={metric.name} className="bg-gray-50 rounded-xl p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-mono text-gray-600 truncate max-w-[250px]" title={metric.name}>
|
||||
<div key={metric.name} className="bg-white rounded-lg p-3 space-y-2 border border-gray-100">
|
||||
<p className="text-[11px] font-mono text-gray-600 truncate" title={metric.name}>
|
||||
<Circle className="w-2 h-2 inline fill-green-500 text-green-500" /> {metric.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CPU Bar */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs text-gray-500 mb-1">
|
||||
<div className="flex justify-between text-[11px] text-gray-500 mb-0.5">
|
||||
<span>CPU</span>
|
||||
<span>
|
||||
{cpuUsed.toFixed(1)}m / {cpuLimit.toFixed(0)}m ({cpuPercent.toFixed(1)}%)
|
||||
</span>
|
||||
<span>{cpuUsed.toFixed(1)}m / {cpuLimit.toFixed(0)}m ({cpuPercent.toFixed(1)}%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className={`h-2.5 rounded-full transition-all duration-500 ${
|
||||
cpuPercent > 80 ? 'bg-red-500' : cpuPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${cpuPercent}%` }}
|
||||
/>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div className={`h-2 rounded-full ${cpuPercent > 80 ? 'bg-red-500' : cpuPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'}`} style={{ width: `${cpuPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Memory Bar */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs text-gray-500 mb-1">
|
||||
<div className="flex justify-between text-[11px] text-gray-500 mb-0.5">
|
||||
<span>Memory</span>
|
||||
<span>
|
||||
{memUsed.toFixed(1)}Mi / {memLimit.toFixed(0)}Mi ({memPercent.toFixed(1)}%)
|
||||
</span>
|
||||
<span>{memUsed.toFixed(1)}Mi / {memLimit.toFixed(0)}Mi ({memPercent.toFixed(1)}%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className={`h-2.5 rounded-full transition-all duration-500 ${
|
||||
memPercent > 80 ? 'bg-red-500' : memPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${memPercent}%` }}
|
||||
/>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div className={`h-2 rounded-full ${memPercent > 80 ? 'bg-red-500' : memPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'}`} style={{ width: `${memPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1726,37 +1791,28 @@ export default function AppDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pod Status Table */}
|
||||
{resourceUsage.pods.length > 0 && (
|
||||
{w.pods.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">Pod Status</h3>
|
||||
<div className="overflow-x-auto -mx-2 px-2">
|
||||
<table className="w-full text-xs">
|
||||
<h4 className="text-xs font-semibold text-gray-600 mb-1">Pods</h4>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-[11px]">
|
||||
<thead>
|
||||
<tr className="text-left text-gray-500 border-b border-gray-200">
|
||||
<th className="pb-2 font-medium">Pod</th>
|
||||
<th className="pb-2 font-medium">Status</th>
|
||||
<th className="pb-2 font-medium">Ready</th>
|
||||
<th className="pb-2 font-medium">Restarts</th>
|
||||
<th className="pb-1 font-medium">Name</th>
|
||||
<th className="pb-1 font-medium">Status</th>
|
||||
<th className="pb-1 font-medium">Ready</th>
|
||||
<th className="pb-1 font-medium">R</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{resourceUsage.pods.map((pod) => (
|
||||
{w.pods.map((pod) => (
|
||||
<tr key={pod.name} className="text-gray-700">
|
||||
<td className="py-2 font-mono truncate max-w-[200px]" title={pod.name}>
|
||||
{pod.name}
|
||||
<td className="py-1 font-mono truncate max-w-[140px]" title={pod.name}>{pod.name}</td>
|
||||
<td className="py-1">
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${pod.status === 'Running' ? 'bg-green-100 text-green-700' : pod.status === 'Pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>{pod.status}</span>
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
pod.status === 'Running' ? 'bg-green-100 text-green-700' :
|
||||
pod.status === 'Pending' ? 'bg-yellow-100 text-yellow-700' :
|
||||
'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{pod.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2">{pod.ready ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Clock className="w-4 h-4 text-yellow-500" />}</td>
|
||||
<td className="py-2">{pod.restarts}</td>
|
||||
<td className="py-1">{pod.ready ? <CheckCircle className="w-3.5 h-3.5 text-green-500" /> : <Clock className="w-3.5 h-3.5 text-yellow-500" />}</td>
|
||||
<td className="py-1">{pod.restarts}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@@ -1765,6 +1821,19 @@ export default function AppDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{w.sidecars && w.sidecars.length > 0 && (
|
||||
<div className="text-[11px] text-gray-600 border-t border-dashed border-gray-200 pt-2">
|
||||
<span className="font-semibold text-gray-700">Sidecars: </span>
|
||||
{w.sidecars.map((s) => (
|
||||
<span key={s.name} className="mr-3">
|
||||
{s.name} <span className="text-gray-400">(CPU {s.cpuLimit || '—'}, mem {s.memoryLimit || '—'})</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Storage Usage Section */}
|
||||
<div className="border-t pt-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1">
|
||||
@@ -1778,56 +1847,119 @@ export default function AppDetailPage() {
|
||||
{storageUsage.database && (
|
||||
<div className="bg-gray-50 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium text-gray-600">Database Storage</span>
|
||||
<span className="text-xs font-medium text-gray-600">Database volume</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{(storageUsage.database.used / (1024 * 1024 * 1024)).toFixed(2)} GB / {(storageUsage.database.allocated / (1024 * 1024 * 1024)).toFixed(1)} GB
|
||||
{storageUsage.database.usedGi.toFixed(2)} GiB / {storageUsage.database.allocatedGi.toFixed(1)} GiB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-3">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all duration-500 ${
|
||||
(storageUsage.database.used / storageUsage.database.allocated) * 100 > 80
|
||||
storageUsage.database.usedPercent > 80
|
||||
? 'bg-red-500'
|
||||
: (storageUsage.database.used / storageUsage.database.allocated) * 100 > 50
|
||||
: storageUsage.database.usedPercent > 50
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
style={{ width: `${Math.min((storageUsage.database.used / storageUsage.database.allocated) * 100, 100)}%` }}
|
||||
style={{ width: `${Math.min(storageUsage.database.usedPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between mt-1 text-xs text-gray-400">
|
||||
<span>Used: {(storageUsage.database.used / (1024 * 1024 * 1024)).toFixed(2)} GB</span>
|
||||
<span>Available: {(storageUsage.database.available / (1024 * 1024 * 1024)).toFixed(2)} GB</span>
|
||||
<span>Used {storageUsage.database.usedGi.toFixed(2)} GiB</span>
|
||||
<span>Free ~{storageUsage.database.availableGi.toFixed(2)} GiB</span>
|
||||
</div>
|
||||
{app?.databaseType !== 'none' && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-200">
|
||||
{showDbDiskExpand ? (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const current = parseInt(dbStorageSize, 10);
|
||||
const min = parseInt((dbStorageData?.currentSize || '1Gi').replace('Gi', ''), 10) || 1;
|
||||
if (current > min + 1) setDbStorageSize(String(current - 1));
|
||||
}}
|
||||
className="px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold text-xs"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={500}
|
||||
value={dbStorageSize}
|
||||
onChange={(e) => {
|
||||
const val = Math.max(1, Math.min(500, parseInt(e.target.value, 10) || 1));
|
||||
setDbStorageSize(String(val));
|
||||
}}
|
||||
className="w-12 text-center py-1 border-x border-gray-300 text-xs font-semibold focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const current = parseInt(dbStorageSize, 10);
|
||||
if (current < 500) setDbStorageSize(String(current + 1));
|
||||
}}
|
||||
className="px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold text-xs"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">GiB</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => resizeDbMutation.mutate(`${parseInt(dbStorageSize, 10)}Gi`)}
|
||||
disabled={
|
||||
resizeDbMutation.isPending ||
|
||||
parseInt(dbStorageSize, 10) <= (parseInt((dbStorageData?.currentSize || '1Gi').replace('Gi', ''), 10) || 1)
|
||||
}
|
||||
className="btn-primary text-xs px-2 py-1 disabled:opacity-50"
|
||||
>
|
||||
{resizeDbMutation.isPending ? 'Expanding…' : 'Expand DB disk'}
|
||||
</button>
|
||||
<button type="button" onClick={() => setShowDbDiskExpand(false)} className="btn-secondary text-xs px-2 py-1">Cancel</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowDbDiskExpand(true)}
|
||||
className="text-xs text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1"
|
||||
>
|
||||
<Scale className="w-3 h-3" /> Expand database disk
|
||||
</button>
|
||||
)}
|
||||
<p className="text-[11px] text-gray-400 mt-1">PVC can only grow. Size from API: {storageUsage.database.allocatedRaw}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* App Storage (WordPress wp-content) */}
|
||||
{storageUsage.appStorage && (
|
||||
<div className="bg-gray-50 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{app?.runtime === 'wordpress' ? 'wp-content Storage' : 'App Storage'}
|
||||
{app?.runtime === 'wordpress' ? 'wp-content volume' : 'Application volume'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{(storageUsage.appStorage.used / (1024 * 1024 * 1024)).toFixed(2)} GB / {(storageUsage.appStorage.allocated / (1024 * 1024 * 1024)).toFixed(1)} GB
|
||||
{storageUsage.appStorage.usedGi.toFixed(2)} GiB / {storageUsage.appStorage.allocatedGi.toFixed(1)} GiB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-3">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all duration-500 ${
|
||||
(storageUsage.appStorage.used / storageUsage.appStorage.allocated) * 100 > 80
|
||||
storageUsage.appStorage.usedPercent > 80
|
||||
? 'bg-red-500'
|
||||
: (storageUsage.appStorage.used / storageUsage.appStorage.allocated) * 100 > 50
|
||||
: storageUsage.appStorage.usedPercent > 50
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${Math.min((storageUsage.appStorage.used / storageUsage.appStorage.allocated) * 100, 100)}%` }}
|
||||
style={{ width: `${Math.min(storageUsage.appStorage.usedPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between mt-1 text-xs text-gray-400">
|
||||
<span>Used: {(storageUsage.appStorage.used / (1024 * 1024 * 1024)).toFixed(2)} GB</span>
|
||||
<span>Available: {(storageUsage.appStorage.available / (1024 * 1024 * 1024)).toFixed(2)} GB</span>
|
||||
<span>Used {storageUsage.appStorage.usedGi.toFixed(2)} GiB</span>
|
||||
<span>Free ~{storageUsage.appStorage.availableGi.toFixed(2)} GiB</span>
|
||||
</div>
|
||||
|
||||
{/* Expand App Storage (all app types) */}
|
||||
@@ -1905,7 +2037,43 @@ export default function AppDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!storageUsage.database && !storageUsage.appStorage && (
|
||||
{storageUsage.redisStorage && app?.enableRedis && (
|
||||
<div className="bg-amber-50/80 rounded-xl p-4 border border-amber-100">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium text-gray-700">Redis (optional) volume</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{storageUsage.redisStorage.usedGi.toFixed(2)} GiB / {storageUsage.redisStorage.allocatedGi.toFixed(1)} GiB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className={`h-2.5 rounded-full ${storageUsage.redisStorage.usedPercent > 80 ? 'bg-red-500' : 'bg-amber-500'}`}
|
||||
style={{ width: `${Math.min(storageUsage.redisStorage.usedPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-500 mt-1">Allocated {storageUsage.redisStorage.allocatedRaw}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{storageUsage.rabbitmqStorage && app?.enableRabbitmq && (
|
||||
<div className="bg-violet-50/80 rounded-xl p-4 border border-violet-100">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium text-gray-700">RabbitMQ (optional) volume</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{storageUsage.rabbitmqStorage.usedGi.toFixed(2)} GiB / {storageUsage.rabbitmqStorage.allocatedGi.toFixed(1)} GiB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className={`h-2.5 rounded-full ${storageUsage.rabbitmqStorage.usedPercent > 80 ? 'bg-red-500' : 'bg-violet-500'}`}
|
||||
style={{ width: `${Math.min(storageUsage.rabbitmqStorage.usedPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-500 mt-1">Allocated {storageUsage.rabbitmqStorage.allocatedRaw}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!storageUsage.database && !storageUsage.appStorage && !storageUsage.redisStorage && !storageUsage.rabbitmqStorage && (
|
||||
<p className="text-sm text-gray-400 text-center py-4">No storage data available</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -1916,7 +2084,23 @@ export default function AppDetailPage() {
|
||||
|
||||
{/* Scaling Controls */}
|
||||
<div className="border-t pt-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1"><Settings className="w-4 h-4" /> Scale Resources</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1"><Settings className="w-4 h-4" /> Adjust CPU / memory</h3>
|
||||
<p className="text-xs text-gray-500 mb-3">
|
||||
Pick which component to update. The main application may use billing if your plan charges for upgrades; database and optional services apply directly in the cluster.
|
||||
</p>
|
||||
<div className="mb-4">
|
||||
<label className="block text-xs text-gray-500 mb-1">Workload</label>
|
||||
<select
|
||||
value={scaleWorkload}
|
||||
onChange={(e) => setScaleWorkload(e.target.value as typeof scaleWorkload)}
|
||||
className="input-field text-sm max-w-md"
|
||||
>
|
||||
<option value="app">Application</option>
|
||||
{app?.databaseType !== 'none' && <option value="database">Database</option>}
|
||||
{app?.enableRedis && <option value="redis">Redis</option>}
|
||||
{app?.enableRabbitmq && <option value="rabbitmq">RabbitMQ</option>}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">CPU Request</label>
|
||||
@@ -1958,10 +2142,12 @@ export default function AppDetailPage() {
|
||||
placeholder="512Mi"
|
||||
/>
|
||||
</div>
|
||||
{scaleWorkload === 'app' && (
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Replicas</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.max(1, f.replicas - 1) }))}
|
||||
className="btn-icon w-9 h-9"
|
||||
>
|
||||
@@ -1969,6 +2155,7 @@ export default function AppDetailPage() {
|
||||
</button>
|
||||
<span className="text-lg font-bold text-gray-800 w-8 text-center">{resourceForm.replicas}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.min(10, f.replicas + 1) }))}
|
||||
className="btn-icon w-9 h-9"
|
||||
>
|
||||
@@ -1976,13 +2163,25 @@ export default function AppDetailPage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleScaleResources}
|
||||
disabled={scaleMutation.isPending || calculateUpgradeCostMutation.isPending}
|
||||
disabled={
|
||||
scaleMutation.isPending ||
|
||||
calculateUpgradeCostMutation.isPending ||
|
||||
directPatchResourcesMutation.isPending
|
||||
}
|
||||
className="btn-primary text-sm w-full disabled:opacity-50"
|
||||
>
|
||||
{scaleMutation.isPending || calculateUpgradeCostMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /> Calculating...</> : <><RefreshCw className="w-3 h-3 inline" /> Apply Changes</>}
|
||||
{directPatchResourcesMutation.isPending ? (
|
||||
<><Clock className="w-3 h-3 inline animate-spin" /> Applying…</>
|
||||
) : scaleMutation.isPending || calculateUpgradeCostMutation.isPending ? (
|
||||
<><Clock className="w-3 h-3 inline animate-spin" /> Calculating…</>
|
||||
) : (
|
||||
<><RefreshCw className="w-3 h-3 inline" /> Apply changes</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -185,9 +185,33 @@ export interface PodMetric {
|
||||
name: string;
|
||||
cpu: string;
|
||||
memory: string;
|
||||
/** When metrics-server returns multiple containers (e.g. Fluent Bit sidecar) */
|
||||
containers?: { name: string; cpu: string; memory: string }[];
|
||||
}
|
||||
|
||||
export interface WorkloadResourceUsage {
|
||||
key: 'app' | 'database' | 'redis' | 'rabbitmq';
|
||||
title: string;
|
||||
deploymentName: string;
|
||||
configured: {
|
||||
cpuRequest: string;
|
||||
cpuLimit: string;
|
||||
memoryRequest: string;
|
||||
memoryLimit: string;
|
||||
replicas: number;
|
||||
readyReplicas: number;
|
||||
availableReplicas: number;
|
||||
};
|
||||
pods: PodInfo[];
|
||||
metrics: PodMetric[];
|
||||
sidecars?: { name: string; cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string }[];
|
||||
}
|
||||
|
||||
export interface ResourceUsage {
|
||||
/** Per-deployment breakdown (app, DB, optional Redis/RabbitMQ) */
|
||||
workloads?: WorkloadResourceUsage[];
|
||||
/** Note when Elasticsearch logging sidecar is enabled */
|
||||
loggingNote?: string;
|
||||
configured: {
|
||||
cpuRequest: string;
|
||||
cpuLimit: string;
|
||||
|
||||
Reference in New Issue
Block a user