From b6aa84a00fad661e5c56bbe4dc2e86c919af233a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Bele=20Reinfjell?= <jorgen.bele@gmail.com>
Date: Tue, 3 Nov 2020 12:57:12 +0100
Subject: [PATCH 1/3] Improve UI and fix bugs in filter view

UI improvements:
 - Display helper text and placeholders
   in the tag and source selectors.

BUGFIXES:
 - Properly handle updated primary keys
   when deleting a filter then creating a new one
   with the same name.

 - Pass the sourceSystemIds by id to FilteredIncidentTable,
   which didn't happen (and wasn't supported) previously.
---
 src/views/filters/FiltersView.tsx | 61 ++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/views/filters/FiltersView.tsx b/src/views/filters/FiltersView.tsx
index c95dbe7f..54fa193f 100644
--- a/src/views/filters/FiltersView.tsx
+++ b/src/views/filters/FiltersView.tsx
@@ -9,10 +9,15 @@ import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import DeleteIcon from "@material-ui/icons/Delete";
-import Spinning from "../../components/spinning";
 import VisibilityIcon from "@material-ui/icons/Visibility";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Typography from "@material-ui/core/Typography";
+import EditIcon from "@material-ui/icons/EditOutlined";
+
+import Spinning from "../../components/spinning";
 
-import Header from "../../components/header/Header";
+import { ENABLE_WEBSOCKETS_SUPPORT } from "../../config";
 
 import "../../components/incidenttable/incidenttable.css";
 import FilterBuilder from "../../components/filterbuilder/FilterBuilder";
@@ -20,14 +25,14 @@ import { withRouter } from "react-router-dom";
 import api, { IncidentMetadata, Filter, FilterDefinition, FilterSuccessResponse, SourceSystem } from "../../api";
 import { toMapNum, toMapStr, pkGetter } from "../../utils";
 import TagSelector, { Tag, originalToTag } from "../../components/tagselector";
-import FilteredIncidentTable from "../../components/incidenttable/FilteredIncidentTable";
 
 import "../../components/incidenttable/incidenttable.css";
 
 import { FiltersContext, FiltersContextType, DEFAULT_FILTERS_CONTEXT_VALUE } from "../../components/filters/contexts";
 import { useAlertSnackbar, UseAlertSnackbarResultType } from "../../components/alertsnackbar";
 
