@scality/core-ui 0.186.0 → 0.187.0

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

@@ -1,72 +0,0 @@
-// @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/linetemporalchart/ChartUtil.test.ts

@@ -1,250 +0,0 @@
-import {
-  convert2VegaData,
-  getUnitLabel,
-  addMissingDataPoint,
-} from './ChartUtil';
-import { Serie } from './LineTemporalChart.component';
-const series: Serie[] = [
-  {
-    resource: 'node1',
-    data: [
-      [1627460232, '18.73333333333335'],
-      [1627460952, '18.73333333333335'],
-    ],
-    getTooltipLabel: (metricPrefix, resource) => {
-      return `${resource}`;
-    },
-    isLineDashed: false,
-  },
-  {
-    resource: 'node2',
-    data: [
-      [1627460232, '18.73333333333335'],
-      [1627460952, null],
-    ],
-    getTooltipLabel: (metricPrefix, resource) => {
-      return `${resource}`;
-    },
-    isLineDashed: false,
-  },
-];
-const seriesSymmetrical: Serie[] = [
-  {
-    metricPrefix: 'read',
-    resource: 'node1',
-    data: [
-      [1627460232, '18.73333333333335'],
-      [1627460952, '18.73333333333335'],
-    ],
-    getTooltipLabel: (metricPrefix, resource) => {
-      return `${resource}-${metricPrefix}`;
-    },
-    isLineDashed: false,
-  },
-  {
-    metricPrefix: 'write',
-    resource: 'node1',
-    data: [
-      [1627460232, '18.73333333333335'],
-      [1627460952, '18.73333333333335'],
-    ],
-    getTooltipLabel: (metricPrefix, resource) => {
-      return `${resource}-${metricPrefix}`;
-    },
-    isLineDashed: false,
-  },
-];
-it('converts the series to a flat data structure', () => {
-  const result = convert2VegaData(series);
-  expect(result).toEqual([
-    {
-      timestamp: 1627460232000,
-      label: 'node1',
-      resource: 'node1',
-      value: 18.73333333333335,
-      isNegativeValue: false,
-      isDashed: false,
-    },
-    {
-      timestamp: 1627460952000,
-      label: 'node1',
-      resource: 'node1',
-      value: 18.73333333333335,
-      isNegativeValue: false,
-      isDashed: false,
-    },
-    {
-      timestamp: 1627460232000,
-      label: 'node2',
-      resource: 'node2',
-      value: 18.73333333333335,
-      isNegativeValue: false,
-      isDashed: false,
-    },
-    {
-      timestamp: 1627460952000,
-      label: 'node2',
-      resource: 'node2',
-      value: 'NAN',
-      isNegativeValue: false,
-      isDashed: false,
-    },
-  ]);
-});
-it('converts the series to a flat data structure for symmetrical chart', () => {
-  const result = convert2VegaData(seriesSymmetrical);
-  expect(result).toEqual([
-    {
-      timestamp: 1627460232000,
-      label: 'node1-read',
-      resource: 'node1',
-      value: 18.73333333333335,
-      isNegativeValue: true,
-      isDashed: false,
-    },
-    {
-      timestamp: 1627460952000,
-      label: 'node1-read',
-      resource: 'node1',
-      value: 18.73333333333335,
-      isNegativeValue: true,
-      isDashed: false,
-    },
-    {
-      timestamp: 1627460232000,
-      label: 'node1-write',
-      resource: 'node1',
-      value: 18.73333333333335,
-      isNegativeValue: false,
-      isDashed: false,
-    },
-    {
-      timestamp: 1627460952000,
-      label: 'node1-write',
-      resource: 'node1',
-      value: 18.73333333333335,
-      isNegativeValue: false,
-      isDashed: false,
-    },
-  ]);
-});
-const unitRange = [
-  {
-    threshold: 0,
-    label: 'B/Sec',
-  },
-  {
-    threshold: 1024,
-    label: 'KiB/Sec',
-  },
-  {
-    threshold: 1024 * 1024,
-    label: 'MiB/Sec',
-  },
-  {
-    threshold: 1024 * 1024 * 1024,
-    label: 'GiB/Sec',
-  },
-];
-it('returns the unit label B/Sec with 0 as valueBase', () => {
-  const maxValue = 1023;
-  const { unitLabel, valueBase } = getUnitLabel(unitRange, maxValue);
-  expect(unitLabel).toEqual('B/Sec');
-  expect(valueBase).toEqual(0);
-});
-it('returns the unit label KiB/Sec', () => {
-  const maxValue = 1024;
-  const { unitLabel, valueBase } = getUnitLabel(unitRange, maxValue);
-  expect(unitLabel).toEqual('KiB/Sec');
-  expect(valueBase).toEqual(1024);
-});
-it('returns the unit label GiB/Sec', () => {
-  const maxValue = 1024 * 1024 * 1024 + 1;
-  const { unitLabel, valueBase } = getUnitLabel(unitRange, maxValue);
-  expect(unitLabel).toEqual('GiB/Sec');
-  expect(valueBase).toEqual(1024 * 1024 * 1024);
-});
-// test for addMissingDataPoint function
-const originalValue: [number, number | string | null][] = [
-  [0, '0'],
-  [1, '1'],
-  [2, '2'],
-  [3, '3'],
-  [4, '4'],
-  [5, '5'],
-  [6, '6'],
-  [8, '8'],
-  [9, '9'],
-  [10, '10'],
-];
-const startingTimeStamp = 0;
-const sampleDuration = 10;
-const sampleFrequency = 1;
-const newValues = [
-  [0, '0'],
-  [1, '1'],
-  [2, '2'],
-  [3, '3'],
-  [4, '4'],
-  [5, '5'],
-  [6, '6'],
-  [7, 'NAN'],
-  [8, '8'],
-  [9, '9'],
-  [10, '10'],
-];
-it('should add missing data point with null', () => {
-  const result = addMissingDataPoint(
-    originalValue,
-    startingTimeStamp,
-    sampleDuration,
-    sampleFrequency,
-  );
-  expect(result).toEqual(newValues);
-});
-// We manually add
-it('should return the array with string NAN when the original dataset is empty', () => {
-  const result = addMissingDataPoint(
-    [],
-    startingTimeStamp,
-    sampleDuration,
-    sampleFrequency,
-  );
-  expect(result).toEqual([]);
-});
-it('should return an empty array when the starting timestamp is undefined', () => {
-  const result = addMissingDataPoint(
-    originalValue,
-    undefined,
-    sampleDuration,
-    sampleFrequency,
-  );
-  expect(result).toEqual([]);
-});
-it('should return an empty array when sample duration is less than or equal to zero', () => {
-  const result = addMissingDataPoint(
-    originalValue,
-    startingTimeStamp,
-    0,
-    sampleFrequency,
-  );
-  expect(result).toEqual([]);
-});
-it('should return an empty array when sample frequency is less than or equal to zero', () => {
-  const result = addMissingDataPoint(
-    originalValue,
-    startingTimeStamp,
-    sampleDuration,
-    -1,
-  );
-  expect(result).toEqual([]);
-});
-it('should return an empty array when sample frequency is undefined', () => {
-  const result = addMissingDataPoint(
-    originalValue,
-    startingTimeStamp,
-    sampleDuration,
-    undefined,
-  );
-  expect(result).toEqual([]);
-});

