@centreon/ui 24.5.2 → 24.5.4

package/src/Typography/Subtitle.tsx

@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-
-import { type, equals } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-
-import { Tooltip } from '../components';
-
-interface Props {
-  children: ReactNode;
-  secondaryLabel?: string | Array<string>;
-}
-
-const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
-  const { t } = useTranslation();
-
-  const containsSeveralSecondaryLabels = equals(type(secondaryLabel), 'Array');
-
-  return (
-    <Typography variant="subtitle1">
-      <strong>{children}</strong>
-      {secondaryLabel && (
-        <Tooltip
-          aria-label={
-            containsSeveralSecondaryLabels
-              ? secondaryLabel[0]
-              : (secondaryLabel as string)
-          }
-          followCursor={false}
-          label={
-            containsSeveralSecondaryLabels ? (
-              <>
-                {secondaryLabel.map((label) => (
-                  <p key={label}>{t(label)}</p>
-                ))}
-              </>
-            ) : (
-              t(secondaryLabel)
-            )
-          }
-          placement="right"
-        >
-          <HelpOutlineIcon
-            color="primary"
-            sx={{ ml: 1, verticalAlign: 'middle' }}
-          />
-        </Tooltip>
-      )}
-    </Typography>
-  );
-};
-
-export default Subtitle;

package/src/api/useGraphQuery/index.ts

