@camunda/ccma-saas-frontend 0.0.31

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

@@ -0,0 +1,289 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ConsoleByomMonitoringService } from '@camunda/ccma-api';
+import { Button, CodeSnippet, FormLabel, InlineLoading, InlineNotification, Layer, Modal, Stack, TextInput, } from '@carbon/react';
+import { CheckmarkFilled, Information, WarningFilled, } from '@carbon/react/icons/index.esm.js';
+import { useState } from 'react';
+import { C4ClusterByomClients } from '../../../components/c4-cluster-byom-clients/c4-cluster-byom-clients.js';
+// Helper function to ensure translations work
+function safeTranslate(t, key, fallback) {
+    if (!t)
+        return fallback;
+    const result = t(key);
+    if (!result || result === key) {
+        return fallback;
+    }
+    // i18next can return the key *without* the namespace when the namespace is missing.
+    // Example: `clusterdetails:byomClients.noClientsMessage.title` -> `byomClients.noClientsMessage.title`
+    if (key.includes(':')) {
+        const withoutNamespace = key.split(':').slice(1).join(':');
+        if (result === withoutNamespace) {
+            return fallback;
+        }
+    }
+    return result;
+}
+function asByomStatusLike(value) {
+    if (!value || typeof value !== 'object')
+        return undefined;
+    return value;
+}
+export const C4ClusterDetailsByomClientsTab = (props) => {
+    const { byomClients, byomStatus, byomLoading, byomError, orgId, clusterId, apiConfig, canMutateCluster, t, onNavigate, onReloadByom, } = props;
+    // BYOM modal state
+    const [byomActivateOnSubmit, setByomActivateOnSubmit] = useState(false);
+    const [byomCreateOpen, setByomCreateOpen] = useState(false);
+    const [byomUsername, setByomUsername] = useState('');
+    const [byomMutationBusy, setByomMutationBusy] = useState(false);
+    const [byomMutationError, setByomMutationError] = useState('');
+    const [byomDeleteOpen, setByomDeleteOpen] = useState(false);
+    const [byomDeleteBusy, setByomDeleteBusy] = useState(false);
+    const [byomDeleteError, setByomDeleteError] = useState({
+        title: '',
+        description: '',
+    });
+    const [byomSelectedClientId, setByomSelectedClientId] = useState('');
+    const [byomPassword, setByomPassword] = useState('');
+    const [byomPasswordOpen, setByomPasswordOpen] = useState(false);
+    const [byomRotateOpen, setByomRotateOpen] = useState(false);
+    const [byomRotateBusy, setByomRotateBusy] = useState(false);
+    const [byomRotateError, setByomRotateError] = useState({
+        title: '',
+        description: '',
+    });
+    const [byomRotateClientId, setByomRotateClientId] = useState('');
+    const [byomRotatePassword, setByomRotatePassword] = useState('');
+    const [byomRotateResponseOpen, setByomRotateResponseOpen] = useState(false);
+    const [byomDeactivateOpen, setByomDeactivateOpen] = useState(false);
+    const [byomDeactivateBusy, setByomDeactivateBusy] = useState(false);
+    const [byomDeactivateError, setByomDeactivateError] = useState({
+        title: '',
+        description: '',
+    });
+    const statusLike = asByomStatusLike(byomStatus);
+    const metricsEndpoint = statusLike?.metricsEndpoint;
+    const endpoint = metricsEndpoint
+        ? `${metricsEndpoint.scheme ?? ''}://${metricsEndpoint.target ?? ''}${metricsEndpoint.path ?? ''}`
+        : '';
+    const conditions = statusLike?.conditions;
+    const readyReason = conditions?.find((condition) => condition.type === 'Ready')?.reason ??
+        'Unknown';
+    const statusComponent = (() => {
+        let statusIcon = null;
+        let statusText = '';
+        let statusColor;
+        switch (readyReason) {
+            case 'Ready':
+            case 'Degraded':
+                statusIcon = _jsx(CheckmarkFilled, {});
+                statusText = 'Ready';
+                statusColor = 'var(--cds-support-success)';
+                break;
+            case 'Error':
+            case 'Down':
+                statusIcon = _jsx(WarningFilled, {});
+                statusText = 'Unhealthy';
+                statusColor = 'var(--cds-support-error)';
+                break;
+            default:
+                statusIcon = _jsx(InlineLoading, {});
+                statusText = 'Creating';
+                statusColor = 'var(--cds-support-info)';
+                break;
+        }
+        return (_jsxs("div", { style: { position: 'relative' }, children: [statusIcon && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        display: 'flex',
+                        color: statusColor,
+                    }, children: statusIcon })), _jsx("span", { style: {
+                        verticalAlign: '-3px',
+                        paddingInlineStart: statusIcon ? '1.2rem' : '0rem',
+                    }, children: statusText })] }));
+    })();
+    const monitoringDescription = safeTranslate(t, 'clusterdetails:byomClients.monitoringDescription', 'Activate a secure metrics endpoint for the cluster and integrate it with an external monitoring system that supports Prometheus scraping.');
+    const monitoringEndpointLabel = safeTranslate(t, 'clusterdetails:byomClients.monitoringEndpoint', 'Monitoring endpoint');
+    return (_jsxs(_Fragment, { children: [_jsx(C4ClusterByomClients, { clients: byomClients, isLoading: byomLoading, hasError: byomError, text: {
+                    title: safeTranslate(t, 'clusterdetails:byomClients.dataTableTitle', 'Cluster Monitoring endpoint activated'),
+                    subtitle: (_jsxs(Stack, { children: [_jsx("p", { children: monitoringDescription }), endpoint ? (_jsxs(_Fragment, { children: [_jsxs(Stack, { orientation: 'horizontal', style: { width: '40%' }, children: [_jsx("h3", { children: monitoringEndpointLabel }), statusComponent] }), _jsxs(Stack, { orientation: 'horizontal', children: [_jsx(Layer, { children: _jsx(CodeSnippet, { type: 'single', children: endpoint }) }), _jsx(Button, { kind: 'ghost', disabled: !canMutateCluster, onClick: () => {
+                                                    setByomDeactivateError({ title: '', description: '' });
+                                                    setByomDeactivateOpen(true);
+                                                }, children: safeTranslate(t, 'clusterdetails:byomClients.deactivate', 'Deactivate') })] }), _jsx("h3", { children: "Credentials for authentication" })] })) : null] })),
+                    createButton: safeTranslate(t, 'clusterdetails:byomClients.createButton', 'Create new credentials'),
+                    createFirstClient: safeTranslate(t, 'clusterdetails:byomClients.createFirstClient', 'Activate monitoring endpoint'),
+                    searchLabel: 'Search',
+                    headerUsername: safeTranslate(t, 'clusterdetails:byomClients.header.username', 'Username'),
+                    headerCreated: safeTranslate(t, 'clusterdetails:byomClients.header.created', 'Created'),
+                    renameAction: safeTranslate(t, 'clusterdetails:byomClients.overflowMenu.rename', 'Rename'),
+                    rotatePasswordAction: safeTranslate(t, 'clusterdetails:byomClients.overflowMenu.rotatePassword', 'Generate password'),
+                    deleteAction: safeTranslate(t, 'clusterdetails:byomClients.overflowMenu.delete', 'Delete'),
+                    errorTitle: safeTranslate(t, 'clusterdetails:byomClients.fetchError.title', 'Error fetching BYOM clients'),
+                    errorDescription: safeTranslate(t, 'clusterdetails:byomClients.fetchError.description', 'An error occurred while fetching the BYOM client list.'),
+                    errorButton: safeTranslate(t, 'clusterdetails:byomClients.fetchError.button', 'Retry'),
+                    emptyTitle: safeTranslate(t, 'clusterdetails:byomClients.noClientsMessage.title', 'Cluster Monitoring endpoint'),
+                    emptyDescription: safeTranslate(t, 'clusterdetails:byomClients.noClientsMessage.text', 'Activate a secure metrics endpoint for the cluster and integrate it with an external monitoring system that supports Prometheus scraping.'),
+                    learnMoreLabel: safeTranslate(t, 'clusterdetails:byomClients.learnMoreLabel', 'Learn more about integration with monitoring systems'),
+                }, urls: { docs: 'https://docs.camunda.io/' }, permissions: {
+                    canCreate: canMutateCluster,
+                    canUpdate: canMutateCluster,
+                    canDelete: canMutateCluster,
+                }, onActivateEndpoint: () => {
+                    setByomActivateOnSubmit(true);
+                    setByomMutationError('');
+                    setByomUsername('');
+                    setByomCreateOpen(true);
+                }, onCreateClient: () => {
+                    setByomActivateOnSubmit(false);
+                    setByomMutationError('');
+                    setByomUsername('');
+                    setByomCreateOpen(true);
+                }, onRotatePassword: (clientId) => {
+                    setByomRotateClientId(clientId);
+                    setByomRotateError({ title: '', description: '' });
+                    setByomRotateOpen(true);
+                }, onDeleteClient: (clientId) => {
+                    setByomSelectedClientId(clientId);
+                    setByomDeleteError({ title: '', description: '' });
+                    setByomDeleteOpen(true);
+                }, onRefresh: () => onReloadByom(), onOpenDocs: () => {
+                    onNavigate?.({
+                        kind: 'openUrl',
+                        url: 'https://docs.camunda.io/',
+                    });
+                } }), _jsx(Modal, { open: byomCreateOpen, size: 'sm', modalHeading: byomActivateOnSubmit
+                    ? safeTranslate(t, 'byomClients:create.title', 'Activate monitoring endpoint')
+                    : safeTranslate(t, 'byomClients:create.title', 'Create new credentials'), primaryButtonText: byomActivateOnSubmit
+                    ? safeTranslate(t, 'byomClients:create.activate', 'Activate')
+                    : safeTranslate(t, 'byomClients:create.submit', 'Create'), secondaryButtonText: 'Cancel', primaryButtonDisabled: byomMutationBusy, onRequestClose: () => setByomCreateOpen(false), onRequestSubmit: () => {
+                    void (async () => {
+                        const normalized = byomUsername.trim();
+                        const isValidUsername = normalized.length >= 1 &&
+                            normalized.length <= 24 &&
+                            /^[A-Za-z0-9_-]+$/.test(normalized);
+                        if (!isValidUsername) {
+                            setByomMutationError(safeTranslate(t, 'byomClients:create.error.validation', 'Username must be 1-24 characters and contain only alphanumeric characters, dashes, and underscores.'));
+                            return;
+                        }
+                        setByomMutationBusy(true);
+                        setByomMutationError('');
+                        try {
+                            const created = await ConsoleByomMonitoringService.createMonitoringClient({
+                                config: apiConfig,
+                                params: { orgId, clusterId },
+                                body: { username: normalized },
+                            });
+                            setByomUsername(created.username);
+                            setByomCreateOpen(false);
+                            setByomPassword(created.password);
+                            setByomPasswordOpen(true);
+                            await onReloadByom();
+                        }
+                        catch (error) {
+                            if (error instanceof Error &&
+                                error.message.includes('BYOM client names must be unique per cluster')) {
+                                setByomMutationError(safeTranslate(t, 'byomClients:create.error.exists', 'A client with this username already exists. Please choose a different username.'));
+                            }
+                            else {
+                                setByomMutationError(safeTranslate(t, 'byomClients:create.error.generic', 'Failed to create External Monitoring client'));
+                            }
+                        }
+                        finally {
+                            setByomMutationBusy(false);
+                        }
+                    })();
+                }, children: _jsxs(Stack, { gap: 4, children: [_jsx("p", { children: safeTranslate(t, 'byomClients:create.createDescription', 'Create credentials for authentication in an external monitoring system.') }), byomMutationBusy && (_jsx(InlineLoading, { description: safeTranslate(t, 'byomClients:create.loading', 'Creating credentials…') })), _jsx(TextInput, { id: 'byom-username', name: 'username', labelText: safeTranslate(t, 'byomClients:create.fields.username', 'Username'), placeholder: safeTranslate(t, 'byomClients:create.fields.usernamePlaceholder', 'Enter username'), helperText: safeTranslate(t, 'byomClients:create.fields.usernameHelperText', 'Maximum 24 characters. Only alphanumeric characters, dashes, and underscores allowed.'), value: byomUsername, maxLength: 24, onChange: (event) => setByomUsername(event.target.value) }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(Information, { size: 16 }), _jsx("span", { children: safeTranslate(t, 'byomClients:create.passwordGeneratedAfter', 'The password will be generated after creation.') })] }), byomMutationError && (_jsx("p", { style: { color: 'var(--cds-text-error)' }, children: byomMutationError }))] }) }), _jsx(Modal, { open: byomPasswordOpen, modalHeading: byomActivateOnSubmit
+                    ? safeTranslate(t, 'byomClients:create.successTitle', 'Monitoring endpoint activated')
+                    : safeTranslate(t, 'byomClients:create.successTitle', 'New credentials created'), primaryButtonText: safeTranslate(t, 'byomClients:create.done', 'Got it'), secondaryButtonText: undefined, onRequestClose: () => setByomPasswordOpen(false), onRequestSubmit: () => setByomPasswordOpen(false), children: _jsxs(Stack, { gap: 5, children: [_jsx("p", { children: safeTranslate(t, 'byomClients:create.successDescription', 'Use the credentials below for authentication in an external monitoring system.') }), _jsxs("div", { children: [_jsx(FormLabel, { children: safeTranslate(t, 'byomClients:create.fields.username', 'Username') }), _jsx(CodeSnippet, { type: 'single', children: byomUsername })] }), _jsxs("div", { children: [_jsx(FormLabel, { children: safeTranslate(t, 'byomClients:create.fields.password', 'Password') }), _jsx(CodeSnippet, { type: 'single', children: byomPassword })] }), _jsx(InlineNotification, { kind: 'warning', lowContrast: true, title: safeTranslate(t, 'byomClients:create.successNotificationTitle', 'The credentials will not be shown again.'), subtitle: safeTranslate(t, 'byomClients:create.successNotificationDescription', 'New password can be generated later.') })] }) }), _jsx(Modal, { open: byomRotateOpen, primaryButtonText: byomRotateBusy ? (_jsx(InlineLoading, {})) : (safeTranslate(t, 'byomClients:rotate.submit', 'Generate new password')), secondaryButtonText: safeTranslate(t, 'byomClients:rotate.cancel', 'Cancel'), primaryButtonDisabled: byomRotateBusy, onRequestClose: () => {
+                    setByomRotateBusy(false);
+                    setByomRotateOpen(false);
+                }, onRequestSubmit: () => {
+                    void (async () => {
+                        setByomRotateBusy(true);
+                        setByomRotateError({ title: '', description: '' });
+                        try {
+                            const result = await ConsoleByomMonitoringService.rotateMonitoringClientPassword({
+                                config: apiConfig,
+                                params: {
+                                    orgId,
+                                    clusterId,
+                                    clientUuid: byomRotateClientId,
+                                },
+                            });
+                            setByomRotatePassword(result.password);
+                            setByomRotateOpen(false);
+                            setByomRotateResponseOpen(true);
+                            await onReloadByom();
+                        }
+                        catch (error) {
+                            setByomRotateError({
+                                title: safeTranslate(t, 'byomClients:rotate.error.generic', 'Failed to rotate password'),
+                                description: error instanceof Error ? error.message : 'Unknown error',
+                            });
+                        }
+                        finally {
+                            setByomRotateBusy(false);
+                        }
+                    })();
+                }, size: 'sm', modalHeading: safeTranslate(t, 'byomClients:rotate.title', 'Generate new password'), children: _jsxs(Stack, { gap: 5, children: [_jsx("p", { children: safeTranslate(t, 'byomClients:rotate.description', `Are you sure you want to rotate the password for the username "${byomClients.find((c) => c.id === byomRotateClientId)?.username ?? ''}"? The current password will be invalidated immediately.`) }), byomRotateError.title && (_jsxs("p", { style: { color: 'var(--cds-text-error)' }, children: [byomRotateError.title, byomRotateError.description
+                                    ? `: ${byomRotateError.description}`
+                                    : ''] }))] }) }), _jsx(Modal, { open: byomRotateResponseOpen, primaryButtonText: safeTranslate(t, 'byomClients:rotate.done', 'Got it'), onRequestClose: () => setByomRotateResponseOpen(false), onRequestSubmit: () => setByomRotateResponseOpen(false), size: 'sm', modalHeading: safeTranslate(t, 'byomClients:rotate.successTitle', 'New password generated'), children: _jsxs(Stack, { gap: 5, children: [_jsx("p", { children: safeTranslate(t, 'byomClients:rotate.successDescription', 'Use the credentials below for authentication in an external monitoring system.') }), _jsxs("div", { children: [_jsx(FormLabel, { children: safeTranslate(t, 'byomClients:rotate.fields.username', 'Username') }), _jsx(CodeSnippet, { type: 'single', children: byomClients.find((c) => c.id === byomRotateClientId)?.username ??
+                                        '' })] }), _jsxs("div", { children: [_jsx(FormLabel, { children: safeTranslate(t, 'byomClients:rotate.fields.password', 'New Password') }), _jsx(CodeSnippet, { type: 'single', children: byomRotatePassword })] }), _jsx(InlineNotification, { kind: 'warning', lowContrast: true, title: safeTranslate(t, 'byomClients:create.successNotificationTitle', 'The credentials will not be shown again.'), subtitle: safeTranslate(t, 'byomClients:create.successNotificationDescription', 'New password can be generated later.') })] }) }), _jsx(Modal, { open: byomDeleteOpen, danger: true, primaryButtonText: byomDeleteBusy ? (_jsx(InlineLoading, {})) : (safeTranslate(t, 'byomClients:delete.submit', 'Delete')), secondaryButtonText: safeTranslate(t, 'byomClients:delete.cancel', 'Cancel'), primaryButtonDisabled: byomDeleteBusy, onRequestClose: () => {
+                    setByomDeleteBusy(false);
+                    setByomDeleteOpen(false);
+                }, onRequestSubmit: () => {
+                    void (async () => {
+                        setByomDeleteBusy(true);
+                        setByomDeleteError({ title: '', description: '' });
+                        try {
+                            await ConsoleByomMonitoringService.deleteMonitoringClient({
+                                config: apiConfig,
+                                params: {
+                                    orgId,
+                                    clusterId,
+                                    clientUuid: byomSelectedClientId,
+                                },
+                            });
+                            setByomDeleteOpen(false);
+                            await onReloadByom();
+                        }
+                        catch (error) {
+                            setByomDeleteError({
+                                title: safeTranslate(t, 'byomClients:delete.error.generic', 'Failed to delete client'),
+                                description: error instanceof Error ? error.message : 'Unknown error',
+                            });
+                        }
+                        finally {
+                            setByomDeleteBusy(false);
+                        }
+                    })();
+                }, size: 'sm', modalHeading: safeTranslate(t, 'byomClients:delete.title', 'Delete client'), children: _jsxs(Stack, { gap: 5, children: [_jsx("p", { children: safeTranslate(t, 'byomClients:delete.description', 'Are you sure you want to delete this client? This action cannot be undone.') }), byomDeleteError.title && (_jsxs("p", { style: { color: 'var(--cds-text-error)' }, children: [byomDeleteError.title, byomDeleteError.description
+                                    ? `: ${byomDeleteError.description}`
+                                    : ''] }))] }) }), _jsx(Modal, { open: byomDeactivateOpen, danger: true, primaryButtonText: byomDeactivateBusy ? (_jsx(InlineLoading, {})) : (safeTranslate(t, 'byomClients:delete.submit', 'Deactivate')), secondaryButtonText: safeTranslate(t, 'byomClients:delete.cancel', 'Cancel'), primaryButtonDisabled: byomDeactivateBusy, onRequestClose: () => {
+                    setByomDeactivateBusy(false);
+                    setByomDeactivateOpen(false);
+                }, onRequestSubmit: () => {
+                    void (async () => {
+                        setByomDeactivateBusy(true);
+                        setByomDeactivateError({ title: '', description: '' });
+                        try {
+                            await ConsoleByomMonitoringService.deactivateMonitoring({
+                                config: apiConfig,
+                                params: { orgId, clusterId },
+                            });
+                            setByomDeactivateOpen(false);
+                            await onReloadByom();
+                        }
+                        catch (error) {
+                            setByomDeactivateError({
+                                title: safeTranslate(t, 'byomClients:deactivate.error.generic', 'Failed to deactivate BYOM'),
+                                description: error instanceof Error ? error.message : 'Unknown error',
+                            });
+                        }
+                        finally {
+                            setByomDeactivateBusy(false);
+                        }
+                    })();
+                }, size: 'sm', modalHeading: safeTranslate(t, 'byomClients:delete.title', 'Deactivate Monitoring'), children: _jsxs(Stack, { gap: 5, children: [_jsx("p", { children: safeTranslate(t, 'byomClients:delete.description', 'Are you sure you want to Deactivate Monitoring? All Monitoring Clients will be deleted. This action cannot be undone.') }), byomDeactivateError.title && (_jsxs("p", { style: { color: 'var(--cds-text-error)' }, children: [byomDeactivateError.title, byomDeactivateError.description
+                                    ? `: ${byomDeactivateError.description}`
+                                    : ''] }))] }) })] }));
+};

package/lib/esm/widgets/cluster-details/tabs/c4-cluster-details-clients-tab.d.ts

@@ -0,0 +1,20 @@
+import type { ConsoleClusterClientDto, RequestBaseParamsConfig } from '@camunda/ccma-api';
+import type { ConsoleClusterDto } from '@camunda/ccma-shared-types';
+type TranslateFn = (key: string, options?: Record<string, unknown>) => string;
+interface C4ClusterDetailsClientsTabProps {
+    cluster: ConsoleClusterDto | undefined;
+    clients: ConsoleClusterClientDto[];
+    clientsLoading: boolean;
+    clientsError: boolean;
+    hasIdentityIntegration: boolean;
+    orgId: string;
+    clusterId: string;
+    clientsDocsUrl: string;
+    apiConfig: RequestBaseParamsConfig;
+    canMutateCluster: boolean;
+    t: TranslateFn | undefined;
+    onNavigate?: (event: unknown) => void;
+    onReloadClients: () => Promise<void>;
+}
+export declare const C4ClusterDetailsClientsTab: (props: C4ClusterDetailsClientsTabProps) => React.JSX.Element;
+export {};