feat: add exclude and include tags fields to entry popups

Author: spl3g

ui/src/dashboard/Entry/AddPopup.tsx

@@ -10,6 +10,8 @@ import * as gqlDashboard from '../../gql/dashboard';
 import {Fade} from '../../common/Fade';
 import {DashboardEntryForm, isValidDashboardEntry} from './DashboardEntryForm';
 import {AddDashboardEntry, AddDashboardEntryVariables} from '../../gql/__generated__/AddDashboardEntry';
+import {handleError} from '../../utils/errors';
+import {useSnackbar} from 'notistack';
 
 interface EditPopupProps {
     dashboardId: number;
@@ -38,6 +40,9 @@ export const AddPopup: React.FC<EditPopupProps> = ({
         refetchQueries: [{query: gqlDashboard.Dashboards}],
     });
     const valid = isValidDashboardEntry(entry);
+
+    const {enqueueSnackbar} = useSnackbar();
+
     return (
         <Popper
             key="popup"
@@ -89,6 +94,8 @@ export const AddPopup: React.FC<EditPopupProps> = ({
                                                       }
                                                     : null,
                                                 rangeId: entry.statsSelection.rangeId,
+                                                excludeTags: entry.statsSelection.excludeTags,
+                                                includeTags: entry.statsSelection.includeTags,
                                             },
                                             pos: {
                                                 desktop: {
@@ -99,7 +106,9 @@ export const AddPopup: React.FC<EditPopupProps> = ({
                                                 },
                                             },
                                         },
-                                    }).then(finish);
+                                    })
+                                        .then(finish)
+                                        .catch(handleError('Add Dashboard Entry', enqueueSnackbar));
                                 }}>
                                 Add
                             </Button>

ui/src/dashboard/Entry/DashboardEntryForm.tsx

@@ -5,6 +5,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/NativeSelect/NativeSelect';
 import {EntryType, StatsInterval} from '../../gql/__generated__/globalTypes';
 import {TagKeySelector} from '../../tag/TagKeySelector';
+import {TagFilterSelector} from '../../tag/TagFilterSelector';
 import {Dashboards_dashboards_items, Dashboards_dashboards_items_statsSelection_range} from '../../gql/__generated__/Dashboards';
 import {RelativeDateTimeSelector} from '../../common/RelativeDateTimeSelector';
 import {parseRelativeTime} from '../../utils/time';
@@ -31,6 +32,27 @@ export const isValidDashboardEntry = (item: Dashboards_dashboards_items): boolea
 export const DashboardEntryForm: React.FC<EditPopupProps> = ({entry, onChange: setEntry, disabled = false, ranges}) => {
     const [staticRange, setStaticRange] = React.useState(!entry.statsSelection.rangeId);
 
+    const [excludeTags, setExcludeTags] = React.useState(
+        (entry.statsSelection.excludeTags || []).map((tag) => ({
+            tag: {
+                key: tag.key,
+                color: '',
+                __typename: 'TagDefinition' as 'TagDefinition',
+            },
+            value: tag.value,
+        }))
+    );
+    const [includeTags, setIncludeTags] = React.useState(
+        (entry.statsSelection.includeTags || []).map((tag) => ({
+            tag: {
+                key: tag.key,
+                color: '',
+                __typename: 'TagDefinition' as 'TagDefinition',
+            },
+            value: tag.value,
+        }))
+    );
+
     const range: Dashboards_dashboards_items_statsSelection_range = entry.statsSelection.range
         ? entry.statsSelection.range
         : {
@@ -189,6 +211,32 @@ export const DashboardEntryForm: React.FC<EditPopupProps> = ({entry, onChange: s
                     setEntry(entry);
                 }}
             />
+            <TagFilterSelector
+                type="Exclude"
+                value={excludeTags}
+                onChange={(tags) => {
+                    setExcludeTags(tags);
+                    entry.statsSelection.excludeTags = tags.map((tag) => ({
+                        key: tag.tag.key,
+                        value: tag.value,
+                        __typename: 'TimeSpanTag',
+                    }));
+                    setEntry(entry);
+                }}
+            />
+            <TagFilterSelector
+                type="Include"
+                value={includeTags}
+                onChange={(tags) => {
+                    setIncludeTags(tags);
+                    entry.statsSelection.includeTags = tags.map((tag) => ({
+                        key: tag.tag.key,
+                        value: tag.value,
+                        __typename: 'TimeSpanTag',
+                    }));
+                    setEntry(entry);
+                }}
+            />
         </>
     );
 };

ui/src/dashboard/Entry/EditPopup.tsx

@@ -10,6 +10,8 @@ import * as gqlDashboard from '../../gql/dashboard';
 import {UpdateDashboardEntry, UpdateDashboardEntryVariables} from '../../gql/__generated__/UpdateDashboardEntry';
 import {Fade} from '../../common/Fade';
 import {DashboardEntryForm, isValidDashboardEntry} from './DashboardEntryForm';
+import {handleError} from '../../utils/errors';
+import {useSnackbar} from 'notistack';
 
 interface EditPopupProps {
     entry: Dashboards_dashboards_items;
@@ -24,6 +26,9 @@ export const EditPopup: React.FC<EditPopupProps> = ({entry, anchorEl, onChange:
         refetchQueries: [{query: gqlDashboard.Dashboards}],
     });
     const valid = isValidDashboardEntry(entry);
+
+    const {enqueueSnackbar} = useSnackbar();
+
     return (
         <Popper
             key="popup"
@@ -75,9 +80,13 @@ export const EditPopup: React.FC<EditPopupProps> = ({entry, anchorEl, onChange:
                                                       }
                                                     : null,
                                                 rangeId: entry.statsSelection.rangeId,
+                                                excludeTags: entry.statsSelection.excludeTags,
+                                                includeTags: entry.statsSelection.includeTags,
                                             },
                                         },
-                                    }).then(() => setEdit(null));
+                                    })
+                                        .then(() => setEdit(null))
+                                        .catch(handleError('Edit Dashboard Entry', enqueueSnackbar));
                                 }}>
                                 Save
                             </Button>