@@ -1,187 +0,0 @@
-import { useRef } from 'react';
-
-import {
-  equals,
-  flatten,
-  has,
-  includes,
-  isEmpty,
-  not,
-  pipe,
-  pluck
-} from 'ramda';
-import dayjs from 'dayjs';
-
-import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
-
-import { Metric, Resource, WidgetResourceType } from './models';
-
-interface CustomTimePeriod {
-  end: string;
-  start: string;
-}
-
-interface UseMetricsQueryProps {
-  baseEndpoint: string;
-  bypassMetricsExclusion?: boolean;
-  includeAllResources?: boolean;
-  metrics: Array<Metric>;
-  refreshCount?: number;
-  refreshInterval?: number | false;
-  resources?: Array<Resource>;
-  timePeriod?: {
-    end?: string | null;
-    start?: string | null;
-    timePeriodType: number;
-  };
-}
-
-interface UseMetricsQueryState {
-  end: string;
-  graphData: LineChartData | undefined;
-  isGraphLoading: boolean;
-  isMetricsEmpty: boolean;
-  start: string;
-}
-
-const getStartEndFromTimePeriod = (
-  timePeriod: number
-): { end: string; start: string } => {
-  return {
-    end: dayjs().toISOString(),
-    start: dayjs().subtract(timePeriod, 'hour').toISOString()
-  };
-};
-
-const isCustomTimePeriod = (
-  timePeriod:
-    | number
-    | {
-        end?: string | null;
-        start?: string | null;
-      }
-): boolean => has('end', timePeriod) && has('start', timePeriod);
-
-interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
-  base: number;
-}
-
-export const resourceTypeQueryParameter = {
-  [WidgetResourceType.host]: 'host.id',
-  [WidgetResourceType.hostCategory]: 'hostcategory.id',
-  [WidgetResourceType.hostGroup]: 'hostgroup.id',
-  [WidgetResourceType.serviceCategory]: 'servicecategory.id',
-  [WidgetResourceType.serviceGroup]: 'servicegroup.id',
-  [WidgetResourceType.service]: 'service.name'
-};
-
-const areResourcesFullfilled = (value: Array<Resource>): boolean =>
-  value?.every(
-    ({ resourceType, resources }) =>
-      !isEmpty(resourceType) && !isEmpty(resources)
-  );
-
-const useGraphQuery = ({
-  bypassMetricsExclusion,
-  metrics,
-  resources = [],
-  baseEndpoint,
-  timePeriod = {
-    timePeriodType: 1
-  },
-  refreshInterval = false,
-  refreshCount
-}: UseMetricsQueryProps): UseMetricsQueryState => {
-  const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
-    ? {
-        end: timePeriod.end,
-        start: timePeriod.start
-      }
-    : timePeriod?.timePeriodType;
-
-  const startAndEnd = isCustomTimePeriod(timePeriodToUse)
-    ? (timePeriodToUse as CustomTimePeriod)
-    : getStartEndFromTimePeriod(timePeriodToUse as number);
-
-  const definedMetrics = metrics.filter((metric) => metric);
-  const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric.name)
-  );
-
-  const {
-    data: graphData,
-    isFetching,
-    isLoading
-  } = useFetchQuery<PerformanceGraphData>({
-    getEndpoint: () => {
-      const endpoint = buildListingEndpoint({
-        baseEndpoint,
-        parameters: {
-          search: {
-            lists: resources.map((resource) => ({
-              field: resourceTypeQueryParameter[resource.resourceType],
-              values: equals(resource.resourceType, 'service')
-                ? pluck('name', resource.resources)
-                : pluck('id', resource.resources)
-            }))
-          }
-        }
-      });
-
-      return `${endpoint}&start=${startAndEnd.start}&end=${
-        startAndEnd.end
-      }&metric_names=[${formattedDefinedMetrics.join(',')}]`;
-    },
-    getQueryKey: () => [
-      'graph',
-      JSON.stringify(definedMetrics),
-      JSON.stringify(resources),
-      timePeriod,
-      refreshCount || 0
-    ],
-    queryOptions: {
-      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
-      refetchInterval: refreshInterval,
-      suspense: false
-    }
-  });
-
-  const data = useRef<PerformanceGraphData | undefined>(undefined);
-  if (graphData) {
-    data.current = graphData;
-  }
-
-  const formattedGraphData = data.current
-    ? {
-        global: {
-          base: data.current.base,
-          title: ''
-        },
-        metrics: bypassMetricsExclusion
-          ? data.current.metrics
-          : data.current.metrics.filter(({ metric_id }) => {
-              return pipe(
-                pluck('excludedMetrics'),
-                flatten,
-                includes(metric_id),
-                not
-              )(metrics);
-            }),
-        times: data.current.times
-      }
-    : undefined;
-
-  const { end, start } = isCustomTimePeriod(timePeriodToUse)
-    ? (timePeriodToUse as CustomTimePeriod)
-    : getStartEndFromTimePeriod(timePeriodToUse as number);
-
-  return {
-    end,
-    graphData: formattedGraphData,
-    isGraphLoading: isFetching || (isLoading && !isEmpty(definedMetrics)),
-    isMetricsEmpty: isEmpty(definedMetrics),
-    start
-  };
-};
-
-export default useGraphQuery;

package/src/api/useGraphQuery/models.ts

@@ -1,20 +0,0 @@
-import { SelectEntry } from '../..';
-
-export interface Resource {
-  resourceType: string;
-  resources: Array<SelectEntry>;
-}
-
-export enum WidgetResourceType {
-  host = 'host',
-  hostCategory = 'host-category',
-  hostGroup = 'host-group',
-  service = 'service',
-  serviceCategory = 'service-category',
-  serviceGroup = 'service-group'
-}
-
-export interface Metric {
-  excludedMetrics: Array<number>;
-  name: string;
-}

package/src/base/tokens/README.md

@@ -1,3 +0,0 @@
-`// TODO`
-
-- [ ] integrate design tokens with MUI ThemeProvider

package/src/base/tokens/source/$metadata.json

@@ -1,5 +0,0 @@
-{
-  "tokenSetOrder": [
-    "base"
-  ]
-}

package/src/base/tokens/source/base.json

