@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-sm-cluster-details/zeebe-components.js

@@ -0,0 +1,43 @@
+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 { CodeSnippet, Column, Grid, Layer, Stack, Tile } from '@carbon/react';
+import { STYLES } from '../c4-billing-page/c4-billing-page.js';
+import { HealthStatus } from '../c4-sm-dashboard/health-status.js';
+export const ZeebeComponentGroup = (props) => {
+    const component = (_jsx(Tile, { children: _jsxs(Stack, { gap: 3, children: [_jsxs(Stack, { gap: 1, children: [_jsxs("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'auto auto 1fr',
+                                gap: '0.5rem',
+                            }, children: [_jsx("h6", { children: props.title }), _jsx("div", { style: { marginTop: '-0.4rem' }, children: _jsx(HealthStatus, { status: props.status, id: 'zeebe', size: 'small' }) }), _jsx("div", {})] }), _jsx("span", { className: 'cds--label', style: { marginTop: '-0.5rem' }, children: props.version })] }), _jsx(ZeebeComponents, { ...props.gateways }), _jsx(ZeebeComponents, { ...props.brokers })] }) }));
+    return component;
+};
+const ZeebeComponents = (props) => {
+    const component = (_jsxs(Stack, { gap: 3, children: [_jsx("span", { className: 'cds--label', children: props.name }), _jsx(Grid, { style: {
+                    ...STYLES.grid,
+                }, children: props.components.map((component, index) => {
+                    return (_jsx(Column, { span: 4, style: {
+                            ...STYLES.grid,
+                        }, children: _jsx(ZeebeComponent, { name: component.name, url: component.url, urls: component.urls, status: component.status }, index) }, `zeebe-component-${index}`));
+                }) })] }));
+    return component;
+};
+const ZeebeComponent = (props) => {
+    const component = (_jsx(Layer, { children: _jsx(Tile, { children: _jsxs(Stack, { gap: 1, children: [_jsx(HealthStatus, { status: props.status, id: props.name, size: 'small' }), _jsx("p", { children: props.name }), props.url && (_jsx(CodeSnippet, { type: 'single', wrapText: true, style: {
+                            minWidth: 0,
+                            textOverflow: 'ellipsis',
+                            background: 'var(--cds-layer-02)',
+                        }, children: props.url })), props.urls && (_jsxs(Stack, { children: [_jsx(CodeSnippet, { type: 'single', wrapText: true, style: {
+                                    minWidth: 0,
+                                    textOverflow: 'ellipsis',
+                                    background: 'var(--cds-layer-02)',
+                                }, children: props.urls.http }), _jsx(CodeSnippet, { type: 'single', wrapText: true, style: {
+                                    minWidth: 0,
+                                    textOverflow: 'ellipsis',
+                                    background: 'var(--cds-layer-02)',
+                                }, children: props.urls.grpc })] }))] }) }) }));
+    return component;
+};

package/lib/esm/components/c4-sm-dashboard/c4-sm-dashboard.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4SmDashboardProps } from './c4-sm-dashboard.types';
+export declare const C4SmDashboard: ({ automation, management, texts, explore, usage, actions, }: C4SmDashboardProps) => JSX.Element;

package/lib/esm/components/c4-sm-dashboard/c4-sm-dashboard.js

@@ -0,0 +1,34 @@
+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 { Column, Grid } from '@carbon/react';
+import { STYLES } from '../c4-billing-page/c4-billing-page.js';
+import { ClusterTile } from './cluster-tile.js';
+import { Explore } from './explore.js';
+import { Overview } from './overview.js';
+import { UsageTile } from './usage-tile.js';
+export const C4SmDashboard = ({ automation, management, texts, explore, usage, actions, }) => {
+    const managementTile = (_jsx(ClusterTile.Component, { name: texts.managementTitle, clusters: [management] }));
+    const usageTile = _jsx(UsageTile.Component, { ...usage });
+    const overview = (_jsx(Overview.Component, { chartTitle: texts.chartTitle, unhealthyClustersTitle: texts.unhealthyClustersTitle, emptyState: texts.unhealthyEmptyState, automation: automation, actions: actions }));
+    const exploreComponent = _jsx(Explore.Component, { ...explore, actions: actions });
+    const component = (_jsxs(Grid, { style: {
+            ...STYLES.grid,
+        }, children: [_jsx(Column, { span: 4, style: {
+                    ...STYLES.grid,
+                }, children: overview }), _jsx(Column, { span: 12, style: {
+                    ...STYLES.grid,
+                }, children: _jsxs(Grid, { style: {
+                        ...STYLES.grid,
+                    }, children: [_jsx(Column, { span: 12, style: {
+                                ...STYLES.grid,
+                            }, children: managementTile }), _jsx(Column, { span: 12, style: {
+                                ...STYLES.grid,
+                            }, children: usageTile }), _jsx(Column, { span: 12, style: {
+                                ...STYLES.grid,
+                            }, children: exploreComponent })] }) })] }));
+    return component;
+};