-import { ENABLE_WEBSOCKETS_SUPPORT } from "../../config";
+import FilteredIncidentTable, { IncidentsFilter } from "../../components/incidenttable/FilteredIncidentTable";
+import { IncidentFilterToolbar } from "../../components/incident/IncidentFilterToolbar";
 
 type FiltersTablePropsType = {
   filters: Filter[];
@@ -97,7 +102,9 @@ const FiltersTable: React.FC<FiltersTablePropsType> = ({
                     >
                       Delete
                     </Button>
-                    <Button onClick={() => onFilterEdit(filter)}>Edit</Button>
+                    <Button startIcon={<EditIcon />} onClick={() => onFilterEdit(filter)}>
+                      Edit
+                    </Button>
                   </TableCell>
                 </TableRow>
               );
@@ -307,24 +314,36 @@ const FiltersView: React.FC<FiltersViewPropsType> = ({}: FiltersViewPropsType) =
     <>
       {filtersSnackbar}
       <div>
-        <header>
-          <Header />
-        </header>
-        <h1 className={"filterHeader"}>Your filters</h1>
         <FiltersContext.Provider value={filtersContext}>
-          <FiltersTable
-            filters={filters}
-            onFilterPreview={handleFilterPreview}
-            onFilterEdit={(filter: Filter) => {
-              setEditingFilter(filter);
-            }}
-            onFilterDelete={handleFilterDelete}
-          />
-          <h1 className={"filterHeader"}>Create filter</h1>
-          {filterBuilder}
+          <Card>
+            <CardContent>
+              <Typography variant="h5" gutterBottom>
+                Your incident filters
+              </Typography>
+
+              <FiltersTable
+                filters={filters}
+                onFilterPreview={handleFilterPreview}
+                onFilterEdit={(filter: Filter) => {
+                  setEditingFilter(filter);
+                }}
+                onFilterDelete={handleFilterDelete}
+              />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent>
+              <Typography variant="h5" gutterBottom>
+                Create and preview filters
+              </Typography>
+              {filterBuilder}
+              <Typography color="textSecondary" gutterBottom>
+                Incidents matching filter
+              </Typography>
+              <FilteredIncidentTable filter={previewFilter} onLoad={useCallback(() => handleIncidentsLoaded(), [])} />
+            </CardContent>
+          </Card>
         </FiltersContext.Provider>
-        <h1 className={"filterHeader"}>Incidents</h1>
-        <FilteredIncidentTable filter={previewFilter} onLoad={useCallback(() => handleIncidentsLoaded(), [])} />
       </div>
     </>
   );

From e65bafcf010e0f1f7e1e283c56d4561682a925b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Bele=20Reinfjell?= <jorgen.bele@gmail.com>
Date: Tue, 3 Nov 2020 14:24:33 +0100
Subject: [PATCH 2/3] Change filter options to ButtonGroup based switch and
 improve layout

---
 src/views/incident/IncidentView.tsx | 98 +++++++++++++++++------------
 1 file changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/views/incident/IncidentView.tsx b/src/views/incident/IncidentView.tsx
index c331a07c..43256695 100644
--- a/src/views/incident/IncidentView.tsx
+++ b/src/views/incident/IncidentView.tsx
@@ -8,12 +8,10 @@ import { withRouter } from "react-router-dom";
 import Checkbox from "@material-ui/core/Checkbox";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-
+import Button from "@material-ui/core/Button";
+import ButtonGroup from "@material-ui/core/ButtonGroup";
 import Grid from "@material-ui/core/Grid";
-
 import Typography from "@material-ui/core/Typography";
-import Select from "@material-ui/core/Select";
-import MenuItem from "@material-ui/core/MenuItem";
 
 import api, { IncidentMetadata, SourceSystem } from "../../api";
 
@@ -45,10 +43,9 @@ const IncidentView: React.FC<IncidentViewPropsType> = ({}: IncidentViewPropsType
     });
   }, []);
 
