@scality/core-ui 0.115.0

package/src/lib/components/linetemporalchart/MetricTimespanProvider.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useEffect, useState, createContext, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { QueryTimeSpan } from '../constants';
+import { queryTimeSpansCodes } from '../constants';
+export const MetricsTimeSpanContext = createContext<QueryTimeSpan | null>(null);
+export const MetricsTimeSpanProvider = ({
+  children,
+}: {
+  children: JSX.Element;
+}) => {
+  // the default timespan is the last 24h
+  const [queryTimeSpanCode, setQueryTimeSpanCode] = useState(
+    queryTimeSpansCodes[1],
+  );
+  const urlSearchParams = new URLSearchParams(useLocation().search);
+  const queryTimeSpan = urlSearchParams.get('from');
+  // Sync url timespan to local timespan
+  useEffect(() => {
+    if (queryTimeSpan) {
+      const queryTimeSpanCode = queryTimeSpansCodes.find(
+        (item) => item.query === queryTimeSpan,
+      );
+
+      if (queryTimeSpanCode && queryTimeSpanCode.label) {
+        setQueryTimeSpanCode(queryTimeSpanCode);
+      } else {
+        console.error(
+          'Unexpected timespan query parameter defined in the URL.',
+        );
+      }
+    }
+  }, [queryTimeSpan]);
+  return (
+    <MetricsTimeSpanContext.Provider value={queryTimeSpanCode}>
+      {children}
+    </MetricsTimeSpanContext.Provider>
+  );
+};
+export const useMetricsTimeSpan = (): QueryTimeSpan => {
+  const metricsTimeSpanContext = useContext(MetricsTimeSpanContext);
+
+  if (!metricsTimeSpanContext) {
+    throw new Error(
+      "useMetricsTimeSpan hook can't be use outside <MetricsTimeSpanProvider/>",
+    );
+  }
+
+  return metricsTimeSpanContext;
+};

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

@@ -0,0 +1,178 @@
+// @ts-nocheck
+import { stringify } from 'vega-lite';
+import { Options } from 'vega-tooltip';
+import { Handler } from 'vega-tooltip';
+import { isArray, isObject, isString } from 'vega-util';
+import { spacing } from '../../../style/theme';
+import { Serie } from '../LineTemporalChart.component';
+export function defaultRenderTooltipSerie({
+  color,
+  isLineDashed,
+  name,
+  value,
+  key,
+}: {
+  color?: string;
+  isLineDashed?: boolean;
+  name: string;
+  value: string;
+  key: string;
+}) {
+  return `<tr>
+    <td class="color">
+    ${
+      color !== undefined
+        ? `<span style='background: ${
+            isLineDashed
+              ? `repeating-linear-gradient(to right,${color} 0,${color} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
+              : color
+          };width: ${spacing.sp8};height:${
+            spacing.sp2
+          };display: inline-block;vertical-align: middle;'></span>`
+        : ''
+    }
+    </td>
+    <td class="key" style="text-align: left;">
+        ${name}
+    </td>
+    <td class="value" style="text-align: right;">
+      ${value}
+    </td>
+  </tr>`;
+}
+export class TooltipHandlerWithPaint extends Handler {
+  constructor(options?: Options, onHover?: (datum: any) => void) {
+    super(options);
+    this.prevCall = this.call;
+    this.onHover = onHover;
+    this.call = this.newCall.bind(this);
+  }
+
+  newCall(handler: any, event: MouseEvent, item: any, value: any) {
+    if (
+      item &&
+      this.onHover &&
+      JSON.stringify(value) !== JSON.stringify(this.value)
+    ) {
+      this.onHover(item.datum.datum);
+    }
+
+    this.handler = handler;
+    this.event = event;
+    this.item = item;
+    this.value = value;
+    this.prevCall(handler, event, item, value);
+  }
+
+  paint() {
+    this.prevCall(this.handler, this.event, this.item, this.value);
+  }
+}
+
+/**
+ * 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(
+  series: Serie[],
+  customizedColorRange: string[],
+  colorRange: string[],
+  unitLabel: string,
+  yAxisType?: 'default' | 'percentage' | 'symmetrical',
+  renderTooltipSerie: (
+    arg0: {
+      color?: string;
+      isLineDashed?: boolean;
+      name: string;
+      value: string;
+      key: string;
+      unitLabel: string;
+    },
+    tooltipData: any,
+  ) => string = defaultRenderTooltipSerie,
+) {
+  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);
+          }
+
+          const currentSerie = series.find(
+            (serie) =>
+              serie.getTooltipLabel(serie.metricPrefix, serie.resource) === key,
+          );
+          const currentSerieIndex = series.findIndex(
+            (serie) =>
+              serie.getTooltipLabel(serie.metricPrefix, serie.resource) === key,
+          );
+          const serieIndex =
+            yAxisType === 'symmetrical' && !customizedColorRange.length // $FlowFixMe
+              ? [...new Set(series.map((serie) => serie.resource))].findIndex(
+                  (serieResource) =>
+                    serieResource ===
+                    (currentSerie ? currentSerie.resource : null),
+                )
+              : currentSerieIndex;
+          const serieColorRange = customizedColorRange.length
+            ? customizedColorRange
+            : colorRange;
+          content += renderTooltipSerie(
+            {
+              key,
+              color:
+                serieIndex !== -1 ? serieColorRange[serieIndex] : undefined,
+              isLineDashed:
+                serieIndex !== -1 ? series[serieIndex].isLineDashed : undefined,
+              name: valueToHtml(key),
+              value: val !== 'NaN' ? `${valueToHtml(val)} ${unitLabel}` : '-',
+              unitLabel,
+            },
+            value,
+          );
+        }
+
+        content += `</table>`;
+      }
+
+      return content || '{}'; // show empty object if there are no properties
+    }
+
+    return valueToHtml(value);
+  };
+}

package/src/lib/components/loader/Loader.component.tsx

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components';
+
+import { LoaderIcon } from '../../icons/scality-loading';
+import { fontSize, svgSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { LOADER_SIZE as SIZE } from '../constants';
+type Props = {
+  size?: keyof typeof SIZE;
+  color?: string;
+  children?: JSX.Element;
+  centered?: boolean;
+};
+const LoaderContainer = styled.div<{
+  size: keyof typeof SIZE;
+  centered?: boolean;
+}>`
+  display: flex;
+  ${(props) => {
+    return css`
+      font-size: ${fontSize[props.size]};
+      svg {
+        height: ${svgSize[props.size]};
+        width: ${svgSize[props.size]};
+        fill: ${props.color};
+      }
+    `;
+  }}
+
+  ${(props) => {
+    if (props.centered)
+      return css`
+        height: 100vh;
+        justify-content: center;
+        align-items: center;
+      `;
+  }}
+`;
+const LoaderText = styled.span`
+  padding: 10px 0;
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const LoaderTextDiv = styled.span`
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+`;
+
+function Loader({
+  children,
+  color = '#A14FBF',
+  size = SIZE.large,
+  centered = false,
+  ...rest
+}: Props) {
+  return (
+    <LoaderContainer
+      size={size}
+      color={color}
+      centered={centered}
+      className="sc-loader"
+      {...rest}
+    >
+      <LoaderTextDiv>
+        <LoaderIcon />
+        {children && <LoaderText> {children}</LoaderText>}
+      </LoaderTextDiv>
+    </LoaderContainer>
+  );
+}
+
+export { Loader };