package/lib/esm/components/c4-sm-dashboard/c4-sm-dashboard.types.d.ts

@@ -0,0 +1,40 @@
+import type { Explore } from './explore';
+import type { UsageTile } from './usage-tile';
+export interface ClusterComponent {
+    id: string;
+    name: string;
+    status: 'healthy' | 'unhealthy';
+    version: string;
+}
+export interface Cluster {
+    id: string;
+    name: string;
+    components: ClusterComponent[];
+}
+export interface DashboardActions {
+    viewAllClusters: {
+        label: string;
+        onClick: () => void;
+    };
+    giveFeedback: {
+        label: string;
+        onClick: () => void;
+    };
+    clusterDetails: {
+        onClick: (clusterId: string) => void;
+    };
+}
+export interface C4SmDashboardProps {
+    management: Cluster;
+    automation: Cluster[];
+    texts: {
+        chartTitle: string;
+        unhealthyClustersTitle: string;
+        unhealthyEmptyState: string;
+        managementTitle: string;
+        automationTitle: string;
+    };
+    explore: Explore.Props;
+    usage: UsageTile.Props;
+    actions: DashboardActions;
+}

package/lib/esm/components/c4-sm-dashboard/c4-sm-dashboard.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-sm-dashboard/cluster-tile.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import type { Cluster } from './c4-sm-dashboard.types';
+export declare namespace ClusterTile {
+    interface Props {
+        name: string;
+        clusters: Cluster[];
+    }
+    const Component: (props: Props) => JSX.Element;
+}

package/lib/esm/components/c4-sm-dashboard/cluster-tile.js

@@ -0,0 +1,59 @@
+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 { Column, Grid, Stack, Tile } from '@carbon/react';
+import { STYLES } from '../c4-billing-page/c4-billing-page.js';
+import { ComponentTile } from './component-tile.js';
+export var ClusterTile;
+(function (ClusterTile) {
+    ClusterTile.Component = (props) => {
+        const clusterComponents = [];
+        for (const cluster of props.clusters) {
+            for (const clusterComponent of cluster.components) {
+                const foundClusterComponent = clusterComponents.find((currentComponent) => currentComponent.name === clusterComponent.name);
+                if (foundClusterComponent) {
+                    if (clusterComponent.status === 'healthy') {
+                        foundClusterComponent.healthy++;
+                    }
+                    else {
+                        foundClusterComponent.unhealthy++;
+                    }
+                }
+                else {
+                    let healthy = 0;
+                    let unhealthy = 0;
+                    if (clusterComponent.status === 'healthy') {
+                        healthy++;
+                    }
+                    else {
+                        unhealthy++;
+                    }
+                    clusterComponents.push({
+                        name: clusterComponent.name,
+                        healthy,
+                        unhealthy,
+                        version: clusterComponent.version,
+                    });
+                }
+            }
+        }
+        const component = (_jsx(Tile, { children: _jsxs(Stack, { gap: 3, children: [_jsx("h3", { children: props.name }), _jsx(Grid, { style: {
+                            ...STYLES.grid,
+                        }, children: clusterComponents.map((component, index) => {
+                            let info = '';
+                            if (component.healthy + component.unhealthy > 1) {
+                                info = `${component.healthy + component.unhealthy} instances`;
+                            }
+                            else {
+                                info = component.version;
+                            }
+                            return (_jsx(Column, { span: 4, style: {
+                                    ...STYLES.grid,
+                                }, children: _jsx(ComponentTile.Component, { name: component.name, info: info, healthy: component.healthy, unhealthy: component.unhealthy }) }, `${component.name}-${index}`));
+                        }) })] }) }));
+        return component;
+    };
+})(ClusterTile || (ClusterTile = {}));

package/lib/esm/components/c4-sm-dashboard/component-tile.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'react';
+export declare namespace ComponentTile {
+    interface Props {
+        name: string;
+        info: string;
+        healthy: number;
+        unhealthy: number;
+    }
+    const Component: (props: Props) => JSX.Element;
+    const ManyClusterStatusElement: (props: {
+        healthy: number;
+        unhealthy: number;
+    }) => JSX.Element;
+}

