feat(ui): Implement Unified view downtime and acknowledge tooltips

jest.config.js

@@ -2,4 +2,8 @@ const merge = require('lodash/merge');
 
 module.exports = merge(require('@centreon/frontend-core/jest'), {
   roots: ['<rootDir>/www/front_src/src/'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '<rootDir>/setupTest.js',
+  ],
 });

package.json

@@ -70,9 +70,11 @@
     "@centreon/ui": "centreon/centreon-ui",
     "@material-ui/core": "^4.9.4",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.45",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.7.0",
+    "date-fns": "^2.10.0",
     "dom-serializer": "^0.2.2",
     "install": "^0.13.0",
     "loaders.css": "^0.1.2",

setupTest.js

@@ -0,0 +1,8 @@
+document.createRange = () => ({
+  setStart: () => {},
+  setEnd: () => {},
+  commonAncestorContainer: {
+    nodeName: 'BODY',
+    ownerDocument: document,
+  },
+});

www/front_src/src/Resources/api/index.ts

@@ -7,7 +7,7 @@ const api = axios.create({
   baseURL: './api/beta/',
 });
 
-const getData = ({ endpoint, requestParams }): Promise<ResourceListing> =>
+const getData = <TData>({ endpoint, requestParams }): Promise<TData> =>
   api.get(endpoint, requestParams).then(({ data }) => data);
 
 const listResources = (
@@ -16,4 +16,4 @@ const listResources = (
 ): Promise<ResourceListing> =>
   getData({ endpoint: buildResourcesEndpoint(endpointParams), requestParams });
 
-export { listResources };
+export { listResources, getData };

www/front_src/src/Resources/columns/State/DetailsTable/Acknowledgement.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {
+  labelAuthor,
+  labelComment,
+  labelEntryTime,
+  labelPersistent,
+  labelSticky,
+} from '../../../translatedLabels';
+import DetailsTable, {
+  getFormattedDate,
+  DetailsTableProps,
+  getYesNoLabel,
+} from '.';
+
+interface AcknoweldgementDetails {
+  author_name: string;
+  entry_time: string;
+  is_persistent: string;
+  is_sticky: string;
+  comment: string;
+}
+
+type Props = Pick<DetailsTableProps, 'endpoint'>;
+
+const AcknowledgementDetailsTable = ({ endpoint }: Props): JSX.Element => {
+  const columns = [
+    {
+      label: labelAuthor,
+      getFormattedString: ({ author_name }): string => author_name,
+    },
+    {
+      label: labelEntryTime,
+      getFormattedString: ({ entry_time }): string =>
+        getFormattedDate(entry_time),
+    },
+    {
+      label: labelPersistent,
+      getFormattedString: ({ is_persistent }): string =>
+        getYesNoLabel(is_persistent),
+    },
+    {
+      label: labelSticky,
+      getFormattedString: ({ is_sticky }): string => getYesNoLabel(is_sticky),
+    },
+
+    {
+      label: labelComment,
+      getFormattedString: ({ comment }): string => comment,
+    },
+  ];
+
+  return (
+    <DetailsTable<AcknoweldgementDetails>
+      columns={columns}
+      endpoint={endpoint}
+    />
+  );
+};
+
+export default AcknowledgementDetailsTable;

www/front_src/src/Resources/columns/State/DetailsTable/Downtime.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+  labelAuthor,
+  labelFixed,
+  labelYes,
+  labelNo,
+  labelStartTime,
+  labelEndTime,
+  labelComment,
+} from '../../../translatedLabels';
+import DetailsTable, { getFormattedDate, DetailsTableProps } from '.';
+
+interface DowntimeDetails {
+  author_name: string;
+  is_fixed: boolean;
+  start_time: string;
+  end_time: string;
+  ccoment: string;
+}
+
+type Props = Pick<DetailsTableProps, 'endpoint'>;
+
+const DowntimeDetailsTable = ({ endpoint }: Props): JSX.Element => {
+  const columns = [
+    {
+      label: labelAuthor,
+      getFormattedString: ({ author_name }): string => author_name,
+    },
+    {
+      label: labelFixed,
+      getFormattedString: ({ is_fixed }): string =>
+        is_fixed ? labelYes : labelNo,
+    },
+    {
+      label: labelStartTime,
+      getFormattedString: ({ start_time }): string =>
+        getFormattedDate(start_time),
+    },
+    {
+      label: labelEndTime,
+      getFormattedString: ({ end_time }): string => getFormattedDate(end_time),
+    },
+
+    {
+      label: labelComment,
+      getFormattedString: ({ comment }): string => comment,
+    },
+  ];
+
+  return (
+    <DetailsTable<DowntimeDetails> columns={columns} endpoint={endpoint} />
+  );
+};
+
+export default DowntimeDetailsTable;

