@scality/core-ui 0.115.0

package/dist/components/globalhealthbar/GlobalHealthBar.component.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { useMemo } from 'react';
+import { VegaChart } from '../vegachartv2/VegaChartV2.component';
+import { useTheme } from 'styled-components';
+import { formatValue } from './tooltip/index';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+function GlobalHealthBar({ id, alerts, start, end, height = 8, tooltipPosition = TOP, }) {
+    const theme = useTheme();
+    const trimAlerts = alerts.map((alert) => {
+        if (new Date(alert.startsAt) < new Date(start)) {
+            return { ...alert, startsAt: start };
+        }
+        return { ...alert };
+    });
+    trimAlerts.unshift({
+        startsAt: start,
+        endsAt: end,
+        severity: 'healthy',
+    });
+    const spec = {
+        width: 'container',
+        height,
+        data: {
+            values: trimAlerts,
+        },
+        transform: [
+            {
+                calculate: "datum.description !== '' ? 'View details on alert page' : ''",
+                as: 'title',
+            },
+        ],
+        view: {
+            cornerRadius: 6,
+        },
+        config: {
+            style: {
+                cell: {
+                    stroke: 'transparent',
+                    strokeWidth: 0,
+                },
+            },
+        },
+        layer: [
+            // Paint the entire bar with green
+            {
+                mark: {
+                    type: 'rect',
+                    clip: true,
+                },
+                encoding: {
+                    color: {
+                        value: theme.statusHealthy,
+                    },
+                },
+            }, // Paint the timespan as x-axis
+            {
+                mark: {
+                    type: 'rect',
+                    cursor: 'pointer',
+                    clip: true,
+                },
+                encoding: {
+                    x: {
+                        field: 'startsAt',
+                        type: 'temporal',
+                        title: null,
+                        stack: null,
+                        axis: {
+                            format: '%d%b %H:%M:%S',
+                            ticks: true,
+                            tickCount: 5,
+                            //A desired number of ticks, for axes visualizing quantitative scales. The resulting number may be different so that values are “nice” (multiples of 2, 5, 10) and lie within the underlying scale’s range.
+                            labelFlush: 20,
+                            labelColor: theme.textSecondary,
+                        },
+                    },
+                    x2: {
+                        field: 'endsAt',
+                    },
+                    color: {
+                        value: theme.statusHealthy,
+                    },
+                },
+            },
+            {
+                mark: {
+                    type: 'rect',
+                    tooltip: true,
+                    cursor: 'pointer',
+                    clip: true,
+                },
+                params: [
+                    {
+                        name: 'highlight',
+                        // The supported DOM event types for mark items are https://vega.github.io/vega/docs/event-streams/
+                        select: {
+                            type: 'point',
+                            on: 'mouseover',
+                            clear: 'mouseout',
+                        },
+                    },
+                ],
+                encoding: {
+                    x: {
+                        timeUnit: 'yearmonthdatehoursminutes',
+                        field: 'startsAt',
+                        type: 'temporal',
+                        title: null,
+                    },
+                    x2: {
+                        field: 'endsAt',
+                    },
+                    color: {
+                        field: 'severity',
+                        type: 'nominal',
+                        title: 'null',
+                        scale: {
+                            domain: ['healthy', 'critical', 'unavailable', 'warning'],
+                            range: [
+                                theme.statusHealthy,
+                                theme.statusCritical,
+                                theme.textSecondary,
+                                theme.statusWarning,
+                            ],
+                        },
+                        legend: null,
+                    },
+                    tooltip: [
+                        {
+                            field: 'severity',
+                            title: 'Severity',
+                        },
+                        {
+                            field: 'startsAt',
+                            title: 'Start',
+                            type: 'temporal',
+                            timeUnit: 'yearmonthdatehoursminutes',
+                        },
+                        {
+                            field: 'endsAt',
+                            title: 'End',
+                            type: 'temporal',
+                            timeUnit: 'yearmonthdatehoursminutes',
+                        },
+                        {
+                            field: 'title',
+                            title: 'title',
+                        },
+                        {
+                            field: 'description',
+                            title: 'Description',
+                        },
+                    ],
+                    opacity: {
+                        condition: {
+                            param: 'highlight',
+                            value: 1,
+                        },
+                        value: 0.6,
+                    },
+                },
+            },
+        ],
+    };
+    return (_jsx(VegaChart, { className: "sc-globalhealthbar", spec: spec, theme: 'custom', tooltipPosition: tooltipPosition, formatTooltip: useMemo(() => formatValue(), []) }));
+}
+export { GlobalHealthBar };