package/lib/esm/components/c4-sm-dashboard/component-tile.js

@@ -0,0 +1,45 @@
+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 { Layer, Stack, Tile } from '@carbon/react';
+import { CheckmarkFilled, WarningFilled } from '@carbon/react/icons/index.esm.js';
+import { ClusterStatusElement, StatusColor, } from '../c4-cluster-overview/applications.js';
+export var ComponentTile;
+(function (ComponentTile) {
+    ComponentTile.Component = (props) => {
+        const onlyOneComponent = props.healthy + props.unhealthy === 1;
+        const component = (_jsx(Layer, { children: _jsx(Tile, { children: _jsxs(Stack, { gap: 3, children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr auto' }, children: [_jsx("h4", { className: 'cds--type-heading-01', children: props.name }), onlyOneComponent && (_jsx(ClusterStatusElement, { status: props.healthy === 1 ? 'healthy' : 'unhealthy' })), !onlyOneComponent && (_jsx(ComponentTile.ManyClusterStatusElement, { healthy: props.healthy, unhealthy: props.unhealthy }))] }), _jsx("span", { children: props.info })] }) }) }));
+        return component;
+    };
+    ComponentTile.ManyClusterStatusElement = (props) => {
+        const statusElementProps = [];
+        if (props.healthy > 0) {
+            statusElementProps.push({
+                icon: _jsx(CheckmarkFilled, {}),
+                text: `${props.healthy} healthy`,
+                color: StatusColor.HEALTHY,
+            });
+        }
+        if (props.unhealthy > 0) {
+            statusElementProps.push({
+                icon: _jsx(WarningFilled, {}),
+                text: `${props.unhealthy} unhealthy`,
+                color: StatusColor.UNHEALTHY,
+            });
+        }
+        const statusElements = statusElementProps.map((props, index) => {
+            return (_jsx("div", { 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 })), _jsx("span", { style: { paddingInlineStart: props.icon ? '1.1rem' : '0rem' }, children: props.text })] }) }, `status-${index}`));
+        });
+        const component = (_jsx(Stack, { orientation: 'horizontal', gap: 3, children: statusElements }));
+        return component;
+    };
+})(ComponentTile || (ComponentTile = {}));

package/lib/esm/components/c4-sm-dashboard/explore.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+import type { DashboardActions } from './c4-sm-dashboard.types';
+export declare namespace Explore {
+    interface GroupProps {
+        title: string;
+        links: Array<{
+            label: string;
+            url: string;
+        }>;
+    }
+    export interface Props {
+        title: string;
+        groups: GroupProps[];
+    }
+    export interface InternalProps extends Props {
+        actions: DashboardActions;
+    }
+    export const Component: (props: InternalProps) => JSX.Element;
+    export {};
+}

package/lib/esm/components/c4-sm-dashboard/explore.js

@@ -0,0 +1,29 @@
+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 { Stack, Tile } from '@carbon/react';
+import { C4ExternalLink } from '../c4-external-link/c4-external-link.js';
+export var Explore;
+(function (Explore) {
+    Explore.Component = (props) => {
+        const component = (_jsxs(Tile, { style: {
+                height: '100%',
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gridTemplateRows: 'auto 1fr 3rem',
+                gap: '1rem',
+            }, children: [_jsx("h3", { children: props.title }), _jsx(Stack, { gap: 3, orientation: 'horizontal', children: props.groups.map((group, index) => {
+                        return _jsx(LinkGroupComponent, { ...group }, `group-${index}`);
+                    }) }), _jsx("div", { style: { alignSelf: 'end', justifySelf: 'end' } })] }));
+        return component;
+    };
+    const LinkGroupComponent = (props) => {
+        const component = (_jsxs(Stack, { gap: 4, children: [_jsx("p", { children: props.title }), props.links.map((link, index) => {
+                    return (_jsx(C4ExternalLink, { id: `link-${index}`, label: link.label, href: link.url }, `link-${index}`));
+                })] }));
+        return component;
+    };
+})(Explore || (Explore = {}));

package/lib/esm/components/c4-sm-dashboard/health-status.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import { type ClusterStatus } from '../c4-cluster-overview/applications';
+export declare const HealthStatus: (props: {
+    status: ClusterStatus;
+    text?: string;
+    id: string;
+    size?: "small";
+    tooltip?: string;
+    onClick?: () => void;
+}) => JSX.Element;

package/lib/esm/components/c4-sm-dashboard/health-status.js

@@ -0,0 +1,60 @@
+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 { DefinitionTooltip } from '@carbon/react';
+import { CheckmarkFilled, WarningFilled } from '@carbon/react/icons/index.esm.js';
+import { StatusColor, } from '../c4-cluster-overview/applications.js';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+export const HealthStatus = (props) => {
+    let text = '';
+    if (props.text) {
+        text = props.text;
+    }
+    else {
+        text = props.status === 'healthy' ? 'Healthy' : 'Unhealthy';
+    }
+    const statusProps = {
+        icon: undefined,
+        text,
+        color: StatusColor.UPDATING,
+    };
+    switch (props.status) {
+        case 'unhealthy':
+            statusProps.icon = _jsx(WarningFilled, {});
+            if (props.size === 'small') {
+                statusProps.icon = _jsx(WarningFilled, { size: '16' });
+            }
+            statusProps.color = StatusColor.UNHEALTHY;
+            break;
+        case 'healthy':
+            statusProps.icon = _jsx(CheckmarkFilled, {});
+            if (props.size === 'small') {
+                statusProps.icon = _jsx(CheckmarkFilled, { size: '16' });
+            }
+            statusProps.color = StatusColor.HEALTHY;
+            break;
+    }
+    const StatusText = () => {
+        let component = _jsx(_Fragment, { children: statusProps.text });
+        if (props.onClick) {
+            component = (_jsx(C4LinkButton, { onClick: () => props.onClick?.(), label: statusProps.text }));
+        }
+        return component;
+    };
+    const component = (_jsx("div", { children: _jsxs("div", { style: {
+                position: 'relative',
+            }, children: [statusProps.icon && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        display: 'flex',
+                        color: statusProps.color,
+                    }, children: statusProps.icon })), _jsxs("span", { style: {
+                        paddingInlineStart: statusProps.icon ? '1.1rem' : '0rem',
+                        marginTop: props.size === 'small' ? '0.5rem' : undefined,
+                    }, className: props.size === 'small' ? 'cds--label' : undefined, children: [props.tooltip && (_jsx(DefinitionTooltip, { openOnHover: true, definition: props.tooltip, children: _jsx(StatusText, {}) })), !props.tooltip && _jsx(StatusText, {})] })] }) }, props.id));
+    return component;
+};