-  const handleShowChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setShow(event.target.value as "open" | "closed" | "both");
-  };
-
+  // const handleShowChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+  //   setShow(event.target.value as "open" | "closed" | "both");
+  // };
   const disabled = false;
 
   return (
@@ -59,19 +56,38 @@ const IncidentView: React.FC<IncidentViewPropsType> = ({}: IncidentViewPropsType
       <h1 className={"filterHeader"}>Incidents</h1>
       <Card>
         <CardContent>
-          <Grid container xl direction="row" justify="space-evenly" alignItems="stretch">
-            <Grid item md>
-              <Typography>Show open/closed</Typography>
-              <Select disabled={disabled} variant="outlined" value={show} onChange={handleShowChange}>
-                <MenuItem value={"open"}>Open</MenuItem>
-                <MenuItem value={"closed"}>Closed</MenuItem>
-                <MenuItem value={"both"}>Both</MenuItem>
-              </Select>
-            </Grid>
+          <Typography color="textSecondary" gutterBottom>
+            Incidents filter
+          </Typography>
+          <Grid container xl direction="row" justify="space-evenly" spacing={4}>
+            <Grid item container sm={5} direction="row">
+              <Grid item sm>
+                <Typography>State</Typography>
+
+                <ButtonGroup variant="contained" color="default" aria-label="text primary button group">
+                  <Button color={show === "open" ? "primary" : undefined} onClick={() => setShow("open")}>
+                    Open
+                  </Button>
+                  <Button color={show === "closed" ? "primary" : undefined} onClick={() => setShow("closed")}>
+                    Closed
+                  </Button>
+                  <Button color={show === "both" ? "primary" : undefined} onClick={() => setShow("both")}>
+                    Both
+                  </Button>
+                </ButtonGroup>
+              </Grid>
 
-            <Grid item md>
-              <Typography>Show acked events</Typography>
-              <Checkbox disabled={disabled} checked={showAcked} onClick={() => setShowAcked((old) => !old)} />
+              <Grid item sm>
+                <Typography>Acked</Typography>
+                <ButtonGroup variant="contained" color="default" aria-label="text primary button group">
+                  <Button color={!showAcked ? "primary" : undefined} onClick={() => setShowAcked(false)}>
+                    Only unacked
+                  </Button>
+                  <Button color={showAcked ? "primary" : undefined} onClick={() => setShowAcked(true)}>
+                    All
+                  </Button>
+                </ButtonGroup>
+              </Grid>
             </Grid>
 
             {ENABLE_WEBSOCKETS_SUPPORT && (
@@ -81,27 +97,29 @@ const IncidentView: React.FC<IncidentViewPropsType> = ({}: IncidentViewPropsType
               </Grid>
             )}
 
-            <Grid item md>
-              <Typography>Sources to display</Typography>
-              <SourceSelector
-                disabled={disabled}
-                sources={knownSources}
-                onSelectionChange={(selection: string[]) => {
-                  setSources((selection.length !== 0 && selection) || "AllSources");
-                }}
-                defaultSelected={[]}
-              />
-            </Grid>
+            <Grid item container md direction="row" spacing={4}>
+              <Grid item md>
+                <Typography>Sources to display</Typography>
+                <SourceSelector
+                  disabled={disabled}
+                  sources={knownSources}
+                  onSelectionChange={(selection: string[]) => {
+                    setSources((selection.length !== 0 && selection) || "AllSources");
+                  }}
+                  defaultSelected={sources === "AllSources" ? [] : sources}
+                />
+              </Grid>
 
-            <Grid item md>
-              <Typography>Tags filter</Typography>
-              <TagSelector
-                disabled={disabled}
-                tags={tags}
-                onSelectionChange={useCallback((selection: Tag[]) => {
-                  setTagsFilter(selection);
-                }, [])}
-              />
+              <Grid item md>
+                <Typography>Tags filter</Typography>
+                <TagSelector
+                  disabled={disabled}
+                  tags={tags}
+                  onSelectionChange={useCallback((selection: Tag[]) => {
+                    setTagsFilter(selection);
+                  }, [])}
+                />
+              </Grid>
             </Grid>
           </Grid>
         </CardContent>

From 00adf8d148a2fdf681cc35e76d06d526ee170031 Mon Sep 17 00:00:00 2001
From: Hanne Moa <hanne.moa@uninett.no>
Date: Mon, 16 Nov 2020 10:56:17 +0100
Subject: [PATCH 3/3] Remove unused imports

---
 src/views/filters/FiltersView.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/filters/FiltersView.tsx b/src/views/filters/FiltersView.tsx
index 54fa193f..30a5063c 100644
--- a/src/views/filters/FiltersView.tsx
+++ b/src/views/filters/FiltersView.tsx
@@ -31,8 +31,7 @@ import "../../components/incidenttable/incidenttable.css";
 import { FiltersContext, FiltersContextType, DEFAULT_FILTERS_CONTEXT_VALUE } from "../../components/filters/contexts";
 import { useAlertSnackbar, UseAlertSnackbarResultType } from "../../components/alertsnackbar";
 
-import FilteredIncidentTable, { IncidentsFilter } from "../../components/incidenttable/FilteredIncidentTable";
-import { IncidentFilterToolbar } from "../../components/incident/IncidentFilterToolbar";
+import FilteredIncidentTable from "../../components/incidenttable/FilteredIncidentTable";
 
 type FiltersTablePropsType = {
   filters: Filter[];