@scality/core-ui 0.115.0

package/src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx

@@ -0,0 +1,201 @@
+// @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';
+type Position = typeof TOP | typeof BOTTOM;
+export type GlobalHealthProps = {
+  id: string;
+  alerts: {
+    description: string;
+    startsAt: string;
+    endsAt: string;
+    severity: string;
+  }[];
+  start: string;
+  end: string;
+  height?: number;
+  tooltipPosition?: Position;
+};
+
+function GlobalHealthBar({
+  id,
+  alerts,
+  start,
+  end,
+  height = 8,
+  tooltipPosition = TOP,
+}: GlobalHealthProps) {
+  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 (
+    <VegaChart
+      className="sc-globalhealthbar"
+      spec={spec}
+      theme={'custom'}
+      tooltipPosition={tooltipPosition}
+      formatTooltip={useMemo(() => formatValue(), [])}
+    ></VegaChart>
+  );
+}
+
+export { GlobalHealthBar };

package/src/lib/components/globalhealthbar/tooltip/index.ts

@@ -0,0 +1,72 @@
+// @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: any,
+    valueToHtml: (value: any) => string,
+    maxDepth: number,
+  ): string => {
+    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/src/lib/components/healthselectorv2/HealthSelector.component.test.tsx

@@ -0,0 +1,62 @@
+import {
+  HealthSelector,
+  optionsDefaultConfiguration,
+} from './HealthSelector.component';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { getWrapper } from '../../testUtils';
+describe('HealthSelector', () => {
+  it('should display correctly without any props and select first option', () => {
+    const { Wrapper } = getWrapper();
+    const { getByText } = render(
+      <Wrapper>
+        <HealthSelector id="health" onChange={() => {}} />
+      </Wrapper>,
+    );
+    const input = screen.getByRole('textbox');
+
+    // open the menu
+    userEvent.click(input);
+    const healthyOption = getByText(/healthy/i);
+    expect(healthyOption).toBeInTheDocument();
+  });
+  it('should call the onChange function when it change', () => {
+    const { Wrapper } = getWrapper();
+    const onChange = jest.fn();
+    const { getByText } = render(
+      <Wrapper>
+        <HealthSelector id="health" onChange={onChange} />
+      </Wrapper>,
+    );
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
+    const warningOption = getByText(/warning/i);
+    userEvent.click(warningOption);
+    expect(onChange).toHaveBeenCalledWith('warning');
+  });
+  it('should not display hidden options', () => {
+    const { Wrapper } = getWrapper();
+    const { queryByText } = render(
+      <Wrapper>
+        <HealthSelector
+          id="health"
+          onChange={() => {}}
+          options={[
+            optionsDefaultConfiguration.all,
+            optionsDefaultConfiguration.warning,
+            optionsDefaultConfiguration.critical,
+            optionsDefaultConfiguration.unknown,
+          ]}
+        />
+      </Wrapper>,
+    );
+
+    // open the menu
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
+    const healthyOption = queryByText(/healthy/i);
+    expect(healthyOption).not.toBeInTheDocument();
+  });
+});

package/src/lib/components/healthselectorv2/HealthSelector.component.tsx

@@ -0,0 +1,103 @@
+import styled, { useTheme } from 'styled-components';
+
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import {
+  OptionProps,
+  Select,
+  SelectProps,
+} from '../selectv2/Selectv2.component';
+
+type OptionValue = {
+  label?: string;
+} & OptionProps;
+type Props = {
+  options?: OptionValue[];
+} & SelectProps;
+
+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 (
+    <svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg" height="16px">
+      <circle cx="50" cy="50" r="50" fill={theme.statusHealthy} />
+      <circle cx="75" cy="50" r="50" fill={theme.statusWarning} />
+      <circle cx="100" cy="50" r="50" fill={theme.statusCritical} />
+    </svg>
+  );
+};
+
+export const defaultOptions = [
+  {
+    icon: <AllStatusIcon />,
+    label: 'All Status',
+    value: 'all',
+  },
+  {
+    icon: <Icon name="Check-circle" color="statusHealthy" size="lg" />,
+    label: 'Healthy',
+    value: 'healthy',
+  },
+  {
+    icon: <Icon name="Exclamation-circle" color="statusWarning" size="lg" />,
+    label: 'Warning',
+    value: 'warning',
+  },
+  {
+    icon: <Icon name="Times-circle" color="statusCritical" size="lg" />,
+    label: 'Critical',
+    value: 'critical',
+  },
+  {
+    icon: <Icon name="Info" color="infoPrimary" size="lg" />,
+    label: 'Unknown',
+    value: 'unknown',
+  },
+] as const;
+
+export const optionsDefaultConfiguration = {
+  all: defaultOptions[0],
+  healthy: defaultOptions[1],
+  warning: defaultOptions[2],
+  critical: defaultOptions[3],
+  unknown: defaultOptions[4],
+};
+
+function HealthSelectorv2(props: Props) {
+  const { options = defaultOptions, value, ...selectRest } = props;
+
+  let selectValue = value ?? options[0].value;
+
+  return (
+    <SelectStyle {...selectRest} value={selectValue}>
+      {options.map((option, index) => {
+        const { ...optionRest } = option;
+        return (
+          <Select.Option key={index} {...optionRest}>
+            {option.label}
+          </Select.Option>
+        );
+      })}
+    </SelectStyle>
+  );
+}
+
+export const HealthSelector = HealthSelectorv2;