package/lib/esm/components/c4-sm-dashboard/overview.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+import type { Cluster, DashboardActions } from './c4-sm-dashboard.types';
+export declare namespace Overview {
+    interface Props {
+        chartTitle: string;
+        unhealthyClustersTitle: string;
+        emptyState: string;
+        automation: Cluster[];
+        actions: DashboardActions;
+        theme?: string;
+    }
+    const Component: (props: Props) => JSX.Element;
+}

package/lib/esm/components/c4-sm-dashboard/overview.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { DonutChart } from '@carbon/charts-react';
+import { Stack, Tile } from '@carbon/react';
+import { ArrowRight, CheckmarkOutline } from '@carbon/react/icons/index.esm.js';
+import { StatusColor } from '../c4-cluster-overview/applications.js';
+import { C4Divider } from '../c4-divider/c4-divider.js';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+import { HealthStatus } from './health-status.js';
+export var Overview;
+(function (Overview) {
+    function getUnhealthyClusters(props) {
+        const data = {
+            healthy: 0,
+            unhealthy: 0,
+            unknown: 0,
+            unhealthyComponents: [],
+        };
+        for (const cluster of props.automation) {
+            if (cluster.components.length === 0) {
+                data.unknown++;
+            }
+            else {
+                const unhealthyComponents = cluster.components.filter((component) => component.status !== 'healthy');
+                if (unhealthyComponents.length > 0) {
+                    data.unhealthy++;
+                    data.unhealthyComponents.push({
+                        clusterId: cluster.id,
+                        clusterName: cluster.name,
+                        components: unhealthyComponents.map((component) => component.name),
+                    });
+                }
+                else {
+                    data.healthy++;
+                }
+            }
+        }
+        return data;
+    }
+    Overview.Component = (props) => {
+        const data = getUnhealthyClusters(props);
+        const component = (_jsxs(Tile, { style: {
+                height: '100%',
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gridTemplateRows: 'auto auto auto auto 1fr auto',
+                gap: '1rem',
+            }, children: [_jsx(MainHeader, { ...props }), _jsx(OverviewChart, { data: data, ...props }), _jsx(C4Divider, {}), _jsx(SubHeader, { ...props }), _jsxs("div", { style: {
+                        height: '100%',
+                        alignSelf: 'stretch',
+                    }, children: [data.unhealthyComponents.length > 0 && (_jsx(UnhealthyClusterComponent, { clusters: data.unhealthyComponents, actions: props.actions })), data.unhealthyComponents.length === 0 && (_jsx(HealthAlertsEmptyState, { ...props }))] }), _jsx(C4LinkButton, { onClick: () => props.actions.viewAllClusters.onClick(), label: props.actions.viewAllClusters.label, icon: _jsx(ArrowRight, {}) })] }));
+        return component;
+    };
+    // //////////////////////////////////////////
+    const MainHeader = (props) => {
+        return _jsx("h3", { children: props.chartTitle });
+    };
+    const SubHeader = (props) => {
+        return _jsx("h4", { children: props.unhealthyClustersTitle });
+    };
+    const OverviewChart = (props) => {
+        const chartSize = '200px';
+        const chartOptions = {
+            height: chartSize,
+            width: chartSize,
+            theme: props.theme,
+            legend: {
+                enabled: false,
+            },
+            toolbar: {
+                enabled: false,
+            },
+            color: {
+                scale: {
+                    Healthy: StatusColor.HEALTHY,
+                    Unhealthy: StatusColor.UNHEALTHY,
+                    Unknown: StatusColor.UPDATING,
+                },
+            },
+            pie: {
+                labels: {
+                    enabled: false,
+                },
+            },
+        };
+        const chartData = [
+            {
+                group: 'Healthy',
+                value: props.data.healthy,
+            },
+            {
+                group: 'Unhealthy',
+                value: props.data.unhealthy,
+            },
+            {
+                group: 'Unknown',
+                value: props.data.unknown,
+            },
+        ];
+        return (_jsxs(Stack, { gap: 5, children: [_jsx("div", { style: {
+                        display: 'grid',
+                        justifyItems: 'center',
+                    }, children: _jsx(DonutChart, { data: chartData, options: chartOptions }) }), _jsxs(Stack, { orientation: 'horizontal', children: [_jsx(ChartLegendItem, { count: props.data.healthy, status: 'healthy' }), _jsx(ChartLegendItem, { count: props.data.unhealthy, status: 'unhealthy' }), _jsx(ChartLegendItem, { count: props.data.unknown, status: 'unknown' })] })] }));
+    };
+    const UnhealthyClusterComponent = (props) => {
+        if (props.clusters.length === 0) {
+            return _jsx(_Fragment, {});
+        }
+        const clusterComponents = props.clusters.map((cluster) => {
+            return (_jsx(HealthStatus, { status: 'unhealthy', text: cluster.clusterName, id: `status-${cluster.clusterName}`, onClick: () => {
+                    props.actions.clusterDetails.onClick(cluster.clusterId);
+                } }, cluster.clusterId));
+        });
+        return _jsx(Stack, { gap: 3, children: clusterComponents });
+    };
+    const HealthAlertsEmptyState = (props) => {
+        return (_jsxs("div", { style: {
+                display: 'grid',
+                justifyContent: 'center',
+                gridTemplateColumns: 'auto',
+                gridTemplateRows: '1fr auto auto 1fr',
+                gap: '0.5rem',
+                height: '100%',
+            }, children: [_jsx("div", { style: { textAlign: 'center', gridRow: 2 }, children: _jsx(CheckmarkOutline, { size: 24 }) }), _jsx("p", { style: { gridRow: 3 }, children: props.emptyState })] }));
+    };
+    const ChartLegendItem = (props) => {
+        if (props.count === 0) {
+            return _jsx(_Fragment, {});
+        }
+        let color = StatusColor.UPDATING;
+        switch (props.status) {
+            case 'healthy':
+                color = StatusColor.HEALTHY;
+                break;
+            case 'unhealthy':
+                color = StatusColor.UNHEALTHY;
+                break;
+        }
+        return (_jsxs("span", { children: [_jsx("span", { className: 'cds--type-heading-04', style: {
+                        marginRight: '0.3rem',
+                        color,
+                    }, children: props.count }), `${props.status.charAt(0).toUpperCase()}${props.status.slice(1)}`] }));
+    };
+})(Overview || (Overview = {}));

