feat(ui): Add Downtime and Acknowledge comments in Events view detail…

…s panel (centreon#8755)
kduret · Jun 1, 2020 · 8fb4340 · 8fb4340
1 parent cf1ab7b
commit 8fb4340
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 19 deletions.
diff --git a/www/front_src/src/Resources/Details/Body/tabs/Details/StateCard.tsx b/www/front_src/src/Resources/Details/Body/tabs/Details/StateCard.tsx
@@ -1,11 +1,40 @@
 import * as React from 'react';
 
-import { Card, CardContent, Grid, Typography } from '@material-ui/core';
+import { Card, CardContent, Typography, makeStyles } from '@material-ui/core';
+import { labelComment } from '../../../../translatedLabels';
+
+const useStyles = makeStyles((theme) => ({
+ container: {
+ display: 'grid',
+ gridTemplateColumns: '1fr 2fr auto',
+ gridTemplateAreas: ` 
+ 'content-title content chip'
+ 'comment-title comment chip'
+ `,
+ gridGap: theme.spacing(2),
+ },
+ contentTitle: {
+ gridArea: 'content-title',
+ },
+ content: {
+ gridArea: 'content',
+ },
+ chip: {
+ gridArea: 'chip',
+ },
+ commentTitle: {
+ gridArea: 'comment-title',
+ },
+ comment: {
+ gridArea: 'comment',
+ },
+}));
 
 interface Props {
  title: string;
  contentLines: Array<string>;
  chip: JSX.Element;
+ commentLine: string;
 }
 
 const Line = (line): JSX.Element => (
@@ -14,21 +43,37 @@ const Line = (line): JSX.Element => (
  </Typography>
 );
 
-const StateCard = ({ title, contentLines, chip }: Props): JSX.Element => {
+const StateCard = ({
+ title,
+ contentLines,
+ commentLine,
+ chip,
+}: Props): JSX.Element => {
+ const classes = useStyles();
+
  return (
  <Card>
  <CardContent>
- <Grid container spacing={4} alignItems="center">
- <Grid item>
- <Typography variant="subtitle2" color="textSecondary">
- {title}
- </Typography>
- </Grid>
- <Grid item style={{ flexGrow: 1 }}>
- {contentLines.map(Line)}
- </Grid>
- <Grid item>{chip}</Grid>
- </Grid>
+ <div className={classes.container}>
+ <Typography
+ className={classes.contentTitle}
+ variant="subtitle2"
+ color="textSecondary"
+ >
+ {title}
+ </Typography>
+ <div className={classes.content}>{contentLines.map(Line)}</div>
+
+ <Typography
+ className={classes.commentTitle}
+ variant="subtitle2"
+ color="textSecondary"
+ >
+ {labelComment}
+ </Typography>
+ <div className={classes.comment}>{Line(commentLine)}</div>
+ <div className={classes.chip}>{chip}</div>
+ </div>
  </CardContent>
  </Card>
  );

diff --git a/www/front_src/src/Resources/Details/Body/tabs/Details/index.tsx b/www/front_src/src/Resources/Details/Body/tabs/Details/index.tsx
@@ -104,16 +104,19 @@ const DetailsTab = ({ details }: Props): JSX.Element => {
  content={details.output}
  severityCode={details.status.severity_code}
  />
- {details.downtimes?.map(({ start_time, end_time }) => (
+ {details.downtimes?.map(({ start_time, end_time, comment }) => (
  <StateCard
  key={`downtime-${start_time}-${end_time}`}
  title={labelDowntimeDuration}
  contentLines={[
- { prefix: labelFrom, time: start_time },
- { prefix: labelTo, time: end_time },
- ].map(
- ({ prefix, time }) => `${prefix} ${getFormattedDateTime(time)}`,
- )}
+ ...[
+ { prefix: labelFrom, time: start_time },
+ { prefix: labelTo, time: end_time },
+ ].map(
+ ({ prefix, time }) => `${prefix} ${getFormattedDateTime(time)}`,
+ ),
+ ]}
+ commentLine={comment}
  chip={<DowntimeChip />}
  />
  ))}
@@ -127,6 +130,7 @@ const DetailsTab = ({ details }: Props): JSX.Element => {
  details.acknowledgement.entry_time,
  )}`,
  ]}
+ commentLine={details.acknowledgement.comment}
  chip={<AcknowledgeChip />}
  />
  )}

diff --git a/www/front_src/src/Resources/Details/index.test.tsx b/www/front_src/src/Resources/Details/index.test.tsx
@@ -40,6 +40,7 @@ import {
  labelCommand,
  labelResourceFlapping,
  labelNo,
+ labelComment,
 } from '../translatedLabels';
 import { detailsTabId, graphTabId } from './Body/tabs';
 import * as Context from '../Context';
@@ -87,15 +88,18 @@ const retrievedDetails = {
  {
  start_time: '2020-01-18T18:57:59',
  end_time: '2020-01-18T19:57:59',
+ comment: 'First downtime set by Admin',
  },
  {
  start_time: '2020-02-18T18:57:59',
  end_time: '2020-02-18T19:57:59',
+ comment: 'Second downtime set by Admin',
  },
  ],
  acknowledgement: {
  author_name: 'Admin',
  entry_time: '2020-03-18T19:57:59',
+ comment: 'Acknowledged by Admin',
  },
  performance_data:
  'rta=0.025ms;200.000;400.000;0; rtmax=0.061ms;;;; rtmin=0.015ms;;;; pl=0%;20;50;0;100',
@@ -160,14 +164,18 @@ describe(Details, () => {
 
  expect(getByText('OK - 127.0.0.1 rta 0.97ms lost 0%')).toBeInTheDocument();
 
+ expect(getAllByText(labelComment)).toHaveLength(3);
  expect(getAllByText(labelDowntimeDuration)).toHaveLength(2);
  expect(getByText(`${labelFrom} 01/18/2020 18:57`)).toBeInTheDocument();
  expect(getByText(`${labelTo} 01/18/2020 19:57`)).toBeInTheDocument();
  expect(getByText(`${labelFrom} 02/18/2020 18:57`)).toBeInTheDocument();
  expect(getByText(`${labelTo} 02/18/2020 19:57`)).toBeInTheDocument();
+ expect(getByText('First downtime set by Admin'));
+ expect(getByText('Second downtime set by Admin'));
 
  expect(getByText(labelAcknowledgedBy)).toBeInTheDocument();
  expect(getByText(`Admin ${labelAt} 03/18/2020 19:57`)).toBeInTheDocument();
+ expect(getByText('Acknowledged by Admin'));
 
  expect(getByText(labelTimezone)).toBeInTheDocument();
  expect(getByText('Europe/Paris')).toBeInTheDocument();