@centreon/ui 24.4.13 → 24.4.14

package/src/Graph/common/timeSeries/models.ts

@@ -1,129 +0,0 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-
-interface DsData {
-  ds_color_area: string;
-  ds_color_line: string;
-  ds_filled: boolean;
-  ds_invert: string | null;
-  ds_legend: string | null;
-  ds_order: string | null;
-  ds_stack: string | null;
-  ds_transparency: number;
-}
-
-export interface Metric {
-  average_value: number | null;
-  crit: number | null;
-  critical_high_threshold: number | null;
-  critical_low_threshold: number | null;
-  data: Array<number | null>;
-  ds_data?: DsData;
-  legend: string;
-  maximum_value: number | null;
-  metric: string;
-  metric_id: number;
-  minimum_value: number | null;
-  unit: string;
-  warning_high_threshold: number | null;
-  warning_low_threshold: number | null;
-}
-
-type TimeSeries = { timeTick: string };
-
-export type TimeValue = TimeSeries & {
-  [field: number]: number;
-};
-
-export interface Line {
-  areaColor: string;
-  average_value: number | null;
-  color: string;
-  display: boolean;
-  filled: boolean;
-  highlight?: boolean;
-  invert: string | null;
-  legend: string | null;
-  lineColor: string;
-  maximum_value: number | null;
-  metric: string;
-  metric_id: number;
-  minimum_value: number | null;
-  name: string;
-  stackOrder: number | null;
-  transparency: number;
-  unit: string;
-}
-
-export enum GraphOptionId {
-  displayEvents = 'displayEvents',
-  displayTooltips = 'displayTooltips'
-}
-
-export interface AdditionalDataProps<T> {
-  additionalData?: T | null;
-}
-
-export interface Xscale {
-  dataTime: Array<TimeValue>;
-  valueWidth: number;
-}
-export interface AxeScale {
-  dataLines: Array<Line>;
-  dataTimeSeries: Array<TimeValue>;
-  thresholdUnit?: string;
-  thresholds: Array<number>;
-  valueGraphHeight: number;
-}
-
-export interface GetYScaleProps {
-  hasMoreThanTwoUnits: boolean;
-  invert: string | null;
-  leftScale: ScaleLinear<number, number>;
-  rightScale: ScaleLinear<number, number>;
-  secondUnit: string;
-  unit: string;
-}
-
-export interface LinesProps {
-  getSortedStackedLines: (lines: Array<Line>) => Array<Line>;
-  getTime: (timeValue: TimeValue) => number;
-  getUnits: (lines: Array<Line>) => Array<string>;
-  getYScale: ({
-    hasMoreThanTwoUnits,
-    unit,
-    secondUnit,
-    leftScale,
-    rightScale,
-    invert
-  }: GetYScaleProps) => ScaleLinear<number, number>;
-  graphHeight: number;
-  graphWidth: number;
-  leftScale: ScaleLinear<number, number, never>;
-  lines: Array<Line>;
-  rightScale: ScaleLinear<number, number, never>;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number, never>;
-}
-
-export interface NewLines {
-  newLines: Array<Line>;
-  newSortedLines: Array<Line>;
-}
-
-export interface FormatMetricValueProps {
-  base?: number;
-  unit: string;
-  value: number | null;
-}
-
-export interface YScales {
-  leftScale: ScaleLinear<number, number>;
-  rightScale: ScaleLinear<number, number>;
-}
-
-export interface TimeValueProps {
-  marginLeft?: number;
-  timeSeries: Array<TimeValue>;
-  x?: number;
-  xScale: ScaleLinear<number, number>;
-}

package/src/Graph/common/utils.ts

@@ -1,75 +0,0 @@
-import {
-  T,
-  always,
-  cond,
-  equals,
-  gt,
-  gte,
-  head,
-  length,
-  lt,
-  lte,
-  pluck
-} from 'ramda';
-
-import { Theme } from '@mui/material';
-
-import { Thresholds } from './models';
-
-interface GetColorFromDataAndThresholdsProps {
-  baseColor?: string;
-  data: number;
-  theme: Theme;
-  thresholds: Thresholds;
-}
-
-export const getColorFromDataAndTresholds = ({
-  data,
-  thresholds,
-  theme,
-  baseColor
-}: GetColorFromDataAndThresholdsProps): string => {
-  if (!thresholds.enabled) {
-    return baseColor || theme.palette.primary.main;
-  }
-
-  const criticalValues = pluck('value', thresholds.critical).sort();
-  const warningValues = pluck('value', thresholds.warning).sort();
-
-  if (
-    equals(length(criticalValues), 2) &&
-    lte(criticalValues[0], data) &&
-    gte(criticalValues[1], data)
-  ) {
-    return theme.palette.error.main;
-  }
-
-  if (
-    equals(length(warningValues), 2) &&
-    lte(warningValues[0], data) &&
-    gte(warningValues[1], data)
-  ) {
-    return theme.palette.warning.main;
-  }
-
-  if (equals(length(warningValues), 2)) {
-    return theme.palette.success.main;
-  }
-
-  const criticalValue = head(criticalValues) as number;
-  const warningValue = head(warningValues) as number;
-
-  if (gt(warningValue, criticalValue)) {
-    return cond([
-      [lt(warningValue), always(theme.palette.success.main)],
-      [lt(criticalValue), always(theme.palette.warning.main)],
-      [T, always(theme.palette.error.main)]
-    ])(data);
-  }
-
-  return cond([
-    [gt(warningValue), always(theme.palette.success.main)],
-    [gt(criticalValue), always(theme.palette.warning.main)],
-    [T, always(theme.palette.error.main)]
-  ])(data);
-};