package/lib/esm/components/c4-sm-dashboard/usage-tile.d.ts

@@ -0,0 +1,22 @@
+import type { JSX } from 'react';
+export declare namespace UsageTile {
+    interface UsageValueProps {
+        title: string;
+        value: number;
+    }
+    interface Props {
+        title: string;
+        subTitle: string;
+        actions: {
+            view: {
+                label: string;
+                onClick: () => void;
+            };
+        };
+        taskUsers: UsageValueProps;
+        processInstances: UsageValueProps;
+        decisionInstances: UsageValueProps;
+    }
+    const Component: (props: Props) => JSX.Element;
+    const UsageValueTile: (props: UsageValueProps) => JSX.Element;
+}

package/lib/esm/components/c4-sm-dashboard/usage-tile.js

@@ -0,0 +1,35 @@
+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 { Column, Grid, Layer, Stack, Tile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons/index.esm.js';
+import { STYLES } from '../c4-billing-page/c4-billing-page.js';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+export var UsageTile;
+(function (UsageTile) {
+    UsageTile.Component = (props) => {
+        const component = (_jsx(Tile, { children: _jsxs(Stack, { gap: 3, children: [_jsxs("div", { style: {
+                            display: 'grid',
+                            gap: '0.5rem',
+                            gridTemplateColumns: 'auto 1fr auto',
+                            height: '30px',
+                        }, children: [_jsx("h3", { children: props.title }), _jsx("p", { className: 'cds--label', style: { alignSelf: 'end' }, children: props.subTitle }), _jsx(C4LinkButton, { onClick: () => props.actions.view.onClick(), label: props.actions.view.label, icon: _jsx(ArrowRight, {}) })] }), _jsxs(Grid, { style: {
+                            ...STYLES.grid,
+                        }, children: [_jsx(Column, { span: 4, style: {
+                                    ...STYLES.grid,
+                                }, children: _jsx(UsageTile.UsageValueTile, { ...props.taskUsers }) }), _jsx(Column, { span: 4, style: {
+                                    ...STYLES.grid,
+                                }, children: _jsx(UsageTile.UsageValueTile, { ...props.processInstances }) }), _jsx(Column, { span: 4, style: {
+                                    ...STYLES.grid,
+                                }, children: _jsx(UsageTile.UsageValueTile, { ...props.decisionInstances }) })] })] }) }));
+        return component;
+    };
+    UsageTile.UsageValueTile = (props) => {
+        const value = new Intl.NumberFormat('en-US').format(props.value);
+        const component = (_jsx(Layer, { children: _jsx(Tile, { children: _jsxs(Stack, { gap: 3, children: [_jsx("h4", { className: 'cds--type-heading-01', children: props.title }), _jsx("p", { className: 'cds--type-heading-04', children: value })] }) }) }));
+        return component;
+    };
+})(UsageTile || (UsageTile = {}));

package/lib/esm/components/c4-stackdriver-links/c4-stackdriver-links.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4StackDriverLinksProps } from './c4-stackdriver-links.types';
+export declare const C4StackDriverLinks: ({ query, }: C4StackDriverLinksProps) => JSX.Element;