package/dist/components/globalhealthbar/tooltip/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Format the value to be shown in the tooltip.
+ *
+ * @param value The value to show in the tooltip.
+ * @param valueToHtml Function to convert a single cell value to an HTML string
+ */
+export declare function formatValue(): (value: any, valueToHtml: (value: any) => string, maxDepth: number) => string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/globalhealthbar/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/globalhealthbar/tooltip/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,WAAW,YAEhB,GAAG,uBACW,GAAG,KAAK,MAAM,YACzB,MAAM,KACf,MAAM,CAwDV"}

package/dist/components/globalhealthbar/tooltip/index.js

@@ -0,0 +1,55 @@
+// @ts-nocheck
+import { stringify } from 'vega-lite';
+import { isArray, isObject, isString } from 'vega-util';
+/**
+ * Format the value to be shown in the tooltip.
+ *
+ * @param value The value to show in the tooltip.
+ * @param valueToHtml Function to convert a single cell value to an HTML string
+ */
+export function formatValue() {
+    return (value, valueToHtml, maxDepth) => {
+        if (isArray(value)) {
+            return `[${value
+                .map((v) => valueToHtml(isString(v) ? v : stringify(v, maxDepth)))
+                .join(', ')}]`;
+        }
+        if (isObject(value)) {
+            let content = '';
+            const { title, image, ...rest } = value;
+            if (title) {
+                content += `<h2 style="text-align: center;">${valueToHtml(title)}</h2>`;
+            }
+            if (image) {
+                content += `<img src="${valueToHtml(image)}">`;
+            }
+            const keys = Object.keys(rest);
+            if (keys.length > 0) {
+                content += '<table>';
+                for (const key of keys) {
+                    let val = rest[key];
+                    // ignore undefined properties
+                    if (val === undefined) {
+                        continue;
+                    }
+                    if (isObject(val)) {
+                        val = stringify(val, maxDepth);
+                    }
+                    if (val && val !== 'undefined' && val !== 'null') {
+                        content += `<tr>
+              <td class="key" style="text-align: left;">
+                  ${valueToHtml(key)}:
+              </td>
+              <td class="value" style="text-align: right;">
+                  ${valueToHtml(val)}
+              </td>
+            </tr>`;
+                    }
+                }
+                content += `</table>`;
+            }
+            return content || '{}'; // show empty object if there are no properties
+        }
+        return valueToHtml(value);
+    };
+}

package/dist/components/healthselectorv2/HealthSelector.component.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { OptionProps, SelectProps } from '../selectv2/Selectv2.component';
+type OptionValue = {
+    label?: string;
+} & OptionProps;
+type Props = {
+    options?: OptionValue[];
+} & SelectProps;
+export declare const AllStatusIcon: () => JSX.Element;
+export declare const defaultOptions: readonly [{
+    readonly icon: JSX.Element;
+    readonly label: "All Status";
+    readonly value: "all";
+}, {
+    readonly icon: JSX.Element;
+    readonly label: "Healthy";
+    readonly value: "healthy";
+}, {
+    readonly icon: JSX.Element;
+    readonly label: "Warning";
+    readonly value: "warning";
+}, {
+    readonly icon: JSX.Element;
+    readonly label: "Critical";
+    readonly value: "critical";
+}, {
+    readonly icon: JSX.Element;
+    readonly label: "Unknown";
+    readonly value: "unknown";
+}];
+export declare const optionsDefaultConfiguration: {
+    all: {
+        readonly icon: JSX.Element;
+        readonly label: "All Status";
+        readonly value: "all";
+    };
+    healthy: {
+        readonly icon: JSX.Element;
+        readonly label: "Healthy";
+        readonly value: "healthy";
+    };
+    warning: {
+        readonly icon: JSX.Element;
+        readonly label: "Warning";
+        readonly value: "warning";
+    };
+    critical: {
+        readonly icon: JSX.Element;
+        readonly label: "Critical";
+        readonly value: "critical";
+    };
+    unknown: {
+        readonly icon: JSX.Element;
+        readonly label: "Unknown";
+        readonly value: "unknown";
+    };
+};
+declare function HealthSelectorv2(props: Props): JSX.Element;
+export declare const HealthSelector: typeof HealthSelectorv2;
+export {};
+//# sourceMappingURL=HealthSelector.component.d.ts.map