package/src/Graph/index.ts

@@ -1,5 +0,0 @@
-export { default as LineChart } from './LineChart';
-export { Gauge } from './Gauge';
-export { SingleBar } from './SingleBar';
-export { Text as GraphText } from './Text';
-export { HeatMap } from './HeatMap';

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -1,127 +0,0 @@
-import {
-  Method,
-  MultiConnectedAutocompleteField,
-  TestQueryProvider
-} from '@centreon/ui';
-
-import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
-
-const optionOne = 'My Option 1';
-
-describe('Multi connected autocomplete', () => {
-  beforeEach(() => {
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.interceptAPIRequest({
-        alias: 'getListOptions',
-        method: Method.GET,
-        path: `${baseEndpoint}**`,
-        response: optionsData
-      });
-    });
-
-    cy.fixture('inputField/searchedOption').then((optionData) => {
-      cy.interceptAPIRequest({
-        alias: 'getSearchedOption',
-        method: Method.GET,
-        path: `${baseEndpoint}**`,
-        query: {
-          name: 'search',
-          value: JSON.stringify({
-            $and: [{ 'host.name': { $lk: `%${optionOne}%` } }]
-          })
-        },
-        response: optionData
-      });
-    });
-
-    cy.mount({
-      Component: (
-        <TestQueryProvider>
-          <div style={{ paddingTop: 20 }}>
-            <MultiConnectedAutocompleteField
-              field="host.name"
-              getEndpoint={getEndpoint}
-              label={label}
-              placeholder={placeholder}
-            />
-          </div>
-        </TestQueryProvider>
-      )
-    });
-  });
-
-  it('displays and hides the list when the user double-clicks on the input', () => {
-    cy.contains(label).should('be.visible');
-
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.get('@input').invoke('attr', 'placeholder').should('equal', placeholder);
-
-    cy.findByRole('presentation').as('listOptions');
-
-    cy.get('@listOptions').should('be.visible');
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.get('@listOptions').within(() => {
-        optionsData.result.forEach((option) => {
-          cy.contains(option.name);
-        });
-      });
-    });
-
-    cy.makeSnapshot('displays the list when the user clicks on the input');
-
-    cy.get('@input').click();
-
-    cy.get('@listOptions').should('not.exist');
-
-    cy.makeSnapshot('hides the list when the user clicks on the input');
-  });
-
-  it('displays all options on the list when the user searches for and selects an option', () => {
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.findByRole('presentation').as('listOptions');
-
-    cy.get('@listOptions').should('be.visible');
-
-    cy.get('@input').type(optionOne);
-
-    cy.waitForRequest('@getSearchedOption');
-
-    cy.fixture('inputField/searchedOption').then(() => {
-      cy.get('@listOptions').find('li').should('have.length', 5);
-    });
-
-    cy.get('[type="checkbox"]').eq(0).check();
-    cy.get('@input')
-      .parent()
-      .within(() => {
-        cy.contains(optionOne).should('be.visible');
-
-        cy.get('[data-testid="CancelIcon"]').should('be.visible');
-      });
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionsData.result.length);
-
-      cy.get('@listOptions').within(() => {
-        optionsData.result.forEach((option) => {
-          cy.contains(option.name);
-        });
-      });
-    });
-  });
-});

package/src/InputField/Select/Autocomplete/Connected/Multi/utils/index.ts

@@ -1,22 +0,0 @@
-import { buildListingEndpoint } from '../../../../../..';
-
-export const baseEndpoint = './endpoint';
-
-export const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
-};
-
-export const label = 'Multi Connected Autocomplete';
-export const placeholder = 'Type here...';
-
-export const optionsData = {
-  meta: {
-    limit: 2,
-    page: 1,
-    total: 20
-  },
-  result: [
-    { id: 0, name: 'My Option 1' },
-    { id: 1, name: 'My Option 2' }
-  ]
-};

package/src/Listing/Cell/DataCell.styles.ts