package/src/lib/components/linetemporalchart/ChartUtil.ts

@@ -1,225 +0,0 @@
-// @ts-nocheck
-import { Serie } from './LineTemporalChart.component';
-import './LineTemporalChart.component';
-import { NAN_STRING } from '../constants';
-export type VegaData = {
-  timestamp: number;
-  label: string;
-  // same as the tooltip label
-  value: number | 'NAN';
-  // the "NAN" is used by the tooltip to display a dash for the data which are not exist.
-  isNegativeValue: boolean;
-  // if the metricPrefix is read and out, we need to convert the value to negative before assigning it to the vega-lite spec
-  isDashed: boolean;
-}[];
-//Given a field containing dots ".", vega is interpreting this as an accessor
-//for nested objects, breaking then the internal mechnism to retrieve tooltip
-//data from the mouse position. We are fixing it by replacing the dots by a
-//well-known string that we expect no one would use to label a serie.
-export function normlizeVegaFieldName(fieldName: string) {
-  return fieldName.replace(/(\.)/g, 'VEGADOESNTSUPPORTDOTINFIELDNAME');
-}
-export function convert2VegaData(
-  addedMissingDataPointSeries: Serie[],
-): VegaData {
-  const flatArr = [];
-  addedMissingDataPointSeries.forEach((line) => {
-    line.data.forEach((datum) => {
-      const obj = {
-        timestamp: datum[0] * 1000,
-        // convert to million second
-        label: normlizeVegaFieldName(
-          line.getTooltipLabel(line.metricPrefix, line.resource),
-        ),
-        resource: line.resource,
-        value:
-          datum[1] && datum[1] !== NAN_STRING ? Number(datum[1]) : NAN_STRING,
-        isNegativeValue:
-          line.metricPrefix === 'read' || line.metricPrefix === 'out',
-        isDashed: line.isLineDashed || false,
-      };
-      flatArr.push(obj);
-    });
-  });
-  return flatArr;
-}
-// base on the current base value, convert the original vegadata to
-export function convertDataBaseValue(data: VegaData, base: number): VegaData {
-  return data.map((datum) => {
-    return {
-      ...datum,
-      value:
-        typeof datum.value === 'number'
-          ? getRelativeValue(datum.value, base)
-          : NAN_STRING,
-    };
-  });
-}
-
-/**
- * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
- * @param {any} unitRange
- * @param {any} maxValue the maximum value among the data set
- * @returns {any}
- */
-export function getUnitLabel(
-  unitRange: {
-    threshold: number;
-    label: string;
-  }[],
-  maxValue: number,
-): {
-  valueBase: number;
-  unitLabel: string;
-} {
-  if (!unitRange || unitRange.length === 0) {
-    return {
-      valueBase: 1,
-      unitLabel: '',
-    };
-  }
-  // first sort the unitRange
-  unitRange.sort(
-    (
-      unitA: {
-        threshold: number;
-        label: string;
-      },
-      unitB: {
-        threshold: number;
-        label: string;
-      },
-    ) => {
-      return unitA.threshold - unitB.threshold;
-    },
-  );
-  let index = unitRange.findIndex((range) => range.threshold > maxValue);
-
-  // last unit
-  if (index === -1) {
-    index = unitRange.length;
-  }
-
-  if (index === 0) {
-    return {
-      valueBase: unitRange[index].threshold,
-      unitLabel: unitRange[index].label,
-    };
-  }
-
-  return {
-    valueBase: unitRange[index - 1].threshold,
-    unitLabel: unitRange[index - 1].label,
-  };
-}
-
-/**
- * This function manually adds the missing data points with `null` value caused by downtime of the VMs
- * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
- *
- * @param {array} orginalValues - The array of the data points are already sorted according to the time series
- * @param {number} startingTimeStamp - The starting timestamp in seconds
- * @param {number} sampleDuration - The time span value in seconds
- * @param {number} sampleInterval - The time difference between two data points in seconds
- *
- */
-export function addMissingDataPoint(
-  orginalValues: [number, number | string | null][],
-  startingTimeStamp?: number,
-  sampleDuration?: number,
-  sampleInterval?: number,
-): [number, number | string | null][] {
-  if (
-    !orginalValues ||
-    startingTimeStamp === undefined ||
-    !sampleDuration ||
-    !sampleInterval ||
-    startingTimeStamp < 0 ||
-    sampleDuration <= 0 ||
-    sampleInterval <= 0
-  ) {
-    return [];
-  }
-
-  // If there are no original values, return empty array
-  if (orginalValues.length === 0) {
-    return [];
-  }
-
-  const newValues: [number, number | string | null][] = [];
-
-  // add missing data points for the starting time
-  for (
-    let i = startingTimeStamp;
-    i < orginalValues[0][0];
-    i += sampleInterval
-  ) {
-    newValues.push([i, NAN_STRING]);
-  }
-
-  // Process all but the last element
-  for (let i = 0; i < orginalValues.length - 1; i++) {
-    if (
-      orginalValues[i][0] < startingTimeStamp ||
-      orginalValues[i][0] > startingTimeStamp + sampleDuration
-    ) {
-      continue;
-    }
-
-    // Always add the current data point
-    newValues.push(orginalValues[i]);
-
-    const currentTimestamp = orginalValues[i][0];
-    const nextTimestamp = orginalValues[i + 1][0];
-    const gap = nextTimestamp - currentTimestamp;
-
-    // Calculate how many missing points to add
-    const missingIntervals = Math.floor(gap / sampleInterval) - 1;
-
-    // Add missing data points with NAN_STRING (only executes if missingIntervals > 0)
-    for (let j = 1; j <= missingIntervals; j++) {
-      const missingTimestamp = currentTimestamp + j * sampleInterval;
-      newValues.push([missingTimestamp, NAN_STRING]);
-    }
-  }
-
-  // Add the last element
-  newValues.push(orginalValues[orginalValues.length - 1]);
-
-  // add missing data points for the ending time
-  for (
-    let i = orginalValues[orginalValues.length - 1][0] + sampleInterval;
-    i < startingTimeStamp + sampleDuration;
-    i += sampleInterval
-  ) {
-    newValues.push([i, NAN_STRING]);
-  }
-
-  return newValues;
-}
-
-// get the value for the based value
-// TODO: We need to handle the negative value in the future
-export const getRelativeValue = (value: number, base: number) => {
-  return value / (base || 1);
-};
-export const relativeDatumToOriginalDatum = <T>(datum: T, base: number): T => {
-  // $FlowFixMe
-  return Object.fromEntries(
-    Object.entries(datum).map(([key, value]) => [
-      key,
-      getAbsoluteValue(value, base),
-    ]),
-  );
-};
-export const getAbsoluteValue = (relativeValue: number, base: number) => {
-  return relativeValue * (base || 1);
-};
-// extract the labels from getTooltipLabel function to define the domain in color
-export const getColorDomains = (series: Serie[]): string[] => {
-  return series.map((serie) => {
-    return normlizeVegaFieldName(
-      serie.getTooltipLabel(serie.metricPrefix, serie.resource),
-    );
-  });
-};