@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/widgets/cluster-details/tabs/c4-cluster-details-overview-tab.js

@@ -0,0 +1,750 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C3ClusterTag, useC3Profile, } from '@camunda/camunda-composite-components';
+import { SaaSJobsService, } from '@camunda/ccma-api';
+import { checkVersion, VersionCheckOperator } from '@camunda/ccma-shared-types';
+import { InlineNotification, Modal, Stack } from '@carbon/react';
+import { CheckmarkFilled } from '@carbon/react/icons/index.esm.js';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { C4ClusterOverview } from '../../../components/c4-cluster-overview/c4-cluster-overview.js';
+// Helper function to ensure translations work
+function safeTranslate(t, key, fallback) {
+    if (!t)
+        return fallback;
+    const result = t(key);
+    return result === key ? fallback : result;
+}
+function isUuidLike(value) {
+    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value);
+}
+export const C4ClusterDetailsOverviewTab = (props) => {
+    const c3Profile = useC3Profile();
+    const { cluster, clusterError, creationParameters, clusterLoadLatest, clusterLoadPerDay, clusterLoad24h, clusterLoadLoading, canSeeClusterLoad, canEditCluster, canWakeCluster, canManageUsers, hasIdentityIntegration, orgId, clusterId, jobDashboardEnabled, jobDashboardDocsUrls, apiConfig, t, onReloadCluster, onReloadClusterLoad, onNavigate, } = props;
+    const [tagModalOpen, setTagModalOpen] = useState(false);
+    const [selectedTag, setSelectedTag] = useState('');
+    const [tagBusy, setTagBusy] = useState(false);
+    const [tagError, setTagError] = useState(undefined);
+    const [jobStats, setJobStats] = useState(undefined);
+    const [jobStatsError, setJobStatsError] = useState(undefined);
+    const [jobStatsLoading, setJobStatsLoading] = useState(false);
+    const jobDashboardSupportedByVersion = useMemo(() => {
+        const zeebe = cluster?.generation?.versions?.zeebe;
+        if (!zeebe)
+            return false;
+        return checkVersion({
+            possiblyVersionOrDockerPath: zeebe,
+            trueForSnapshot: true,
+            trueOnInvalidVersion: false,
+            versionToCompareTo: '8.9.0-alpha5',
+            operator: VersionCheckOperator.GreaterThanOrEqual,
+        });
+    }, [cluster?.generation?.versions?.zeebe]);
+    const shouldShowJobDashboard = jobDashboardEnabled && jobDashboardSupportedByVersion;
+    const resolvedJobDashboardDocsUrls = useMemo(() => {
+        return (jobDashboardDocsUrls ?? {
+            roles: 'https://docs.camunda.io/',
+            jobWorker: 'https://docs.camunda.io/',
+        });
+    }, [jobDashboardDocsUrls]);
+    const jobDashboardErrorHandlerTranslations = useMemo(() => ({
+        forbidden: {
+            title: safeTranslate(t, 'jobDashboard:shared.errorHandler.forbidden.title', 'Access denied or feature disabled'),
+            description: safeTranslate(t, 'jobDashboard:shared.errorHandler.forbidden.description', 'You do not have the necessary permissions to view job data for this cluster or the feature is disabled for this cluster.'),
+            learnMoreLabel: safeTranslate(t, 'jobDashboard:shared.errorHandler.forbidden.learnMoreLabel', 'Learn more about permissions'),
+        },
+        empty: {
+            title: safeTranslate(t, 'jobDashboard:shared.errorHandler.empty.title', 'No data available'),
+            description: safeTranslate(t, 'jobDashboard:shared.errorHandler.empty.description', 'There is no data available for the selected time range.'),
+            learnMoreLabel: safeTranslate(t, 'jobDashboard:shared.errorHandler.empty.learnMoreLabel', 'Learn more about job monitoring'),
+        },
+        generalError: {
+            title: safeTranslate(t, 'jobDashboard:shared.errorHandler.generalError.title', 'Something went wrong'),
+            description: safeTranslate(t, 'jobDashboard:shared.errorHandler.generalError.description', 'An unexpected error occurred while fetching job data. Please try again later.'),
+        },
+    }), [t]);
+    const getJobsRegion = useCallback(() => {
+        const url = cluster?.status?.zeebeRestUrl;
+        if (!url)
+            return undefined;
+        const host = url
+            .replaceAll('https://', '')
+            .replaceAll('http://', '')
+            .split('/')[0];
+        const segments = host.split('.');
+        const segment0 = segments[0];
+        const segment1 = segments[1];
+        if (segment0 && isUuidLike(segment0)) {
+            return segment1 || undefined;
+        }
+        return segment0 || undefined;
+    }, [cluster?.status?.zeebeRestUrl]);
+    const toJobsError = useCallback((error) => {
+        const fallback = {
+            status: 500,
+            type: 'UnknownError',
+            message: 'Failed to load job data',
+        };
+        if (!error || typeof error !== 'object') {
+            return fallback;
+        }
+        const maybe = error;
+        const body = maybe.body && typeof maybe.body === 'object'
+            ? maybe.body
+            : undefined;
+        const status = typeof maybe.status === 'number'
+            ? maybe.status
+            : typeof body?.status === 'number'
+                ? body.status
+                : fallback.status;
+        const message = typeof body?.message === 'string'
+            ? body.message
+            : typeof maybe.message === 'string'
+                ? maybe.message
+                : fallback.message;
+        const type = typeof maybe.name === 'string'
+            ? maybe.name
+            : typeof maybe.type === 'string'
+                ? maybe.type
+                : fallback.type;
+        return {
+            status,
+            type,
+            message,
+        };
+    }, []);
+    const getLatestUpdateTimeString = useCallback((input) => {
+        const candidates = [
+            input.created?.lastUpdatedAt,
+            input.failed?.lastUpdatedAt,
+            input.completed?.lastUpdatedAt,
+        ].filter((value) => typeof value === 'string');
+        if (candidates.length === 0) {
+            return '';
+        }
+        const newest = candidates.reduce((acc, current) => current > acc ? current : acc);
+        try {
+            return new Date(newest).toLocaleString();
+        }
+        catch {
+            return newest;
+        }
+    }, []);
+    useEffect(() => {
+        let isCancelled = false;
+        async function load() {
+            if (!shouldShowJobDashboard || !cluster) {
+                setJobStats(undefined);
+                setJobStatsError(undefined);
+                setJobStatsLoading(false);
+                return;
+            }
+            const region = getJobsRegion();
+            if (!region) {
+                setJobStats(undefined);
+                setJobStatsLoading(false);
+                setJobStatsError({
+                    status: 500,
+                    type: 'MissingRegion',
+                    message: 'Unable to determine region for job statistics.',
+                });
+                return;
+            }
+            setJobStatsLoading(true);
+            setJobStatsError(undefined);
+            const to = new Date();
+            const from = new Date(Date.now() - 24 * 60 * 60 * 1000);
+            try {
+                const raw = await SaaSJobsService.getJobStatisticsGlobal({
+                    params: {
+                        orgId,
+                        clusterId,
+                        region,
+                        from,
+                        to,
+                    },
+                    config: apiConfig,
+                });
+                if (isCancelled)
+                    return;
+                const summary = {
+                    lastUpdatedAt: getLatestUpdateTimeString(raw),
+                    created: {
+                        count: raw.created?.count ?? 0,
+                        lastUpdatedAt: raw.created?.lastUpdatedAt ?? '',
+                    },
+                    completed: {
+                        count: raw.completed?.count ?? 0,
+                        lastUpdatedAt: raw.completed?.lastUpdatedAt ?? '',
+                    },
+                    failed: {
+                        count: raw.failed?.count ?? 0,
+                        lastUpdatedAt: raw.failed?.lastUpdatedAt ?? '',
+                    },
+                };
+                setJobStats(summary);
+            }
+            catch (error) {
+                if (isCancelled)
+                    return;
+                setJobStats(undefined);
+                setJobStatsError(toJobsError(error));
+            }
+            finally {
+                if (!isCancelled) {
+                    setJobStatsLoading(false);
+                }
+            }
+        }
+        void load();
+        return () => {
+            isCancelled = true;
+        };
+    }, [
+        apiConfig,
+        cluster,
+        clusterId,
+        getJobsRegion,
+        getLatestUpdateTimeString,
+        orgId,
+        shouldShowJobDashboard,
+        toJobsError,
+    ]);
+    const rbaNotification = useMemo(() => {
+        if (!cluster) {
+            return undefined;
+        }
+        const shouldShowRba = Boolean(cluster.rba) &&
+            (!hasIdentityIntegration || !cluster.identityBackendChecksEnabled);
+        if (!shouldShowRba) {
+            return undefined;
+        }
+        return {
+            visible: true,
+            canManageUsers,
+            texts: {
+                title: safeTranslate(t, 'clusterdetails:overview.rba.title', 'Resource-based authorizations enabled'),
+                subtitle: safeTranslate(t, 'clusterdetails:overview.rba.subtitle', 'To authorize resources, navigate to the user management section, select a user, and define their resource access.'),
+                actionLabel: safeTranslate(t, 'clusterdetails:overview.rba.action', 'Manage users'),
+            },
+            onActionButtonClick: () => {
+                onNavigate?.({
+                    kind: 'managementUsers',
+                    orgId,
+                });
+            },
+        };
+    }, [canManageUsers, cluster, hasIdentityIntegration, onNavigate, orgId, t]);
+    const jobDashboardEntryPoint = useMemo(() => {
+        if (!shouldShowJobDashboard) {
+            return undefined;
+        }
+        return {
+            data: jobStats,
+            error: jobStatsError,
+            isLoading: jobStatsLoading,
+            onClick: () => {
+                onNavigate?.({
+                    kind: 'jobDashboardOverview',
+                    orgId,
+                    clusterId,
+                });
+            },
+            translations: {
+                title: safeTranslate(t, 'clusterdetails:jobDashboard.title', 'Jobs (last 24h)'),
+                description: safeTranslate(t, 'clusterdetails:jobDashboard.description', 'View jobs by type and see the status and errors associated for resolution'),
+                lastUpdated: safeTranslate(t, 'clusterdetails:jobDashboard.lastUpdated', 'Last updated'),
+                viewAllJobTypes: safeTranslate(t, 'clusterdetails:jobDashboard.viewAllJobTypes', 'View all job types'),
+                jobTileSingular: safeTranslate(t, 'clusterdetails:jobDashboard.jobTile.singular', 'Job type'),
+                jobTilePlural: safeTranslate(t, 'clusterdetails:jobDashboard.jobTile.plural', 'Job types'),
+                jobTileCompleted: safeTranslate(t, 'clusterdetails:jobDashboard.jobTile.completed', 'Completed'),
+                jobTileFailed: safeTranslate(t, 'clusterdetails:jobDashboard.jobTile.failed', 'Failed'),
+                jobTileCreated: safeTranslate(t, 'clusterdetails:jobDashboard.jobTile.created', 'Created'),
+                errorHandler: jobDashboardErrorHandlerTranslations,
+            },
+            docsUrls: resolvedJobDashboardDocsUrls,
+            jobDashboardEnabled,
+        };
+    }, [
+        clusterId,
+        jobDashboardEnabled,
+        jobDashboardErrorHandlerTranslations,
+        jobStats,
+        jobStatsError,
+        jobStatsLoading,
+        onNavigate,
+        orgId,
+        resolvedJobDashboardDocsUrls,
+        shouldShowJobDashboard,
+        t,
+    ]);
+    const stageOptions = useMemo(() => [
+        {
+            value: 'dev',
+            title: safeTranslate(t, 'clusterdetails:tags.options.dev', 'dev'),
+            description: safeTranslate(t, 'clusterdetails:tags.options.dev.description', 'A development tag where new software features and changes are created and tested.'),
+        },
+        {
+            value: 'test',
+            title: safeTranslate(t, 'clusterdetails:tags.options.test', 'test'),
+            description: safeTranslate(t, 'clusterdetails:tags.options.test.description', 'A testing tag for quality checks, ensuring software meets defined standards before release.'),
+        },
+        {
+            value: 'stage',
+            title: safeTranslate(t, 'clusterdetails:tags.options.stage', 'stage'),
+            description: safeTranslate(t, 'clusterdetails:tags.options.stage.description', 'A staging tag for controlled testing where changes are validated before deployment to production.'),
+        },
+        {
+            value: 'prod',
+            title: safeTranslate(t, 'clusterdetails:tags.options.prod', 'prod'),
+            description: safeTranslate(t, 'clusterdetails:tags.options.prod.description', 'Indicates the live system with the latest software, deployable only by admins and organization owners through the interface.'),
+        },
+    ], [t]);
+    const openTagModal = useCallback(() => {
+        if (!cluster) {
+            return;
+        }
+        const current = cluster.labels?.camunda?.[0];
+        const normalized = typeof current === 'string' &&
+            stageOptions.some((option) => option.value === current)
+            ? current
+            : '';
+        setTagError(undefined);
+        setSelectedTag(normalized);
+        setTagModalOpen(true);
+    }, [cluster, stageOptions]);
+    const submitTagChange = useCallback(async () => {
+        if (!cluster || !selectedTag || tagBusy) {
+            return;
+        }
+        setTagError(undefined);
+        setTagBusy(true);
+        try {
+            const { ConsoleClusterService } = await import('@camunda/ccma-api');
+            const customLabels = Array.isArray(cluster.labels?.custom)
+                ? cluster.labels.custom.filter((value) => typeof value === 'string' && value.trim().length > 0)
+                : [];
+            await ConsoleClusterService.updateCluster({
+                config: apiConfig,
+                params: { orgId, clusterId },
+                body: {
+                    labels: {
+                        custom: customLabels,
+                        camunda: [selectedTag],
+                    },
+                },
+            });
+            await onReloadCluster();
+            setTagModalOpen(false);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Unknown error';
+            setTagError(message);
+        }
+        finally {
+            setTagBusy(false);
+        }
+    }, [
+        apiConfig,
+        cluster,
+        clusterId,
+        onReloadCluster,
+        orgId,
+        selectedTag,
+        tagBusy,
+    ]);
+    if (!cluster) {
+        if (clusterError) {
+            return _jsx("p", { children: clusterError });
+        }
+        return null;
+    }
+    const CLUSTER_LOAD_DOCS_URL = 'https://docs.camunda.io/docs/components/concepts/clusters/';
+    const chartTheme = c3Profile.resolvedTheme === 'dark' ? 'g100' : 'g10';
+    const formatDate = (date) => {
+        if (!date)
+            return '-';
+        try {
+            const dateObj = typeof date === 'string' ? new Date(date) : date;
+            return dateObj.toLocaleString();
+        }
+        catch {
+            return String(date);
+        }
+    };
+    const extractVersionFromPossiblyDockerImage = (input) => {
+        const raw = input.trim();
+        if (!raw) {
+            return '';
+        }
+        // Strip any digest (e.g. "image:8.8.0@sha256:...")
+        const withoutDigest = raw.split('@')[0] ?? raw;
+        // A docker tag is only meaningful if the last ':' appears after the last '/'
+        // (avoids confusing registry ports like "registry:5000/image")
+        const lastSlashIndex = withoutDigest.lastIndexOf('/');
+        const lastColonIndex = withoutDigest.lastIndexOf(':');
+        if (lastColonIndex > lastSlashIndex) {
+            const tag = withoutDigest.slice(lastColonIndex + 1).trim();
+            return tag || raw;
+        }
+        return raw;
+    };
+    const toDisplayVersion = (version) => {
+        if (!version)
+            return '-';
+        return extractVersionFromPossiblyDockerImage(version);
+    };
+    const toAppTileProps = (app) => {
+        const normalizedStatus = (() => {
+            if (!app.status)
+                return 'unhealthy';
+            const lower = app.status.toLowerCase();
+            if (lower === 'healthy')
+                return 'healthy';
+            if (lower === 'unhealthy')
+                return 'unhealthy';
+            if (lower === 'creating')
+                return 'creating';
+            if (lower === 'updating')
+                return 'updating';
+            if (lower === 'suspended')
+                return 'suspended';
+            if (lower === 'resuming')
+                return 'resuming';
+            return 'unhealthy';
+        })();
+        return {
+            name: app.name,
+            status: normalizedStatus,
+            url: app.url ?? '',
+            version: app.version,
+            description: app.description,
+            linkLabel: app.linkLabel,
+            linkVisible: app.linkVisible !== false,
+        };
+    };
+    const statusValue = cluster.status?.ready ?? '';
+    const generationName = cluster.generation?.name ?? '-';
+    const generationUpdate = {
+        updateType: 'no-update-latest',
+        updateStates: {
+            updateAvailable: { action: () => { }, label: 'Update' },
+            updateAvailableNoPermission: {
+                label: 'Update',
+                description: 'Missing permissions',
+            },
+            updateAvailableWaitNeeded: {
+                label: 'Update',
+                description: 'Please try later',
+            },
+            noUpdateLatest: { label: 'Latest version' },
+            noUpdateRefresh: { action: () => onReloadCluster(), label: 'Refresh' },
+        },
+    };
+    const launchLabel = safeTranslate(t, 'clusterdetails:overview.applications.launchLink', 'Launch');
+    const appDescription = {
+        zeebe: safeTranslate(t, 'clusterdetails:overview.applications.descriptions.zeebe', 'The engine that powers Camunda'),
+        tasklist: safeTranslate(t, 'clusterdetails:overview.applications.descriptions.tasklist', 'Assign and complete user tasks'),
+        operate: safeTranslate(t, 'clusterdetails:overview.applications.descriptions.operate', 'Monitor and troubleshoot workflows'),
+        optimize: safeTranslate(t, 'clusterdetails:overview.applications.descriptions.optimize', 'Get insights to improve your processes'),
+        connectors: safeTranslate(t, 'clusterdetails:overview.applications.descriptions.connectors', 'Integrate with external systems'),
+        identity: safeTranslate(t, 'clusterdetails:overview.applications.descriptions.identity', 'Manage authentication and authorization'),
+    };
+    const apps = {
+        zeebe: toAppTileProps({
+            name: 'Zeebe',
+            status: cluster.status?.zeebeStatus,
+            url: cluster.status?.zeebeUrl,
+            version: toDisplayVersion(cluster.generation?.versions?.zeebe),
+            description: appDescription.zeebe,
+            linkLabel: launchLabel,
+            linkVisible: false,
+        }),
+        tasklist: toAppTileProps({
+            name: 'Tasklist',
+            status: cluster.status?.tasklistStatus,
+            url: cluster.status?.tasklistUrl,
+            version: toDisplayVersion(cluster.generation?.versions?.tasklist),
+            description: appDescription.tasklist,
+            linkLabel: launchLabel,
+        }),
+        operate: toAppTileProps({
+            name: 'Operate',
+            status: cluster.status?.operateStatus,
+            url: cluster.status?.operateUrl,
+            version: toDisplayVersion(cluster.generation?.versions?.operate),
+            description: appDescription.operate,
+            linkLabel: launchLabel,
+        }),
+        optimize: cluster.status?.optimizeStatus !== undefined ||
+            cluster.generation?.versions?.optimize !== undefined
+            ? toAppTileProps({
+                name: 'Optimize',
+                status: cluster.status?.optimizeStatus,
+                url: cluster.status?.optimizeUrl,
+                version: toDisplayVersion(cluster.generation?.versions?.optimize),
+                description: appDescription.optimize,
+                linkLabel: launchLabel,
+            })
+            : undefined,
+        connectors: cluster.status?.connectorsStatus !== undefined ||
+            cluster.generation?.versions?.connectorBridge !== undefined
+            ? toAppTileProps({
+                name: 'Connectors',
+                status: cluster.status?.connectorsStatus,
+                url: cluster.status?.connectorsUrl,
+                version: toDisplayVersion(cluster.generation?.versions?.connectorBridge ??
+                    cluster.generation?.versions?.zeebe),
+                description: appDescription.connectors,
+                linkLabel: launchLabel,
+            })
+            : undefined,
+        identity: toAppTileProps({
+            name: 'Identity',
+            status: (() => {
+                const clusterStatus = cluster.status?.zeebeStatus;
+                // Never report Identity as healthy without a URL,
+                // otherwise we'd render a broken "Launch" link.
+                if (clusterStatus && clusterStatus !== 'healthy')
+                    return clusterStatus;
+                if (cluster.status?.identityUrl)
+                    return 'healthy';
+                return 'unhealthy';
+            })(),
+            url: cluster.status?.identityUrl,
+            version: toDisplayVersion(cluster.generation?.versions?.zeebe),
+            description: appDescription.identity,
+            linkLabel: launchLabel,
+        }),
+    };
+    const regionName = cluster.k8sContext?.name ?? 'unknown';
+    const regionId = (() => {
+        const operateUrl = cluster.status?.operateUrl;
+        if (!operateUrl)
+            return '-';
+        const normalized = operateUrl.replaceAll('https://', '');
+        return normalized.split('.')[0] ?? '-';
+    })();
+    const providerValue = creationParameters?.regions?.find((region) => region.uuid === cluster.k8sContext?.uuid)?.provider ?? '-';
+    let fallbackBackupRegionId = '-';
+    let fallbackBackupRegionName = '-';
+    const firstRegion = creationParameters?.regions?.[0];
+    const firstBackup = firstRegion?.backups?.[0];
+    const firstBackupRegionLabel = firstBackup?.regions?.[0]?.label;
+    if (firstBackup?.uuid) {
+        fallbackBackupRegionId = firstBackup.uuid;
+    }
+    if (firstBackupRegionLabel) {
+        fallbackBackupRegionName = firstBackupRegionLabel;
+    }
+    const hasBackupRegion = Boolean(cluster.backupRegion || cluster.backupRegionId);
+    const tagsValue = [
+        ...(cluster.labels?.camunda ?? []),
+        ...(cluster.labels?.custom ?? []),
+    ].filter((value) => typeof value === 'string' && value.length > 0);
+    const encryptionKeyValue = cluster.primaryEncryptionKeyId && cluster.primaryEncryptionKeyId.length > 0
+        ? cluster.primaryEncryptionKeyId
+        : cluster.encryption && cluster.encryption !== 'Provider'
+            ? cluster.encryption
+            : 'Default';
+    const hwPackages = typeof cluster.numberOfAllocatedHwPackages === 'number'
+        ? cluster.numberOfAllocatedHwPackages
+        : 1;
+    const typeValue = cluster.planType?.name && hwPackages > 1
+        ? `${cluster.planType.name} - ${hwPackages}x`
+        : (cluster.planType?.name ?? '-');
+    const clusterLoadProps = canSeeClusterLoad && (clusterLoadLatest || clusterLoadLoading)
+        ? {
+            texts: {
+                title: safeTranslate(t, 'clusterdetails:overview.clusterLoad.title', 'Cluster Load'),
+                last: safeTranslate(t, 'clusterdetails:overview.clusterLoad.last', 'Last'),
+                day30: safeTranslate(t, 'clusterdetails:overview.clusterLoad.options.30days', '30 days'),
+                day7: safeTranslate(t, 'clusterdetails:overview.clusterLoad.options.7days', '7 days'),
+                last24h: safeTranslate(t, 'clusterdetails:overview.clusterLoad.options.24hours', '24 hours'),
+                current: safeTranslate(t, 'clusterdetails:overview.clusterLoad.current', 'Current'),
+                clusterLoadTooltip: safeTranslate(t, 'clusterdetails:overview.clusterLoad.tooltip', "Cluster load: Indicates how much of the cluster's resources are in use."),
+                docs: safeTranslate(t, 'clusterdetails:overview.clusterLoad.docs', 'Learn more about cluster load'),
+            },
+            values: {
+                latest: clusterLoadLatest ??
+                    {
+                        ts: Date.now(),
+                        min: 0,
+                        max: 0,
+                        avg: 0,
+                    },
+                perDay: clusterLoadPerDay ?? [],
+                last24h: clusterLoad24h ?? [],
+            },
+            docs: {
+                url: CLUSTER_LOAD_DOCS_URL,
+                onClick: () => {
+                    onNavigate?.({
+                        kind: 'openUrl',
+                        url: CLUSTER_LOAD_DOCS_URL,
+                    });
+                },
+            },
+            theme: chartTheme,
+            reload: () => {
+                void onReloadClusterLoad();
+            },
+            suspended: cluster.status?.ready === 'Suspended',
+            loading: clusterLoadLoading,
+        }
+        : undefined;
+    const details = {
+        title: safeTranslate(t, 'clusterdetails:overview.clusterDetails.title', 'Cluster Details'),
+        name: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.name', 'Name'),
+            value: cluster.name,
+        },
+        description: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.label', 'Description'),
+            value: typeof cluster.description === 'string' ? cluster.description : '',
+            placeholder: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.placeholder', 'Enter a description for the cluster'),
+            noDescription: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.noDescription', 'No description'),
+            saveLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.save', 'Save'),
+            cancelLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.cancel', 'Cancel'),
+            editLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.edit', 'Edit'),
+            errorMaxLength: safeTranslate(t, 'clusterdetails:overview.clusterDetails.description.error.maxLength', 'Description cannot be longer than 150 characters.'),
+            updateAction: async (newDescription) => {
+                // Import dynamically to avoid circular dependencies
+                const { ConsoleClusterService } = await import('@camunda/ccma-api');
+                await ConsoleClusterService.updateCluster({
+                    config: apiConfig,
+                    params: { orgId, clusterId },
+                    body: { description: newDescription },
+                });
+                await onReloadCluster();
+            },
+            updateVisible: canEditCluster,
+            updateDisabled: !canEditCluster,
+        },
+        id: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.clusterId', 'Cluster Id'),
+            value: cluster.uuid,
+        },
+        provider: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.provider', 'Provider'),
+            value: providerValue,
+        },
+        type: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.type', 'Type'),
+            value: typeValue,
+        },
+        region: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.region', 'Region'),
+            value: regionName,
+        },
+        regionId: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.regionId', 'Region Id'),
+            value: regionId,
+        },
+        backupRegion: hasBackupRegion
+            ? {
+                label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.backupRegion', 'Backup Region'),
+                value: cluster.backupRegion ??
+                    cluster.k8sContext?.name ??
+                    fallbackBackupRegionName,
+            }
+            : undefined,
+        backupRegionId: hasBackupRegion
+            ? {
+                label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.backupRegionId', 'Backup Region Id'),
+                value: cluster.backupRegionId ?? fallbackBackupRegionId,
+            }
+            : undefined,
+        tags: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.tags.label', 'Tags'),
+            value: tagsValue,
+            updateAction: openTagModal,
+            addTagLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.tags.addLabel', 'Assign tag'),
+            updateTagLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.tags.updateLabel', 'Modify tag'),
+            updateVisible: true,
+            updateDisabled: !canEditCluster,
+        },
+        encryption: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.encryption.label', 'Encryption key'),
+            value: encryptionKeyValue,
+            tooltip: safeTranslate(t, 'clusterdetails:overview.clusterDetails.encryption.tooltip', 'Tooltip text'),
+        },
+        status: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.status.label', 'Status'),
+            value: statusValue,
+            wakeAction: async () => {
+                const { ConsoleClusterService } = await import('@camunda/ccma-api');
+                await ConsoleClusterService.wakeCluster({
+                    config: apiConfig,
+                    params: { orgId, clusterId },
+                });
+                await onReloadCluster();
+            },
+            wakeLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.status.wakeLabel', 'Resume cluster'),
+            wakeVisibility: canWakeCluster,
+            sleepAction: canWakeCluster
+                ? async () => {
+                    const { ConsoleClusterService } = await import('@camunda/ccma-api');
+                    await ConsoleClusterService.suspendCluster({
+                        config: apiConfig,
+                        params: { orgId, clusterId },
+                    });
+                    await onReloadCluster();
+                }
+                : undefined,
+            sleepLabel: safeTranslate(t, 'clusterdetails:overview.clusterDetails.status.sleepLabel', 'Suspend cluster'),
+        },
+        generation: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.generation', 'Generation'),
+            value: generationName,
+            update: generationUpdate,
+        },
+        created: {
+            label: safeTranslate(t, 'clusterdetails:overview.clusterDetails.createdAt', 'Created at'),
+            value: formatDate(cluster.created),
+        },
+    };
+    return (_jsxs(Stack, { gap: 6, children: [_jsx(Modal, { open: tagModalOpen, modalHeading: safeTranslate(t, 'clusterdetails:tags.modal.heading', 'Assign a cluster tag'), primaryButtonText: safeTranslate(t, 'clusterdetails:tags.modal.primary', 'Confirm'), secondaryButtonText: safeTranslate(t, 'clusterdetails:tags.modal.secondary', 'Cancel'), primaryButtonDisabled: tagBusy || selectedTag === '' || !canEditCluster, onRequestClose: () => {
+                    if (tagBusy)
+                        return;
+                    setTagModalOpen(false);
+                }, onRequestSubmit: submitTagChange, children: _jsxs(Stack, { gap: 5, children: [tagError ? (_jsx(InlineNotification, { kind: 'error', lowContrast: true, title: safeTranslate(t, 'clusterdetails:tags.modal.error', 'Error updating tag'), subtitle: tagError, hideCloseButton: true })) : null, _jsx("p", { children: safeTranslate(t, 'clusterdetails:tags.modal.description', 'Assign a tag to make it easier for team members to clearly distinguish between different stages of the software development lifecycle. Tags have no impact on performance and can be changed later.') }), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                                gap: '1rem',
+                            }, children: stageOptions.map((option) => {
+                                const isSelected = selectedTag === option.value;
+                                return (_jsx("button", { type: 'button', disabled: tagBusy || !canEditCluster, onClick: () => {
+                                        setSelectedTag(option.value);
+                                    }, style: {
+                                        all: 'unset',
+                                        cursor: tagBusy || !canEditCluster ? 'not-allowed' : 'pointer',
+                                        border: `1px solid ${isSelected
+                                            ? 'var(--cds-border-interactive)'
+                                            : 'var(--cds-border-subtle-01)'}`,
+                                        padding: '1rem',
+                                        position: 'relative',
+                                    }, "aria-pressed": isSelected, children: _jsxs("div", { style: { display: 'grid', gap: '0.5rem' }, children: [_jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    justifyContent: 'space-between',
+                                                    alignItems: 'flex-start',
+                                                    gap: '0.5rem',
+                                                }, children: [_jsx(C3ClusterTag, { stage: option.value }), isSelected ? (_jsx("span", { style: {
+                                                            color: 'var(--cds-icon-primary)',
+                                                            display: 'flex',
+                                                        }, children: _jsx(CheckmarkFilled, {}) })) : null] }), _jsx("p", { children: option.description })] }) }, option.value));
+                            }) })] }) }), _jsx(C4ClusterOverview, { applications: {
+                    title: safeTranslate(t, 'clusterdetails:overview.applications.title', 'Components'),
+                    applications: {
+                        zeebe: apps.zeebe,
+                        tasklist: apps.tasklist,
+                        operate: apps.operate,
+                        optimize: apps.optimize,
+                        connectors: apps.connectors,
+                        identity: apps.identity,
+                    },
+                }, details: details, clusterLoad: clusterLoadProps, rbaNotification: rbaNotification, jobDashboard: jobDashboardEntryPoint })] }));
+};