@@ -1,24 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  componentColumn: {
-    width: theme.spacing(2.75)
-  },
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
-export { useStyles };

package/src/Listing/EmptyResult/EmptyResult.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import { EmptyRow } from '../Row/EmptyRow';
-
-interface EmptyResultProps {
-  label: string;
-}
-
-const EmptyResult = ({ label }: EmptyResultProps): JSX.Element => (
-  <EmptyRow>{label}</EmptyRow>
-);
-
-export { EmptyResult };

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -1,71 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { getTextStyleByViewMode } from '../../useStyleTable';
-
-interface StylesProps {
-  isDragging?: boolean;
-  isInDragOverlay?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
-    active: {
-      '&, &:hover, &:focus': {
-        color: theme.palette.common.white
-      },
-      '&.Mui-active': {
-        '& .MuiTableSortLabel-icon': {
-          color: theme.palette.common.white
-        },
-        color: theme.palette.common.white
-      }
-    },
-    content: {
-      alignItems: 'center',
-      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
-      color: theme.palette.common.white,
-      display: 'flex',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    dragHandle: {
-      '&, &.Mui-focus, &:focus': {
-        color: theme.palette.common.white
-      },
-      color: theme.palette.common.white,
-
-      cursor: isDragging ? 'grabbing' : 'grab',
-      opacity: 0,
-      padding: 0
-    },
-    simpleHeaderCellContent: {
-      alignItems: 'center',
-      display: 'inline-flex',
-      marginRight: theme.spacing(2),
-      userSelect: 'none'
-    },
-    tableCell: {
-      backgroundColor: isInDragOverlay
-        ? 'transparent'
-        : theme.palette.background.listingHeader,
-      borderBottom: 'none',
-      height: 'inherit',
-      padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ listingVariant, theme }),
-      '&:hover, &:focus-within, &[data-isdragging=true]': {
-        '& .dragHandle': {
-          opacity: 1
-        }
-      },
-      '&[data-isindragoverlay=true]': {
-        display: 'block',
-        opacity: 0.7
-      }
-    }
-  })
-);
-
-export { useStyles, StylesProps };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    lineHeight: 'inherit'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-
-import { equals, isEmpty, not } from 'ramda';
-
-import { TableCell, TableCellBaseProps } from '@mui/material';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-
-import Checkbox from '../../Checkbox';
-import PopoverMenu from '../../../PopoverMenu';
-import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
-import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
-import { PredefinedRowSelection } from '../../models';
-
-import { useStyles } from './SelectActionListingHeaderCell.styles';
-
-export interface SelectActionListingHeaderCellProps {
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
-  rowCount: number;
-  selectedRowCount: number;
-}
-
-const SelectActionListingHeaderCell = ({
-  rowCount,
-  onSelectAllClick,
-  selectedRowCount,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition
-}: SelectActionListingHeaderCellProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  const hasRows = not(equals(rowCount, 0));
-
-  return (
-    <TableCell
-      className={classes.checkboxHeaderCell}
-      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
-    >
-      <Checkbox
-        checked={hasRows && selectedRowCount === rowCount}
-        className={classes.checkbox}
-        indeterminate={
-          hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
-        }
-        inputProps={{ 'aria-label': 'Select all' }}
-        onChange={onSelectAllClick}
-      />
-      {not(isEmpty(predefinedRowsSelection)) ? (
-        <PopoverMenu
-          className={classes.predefinedRowsMenu}
-          icon={<ArrowDropDownIcon />}
-          title={labelPredefinedRowsSelectionMenu}
-        >
-          {({ close }): JSX.Element => (
-            <PredefinedSelectionList
-              close={close}
-              predefinedRowsSelection={predefinedRowsSelection}
-              onSelectRowsWithCondition={onSelectRowsWithCondition}
-            />
-          )}
-        </PopoverMenu>
-      ) : (
-        <div className={classes.predefinedRowsMenu} />
-      )}
-    </TableCell>
-  );
-};
-
-export { SelectActionListingHeaderCell };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -1,16 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  root: {
-    height: '100%',
-    padding: theme.spacing(0, 1)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/_internals/DraggableIconButton.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-
-import { labelDragHandle } from '../../translatedLabels';
-
-interface DraggableIconButtonProps {
-  className?: string;
-  columnLabel?: string;
-}
-
-const DraggableIconButton = ({
-  columnLabel,
-  className,
-  ...props
-}: DraggableIconButtonProps): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <MuiIconButton
-      className={className}
-      {...props}
-      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
-    >
-      <SvgIcon fontSize="small">
-        <DragIndicatorIcon />
-      </SvgIcon>
-    </MuiIconButton>
-  );
-};
-
-export { DraggableIconButton };

package/src/Listing/Header/index.ts

@@ -1 +0,0 @@
-export * from './ListingHeader';