feat: move Apps from admin to main tab bar with container config
- Apps tab visible to OPERATOR+ (hidden for VIEWER), scoped by sidebar app selection and environment filter - List view: DataTable with name, environment, updated, created columns - Detail view: deployments across all envs, version upload with per-env deploy target, container config form (resources, ports, custom env vars) with explicit Save - Memory reserve field disabled for non-production environments with info hint - Admin sidebar sorted alphabetically, Applications entry removed - Old admin AppsPage deleted Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
170
ui/src/pages/AppsTab/AppsTab.module.css
Normal file
170
ui/src/pages/AppsTab/AppsTab.module.css
Normal file
@@ -0,0 +1,170 @@
|
||||
.container {
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.createForm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
.createActions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.envSelect {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.cellName {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.cellMeta {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.detailHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detailTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detailMeta {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.metaGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 6px 16px;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-body);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.metaLabel {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-size: 12px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.rowText {
|
||||
flex: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.rowMeta {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.errorText {
|
||||
color: var(--error);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.emptyNote {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
|
||||
.configForm {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.configSection {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.configTitle {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.configGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr;
|
||||
gap: 8px 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.configLabel {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.configField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.configHint {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.envVarEditor {
|
||||
width: 100%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
resize: vertical;
|
||||
}
|
||||
515
ui/src/pages/AppsTab/AppsTab.tsx
Normal file
515
ui/src/pages/AppsTab/AppsTab.tsx
Normal file
@@ -0,0 +1,515 @@
|
||||
import { useState, useMemo, useRef } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
DataTable,
|
||||
Input,
|
||||
MonoText,
|
||||
SectionHeader,
|
||||
Spinner,
|
||||
useToast,
|
||||
} from '@cameleer/design-system';
|
||||
import type { Column } from '@cameleer/design-system';
|
||||
import { useEnvironmentStore } from '../../api/environment-store';
|
||||
import { useEnvironments } from '../../api/queries/admin/environments';
|
||||
import {
|
||||
useAllApps,
|
||||
useApps,
|
||||
useCreateApp,
|
||||
useDeleteApp,
|
||||
useAppVersions,
|
||||
useUploadJar,
|
||||
useDeployments,
|
||||
useCreateDeployment,
|
||||
useStopDeployment,
|
||||
useUpdateContainerConfig,
|
||||
} from '../../api/queries/admin/apps';
|
||||
import type { App, AppVersion, Deployment } from '../../api/queries/admin/apps';
|
||||
import type { Environment } from '../../api/queries/admin/environments';
|
||||
import styles from './AppsTab.module.css';
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`;
|
||||
if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${bytes} B`;
|
||||
}
|
||||
|
||||
function timeAgo(date: string): string {
|
||||
const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
|
||||
if (seconds < 60) return `${seconds}s ago`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, 'success' | 'warning' | 'error' | 'auto' | 'running'> = {
|
||||
RUNNING: 'running',
|
||||
STARTING: 'warning',
|
||||
FAILED: 'error',
|
||||
STOPPED: 'auto',
|
||||
};
|
||||
|
||||
export default function AppsTab() {
|
||||
const { appId } = useParams<{ appId?: string }>();
|
||||
const selectedEnv = useEnvironmentStore((s) => s.environment);
|
||||
const { data: environments = [] } = useEnvironments();
|
||||
|
||||
// If an app is selected via sidebar, show detail view
|
||||
if (appId) {
|
||||
return (
|
||||
<AppDetailView
|
||||
appId={appId}
|
||||
environments={environments}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Otherwise show list view
|
||||
return (
|
||||
<AppListView
|
||||
selectedEnv={selectedEnv}
|
||||
environments={environments}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// --- List View ---
|
||||
|
||||
function AppListView({
|
||||
selectedEnv,
|
||||
environments,
|
||||
}: {
|
||||
selectedEnv: string | undefined;
|
||||
environments: Environment[];
|
||||
}) {
|
||||
const { toast } = useToast();
|
||||
const { data: allApps = [], isLoading: allLoading } = useAllApps();
|
||||
const { data: envApps = [], isLoading: envLoading } = useApps(
|
||||
selectedEnv ? environments.find((e) => e.slug === selectedEnv)?.id : undefined,
|
||||
);
|
||||
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [newSlug, setNewSlug] = useState('');
|
||||
const [newDisplayName, setNewDisplayName] = useState('');
|
||||
const [newEnvId, setNewEnvId] = useState('');
|
||||
const createApp = useCreateApp();
|
||||
|
||||
const apps = selectedEnv ? envApps : allApps;
|
||||
const isLoading = selectedEnv ? envLoading : allLoading;
|
||||
|
||||
// Build enriched rows with environment name and latest deployment status
|
||||
const envMap = useMemo(() => {
|
||||
const m = new Map<string, Environment>();
|
||||
for (const e of environments) m.set(e.id, e);
|
||||
return m;
|
||||
}, [environments]);
|
||||
|
||||
type AppRow = App & { envName: string };
|
||||
const rows: AppRow[] = useMemo(
|
||||
() => apps.map((a) => ({
|
||||
...a,
|
||||
envName: envMap.get(a.environmentId)?.displayName ?? '?',
|
||||
})),
|
||||
[apps, envMap],
|
||||
);
|
||||
|
||||
const columns: Column<AppRow>[] = useMemo(() => [
|
||||
{
|
||||
key: 'displayName',
|
||||
header: 'Name',
|
||||
render: (_val: unknown, row: AppRow) => (
|
||||
<div>
|
||||
<div className={styles.cellName}>{row.displayName}</div>
|
||||
<div className={styles.cellMeta}>{row.slug}</div>
|
||||
</div>
|
||||
),
|
||||
sortable: true,
|
||||
},
|
||||
...(!selectedEnv ? [{
|
||||
key: 'envName',
|
||||
header: 'Environment',
|
||||
render: (_val: unknown, row: AppRow) => <Badge label={row.envName} color={'auto' as const} />,
|
||||
sortable: true,
|
||||
}] : []),
|
||||
{
|
||||
key: 'updatedAt',
|
||||
header: 'Updated',
|
||||
render: (_val: unknown, row: AppRow) => <span className={styles.cellMeta}>{timeAgo(row.updatedAt)}</span>,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
header: 'Created',
|
||||
render: (_val: unknown, row: AppRow) => <span className={styles.cellMeta}>{new Date(row.createdAt).toLocaleDateString()}</span>,
|
||||
sortable: true,
|
||||
},
|
||||
], [selectedEnv]);
|
||||
|
||||
async function handleCreate() {
|
||||
if (!newSlug.trim() || !newDisplayName.trim() || !newEnvId) return;
|
||||
try {
|
||||
await createApp.mutateAsync({
|
||||
environmentId: newEnvId,
|
||||
slug: newSlug.trim(),
|
||||
displayName: newDisplayName.trim(),
|
||||
});
|
||||
toast({ title: 'App created', description: newSlug.trim(), variant: 'success' });
|
||||
setCreating(false);
|
||||
setNewSlug('');
|
||||
setNewDisplayName('');
|
||||
setNewEnvId('');
|
||||
} catch {
|
||||
toast({ title: 'Failed to create app', variant: 'error', duration: 86_400_000 });
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) return <Spinner size="md" />;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.toolbar}>
|
||||
<Button size="sm" variant="primary" onClick={() => {
|
||||
if (!newEnvId && environments.length > 0) setNewEnvId(environments[0].id);
|
||||
setCreating(!creating);
|
||||
}}>
|
||||
+ Create App
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{creating && (
|
||||
<div className={styles.createForm}>
|
||||
<select
|
||||
className={styles.envSelect}
|
||||
value={newEnvId}
|
||||
onChange={(e) => setNewEnvId(e.target.value)}
|
||||
>
|
||||
{environments.map((env) => (
|
||||
<option key={env.id} value={env.id}>{env.displayName} ({env.slug})</option>
|
||||
))}
|
||||
</select>
|
||||
<Input placeholder="Slug *" value={newSlug} onChange={(e) => setNewSlug(e.target.value)} />
|
||||
<Input placeholder="Display name *" value={newDisplayName} onChange={(e) => setNewDisplayName(e.target.value)} />
|
||||
<div className={styles.createActions}>
|
||||
<Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primary"
|
||||
onClick={handleCreate}
|
||||
loading={createApp.isPending}
|
||||
disabled={!newSlug.trim() || !newDisplayName.trim() || !newEnvId}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
onRowClick={(row) => {
|
||||
window.location.href = `${window.location.pathname.replace(/\/apps.*/, '')}/apps/${row.id}`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Detail View ---
|
||||
|
||||
function AppDetailView({
|
||||
appId,
|
||||
environments,
|
||||
}: {
|
||||
appId: string;
|
||||
environments: Environment[];
|
||||
}) {
|
||||
const { toast } = useToast();
|
||||
const { data: allApps = [] } = useAllApps();
|
||||
const app = useMemo(() => allApps.find((a) => a.id === appId), [allApps, appId]);
|
||||
const { data: versions = [] } = useAppVersions(appId);
|
||||
const { data: deployments = [] } = useDeployments(appId);
|
||||
const uploadJar = useUploadJar();
|
||||
const createDeployment = useCreateDeployment();
|
||||
const stopDeployment = useStopDeployment();
|
||||
const deleteApp = useDeleteApp();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const envMap = useMemo(() => {
|
||||
const m = new Map<string, Environment>();
|
||||
for (const e of environments) m.set(e.id, e);
|
||||
return m;
|
||||
}, [environments]);
|
||||
|
||||
const sortedVersions = useMemo(
|
||||
() => [...versions].sort((a, b) => b.version - a.version),
|
||||
[versions],
|
||||
);
|
||||
|
||||
if (!app) return <Spinner size="md" />;
|
||||
|
||||
const envName = envMap.get(app.environmentId)?.displayName ?? '?';
|
||||
|
||||
async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
const v = await uploadJar.mutateAsync({ appId, file });
|
||||
toast({ title: `Version ${v.version} uploaded`, description: file.name, variant: 'success' });
|
||||
} catch {
|
||||
toast({ title: 'Upload failed', variant: 'error', duration: 86_400_000 });
|
||||
}
|
||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||
}
|
||||
|
||||
async function handleDeploy(versionId: string, environmentId: string) {
|
||||
try {
|
||||
await createDeployment.mutateAsync({ appId, appVersionId: versionId, environmentId });
|
||||
toast({ title: 'Deployment started', variant: 'success' });
|
||||
} catch {
|
||||
toast({ title: 'Deploy failed', variant: 'error', duration: 86_400_000 });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStop(deploymentId: string) {
|
||||
try {
|
||||
await stopDeployment.mutateAsync({ appId, deploymentId });
|
||||
toast({ title: 'Deployment stopped', variant: 'warning' });
|
||||
} catch {
|
||||
toast({ title: 'Stop failed', variant: 'error', duration: 86_400_000 });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
await deleteApp.mutateAsync(appId);
|
||||
toast({ title: 'App deleted', variant: 'warning' });
|
||||
window.history.back();
|
||||
} catch {
|
||||
toast({ title: 'Delete failed', variant: 'error', duration: 86_400_000 });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.detailHeader}>
|
||||
<div>
|
||||
<h2 className={styles.detailTitle}>{app.displayName}</h2>
|
||||
<div className={styles.detailMeta}>
|
||||
{app.slug} · <Badge label={envName} color="auto" />
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="danger" onClick={handleDelete}>Delete</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.metaGrid}>
|
||||
<span className={styles.metaLabel}>ID</span>
|
||||
<MonoText size="xs">{app.id}</MonoText>
|
||||
<span className={styles.metaLabel}>Environment</span>
|
||||
<span>{envName}</span>
|
||||
<span className={styles.metaLabel}>Created</span>
|
||||
<span>{new Date(app.createdAt).toLocaleDateString()}</span>
|
||||
<span className={styles.metaLabel}>Updated</span>
|
||||
<span>{timeAgo(app.updatedAt)}</span>
|
||||
</div>
|
||||
|
||||
{/* Deployments across all environments */}
|
||||
<SectionHeader>Deployments ({deployments.length})</SectionHeader>
|
||||
{deployments.length === 0 && <p className={styles.emptyNote}>No deployments yet.</p>}
|
||||
{deployments.map((d) => (
|
||||
<DeploymentRow
|
||||
key={d.id}
|
||||
deployment={d}
|
||||
versions={versions}
|
||||
envMap={envMap}
|
||||
onStop={() => handleStop(d.id)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Versions */}
|
||||
<SectionHeader>Versions ({versions.length})</SectionHeader>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<input ref={fileInputRef} type="file" accept=".jar" style={{ display: 'none' }} onChange={handleUpload} />
|
||||
<Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>
|
||||
Upload JAR
|
||||
</Button>
|
||||
</div>
|
||||
{sortedVersions.length === 0 && <p className={styles.emptyNote}>No versions uploaded yet.</p>}
|
||||
{sortedVersions.map((v) => (
|
||||
<VersionRow
|
||||
key={v.id}
|
||||
version={v}
|
||||
environments={environments}
|
||||
onDeploy={(envId) => handleDeploy(v.id, envId)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Container Config */}
|
||||
<SectionHeader>Container Configuration</SectionHeader>
|
||||
<ContainerConfigForm app={app} environment={envMap.get(app.environmentId)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Deployment Row ---
|
||||
|
||||
function DeploymentRow({
|
||||
deployment,
|
||||
versions,
|
||||
envMap,
|
||||
onStop,
|
||||
}: {
|
||||
deployment: Deployment;
|
||||
versions: AppVersion[];
|
||||
envMap: Map<string, Environment>;
|
||||
onStop: () => void;
|
||||
}) {
|
||||
const version = versions.find((v) => v.id === deployment.appVersionId);
|
||||
const env = envMap.get(deployment.environmentId);
|
||||
const canStop = deployment.status === 'RUNNING' || deployment.status === 'STARTING';
|
||||
|
||||
return (
|
||||
<div className={styles.row}>
|
||||
<Badge label={deployment.status} color={STATUS_COLORS[deployment.status] ?? 'auto'} />
|
||||
<Badge label={env?.displayName ?? '?'} color="auto" />
|
||||
<span className={styles.rowText}>{version ? `v${version.version}` : '?'}</span>
|
||||
{deployment.containerName && <MonoText size="xs">{deployment.containerName}</MonoText>}
|
||||
{deployment.errorMessage && <span className={styles.errorText}>{deployment.errorMessage}</span>}
|
||||
<span className={styles.rowMeta}>{deployment.deployedAt ? timeAgo(deployment.deployedAt) : ''}</span>
|
||||
{canStop && <Button size="sm" variant="danger" onClick={onStop}>Stop</Button>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Version Row ---
|
||||
|
||||
function VersionRow({
|
||||
version,
|
||||
environments,
|
||||
onDeploy,
|
||||
}: {
|
||||
version: AppVersion;
|
||||
environments: Environment[];
|
||||
onDeploy: (environmentId: string) => void;
|
||||
}) {
|
||||
const [deployEnv, setDeployEnv] = useState('');
|
||||
|
||||
return (
|
||||
<div className={styles.row}>
|
||||
<Badge label={`v${version.version}`} color="auto" />
|
||||
<span className={styles.rowText}>
|
||||
{version.jarFilename} ({formatBytes(version.jarSizeBytes)})
|
||||
</span>
|
||||
<span className={styles.rowMeta}>{timeAgo(version.uploadedAt)}</span>
|
||||
<select
|
||||
className={styles.envSelect}
|
||||
value={deployEnv}
|
||||
onChange={(e) => setDeployEnv(e.target.value)}
|
||||
>
|
||||
<option value="">Deploy to...</option>
|
||||
{environments.filter((e) => e.enabled).map((e) => (
|
||||
<option key={e.id} value={e.id}>{e.displayName}</option>
|
||||
))}
|
||||
</select>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={!deployEnv}
|
||||
onClick={() => { onDeploy(deployEnv); setDeployEnv(''); }}
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Container Config Form ---
|
||||
|
||||
function ContainerConfigForm({ app, environment }: { app: App; environment?: Environment }) {
|
||||
const { toast } = useToast();
|
||||
const updateConfig = useUpdateContainerConfig();
|
||||
const isProd = environment?.production ?? false;
|
||||
|
||||
const defaults = environment?.defaultContainerConfig ?? {};
|
||||
const merged = { ...defaults, ...app.containerConfig };
|
||||
|
||||
const [memoryLimitMb, setMemoryLimitMb] = useState<string>(String(merged.memoryLimitMb ?? '512'));
|
||||
const [memoryReserveMb, setMemoryReserveMb] = useState<string>(String(merged.memoryReserveMb ?? ''));
|
||||
const [cpuShares, setCpuShares] = useState<string>(String(merged.cpuShares ?? '512'));
|
||||
const [cpuLimit, setCpuLimit] = useState<string>(String(merged.cpuLimit ?? ''));
|
||||
const [exposedPorts, setExposedPorts] = useState<string>(
|
||||
Array.isArray(merged.exposedPorts) ? (merged.exposedPorts as number[]).join(', ') : '',
|
||||
);
|
||||
const [customEnvVars, setCustomEnvVars] = useState<string>(
|
||||
merged.customEnvVars ? JSON.stringify(merged.customEnvVars, null, 2) : '{}',
|
||||
);
|
||||
|
||||
async function handleSave() {
|
||||
const config: Record<string, unknown> = {
|
||||
memoryLimitMb: memoryLimitMb ? parseInt(memoryLimitMb) : null,
|
||||
memoryReserveMb: memoryReserveMb ? parseInt(memoryReserveMb) : null,
|
||||
cpuShares: cpuShares ? parseInt(cpuShares) : null,
|
||||
cpuLimit: cpuLimit ? parseFloat(cpuLimit) : null,
|
||||
exposedPorts: exposedPorts ? exposedPorts.split(',').map((p) => parseInt(p.trim())).filter((p) => !isNaN(p)) : [],
|
||||
};
|
||||
try {
|
||||
config.customEnvVars = JSON.parse(customEnvVars);
|
||||
} catch {
|
||||
toast({ title: 'Invalid JSON in environment variables', variant: 'error' });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await updateConfig.mutateAsync({ appId: app.id, config });
|
||||
toast({ title: 'Container config saved', variant: 'success' });
|
||||
} catch {
|
||||
toast({ title: 'Failed to save config', variant: 'error', duration: 86_400_000 });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.configForm}>
|
||||
<div className={styles.configSection}>
|
||||
<h4 className={styles.configTitle}>Resources</h4>
|
||||
<div className={styles.configGrid}>
|
||||
<label className={styles.configLabel}>Memory Limit (MB)</label>
|
||||
<Input value={memoryLimitMb} onChange={(e) => setMemoryLimitMb(e.target.value)} placeholder="512" />
|
||||
<label className={styles.configLabel}>Memory Reserve (MB)</label>
|
||||
<div className={styles.configField}>
|
||||
<Input
|
||||
value={memoryReserveMb}
|
||||
onChange={(e) => setMemoryReserveMb(e.target.value)}
|
||||
placeholder="—"
|
||||
disabled={!isProd}
|
||||
/>
|
||||
{!isProd && <span className={styles.configHint}>Available in production environments only</span>}
|
||||
</div>
|
||||
<label className={styles.configLabel}>CPU Shares</label>
|
||||
<Input value={cpuShares} onChange={(e) => setCpuShares(e.target.value)} placeholder="512" />
|
||||
<label className={styles.configLabel}>CPU Limit (cores)</label>
|
||||
<Input value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} placeholder="e.g. 1.0" />
|
||||
<label className={styles.configLabel}>Exposed Ports</label>
|
||||
<Input value={exposedPorts} onChange={(e) => setExposedPorts(e.target.value)} placeholder="e.g. 8080, 9090" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.configSection}>
|
||||
<h4 className={styles.configTitle}>Custom Environment Variables</h4>
|
||||
<textarea
|
||||
className={styles.envVarEditor}
|
||||
value={customEnvVars}
|
||||
onChange={(e) => setCustomEnvVars(e.target.value)}
|
||||
rows={6}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button variant="primary" onClick={handleSave} loading={updateConfig.isPending}>
|
||||
Save Configuration
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user