Skip to content

Commit

Permalink
Merge branch 'fix-source-filter-not-shown'
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmpf
hmpf committed Nov 17, 2020
2 parents bc00949 + 00adf8d commit e1b26ca
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 61 deletions.
60 changes: 39 additions & 21 deletions src/views/filters/FiltersView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,29 @@ 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";
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 from "../../components/incidenttable/FilteredIncidentTable";

type FiltersTablePropsType = {
filters: Filter[];
Expand Down Expand Up @@ -97,7 +101,9 @@ const FiltersTable: React.FC<FiltersTablePropsType> = ({
>
Delete
</Button>
<Button onClick={() => onFilterEdit(filter)}>Edit</Button>
<Button startIcon={<EditIcon />} onClick={() => onFilterEdit(filter)}>
Edit
</Button>
</TableCell>
</TableRow>
);
Expand Down Expand Up @@ -307,24 +313,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>
</>
);
Expand Down
98 changes: 58 additions & 40 deletions src/views/incident/IncidentView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 (
Expand All @@ -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 && (
Expand All @@ -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>
Expand Down

0 comments on commit e1b26ca

Please sign in to comment.