package/lib/esm/components/c4-stackdriver-links/c4-stackdriver-links.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+export const C4StackDriverLinks = ({ query, }) => {
+    const { unfiltered, papertrail } = generateLinks(query);
+    return (_jsxs(_Fragment, { children: [_jsx(C4LinkButton, { inline: true, label: 'logs', onClick: () => window.open(unfiltered, '_blank') }), ' ', _jsx(C4LinkButton, { inline: true, label: 'papertrail', onClick: () => window.open(papertrail, '_blank') })] }));
+};
+function generateLinks(query) {
+    let rawQuery;
+    if ('orgId' in query) {
+        rawQuery = `jsonPayload.orgId="${query.orgId}"`;
+    }
+    else if ('userId' in query) {
+        rawQuery = `jsonPayload.userId="${query.userId}"`;
+    }
+    else if ('clusterId' in query) {
+        rawQuery = `jsonPayload.clusterId="${query.clusterId}"`;
+    }
+    else {
+        throw new Error('Invalid query');
+    }
+    const project = `camunda-saas-${query.stage}`;
+    return {
+        unfiltered: `https://console.cloud.google.com/logs/query;query=${encodeURI(rawQuery)}?project=${project}`,
+        papertrail: `https://console.cloud.google.com/logs/query;query=${encodeURI(rawQuery)}%0AjsonPayload.paperTrail%3D%22true%22?project=${project}`,
+    };
+}