www/front_src/src/Resources/columns/State/DetailsTable/index.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+
+import format from 'date-fns/format';
+import parseISO from 'date-fns/parseISO';
+
+import {
+  TableContainer,
+  TableRow,
+  Paper,
+  Table,
+  TableHead,
+  TableCell,
+  TableBody,
+} from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+
+import { getData } from '../../../api';
+import {
+  labelSomethingWentWrong,
+  labelYes,
+  labelNo,
+} from '../../../translatedLabels';
+import useCancelTokenSource from '../../../useCancelTokenSource';
+
+const getFormattedDate = (isoDate): string =>
+  format(parseISO(isoDate), 'MM/dd/yyyy H:m');
+
+const getYesNoLabel = (value): string => (value ? labelYes : labelNo);
+
+const columnMaxWidth = 150;
+
+interface Column {
+  getFormattedString: (details) => string;
+  label: string;
+}
+
+export interface DetailsTableProps {
+  endpoint: string;
+  columns: Array<Column>;
+}
+
+const DetailsTable = <TDetails extends {}>({
+  endpoint,
+  columns,
+}: DetailsTableProps): JSX.Element => {
+  const [details, setDetails] = useState<TDetails | null>();
+  const { cancel, token } = useCancelTokenSource();
+
+  useEffect(() => {
+    getData<TDetails>({ endpoint, requestParams: { cancelToken: token } })
+      .then((retrievedDetails) => setDetails(retrievedDetails))
+      .catch(() => {
+        setDetails(null);
+      });
+
+    return (): void => cancel();
+  }, []);
+
+  const loading = details === undefined;
+  const error = details === null;
+  const success = !loading && !error;
+
+  const tableMaxWidth = columns.length * columnMaxWidth;
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            {columns.map(({ label }) => (
+              <TableCell key={label}>{label}</TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            {loading && (
+              <TableCell colSpan={columns.length}>
+                <Skeleton height={20} animation="wave" width={tableMaxWidth} />
+              </TableCell>
+            )}
+            {success &&
+              columns.map(({ label, getFormattedString }) => (
+                <TableCell style={{ maxWidth: columnMaxWidth }} key={label}>
+                  <span>{getFormattedString(details)}</span>
+                </TableCell>
+              ))}
+            {error && (
+              <TableCell
+                style={{ width: tableMaxWidth }}
+                align="center"
+                colSpan={columns.length}
+              >
+                <span>{labelSomethingWentWrong}</span>
+              </TableCell>
+            )}
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export { getFormattedDate, getYesNoLabel };
+export default DetailsTable;

www/front_src/src/Resources/columns/State/index.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { Grid, Avatar, makeStyles, fade, Tooltip } from '@material-ui/core';
+import { Person as IconAcknowledged } from '@material-ui/icons';
+import { lime, purple } from '@material-ui/core/colors';
+
+import IconDowntime from '../icons/Downtime';
+import { ColumnProps } from '..';
+import DowntimeDetailsTable from './DetailsTable/Downtime';
+import AcknowledgementDetailsTable from './DetailsTable/Acknowledgement';
+import { labelInDowntime, labelAcknowledged } from '../../translatedLabels';
+import { Resource } from '../../models';
+
+const useStyles = makeStyles((theme) => ({
+  stateChip: {
+    width: theme.spacing(4),
+    height: theme.spacing(4),
+  },
+  acknowledged: {
+    backgroundColor: fade(lime[900], 0.1),
+    color: lime[900],
+  },
+  downtime: {
+    backgroundColor: fade(purple[500], 0.1),
+    color: purple[500],
+  },
+  tooltip: {
+    maxWidth: 'none',
+    backgroundColor: 'transparent',
+  },
+}));
+
+interface StateChipProps {
+  endpoint: string;
+  className: string;
+  Icon: React.SFC;
+  DetailsTable: React.SFC<{ endpoint: string }>;
+  ariaLabel: string;
+}
+
+const StateChip = ({
+  endpoint,
+  className,
+  Icon,
+  DetailsTable,
+  ariaLabel,
+}: StateChipProps): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <Tooltip
+      placement="left"
+      title={<DetailsTable endpoint={endpoint} />}
+      classes={{ tooltip: classes.tooltip }}
+      enterDelay={0}
+    >
+      <Avatar
+        className={`${classes.stateChip} ${className}`}
+        aria-label={ariaLabel}
+      >
+        <Icon />
+      </Avatar>
+    </Tooltip>
+  );
+};
+
+const DowntimeChip = ({ resource }: { resource: Resource }): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <StateChip
+      endpoint={resource.downtime_endpoint as string}
+      className={classes.downtime}
+      ariaLabel={`${resource.name} ${labelInDowntime}`}
+      DetailsTable={DowntimeDetailsTable}
+      Icon={IconDowntime}
+    />
+  );
+};
+
+const AcknowledgedChip = ({
+  resource,
+}: {
+  resource: Resource;
+}): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <StateChip
+      endpoint={resource.acknowledgement_endpoint as string}
+      className={classes.acknowledged}
+      ariaLabel={`${resource.name} ${labelAcknowledged}`}
+      DetailsTable={AcknowledgementDetailsTable}
+      Icon={IconAcknowledged}
+    />
+  );
+};
+
+const StateColumn = ({ Cell, row }: ColumnProps): JSX.Element => {
+  return (
+    <Cell width={80}>
+      <Grid container spacing={1}>
+        {row.in_downtime && (
+          <Grid item>
+            <DowntimeChip resource={row} />
+          </Grid>
+        )}
+        {row.acknowledged && (
+          <Grid item>
+            <AcknowledgedChip resource={row} />
+          </Grid>
+        )}
+      </Grid>
+    </Cell>
+  );
+};
+
+export default StateColumn;

www/front_src/src/Resources/columns/icons/__mocks__/Downtime.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Downtime = (): JSX.Element => <span>Downtime</span>;
+
+export default Downtime;