package/dist/components/healthselectorv2/HealthSelector.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HealthSelector.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/healthselectorv2/HealthSelector.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EACL,WAAW,EAEX,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,WAAW,CAAC;AAChB,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB,GAAG,WAAW,CAAC;AAqBhB,eAAO,MAAM,aAAa,mBASzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;EA0BjB,CAAC;AAEX,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;CAMvC,CAAC;AAEF,iBAAS,gBAAgB,CAAC,KAAK,EAAE,KAAK,eAiBrC;AAED,eAAO,MAAM,cAAc,yBAAmB,CAAC"}

package/dist/components/healthselectorv2/HealthSelector.component.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { useTheme } from 'styled-components';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Select, } from '../selectv2/Selectv2.component';
+const SelectStyle = styled(Select) `
+  .sc-select__control {
+    background-color: ${getThemePropSelector('buttonSecondary')};
+
+    &.sc-select__control--is-focused {
+      background-color: ${getThemePropSelector('buttonSecondary')};
+    }
+    .sc-select__value-container {
+      overflow: visible;
+    }
+
+    &.sc-select__control--menu-is-open {
+      .sc-select__indicator {
+        transform: rotate(180deg);
+      }
+    }
+  }
+`;
+export const AllStatusIcon = () => {
+    const theme = useTheme();
+    return (_jsxs("svg", { viewBox: "0 0 150 100", xmlns: "http://www.w3.org/2000/svg", height: "16px", children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: theme.statusHealthy }), _jsx("circle", { cx: "75", cy: "50", r: "50", fill: theme.statusWarning }), _jsx("circle", { cx: "100", cy: "50", r: "50", fill: theme.statusCritical })] }));
+};
+export const defaultOptions = [
+    {
+        icon: _jsx(AllStatusIcon, {}),
+        label: 'All Status',
+        value: 'all',
+    },
+    {
+        icon: _jsx(Icon, { name: "Check-circle", color: "statusHealthy", size: "lg" }),
+        label: 'Healthy',
+        value: 'healthy',
+    },
+    {
+        icon: _jsx(Icon, { name: "Exclamation-circle", color: "statusWarning", size: "lg" }),
+        label: 'Warning',
+        value: 'warning',
+    },
+    {
+        icon: _jsx(Icon, { name: "Times-circle", color: "statusCritical", size: "lg" }),
+        label: 'Critical',
+        value: 'critical',
+    },
+    {
+        icon: _jsx(Icon, { name: "Info", color: "infoPrimary", size: "lg" }),
+        label: 'Unknown',
+        value: 'unknown',
+    },
+];
+export const optionsDefaultConfiguration = {
+    all: defaultOptions[0],
+    healthy: defaultOptions[1],
+    warning: defaultOptions[2],
+    critical: defaultOptions[3],
+    unknown: defaultOptions[4],
+};
+function HealthSelectorv2(props) {
+    const { options = defaultOptions, value, ...selectRest } = props;
+    let selectValue = value !== null && value !== void 0 ? value : options[0].value;
+    return (_jsx(SelectStyle, { ...selectRest, value: selectValue, children: options.map((option, index) => {
+            const { ...optionRest } = option;
+            return (_jsx(Select.Option, { ...optionRest, children: option.label }, index));
+        }) }));
+}
+export const HealthSelector = HealthSelectorv2;