package/src/lib/components/modal/Modal.component.tsx

@@ -0,0 +1,121 @@
+import { ReactNode, useLayoutEffect, useRef } from 'react';
+import ReactDom from 'react-dom';
+import styled from 'styled-components';
+import { Wrap, spacing } from '../../spacing';
+import { zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Text } from '../text/Text.component';
+
+type Props = {
+  isOpen: boolean;
+  close?: () => void;
+  title: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  subTitle?: ReactNode;
+  role?: 'dialog' | 'alertdialog';
+};
+const ModalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: ${zIndex.modal};
+`;
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+  color: ${getThemePropSelector('textPrimary')};
+  border-radius: 5px;
+  overflow: hidden;
+  min-width: 250px;
+  min-height: 150px;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  max-height: calc(100vh - ${spacing.r24} - ${spacing.r24});
+`;
+const ModalHeader = styled.div`
+  display: flex;
+  padding: ${spacing.r16} ${spacing.r16} ${spacing.r16} ${spacing.r32};
+  background-color: ${(props) => props.theme.backgroundLevel3};
+`;
+
+const ModalBody = styled.div`
+  padding: ${spacing.r32};
+  flex-grow: 1;
+  background-color: ${(props) => props.theme.backgroundLevel4};
+  overflow-y: auto;
+`;
+const ModalFooter = styled.div`
+  padding: ${spacing.r16};
+  background-color: ${(props) => props.theme.backgroundLevel3};
+`;
+
+const Modal = ({
+  isOpen,
+  close,
+  title,
+  children,
+  footer,
+  subTitle,
+  role = 'dialog',
+  ...rest
+}: Props) => {
+  const modalContainer = useRef(document.createElement('div'));
+
+  useLayoutEffect(() => {
+    document.body && document.body.prepend(modalContainer.current);
+    return () => {
+      document.body && document.body.removeChild(modalContainer.current);
+    };
+  }, [modalContainer]);
+  return isOpen
+    ? ReactDom.createPortal(
+        <ModalContainer
+          className="sc-modal"
+          role={role}
+          aria-modal="true"
+          aria-labelledby="dialog_label"
+          aria-describedby="dialog_desc"
+          {...rest}
+        >
+          <ModalContent className="sc-modal-content">
+            <ModalHeader className="sc-modal-header">
+              <Wrap style={{ flex: 1 }}>
+                <Text variant="Larger" id="dialog_label">
+                  {title}
+                </Text>
+                {close ? (
+                  <Button
+                    icon={<Icon name="Close" />}
+                    onClick={close}
+                    tooltip={{
+                      overlay: 'Close modal',
+                    }}
+                  />
+                ) : (
+                  <>{subTitle}</>
+                )}
+              </Wrap>
+            </ModalHeader>
+            <ModalBody className="sc-modal-body" id="dialog_desc">
+              {children}
+            </ModalBody>
+            {footer && (
+              <ModalFooter className="sc-modal-footer">{footer}</ModalFooter>
+            )}
+          </ModalContent>
+        </ModalContainer>,
+        modalContainer.current,
+      )
+    : null;
+};
+
+export { Modal };