@@ -1,142 +0,0 @@
-{
-  "color": {
-    "blue": {
-      "50": {
-        "value": "#ECF4FD",
-        "type": "color"
-      },
-      "100": {
-        "value": "#D2E4F9",
-        "type": "color"
-      },
-      "200": {
-        "value": "#9EC4F0",
-        "type": "color"
-      },
-      "300": {
-        "value": "#6DA4E4",
-        "type": "color"
-      },
-      "400": {
-        "value": "#3e85d5",
-        "type": "color"
-      },
-      "500": {
-        "value": "#2e68aa",
-        "type": "color"
-      },
-      "600": {
-        "value": "#205593",
-        "type": "color"
-      },
-      "700": {
-        "value": "#164274",
-        "type": "color"
-      },
-      "800": {
-        "value": "#0d2e54",
-        "type": "color"
-      },
-      "900": {
-        "value": "#071d37",
-        "type": "color"
-      },
-      "950": {
-        "value": "#031326",
-        "type": "color"
-      }
-    },
-    "purple": {
-      "50": {
-        "value": "#F8F1F9",
-        "type": "color"
-      },
-      "100": {
-        "value": "#F0DEF2",
-        "type": "color"
-      },
-      "200": {
-        "value": "#DDAFE4",
-        "type": "color"
-      },
-      "300": {
-        "value": "#CE81DA",
-        "type": "color"
-      },
-      "400": {
-        "value": "#c151d2",
-        "type": "color"
-      },
-      "500": {
-        "value": "#ac28c1",
-        "type": "color"
-      },
-      "600": {
-        "value": "#872796",
-        "type": "color"
-      },
-      "700": {
-        "value": "#682172",
-        "type": "color"
-      },
-      "800": {
-        "value": "#491b50",
-        "type": "color"
-      },
-      "900": {
-        "value": "#29112c",
-        "type": "color"
-      },
-      "950": {
-        "value": "#1a0d1c",
-        "type": "color"
-      }
-    },
-    "grey": {
-      "50": {
-        "value": "#f9fafb",
-        "type": "color"
-      },
-      "100": {
-        "value": "#eaedf0",
-        "type": "color"
-      },
-      "200": {
-        "value": "#cad0d8",
-        "type": "color"
-      },
-      "300": {
-        "value": "#aab4c0",
-        "type": "color"
-      },
-      "400": {
-        "value": "#8c98a6",
-        "type": "color"
-      },
-      "500": {
-        "value": "#6f7b8a",
-        "type": "color"
-      },
-      "600": {
-        "value": "#596573",
-        "type": "color"
-      },
-      "700": {
-        "value": "#434e5b",
-        "type": "color"
-      },
-      "800": {
-        "value": "#2f3741",
-        "type": "color"
-      },
-      "900": {
-        "value": "#1b2127",
-        "type": "color"
-      },
-      "950": {
-        "value": "#101418",
-        "type": "color"
-      }
-    }
-  }
-}

package/src/base/tokens/themes/base.tokens.d.ts

@@ -1,38 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Sun, 04 Jun 2023 10:14:22 GMT
- */
-
-export const colorBlue50: string;
-export const colorBlue100: string;
-export const colorBlue200: string;
-export const colorBlue300: string;
-export const colorBlue400: string;
-export const colorBlue500: string;
-export const colorBlue600: string;
-export const colorBlue700: string;
-export const colorBlue800: string;
-export const colorBlue900: string;
-export const colorBlue950: string;
-export const colorPurple50: string;
-export const colorPurple100: string;
-export const colorPurple200: string;
-export const colorPurple300: string;
-export const colorPurple400: string;
-export const colorPurple500: string;
-export const colorPurple600: string;
-export const colorPurple700: string;
-export const colorPurple800: string;
-export const colorPurple900: string;
-export const colorPurple950: string;
-export const colorGrey50: string;
-export const colorGrey100: string;
-export const colorGrey200: string;
-export const colorGrey300: string;
-export const colorGrey400: string;
-export const colorGrey500: string;
-export const colorGrey600: string;
-export const colorGrey700: string;
-export const colorGrey800: string;
-export const colorGrey900: string;
-export const colorGrey950: string;