enh(ui): Fixes to details panel (#8564)

centreon · Apr 8, 2020 · 7a53d86 · 7a53d86
1 parent 4b526ec
commit 7a53d86
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "babel-merge": "^3.0.0",
     "cache-loader": "^4.1.0",
     "clean-webpack-plugin": "^3.0.0",
+    "clipboardy": "^2.3.0",
     "css-loader": "^3.4.2",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.1",

diff --git a/www/front_src/src/Resources/Details/Body/tabs/Details/DetailsCard/cards.tsx b/www/front_src/src/Resources/Details/Body/tabs/Details/DetailsCard/cards.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Typography, Grid, makeStyles } from '@material-ui/core';
+import { Typography, Grid, makeStyles, Box } from '@material-ui/core';
 import IconCheck from '@material-ui/icons/Check';
 
 import {
@@ -18,6 +18,7 @@ import {
   labelPercentStateChange,
   labelLastNotification,
   labelCurrentNotificationNumber,
+  labelNo,
 } from '../../../../../translatedLabels';
 import { getFormattedDate, getFormattedTime } from '../../../../../dateTime';
 import { ResourceDetails } from '../../../../models';
@@ -31,7 +32,13 @@ interface DetailCardLines {
 }
 
 const DetailsLine = ({ line }: { line?: string }): JSX.Element => {
-  return <Typography variant="h5">{line}</Typography>;
+  return (
+    <Typography component="div">
+      <Box fontWeight={500} lineHeight={1}>
+        {line}
+      </Box>
+    </Typography>
+  );
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -148,7 +155,7 @@ const getDetailCardLines = (
       getLines: (): Lines => [
         {
           key: 'flapping',
-          line: <DetailsLine line={details.flapping ? 'N/A' : labelYes} />,
+          line: <DetailsLine line={details.flapping ? labelYes : labelNo} />,
         },
       ],
     },

diff --git a/www/front_src/src/Resources/Details/Body/tabs/Details/DetailsCard/index.tsx b/www/front_src/src/Resources/Details/Body/tabs/Details/DetailsCard/index.tsx
@@ -11,19 +11,15 @@ const DetailsCard = ({ title, lines }: Props): JSX.Element => {
   return (
     <Card style={{ height: '100%' }}>
       <CardContent>
-        <Grid container direction="column" spacing={1}>
-          <Grid item>
-            <Typography variant="subtitle2" color="textSecondary">
-              {title}
-            </Typography>
-          </Grid>
-          <Grid item direction="column" container>
-            {lines.map(({ key, line }) => (
-              <Grid item key={key}>
-                {line}
-              </Grid>
-            ))}
-          </Grid>
+        <Typography variant="subtitle2" color="textSecondary" gutterBottom>
+          {title}
+        </Typography>
+        <Grid direction="column" container spacing={1}>
+          {lines.map(({ key, line }) => (
+            <Grid item key={key}>
+              {line}
+            </Grid>
+          ))}
         </Grid>
       </CardContent>
     </Card>

diff --git a/www/front_src/src/Resources/Details/Body/tabs/Details/ExpandableCard.tsx b/www/front_src/src/Resources/Details/Body/tabs/Details/ExpandableCard.tsx
@@ -32,7 +32,6 @@ const useStyles = makeStyles<Theme, { severityCode?: number }>((theme) => {
       }),
     }),
     title: ({ severityCode }): CreateCSSProperties => ({
-      marginBottom: 5,
       ...(severityCode && { color: getStatusBackgroundColor(severityCode) }),
     }),
   };
@@ -53,7 +52,7 @@ const ExpandableCard = ({
 
   const [outputExpanded, setOutputExpanded] = React.useState(false);
 
-  const lines = content.split('\n');
+  const lines = content.split(/\n|\\n/);
   const threeFirstlines = lines.slice(0, 3);
   const lastlines = lines.slice(2, lines.length);
 
@@ -74,6 +73,7 @@ const ExpandableCard = ({
           className={classes.title}
           variant="subtitle2"
           color="textSecondary"
+          gutterBottom
         >
           {title}
         </Typography>

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
@@ -1,19 +1,35 @@
 import * as React from 'react';
 
 import { isNil } from 'ramda';
+import { write as writeToClipboard } from 'clipboardy';
 
-import { Grid, Card, CardContent, Typography, styled } from '@material-ui/core';
+import {
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  styled,
+  Tooltip,
+  IconButton,
+} from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
+import IconCopyFile from '@material-ui/icons/FileCopy';
+
+import { useSnackbar, Severity } from '@centreon/ui';
 
 import ExpandableCard from './ExpandableCard';
 import {
+  labelCopy,
+  labelCommand,
   labelStatusInformation,
   labelDowntimeDuration,
   labelFrom,
   labelTo,
   labelAcknowledgedBy,
   labelAt,
   labelPerformanceData,
+  labelCommandCopied,
+  labelSomethingWentWrong,
 } from '../../../../translatedLabels';
 import StateCard from './StateCard';
 import { getFormattedDateTime } from '../../../../dateTime';
@@ -46,10 +62,28 @@ interface Props {
 }
 
 const DetailsTab = ({ details }: Props): JSX.Element => {
+  const { showMessage } = useSnackbar();
+
   if (details === undefined) {
     return <LoadingSkeleton />;
   }
 
+  const copyCommandLine = (): void => {
+    writeToClipboard(details.command_line as string)
+      .then(() => {
+        showMessage({
+          message: labelCommandCopied,
+          severity: Severity.success,
+        });
+      })
+      .catch(() => {
+        showMessage({
+          message: labelSomethingWentWrong,
+          severity: Severity.error,
+        });
+      });
+  };
+
   return (
     <Grid container direction="column" spacing={2}>
       <Grid item container direction="column" spacing={2}>
@@ -108,13 +142,31 @@ const DetailsTab = ({ details }: Props): JSX.Element => {
           />
         </Grid>
       )}
-      <Grid item>
-        <Card>
-          <CardContent>
-            <Typography variant="body2">{details.check_command}</Typography>
-          </CardContent>
-        </Card>
-      </Grid>
+      {details.command_line && (
+        <Grid item>
+          <Card>
+            <CardContent>
+              <Typography
+                variant="subtitle2"
+                color="textSecondary"
+                gutterBottom
+              >
+                <Grid container alignItems="center" spacing={1}>
+                  <Grid item>{labelCommand}</Grid>
+                  <Grid item>
+                    <Tooltip onClick={copyCommandLine} title={labelCopy}>
+                      <IconButton size="small">
+                        <IconCopyFile color="primary" fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </Grid>
+                </Grid>
+              </Typography>
+              <Typography variant="body2">{details.command_line}</Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+      )}
     </Grid>
   );
 };