package/dist/components/icon/Icon.component.d.ts

@@ -0,0 +1,134 @@
+import { CSSProperties } from 'react';
+import { brand } from '../../style/theme';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+export declare const iconTable: {
+    Account: string;
+    Backend: string;
+    Tape: string;
+    'Node-backend': string;
+    'Volume-backend': string;
+    'Node-pdf': string;
+    'Volume-pdf': string;
+    Network: string;
+    Bucket: string;
+    'Cloud-backend': string;
+    Datacenter: string;
+    'Simple-user': string;
+    User: string;
+    Group: string;
+    Alert: string;
+    Bell: string;
+    'Lat-menu': string;
+    Dashboard: string;
+    Workflow: string;
+    Expiration: string;
+    Replication: string;
+    Transition: string;
+    Discovery: string;
+    Metrics: string;
+    Edit: string;
+    Logs: string;
+    Lock: string;
+    'Lock-open': string;
+    'Create-add': string;
+    Delete: string;
+    Save: string;
+    'External-link': string;
+    Link: string;
+    Unlink: string;
+    Close: string;
+    'Dropdown-down': string;
+    'Dropdown-up': string;
+    Search: string;
+    More: string;
+    Info: string;
+    Sync: string;
+    Export: string;
+    Copy: string;
+    'Simple-upload': string;
+    Upload: string;
+    'Add-plus': string;
+    Minus: string;
+    'Remove-minus': string;
+    Sort: string;
+    'Sort-up': string;
+    'Sort-down': string;
+    Calendar: string;
+    'Calendar-minus': string;
+    'Arrow-up': string;
+    'Arrow-down': string;
+    'Arrow-right': string;
+    'Arrow-left': string;
+    'Arrow-alt-circle-up': string;
+    Folder: string;
+    File: string;
+    'File-invoice': string;
+    'Deletion-marker': string;
+    'Map-marker': string;
+    Location: string;
+    'Info-circle': string;
+    'Exclamation-triangle': string;
+    'Exclamation-circle': string;
+    Exclamation: string;
+    Check: string;
+    Protected: string;
+    'Chevron-left': string;
+    'Chevron-right': string;
+    'Chevron-down': string;
+    'Chevron-up': string;
+    'Angle-right': string;
+    'Angle-double-right': string;
+    Language: string;
+    Theme: string;
+    Documentation: string;
+    Support: string;
+    EULA: string;
+    'Log-out': string;
+    Hourglass: string;
+    Pause: string;
+    'Pause-circle': string;
+    'Play-circle': string;
+    Upgrade: string;
+    Expansion: string;
+    Rebalance: string;
+    Maintenance: string;
+    Role: string;
+    'Change-erasure': string;
+    'Circle-health': string;
+    'Circle-empty': string;
+    'Dot-circle': string;
+    'Check-circle': string;
+    'Times-circle': string;
+    Toolbox: string;
+    Cubes: string;
+    'File-alt': string;
+    Policy: string;
+    Pen: string;
+    Pencil: string;
+    Eye: string;
+    EyeSlash: string;
+    Snowflake: string;
+    Key: string;
+    Filter: string;
+    Download: string;
+    Certificate: string;
+    Redo: string;
+    Eraser: string;
+    'ID-card': string;
+    Setting: string;
+};
+export type IconName = keyof typeof iconTable;
+export type IconColor = keyof typeof brand;
+type Props = {
+    name: IconName;
+    size?: SizeProp;
+    color?: IconColor | CSSProperties['color'];
+    ariaLabel?: string;
+    withWrapper?: boolean;
+};
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    size: SizeProp;
+}, never>;
+declare function Icon({ withWrapper, ...props }: Props): JSX.Element;
+export { Icon };
+//# sourceMappingURL=Icon.component.d.ts.map

package/dist/components/icon/Icon.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}