@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-cluster-overview/c4-cluster-overview.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { InlineNotification, Stack, Tooltip } from '@carbon/react';
+import { Caution, CheckmarkFilled } from '@carbon/react/icons/index.esm.js';
+import styled from 'styled-components';
+import { C4ActionableNotification } from '../c4-actionable-notification/c4-actionable-notification.js';
+import C4JobDashboardEntryPoint from '../c4-job-dashboard-entry-point/c4-job-dashboard-entry-point.js';
+import { Applications } from './applications.js';
+import { ClusterDetails } from './cluster-details.js';
+import { ClusterLoad } from './cluster-load.js';
+const ResponsiveOverviewGrid = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: 60% calc(40% - 1.5rem);
+  }
+`;
+const ClusterDetailsWrapper = styled.div `
+  width: calc(100vw - 64px);
+  overflow-x: auto;
+  background-color: var(--cds-layer);
+
+  @media (min-width: 768px) {
+    width: 100%;
+  }
+`;
+const SecondColumnContainer = styled.div `
+  height: max-content
+`;
+export const C4ClusterOverview = ({ applications, details, clusterLoad, rbaNotification, jobDashboard, }) => {
+    let rbaNotificationElement = null;
+    if (rbaNotification?.visible) {
+        if (rbaNotification.canManageUsers) {
+            rbaNotificationElement = (_jsx(C4ActionableNotification, { kind: 'info', actionButtonLabel: rbaNotification.texts.actionLabel, onActionButtonClick: rbaNotification.onActionButtonClick, title: rbaNotification.texts.title, subtitle: rbaNotification.texts.subtitle, lowContrast: true }));
+        }
+        else {
+            rbaNotificationElement = (_jsx(InlineNotification, { kind: 'info', hideCloseButton: true, style: { maxWidth: '100%' }, title: rbaNotification.texts.title, subtitle: '', lowContrast: true }));
+        }
+    }
+    let secondRow = _jsx(_Fragment, {});
+    if (clusterLoad || !!jobDashboard) {
+        secondRow = (_jsxs(ResponsiveOverviewGrid, { children: [_jsx(ClusterDetailsWrapper, { children: _jsx(ClusterDetails, { ...details }) }), _jsxs(Stack, { gap: 6, children: [clusterLoad && (_jsx(SecondColumnContainer, { children: _jsx(ClusterLoad, { ...clusterLoad }) })), jobDashboard && (_jsx(SecondColumnContainer, { children: _jsx(C4JobDashboardEntryPoint, { ...jobDashboard }) }))] })] }));
+    }
+    else {
+        secondRow = (_jsx(ClusterDetailsWrapper, { children: _jsx(ClusterDetails, { ...details }) }));
+    }
+    const component = (_jsxs(Stack, { gap: 8, children: [rbaNotificationElement, _jsxs(Stack, { gap: 6, children: [_jsx(Applications, { ...applications }), secondRow] })] }));
+    return component;
+};
+export const C4IconAndTextElement = (props) => {
+    const component = (_jsx("div", { style: { ...props.style }, children: _jsxs("div", { style: { position: 'relative' }, children: [props.icon && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        display: 'flex',
+                        color: props.color,
+                    }, children: props.icon })), _jsxs("span", { style: { paddingInlineStart: props.icon ? '1.2rem' : '0rem' }, children: [props.tooltip && (_jsx("span", { style: { zIndex: 999 }, children: _jsx(Tooltip, { align: props.tooltip.align ?? 'bottom', autoAlign: true, label: props.tooltip.label, children: _jsx("span", { children: props.text }) }) })), !props.tooltip && props.text] })] }) }));
+    return component;
+};
+export function getClusterLoadConfig(currentValue) {
+    const found = CLUSTER_LOAD_RANGES.find((entry) => {
+        return currentValue >= entry.min && currentValue < entry.max;
+    });
+    return (found || {
+        type: 'unknown',
+        color: 'var(--cds-support-warning)',
+        icon: _jsx(Caution, {}),
+        min: 0,
+        max: 1000,
+    });
+}
+const CLUSTER_LOAD_RANGES = [
+    {
+        type: 'green',
+        color: 'var(--cds-support-success)',
+        icon: _jsx(CheckmarkFilled, {}),
+        min: 0,
+        max: 41,
+    },
+    {
+        type: 'warning',
+        color: 'var(--cds-support-warning)',
+        icon: _jsx(Caution, {}),
+        min: 41,
+        max: 71,
+    },
+    {
+        type: 'red',
+        color: 'var(--cds-support-error)',
+        icon: _jsx(Caution, {}),
+        min: 71,
+        max: 1000,
+    },
+];

package/lib/esm/components/c4-cluster-overview/c4-cluster-overview.types.d.ts

@@ -0,0 +1,22 @@
+import type { C4JobDashboardEntryPointProps } from '../c4-job-dashboard-entry-point/c4-job-dashboard-entry-point.types';
+import type { ApplicationsProps } from './applications';
+import type { ClusterDetailsProps } from './cluster-details';
+import type { ClusterLoadProps } from './cluster-load';
+export type { ClusterDetailsProps, ClusterLoadProps };
+export interface RbaNotificationProps {
+    visible: boolean;
+    canManageUsers: boolean;
+    texts: {
+        title: string;
+        subtitle: string;
+        actionLabel: string;
+    };
+    onActionButtonClick: () => void;
+}
+export interface C4ClusterOverviewProps {
+    applications: ApplicationsProps;
+    details: ClusterDetailsProps;
+    clusterLoad?: ClusterLoadProps;
+    rbaNotification?: RbaNotificationProps;
+    jobDashboard?: C4JobDashboardEntryPointProps;
+}

package/lib/esm/components/c4-cluster-overview/c4-cluster-overview.types.js

@@ -0,0 +1,6 @@
+/*
+ * 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.
+ */
+export {};

package/lib/esm/components/c4-cluster-overview/cluster-details.d.ts

@@ -0,0 +1,116 @@
+import type React from 'react';
+import { type JSX } from 'react';
+export interface ClusterDetailsProps {
+    title: string;
+    name: {
+        label: string;
+        value: string;
+    };
+    description?: {
+        label: string;
+        value: string;
+        placeholder: string;
+        noDescription: string;
+        saveLabel: string;
+        cancelLabel: string;
+        editLabel: string;
+        errorMaxLength: string;
+        updateAction: (newDescription: string) => Promise<void>;
+        updateVisible?: boolean;
+        updateDisabled?: boolean;
+    };
+    cta?: {
+        title: string;
+        text: string;
+        actionLabel: string;
+        action: () => void;
+    };
+    status?: {
+        label: string;
+        value: string;
+        wakeAction: () => void;
+        wakeLabel: string;
+        wakeVisibility: boolean;
+        sleepAction?: () => void;
+        sleepLabel?: string;
+    };
+    generation: {
+        label: string;
+        value: string;
+        update: ClusterDetailsGenerationUpdateProps;
+    };
+    type?: {
+        label: string;
+        value: string;
+        updateHwPackageAction?: () => void;
+        updateHwPackageLabel?: string;
+    };
+    region?: {
+        label: string;
+        value: string;
+    };
+    regionId?: {
+        label: string;
+        value: string;
+    };
+    provider: {
+        label: string;
+        value?: string;
+    };
+    backupRegion?: {
+        label: string;
+        value: string;
+    };
+    backupRegionId?: {
+        label: string;
+        value: string;
+    };
+    encryption?: {
+        label: string;
+        value: string;
+        tooltip: string;
+    };
+    tags?: {
+        label: string;
+        value: string[];
+        updateAction: () => void;
+        updateTagLabel: string;
+        addTagLabel: string;
+        updateDisabled: boolean;
+        updateVisible: boolean;
+    };
+    id: {
+        label: string;
+        value: string;
+    };
+    created?: {
+        label: string;
+        value: string;
+    };
+}
+export declare const ClusterDetails: (props: ClusterDetailsProps) => JSX.Element;
+export interface ClusterDetailsGenerationUpdateProps {
+    updateType: 'update-available' | 'update-available-wait-needed' | 'update-available-no-permissions' | 'no-update-latest' | 'no-update-refresh' | 'updating' | 'creating';
+    updateStates: {
+        updateAvailable: {
+            action: () => void;
+            label: string;
+        };
+        updateAvailableNoPermission: {
+            label: string;
+            description: string;
+        };
+        updateAvailableWaitNeeded: {
+            label: string;
+            description: React.ReactNode;
+        };
+        noUpdateLatest: {
+            label: string;
+        };
+        noUpdateRefresh: {
+            action: () => void;
+            label: string;
+        };
+    };
+}
+export declare const ClusterDetailsGenerationUpdate: (props: ClusterDetailsGenerationUpdateProps) => JSX.Element;

package/lib/esm/components/c4-cluster-overview/cluster-details.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, Fragment as _Fragment, 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, } from '@camunda/camunda-composite-components';
+import { Button, CodeSnippet, IconButton, Layer, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, TextArea, } from '@carbon/react';
+import { Add, Information, Pause, Play, Renew, UpdateNow, } from '@carbon/react/icons/index.esm.js';
+import { useEffect, useRef, useState } from 'react';
+import { C4ActionableNotification } from '../c4-actionable-notification/c4-actionable-notification.js';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+import { C4TileWithTitleAndAction } from '../c4-tile-with-title-and-action/c4-tile-with-title-and-action.js';
+import { ClusterStatusElement } from './applications.js';
+export const ClusterDetails = (props) => {
+    const [isEditingDescription, setIsEditingDescription] = useState(false);
+    const [descriptionValue, setDescriptionValue] = useState('');
+    const [descriptionError, setDescriptionError] = useState('');
+    const descriptionInputRef = useRef(null);
+    // Auto-focus the description input when editing starts
+    useEffect(() => {
+        if (isEditingDescription && descriptionInputRef.current) {
+            descriptionInputRef.current.focus();
+        }
+    }, [isEditingDescription]);
+    const handleEditDescription = () => {
+        setDescriptionValue(props.description?.value || '');
+        setDescriptionError('');
+        setIsEditingDescription(true);
+    };
+    const handleSaveDescription = async () => {
+        if (descriptionValue.length > 150) {
+            setDescriptionError(props.description?.errorMaxLength);
+            return;
+        }
+        await props.description?.updateAction(descriptionValue);
+        setIsEditingDescription(false);
+        setDescriptionError('');
+    };
+    const handleCancelDescription = () => {
+        setDescriptionValue(props.description?.value || '');
+        setDescriptionError('');
+        setIsEditingDescription(false);
+    };
+    const rowStyle = {
+        height: '61px',
+        maxHeight: '61px',
+        minHeight: '61px',
+    };
+    const renderStatusButton = () => {
+        if (props?.status?.value.toLowerCase() === 'suspended' &&
+            props?.status.wakeVisibility) {
+            return (_jsx(Button, { onClick: () => props.status?.wakeAction(), size: 'sm', renderIcon: Play, children: props.status.wakeLabel }));
+        }
+        if (props?.status?.sleepAction) {
+            return (_jsx(Button, { onClick: () => props.status?.sleepAction?.(), size: 'sm', renderIcon: Pause, children: props.status.sleepLabel }));
+        }
+        return null;
+    };
+    const renderUpdateHwPackageButton = () => {
+        if (props?.type?.updateHwPackageLabel &&
+            props?.type?.updateHwPackageAction) {
+            return (_jsx(C4LinkButton, { label: props.type.updateHwPackageLabel, onClick: () => props.type?.updateHwPackageAction?.() }));
+        }
+        return null;
+    };
+    const component = (_jsxs(C4TileWithTitleAndAction, { title: props.title, children: [(() => {
+                if (props.cta) {
+                    return (_jsx(C4ActionableNotification, { kind: 'info', title: props.cta.title, subtitle: props.cta.text, actionButtonLabel: props.cta.actionLabel, onActionButtonClick: props.cta.action, lowContrast: true, orientation: 'vertical' }));
+                }
+                else {
+                    return _jsx(_Fragment, {});
+                }
+            })(), _jsx(StructuredListWrapper, { children: _jsxs(StructuredListBody, { children: [_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, style: { width: '10rem' }, children: props.name.label }), _jsx(StructuredListCell, { noWrap: true, children: props.name.value })] }), props.description && (_jsxs(StructuredListRow, { style: { minHeight: isEditingDescription ? 'auto' : '61px' }, children: [_jsx(StructuredListCell, { noWrap: true, style: {
+                                        width: '10rem',
+                                        verticalAlign: 'top',
+                                        paddingTop: '1rem',
+                                    }, children: props.description.label }), _jsx(StructuredListCell, { children: isEditingDescription ? (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: '0.5rem',
+                                        }, children: [_jsx(TextArea, { id: 'cluster-description', labelText: '', value: descriptionValue, onChange: (event) => {
+                                                    setDescriptionValue(event.target.value);
+                                                    setDescriptionError('');
+                                                }, placeholder: props.description.placeholder, rows: 4, invalid: descriptionError !== '', invalidText: descriptionError, ref: descriptionInputRef }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem' }, children: [_jsx(Button, { size: 'sm', onClick: handleSaveDescription, children: props.description.saveLabel }), _jsx(Button, { kind: 'ghost', size: 'sm', onClick: handleCancelDescription, children: props.description.cancelLabel })] })] })) : (_jsxs("div", { style: {
+                                            display: 'inline-grid',
+                                            gridAutoFlow: 'column',
+                                            gap: '1.5rem',
+                                            alignItems: 'start',
+                                        }, children: [_jsx("span", { style: {
+                                                    color: props.description.value
+                                                        ? 'inherit'
+                                                        : 'var(--cds-text-secondary)',
+                                                    wordBreak: 'break-word',
+                                                }, children: props.description.value ||
+                                                    props.description.noDescription }), (props.description.updateVisible ?? true) && (_jsx(C4LinkButton, { label: props.description.editLabel, onClick: handleEditDescription, disabled: props.description.updateDisabled ?? false }))] })) })] })), props.status && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, style: { width: '10rem' }, children: props.status.label }), _jsx(StructuredListCell, { noWrap: true, children: _jsxs("div", { style: {
+                                            display: 'inline-grid',
+                                            gridAutoFlow: 'column',
+                                            gap: '1.5rem',
+                                            alignItems: 'center',
+                                        }, children: [_jsx(ClusterStatusElement, { status: props.status.value.toLowerCase() }), renderStatusButton()] }) })] })), _jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.generation.label }), _jsx(StructuredListCell, { children: _jsxs("div", { style: {
+                                            display: 'grid',
+                                            gridTemplateColumns: 'auto 1fr',
+                                            gap: '0.5rem',
+                                        }, children: [_jsx("p", { children: props.generation.value }), props.status?.value.toLowerCase() === 'healthy' && (_jsx(ClusterDetailsGenerationUpdate, { ...props.generation.update }))] }) })] }), props.type && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.type.label }), _jsx(StructuredListCell, { noWrap: true, children: _jsxs("div", { style: {
+                                            display: 'inline-grid',
+                                            gridAutoFlow: 'column',
+                                            gap: '1.5rem',
+                                            alignItems: 'center',
+                                        }, children: [props.type.value, renderUpdateHwPackageButton()] }) })] })), props.provider.value && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { children: props.provider.label }), _jsx(StructuredListCell, { children: props.provider.value })] })), props.region && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.region.label }), _jsx(StructuredListCell, { noWrap: true, children: props.region.value })] })), props.backupRegion && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.backupRegion.label }), _jsx(StructuredListCell, { noWrap: true, children: props.backupRegion.value })] })), props.encryption && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.encryption.label }), _jsx(StructuredListCell, { noWrap: true, children: props.encryption.value })] })), props.tags && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.tags.label }), _jsx(StructuredListCell, { noWrap: true, children: _jsx("div", { style: {
+                                            display: 'grid',
+                                            gridTemplateColumns: 'auto 1fr',
+                                            gap: '0.5rem',
+                                        }, children: props.tags.value?.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { children: props.tags.value.map((tag) => (_jsx(C3ClusterTag, { stage: tag }, `cluster-tag-${tag}`))) }), props.tags.updateVisible && (_jsx(C4LinkButton, { label: props.tags.updateTagLabel, onClick: () => props.tags?.updateAction(), style: { alignSelf: 'center' }, disabled: props.tags.updateDisabled }))] })) : (props.tags.updateVisible && (_jsx(C4LinkButton, { label: props.tags.addTagLabel, onClick: () => props.tags?.updateAction(), style: { alignSelf: 'center' }, icon: _jsx(Add, {}), disabled: props.tags.updateDisabled }))) }) })] })), props.regionId && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.regionId.label }), _jsx(StructuredListCell, { children: _jsx(Layer, { style: { height: '0px', width: 'calc(100% - 4rem)' }, children: _jsx(CodeSnippet, { type: 'single', style: { maxWidth: '22rem' }, children: props.regionId.value }) }) })] })), props.backupRegionId && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.backupRegionId.label }), _jsx(StructuredListCell, { noWrap: true, children: _jsx(Layer, { style: { height: '0px', width: 'calc(100% - 4rem)' }, children: _jsx(CodeSnippet, { type: 'single', style: { maxWidth: '22rem' }, children: props.backupRegionId.value }) }) })] })), _jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.id.label }), _jsx(StructuredListCell, { noWrap: true, children: _jsx(Layer, { style: { height: '0px', width: 'calc(100% - 4rem)' }, children: _jsx(CodeSnippet, { type: 'single', style: { maxWidth: '22rem' }, children: props.id.value }) }) })] }), props.created && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.created.label }), _jsx(StructuredListCell, { noWrap: true, children: props.created.value })] }))] }) })] }));
+    return component;
+};
+export const ClusterDetailsGenerationUpdate = (props) => {
+    let component = _jsx(_Fragment, {});
+    const latestMessage = 'No updates available - running on latest available version';
+    switch (props.updateType) {
+        case 'update-available':
+            component = (_jsx(Button, { onClick: () => props.updateStates.updateAvailable.action(), size: 'sm', renderIcon: UpdateNow, style: { top: '-0.4rem' }, children: props.updateStates.updateAvailable.label }));
+            break;
+        case 'update-available-no-permissions':
+            component = (_jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gap: '0.5rem',
+                    alignItems: 'start',
+                }, children: [_jsx(Button, { size: 'sm', renderIcon: UpdateNow, style: { top: '-0.4rem' }, disabled: true, children: props.updateStates.updateAvailableNoPermission.label }), _jsx("p", { style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: props.updateStates.updateAvailableNoPermission.description })] }));
+            break;
+        case 'update-available-wait-needed':
+            component = (_jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gap: '0.5rem',
+                    alignItems: 'start',
+                }, children: [_jsx(Button, { size: 'sm', renderIcon: UpdateNow, style: { top: '-0.4rem' }, disabled: true, children: props.updateStates.updateAvailableWaitNeeded.label }), _jsx("p", { style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: props.updateStates.updateAvailableWaitNeeded.description })] }));
+            break;
+        case 'no-update-latest': {
+            const rawLabel = props.updateStates.noUpdateLatest.label.trim();
+            const looksLikeTranslationKey = rawLabel.includes('clusterdetails:') ||
+                rawLabel.includes('noUpdate') ||
+                /^[a-z]+(\.[a-z0-9]+)+$/.test(rawLabel);
+            const resolvedNoUpdateLatestLabel = !rawLabel || rawLabel === 'Latest version' || looksLikeTranslationKey
+                ? latestMessage
+                : rawLabel;
+            component = (_jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gap: '0.5rem',
+                    alignItems: 'start',
+                }, children: [_jsx(Information, {}), _jsx("p", { style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: resolvedNoUpdateLatestLabel })] }));
+            break;
+        }
+        case 'no-update-refresh':
+            component = (_jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: '16px auto 1fr',
+                    gap: '0.5rem',
+                    alignItems: 'start',
+                }, children: [_jsx(Information, {}), _jsx("p", { style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: props.updateStates.noUpdateRefresh.label }), _jsx("div", { children: _jsx(IconButton, { label: 'Refresh', onClick: () => props.updateStates.noUpdateRefresh.action(), kind: 'ghost', style: { top: '-0.2rem' }, size: 'xs', children: _jsx(Renew, {}) }) })] }));
+            break;
+        case 'creating':
+        case 'updating':
+            component = _jsx(_Fragment, {});
+            break;
+    }
+    return component;
+};

package/lib/esm/components/c4-cluster-overview/cluster-load.d.ts

@@ -0,0 +1,35 @@
+import { type JSX } from 'react';
+interface ClusterLoadDataPoint {
+    ts: number;
+    avg: number;
+    min: number;
+    max: number;
+}
+export interface ClusterLoadProps {
+    texts: {
+        title: string;
+        last: string;
+        day30: string;
+        day7: string;
+        last24h: string;
+        current: string;
+        clusterLoadTooltip: string;
+        docs: string;
+    };
+    values: {
+        latest: ClusterLoadDataPoint;
+        perDay: ClusterLoadDataPoint[];
+        last24h: ClusterLoadDataPoint[];
+    };
+    docs: {
+        url: string;
+        onClick: () => void;
+    };
+    theme?: any;
+    suspended?: boolean;
+    reload: () => void;
+    loading?: boolean;
+}
+export declare const ClusterLoad: (props: ClusterLoadProps) => JSX.Element;
+export declare const MeterVisualization: (props: ClusterLoadProps) => JSX.Element;
+export {};

package/lib/esm/components/c4-cluster-overview/cluster-load.formatNumber.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/c4-cluster-overview/cluster-load.formatNumber.test.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { describe, expect, it } from 'vitest';
+// Helper function to format numbers (same as in cluster-load.tsx)
+function formatNumber(number) {
+    return new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(number);
+}
+describe('formatNumber', () => {
+    it('should format small decimal values to 2 decimal places', () => {
+        // Test values that would show precision issues with maximumSignificantDigits
+        expect(formatNumber(0.45)).toBe('0.45');
+        expect(formatNumber(0.35)).toBe('0.35');
+    });
+    it('should format whole numbers with 2 decimal places', () => {
+        expect(formatNumber(25)).toBe('25.00');
+        expect(formatNumber(100)).toBe('100.00');
+    });
+    it('should format values with exactly 2 decimal places', () => {
+        expect(formatNumber(0.45)).toBe('0.45');
+        expect(formatNumber(25.5)).toBe('25.50');
+    });
+    it('should round values correctly', () => {
+        expect(formatNumber(0.444)).toBe('0.44');
+        expect(formatNumber(0.445)).toBe('0.45');
+        expect(formatNumber(0.446)).toBe('0.45');
+    });
+    it('should handle edge cases', () => {
+        expect(formatNumber(0)).toBe('0.00');
+        expect(formatNumber(0.01)).toBe('0.01');
+        expect(formatNumber(99.99)).toBe('99.99');
+    });
+});