package/src/lib/components/multiselect/MultiSelect.component.tsx

@@ -0,0 +1,158 @@
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Button } from './../button/Button.component';
+import { Checkbox } from './../checkbox/Checkbox.component';
+import { Select } from './../select/Select.component';
+
+export type ItemProps = {
+  selected?: boolean;
+  label: string;
+  description?: string;
+  onSelect?: (arg0: any, arg1: any) => void;
+  //on checkbox click
+  onItemRemove?: (arg0: any, arg1: any) => void;
+};
+export type OptionProps = {
+  label: string;
+  value: string | number;
+};
+export type SearchProps = {
+  placeholder?: string;
+  options: Array<OptionProps>;
+  //The options displayed in search suggestion
+  onSelect: (arg0: any) => void;
+  //on option click
+  onAdd?: (arg0: any) => void;
+  selectedOption: any;
+};
+type MultiSelectProps = {
+  title?: string;
+  items: Array<ItemProps>;
+  search?: SearchProps;
+  onItemRemove?: (arg0: any, arg1: any) => void; //on item remove button click
+};
+const MultiSelectContainer = styled.div`
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const MultiSelectTitle = styled.h3`
+  padding: ${spacing.r16} 0;
+  margin: 0;
+  font-weight: ${fontWeight.bold};
+  font-size: ${fontSize.large};
+`;
+const MultiSelectItemContainer = styled.div`
+  margin: ${spacing.r4} 0;
+  padding: ${spacing.r8} 0;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid gray;
+  &:last-child {
+    border: none;
+  }
+`;
+const MultiSelectSearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  .sc-select-container {
+    width: 100%;
+  }
+  .sc-button {
+    margin: 0 ${spacing.r8};
+  }
+`;
+const MultiSelectItemLeft = styled.div`
+  .sc-checkbox,
+  .sc-button {
+    margin: 0 ${spacing.r8};
+  }
+`;
+const MultiSelectItemCenter = styled.div`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+`;
+const MultiSelectItemRight = styled.div`
+  padding: 0 ${spacing.r16};
+`;
+const MultiSelectItemLabel = styled.span`
+  font-size: ${fontSize.large};
+`;
+const MultiSelectItemDescription = styled.span``;
+
+function MultiSelectItem(props: ItemProps) {
+  const { selected, label, description, onItemRemove, onSelect } = props;
+  return (
+    <MultiSelectItemContainer className="sc-multi-select-item">
+      <MultiSelectItemLeft className="sc-multi-select-item-left">
+        {typeof selected === 'boolean' && onSelect && (
+          <Checkbox
+            checked={selected}
+            onChange={(event) => onSelect(label, event)}
+          />
+        )}
+      </MultiSelectItemLeft>
+      <MultiSelectItemCenter className="sc-multi-select-item-center">
+        <MultiSelectItemLabel className="sc-multi-select-item-label">
+          {label}
+        </MultiSelectItemLabel>
+        {description && (
+          <MultiSelectItemDescription className="sc-multi-select-item-description">
+            {description}
+          </MultiSelectItemDescription>
+        )}
+      </MultiSelectItemCenter>
+      <MultiSelectItemRight className="sc-multi-select-item-right">
+        {onItemRemove && (
+          <Button
+            inverted={true}
+            variant="buttonDelete"
+            onClick={(event) => onItemRemove(label, event)}
+            icon={<Icon name="Delete" />}
+          />
+        )}
+      </MultiSelectItemRight>
+    </MultiSelectItemContainer>
+  );
+}
+
+function MultiSelectSearch(props: SearchProps) {
+  const { selectedOption, onSelect, onAdd, ...rest } = props;
+  return (
+    <MultiSelectSearchContainer className="sc-multi-select-list-search">
+      <Select
+        // @ts-ignore
+        onChange={onSelect}
+        value={selectedOption}
+        {...rest}
+      />
+      {onAdd && <Button onClick={onAdd} icon={<Icon name="Create-add" />} />}
+    </MultiSelectSearchContainer>
+  );
+}
+
+function MultiSelectList({
+  title = '',
+  items = [],
+  search,
+  onItemRemove,
+}: MultiSelectProps) {
+  return (
+    <MultiSelectContainer className="sc-multi-select-list">
+      {title && <MultiSelectTitle>{title}</MultiSelectTitle>}
+      {search && <MultiSelectSearch {...search} />}
+      {items.map((item, index) => (
+        <MultiSelectItem
+          key={`sc-multi-select-item-${index}`}
+          onItemRemove={onItemRemove}
+          {...item}
+        />
+      ))}
+    </MultiSelectContainer>
+  );
+}
+
+export const MultiSelect = MultiSelectList;