[Web UI] Use cron value in check list (#1910)

Signed-off-by: James Phillips <jamesdphillips@gmail.com>

Author: jamesdphillips

dashboard/src/components/partials/CheckDetailsContainer/CheckDetailsContainer.js

@@ -102,7 +102,7 @@ class CheckDetailsContainer extends React.PureComponent {
     if (interval > 0) {
       return `Every ${interval}s`;
     } else if (cron && cron.length > 0) {
-      return <CronDescriptor expression={cron} />;
+      return <CronDescriptor capitalize expression={cron} />;
     }
     return "Never";
   }

dashboard/src/components/partials/ChecksList/ChecksListItem.js

@@ -5,6 +5,7 @@ import gql from "graphql-tag";
 import Checkbox from "@material-ui/core/Checkbox";
 import Code from "/components/Code";
 import ConfirmDelete from "/components/partials/ConfirmDelete";
+import CronDescriptor from "/components/partials/CronDescriptor";
 import IconButton from "@material-ui/core/IconButton";
 import Menu from "@material-ui/core/Menu";
 import MenuController from "/components/controller/MenuController";
@@ -36,6 +37,7 @@ class CheckListItem extends React.Component {
         command
         subscriptions
         interval
+        cron
         isSilenced
         namespace {
           organization
@@ -85,9 +87,17 @@ class CheckListItem extends React.Component {
               <React.Fragment>
                 <Code>{check.command}</Code>
                 <br />
-                Executed every{" "}
+                Executed{" "}
                 <strong>
-                  {check.interval} {check.interval === 1 ? "second" : "seconds"}
+                  {check.interval ? (
+                    `
+                      every
+                      ${check.interval}
+                      ${check.interval === 1 ? "second" : "seconds"}
+                    `
+                  ) : (
+                    <CronDescriptor expression={check.cron} />
+                  )}
                 </strong>{" "}
                 by{" "}
                 <strong>

dashboard/src/components/partials/CronDescriptor/CronDescriptor.js

@@ -1,21 +1,28 @@
 import React from "react";
 import PropTypes from "prop-types";
+import lowerFirst from "lodash/lowerFirst";
 import cronstrue from "cronstrue";
 import Tooltip from "@material-ui/core/Tooltip";
 
 class CronDescriptor extends React.PureComponent {
   static propTypes = {
+    capitalize: PropTypes.bool,
     expression: PropTypes.string.isRequired,
     component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   };
 
   static defaultProps = {
+    capitalize: false,
     component: "span",
   };
 
   render() {
-    const { expression, component: Component } = this.props;
-    const statement = cronstrue.toString(expression);
+    const { capitalize, expression, component: Component } = this.props;
+
+    let statement = cronstrue.toString(expression);
+    if (!capitalize) {
+      statement = lowerFirst(statement);
+    }
 
     return (
       <Tooltip title={expression}>

dashboard/src/components/partials/EventsList/EventsListItem.js

@@ -54,6 +54,9 @@ class EventListItem extends React.PureComponent {
           name
           output
           isSilenced
+          history(first: 1) {
+            status
+          }
         }
         entity {
           name
@@ -121,8 +124,16 @@ class EventListItem extends React.PureComponent {
     const { selected, event } = this.props;
     const { entity, check, timestamp } = event;
 
+    // Try to determine if the failing check just started failing and if so
+    // highlight the row.
+    const incidentStarted =
+      check.status > 0 &&
+      check.history.length > 0 &&
+      check.history[0].status !== check.status &&
+      new Date(new Date(timestamp).valueOf() + 2500) >= new Date();
+
     return (
-      <TableSelectableRow selected={selected}>
+      <TableSelectableRow selected={selected} highlight={incidentStarted}>
         <TableCell padding="checkbox">
           <Checkbox
             color="primary"

dashboard/src/components/partials/TableSelectableRow/TableSelectableRow.js

@@ -5,34 +5,74 @@ import { withStyles } from "@material-ui/core/styles";
 
 import TableRow from "@material-ui/core/TableRow";
 
-const styles = theme => ({
-  root: {
-    verticalAlign: "top",
+const styles = theme => {
+  const transitionIn = `
+    background-color
+    ${theme.transitions.duration.shortest}ms
+    ${theme.transitions.easing.sharp}
+  `;
+  const transitionOut = `
+    background-color
+    ${theme.transitions.duration.complex}ms
+    ${theme.transitions.easing.easeOut}
+  `;
 
-    // hover
+  return {
+    root: {
+      verticalAlign: "top",
+      transition: transitionOut,
+
+      // hover
+      // https://material.io/guidelines/components/data-tables.html#data-tables-interaction
+      "&:hover": {
+        backgroundColor: theme.palette.action.hover,
+        transition: transitionIn,
+      },
+    },
+    // selected
     // https://material.io/guidelines/components/data-tables.html#data-tables-interaction
-    "&:hover": {
-      backgroundColor: theme.palette.action.selected,
+    selected: {
+      backgroundColor: theme.palette.action.hover,
+      transition: transitionIn,
+    },
+    highlight: {
+      animation: `
+        ${theme.transitions.duration.complex}ms
+        ${theme.transitions.easing.easeInOut}
+        0s
+        alternate
+        2
+        selectable-row-highlight
+      `,
+    },
+    "@keyframes selectable-row-highlight": {
+      "0%": {
+        backgroundColor: "inherit",
+      },
+      "100%": {
+        backgroundColor: theme.palette.action.hover,
+      },
     },
-  },
-  // selected
-  // https://material.io/guidelines/components/data-tables.html#data-tables-interaction
-  selected: {
-    backgroundColor: theme.palette.action.hover,
-  },
-});
+  };
+};
 
 class TableSelectableRow extends React.PureComponent {
   static propTypes = {
     selected: PropTypes.bool.isRequired,
     children: PropTypes.node.isRequired,
     classes: PropTypes.object.isRequired,
+    highlight: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    highlight: false,
   };
 
   render() {
-    const { classes, selected, children, ...props } = this.props;
+    const { classes, selected, children, highlight, ...props } = this.props;
     const className = classnames(classes.root, {
       [classes.selected]: selected,
+      [classes.highlight]: highlight,
     });
 
     return (