[Web UI] Update filtering to use JS expressions (#2339)

Signed-off-by: James Phillips <jamesdphillips@gmail.com>
sensu · Nov 15, 2018 · eaa6196 · eaa6196
1 parent a432f77
commit eaa6196
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 30 deletions.
diff --git a/dashboard/src/components/partials/ChecksList/ChecksListHeader.js b/dashboard/src/components/partials/ChecksList/ChecksListHeader.js
@@ -53,7 +53,9 @@ class ChecksListHeader extends React.PureComponent {
   };
 
   updateFilter = val => {
-    this.props.onChangeQuery({ filter: `'${val}' IN Subscriptions` });
+    this.props.onChangeQuery({
+      filter: `subscriptions.indexOf("${val}") >= 0`,
+    });
   };
 
   renderActions = () => {

diff --git a/dashboard/src/components/partials/EntitiesList/EntitiesListHeader.js b/dashboard/src/components/partials/EntitiesList/EntitiesListHeader.js
@@ -43,7 +43,7 @@ class EntitiesListHeader extends React.PureComponent {
   };
 
   updateFilter = val => {
-    const filter = `'${val}' IN Subscriptions`;
+    const filter = `subscriptions.indexOf("${val}") >= 0`;
     this.props.onChangeQuery({ filter });
   };
 

diff --git a/dashboard/src/components/partials/EventsList/EventsListHeader.js b/dashboard/src/components/partials/EventsList/EventsListHeader.js
@@ -2,19 +2,27 @@ import React from "react";
 import PropTypes from "prop-types";
 import gql from "graphql-tag";
 
-import StatusMenu from "/components/partials/StatusMenu";
-import ListHeader from "/components/partials/ListHeader";
-
 import ConfirmDelete from "/components/partials/ConfirmDelete";
 import DeleteMenuItem from "/components/partials/ToolbarMenuItems/Delete";
 import ExecuteMenuItem from "/components/partials/ToolbarMenuItems/QueueExecution";
+import ListHeader from "/components/partials/ListHeader";
 import ResolveMenuItem from "/components/partials/ToolbarMenuItems/Resolve";
 import Select, { Option } from "/components/partials/ToolbarMenuItems/Select";
 import SilenceMenuItem from "/components/partials/ToolbarMenuItems/Silence";
 import SubmenuItem from "/components/partials/ToolbarMenuItems/Submenu";
 import ToolbarMenu from "/components/partials/ToolbarMenu";
 import UnsilenceMenuItem from "/components/partials/ToolbarMenuItems/Unsilence";
 
+import StatusMenu from "./StatusMenu";
+
+const filterMap = {
+  ok: "check.status === 0",
+  warning: "check.status === 1",
+  critical: "check.status === 2",
+  unknown: "check.status > 2",
+  incident: "check.status > 0",
+};
+
 class EventsListHeader extends React.Component {
   static propTypes = {
     onClickClearSilences: PropTypes.func.isRequired,
@@ -62,36 +70,35 @@ class EventsListHeader extends React.Component {
   };
 
   requeryEntity = newValue => {
-    this.props.onChangeQuery({ filter: `Entity.ID == '${newValue}'` });
+    this.props.onChangeQuery({ filter: `entity.name === "${newValue}"` });
   };
 
   requeryCheck = newValue => {
-    this.props.onChangeQuery({ filter: `Check.Name == '${newValue}'` });
+    this.props.onChangeQuery({ filter: `check.name === "${newValue}"` });
   };
 
   requeryHide = newValue => {
     if (newValue === "passing") {
-      this.props.onChangeQuery({ filter: `Check.Status != 0` });
+      this.props.onChangeQuery({ filter: `check.status !== 0` });
     } else if (newValue === "silenced") {
-      this.props.onChangeQuery({ filter: `!IsSilenced` });
+      this.props.onChangeQuery({ filter: `!is_silenced` });
     } else {
       throw new TypeError(`unknown value ${newValue}`);
     }
   };
 
   requeryStatus = newValue => {
-    if (Array.isArray(newValue)) {
-      if (newValue.length === 1) {
-        this.props.onChangeQuery({ filter: `Check.Status == ${newValue}` });
-      } else {
-        const val = newValue.join(",");
-        this.props.onChangeQuery({ filter: `Check.Status IN (${val})` });
-      }
-    } else if (newValue === "") {
+    if (newValue === "") {
       this.props.onChangeQuery(query => query.delete("filter"));
-    } else {
-      this.props.onChangeQuery({ filter: newValue });
+      return;
     }
+
+    const filter = filterMap[newValue];
+    if (!filter) {
+      throw new Error("received unexpected argument");
+    }
+
+    this.props.onChangeQuery({ filter });
   };
 
   updateSort = newValue => {

diff --git a/...ard/src/components/partials/StatusMenu.js → ...ponents/partials/EventsList/StatusMenu.js b/...ard/src/components/partials/StatusMenu.js → ...ponents/partials/EventsList/StatusMenu.js
@@ -28,34 +28,31 @@ class StatusMenu extends React.Component {
 
     return (
       <Menu anchorEl={anchorEl} className={className} onClose={onClose} open>
-        <MenuItem
-          key="incident"
-          onClick={() => onChange("HasCheck && IsIncident")}
-        >
+        <MenuItem key="incident" onClick={() => onChange("incident")}>
           <ListItemIcon>
             <ErrorHollow />
           </ListItemIcon>
           <ListItemText primary="Incident" />
         </MenuItem>
-        <MenuItem key="warning" onClick={() => onChange([1])}>
+        <MenuItem key="warning" onClick={() => onChange("warning")}>
           <ListItemIcon>
             <CheckStatusIcon statusCode={1} />
           </ListItemIcon>
           <ListItemText primary="Warning" />
         </MenuItem>
-        <MenuItem key="critical" onClick={() => onChange([2])}>
+        <MenuItem key="critical" onClick={() => onChange("critical")}>
           <ListItemIcon>
             <CheckStatusIcon statusCode={2} />
           </ListItemIcon>
           <ListItemText primary="Critical" />
         </MenuItem>
-        <MenuItem key="unknown" onClick={() => onChange([3])}>
+        <MenuItem key="unknown" onClick={() => onChange("warning")}>
           <ListItemIcon>
             <CheckStatusIcon statusCode={3} />
           </ListItemIcon>
           <ListItemText primary="Unknown" />
         </MenuItem>
-        <MenuItem key="passing" onClick={() => onChange([0])}>
+        <MenuItem key="passing" onClick={() => onChange("ok")}>
           <ListItemIcon>
             <CheckStatusIcon statusCode={0} />
           </ListItemIcon>

diff --git a/dashboard/src/components/relocation/ExecuteCheckStatusToast.js b/dashboard/src/components/relocation/ExecuteCheckStatusToast.js
@@ -71,8 +71,8 @@ class ExecuteCheckStatusToast extends React.PureComponent {
                     component={NamespaceLink}
                     namespace={namespace}
                     to={`/events?filter=${encodeURIComponent(
-                      `Check.Name == '${checkName}'${
-                        entityName ? ` && Entity.ID == '${entityName}'` : ""
+                      `check.name === "${checkName}"${
+                        entityName ? ` && entity.name === "${entityName}"` : ""
                       }`,
                     )}`}
                   >

diff --git a/dashboard/src/components/views/EnvironmentView/EventsContent.js b/dashboard/src/components/views/EnvironmentView/EventsContent.js
@@ -11,7 +11,7 @@ import Query from "/components/util/Query";
 import { withQueryParams } from "/components/QueryParams";
 
 // If none given default expression is used.
-const defaultExpression = "HasCheck";
+const defaultExpression = "has_check";
 
 // duration used when polling is enabled; set fairly high until we understand
 // the impact.