From 78bd3b80e2ef9fe0be4705a4e8fc10a3f21cba87 Mon Sep 17 00:00:00 2001
From: Kiss Miklos <miklos@roadie.io>
Date: Wed, 11 Jan 2023 16:00:59 +0100
Subject: [PATCH 1/6] add filter to sentry table

Signed-off-by: Kiss Miklos <miklos@roadie.io>
---
 .../src/components/Select/Select.tsx          |  6 ++-
 .../SentryIssuesTable/SentryIssuesTable.tsx   | 54 +++++++++++++++----
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index 9cb8822a05..f0f65d2fac 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -128,7 +128,7 @@ export type SelectedItems = string | string[] | number | number[];
 export type SelectProps = {
   multiple?: boolean;
   items: SelectItem[];
-  label: string;
+  label?: string;
   placeholder?: string;
   selected?: SelectedItems;
   onChange: (arg: SelectedItems) => void;
@@ -200,7 +200,9 @@ export function SelectComponent(props: SelectProps) {
     <Box className={classes.root}>
       <ClickAwayListener onClickAway={handleClickAway}>
         <FormControl className={classes.formControl}>
-          <InputLabel className={classes.formLabel}>{label}</InputLabel>
+          {label && (
+            <InputLabel className={classes.formLabel}>{label}</InputLabel>
+          )}
           <Select
             aria-label={label}
             value={value}
diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
index abe29efd7f..666a207919 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
+++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
@@ -14,12 +14,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { SentryIssue } from '../../api';
-import { DateTime } from 'luxon';
+import { DateTime, Duration } from 'luxon';
 import { ErrorCell } from '../ErrorCell/ErrorCell';
 import { ErrorGraph } from '../ErrorGraph/ErrorGraph';
-import { Table, TableColumn } from '@backstage/core-components';
+import {
+  Table,
+  TableColumn,
+  Select,
+  SelectedItems,
+} from '@backstage/core-components';
 import { Options } from '@material-table/core';
 
 const columns: TableColumn[] = [
@@ -66,14 +71,43 @@ type SentryIssuesTableProps = {
 
 const SentryIssuesTable = (props: SentryIssuesTableProps) => {
   const { sentryIssues, statsFor, tableOptions } = props;
+  const [filteredIssues, setFilteredIssues] = useState(sentryIssues);
+
+  const handleFilterChange = (item: SelectedItems) => {
+    if (item === Number.NEGATIVE_INFINITY) {
+      setFilteredIssues(sentryIssues);
+      return;
+    }
+    if (typeof item === 'number') {
+      setFilteredIssues(
+        sentryIssues.filter(
+          i =>
+            DateTime.fromISO(i.lastSeen) >
+            DateTime.now().minus(Duration.fromMillis(item)),
+        ),
+      );
+    }
+  };
   return (
-    <Table
-      columns={columns}
-      options={tableOptions}
-      title="Sentry issues"
-      subtitle={statsFor ? `Last ${statsFor}` : undefined}
-      data={sentryIssues}
-    />
+    <>
+      <Select
+        selected={14 * 86400000}
+        onChange={handleFilterChange}
+        items={[
+          { label: '24H', value: 86400000 },
+          { label: '7D', value: 7 * 86400000 },
+          { label: '14D', value: 14 * 86400000 },
+          { label: 'All', value: Number.NEGATIVE_INFINITY },
+        ]}
+      />
+      <Table
+        columns={columns}
+        options={tableOptions}
+        title="Sentry issues"
+        subtitle={statsFor ? `Stat for ${statsFor}` : undefined}
+        data={filteredIssues}
+      />
+    </>
   );
 };
 

From 6a8d6b9a0c4865d7def0b99829b894b9ad101d7a Mon Sep 17 00:00:00 2001
From: Kiss Miklos <miklos@roadie.io>
Date: Thu, 12 Jan 2023 12:31:17 +0100
Subject: [PATCH 2/6] add changesets

Signed-off-by: Kiss Miklos <miklos@roadie.io>
---
 .changeset/beige-cobras-leave.md    | 5 +++++
 .changeset/silver-wolves-breathe.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/beige-cobras-leave.md
 create mode 100644 .changeset/silver-wolves-breathe.md

diff --git a/.changeset/beige-cobras-leave.md b/.changeset/beige-cobras-leave.md
new file mode 100644
index 0000000000..fccefe616b
--- /dev/null
+++ b/.changeset/beige-cobras-leave.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Make the <Select /> component's label prop optional.
diff --git a/.changeset/silver-wolves-breathe.md b/.changeset/silver-wolves-breathe.md
new file mode 100644
index 0000000000..8c1529e142
--- /dev/null
+++ b/.changeset/silver-wolves-breathe.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-sentry': minor
+---
+
+Add option to filter issues based on the time it was triggered

From c2fdf0c7f570f7063eb6ad8350084138c23a0e28 Mon Sep 17 00:00:00 2001
From: Kiss Miklos <miklos@roadie.io>
Date: Thu, 12 Jan 2023 17:36:38 +0100
Subject: [PATCH 3/6] use regular mui Select

Signed-off-by: Kiss Miklos <miklos@roadie.io>
---
 .../src/components/Select/Select.tsx          |  2 +-
 .../SentryIssuesTable/SentryIssuesTable.tsx   | 77 +++++++++++--------
 2 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index f0f65d2fac..9708440249 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -128,7 +128,7 @@ export type SelectedItems = string | string[] | number | number[];
 export type SelectProps = {
   multiple?: boolean;
   items: SelectItem[];
-  label?: string;
+  label: string;
   placeholder?: string;
   selected?: SelectedItems;
   onChange: (arg: SelectedItems) => void;
diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
index 666a207919..60ee6b7dbf 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
+++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
@@ -14,18 +14,19 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { SentryIssue } from '../../api';
 import { DateTime, Duration } from 'luxon';
 import { ErrorCell } from '../ErrorCell/ErrorCell';
 import { ErrorGraph } from '../ErrorGraph/ErrorGraph';
-import {
-  Table,
-  TableColumn,
-  Select,
-  SelectedItems,
-} from '@backstage/core-components';
+import { Table, TableColumn } from '@backstage/core-components';
+import Select from '@material-ui/core/Select';
 import { Options } from '@material-table/core';
+import { FormControl, Grid, MenuItem } from '@material-ui/core';
+
+const ONE_DAY_IN_MILLIS = 86400000;
+const SEVEN_DAYS_IN_MILLIS = ONE_DAY_IN_MILLIS * 7;
+const FOURTEEN_DAYS_IN_MILLIS = ONE_DAY_IN_MILLIS * 14;
 
 const columns: TableColumn[] = [
   {
@@ -71,40 +72,52 @@ type SentryIssuesTableProps = {
 
 const SentryIssuesTable = (props: SentryIssuesTableProps) => {
   const { sentryIssues, statsFor, tableOptions } = props;
-  const [filteredIssues, setFilteredIssues] = useState(sentryIssues);
+  const [selected, setSelected] = useState(ONE_DAY_IN_MILLIS);
 
-  const handleFilterChange = (item: SelectedItems) => {
-    if (item === Number.NEGATIVE_INFINITY) {
-      setFilteredIssues(sentryIssues);
-      return;
-    }
+  const filterByDate = useCallback((issue, selectedFilter) => {
+    return (
+      DateTime.fromISO(issue.lastSeen) >
+      DateTime.now().minus(Duration.fromMillis(selectedFilter))
+    );
+  }, []);
+  const [filteredIssues, setFilteredIssues] = useState(
+    sentryIssues.filter(i => filterByDate(i, selected)),
+  );
+
+  const handleFilterChange = (
+    event: React.ChangeEvent<{ name?: string; value: unknown }>,
+  ) => {
+    const item = event.target.value;
     if (typeof item === 'number') {
-      setFilteredIssues(
-        sentryIssues.filter(
-          i =>
-            DateTime.fromISO(i.lastSeen) >
-            DateTime.now().minus(Duration.fromMillis(item)),
-        ),
-      );
+      setSelected(item);
+      if (item === Number.NEGATIVE_INFINITY) {
+        setFilteredIssues(sentryIssues);
+        return;
+      }
+      setFilteredIssues(sentryIssues.filter(i => filterByDate(i, item)));
     }
   };
   return (
     <>
-      <Select
-        selected={14 * 86400000}
-        onChange={handleFilterChange}
-        items={[
-          { label: '24H', value: 86400000 },
-          { label: '7D', value: 7 * 86400000 },
-          { label: '14D', value: 14 * 86400000 },
-          { label: 'All', value: Number.NEGATIVE_INFINITY },
-        ]}
-      />
       <Table
         columns={columns}
         options={tableOptions}
-        title="Sentry issues"
-        subtitle={statsFor ? `Stat for ${statsFor}` : undefined}
+        title={
+          <Grid container>
+            <Grid item>Sentry Issues</Grid>
+            <Grid item>
+              <FormControl variant="outlined" size="small">
+                <Select value={selected} onChange={handleFilterChange}>
+                  <MenuItem value={ONE_DAY_IN_MILLIS}>24H</MenuItem>
+                  <MenuItem value={SEVEN_DAYS_IN_MILLIS}>7D</MenuItem>
+                  <MenuItem value={FOURTEEN_DAYS_IN_MILLIS}>14D</MenuItem>
+                  <MenuItem value={Number.NEGATIVE_INFINITY}>All</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+          </Grid>
+        }
+        subtitle={statsFor ? `Stats for ${statsFor}` : undefined}
         data={filteredIssues}
       />
     </>

From d12d1d95bb7635a6654a1bbfded479a054968b41 Mon Sep 17 00:00:00 2001
From: Kiss Miklos <miklos@roadie.io>
Date: Thu, 12 Jan 2023 17:45:56 +0100
Subject: [PATCH 4/6] remove changeset

Signed-off-by: Kiss Miklos <miklos@roadie.io>
---
 .changeset/beige-cobras-leave.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/beige-cobras-leave.md

diff --git a/.changeset/beige-cobras-leave.md b/.changeset/beige-cobras-leave.md
deleted file mode 100644
index fccefe616b..0000000000
--- a/.changeset/beige-cobras-leave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@backstage/core-components': minor
----
-
-Make the <Select /> component's label prop optional.

From f18e86d58f8b5c45f4dda9d376ce33bc975ecce0 Mon Sep 17 00:00:00 2001
From: Kiss Miklos <miklos@roadie.io>
Date: Thu, 12 Jan 2023 17:47:01 +0100
Subject: [PATCH 5/6] revert label changes

Signed-off-by: Kiss Miklos <miklos@roadie.io>
---
 packages/core-components/src/components/Select/Select.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index 9708440249..9cb8822a05 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -200,9 +200,7 @@ export function SelectComponent(props: SelectProps) {
     <Box className={classes.root}>
       <ClickAwayListener onClickAway={handleClickAway}>
         <FormControl className={classes.formControl}>
-          {label && (
-            <InputLabel className={classes.formLabel}>{label}</InputLabel>
-          )}
+          <InputLabel className={classes.formLabel}>{label}</InputLabel>
           <Select
             aria-label={label}
             value={value}

From 5523f06afc08ad6637ded3aa48340a08060fa74f Mon Sep 17 00:00:00 2001
From: Kiss Miklos <miklos@roadie.io>
Date: Tue, 17 Jan 2023 02:28:52 +0100
Subject: [PATCH 6/6] fix tests

Signed-off-by: Kiss Miklos <miklos@roadie.io>
---
 .../components/SentryIssuesTable/SentryIssuesTable.test.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
index 647208f141..5bf6b1e92b 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
+++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
@@ -19,6 +19,7 @@ import SentryIssuesTable from './SentryIssuesTable';
 import { SentryIssue } from '../../api';
 import mockIssue from '../../api/mock/sentry-issue-mock.json';
 import { renderInTestApp } from '@backstage/test-utils';
+import { DateTime } from 'luxon';
 
 describe('SentryIssuesTable', () => {
   it('should render headers in a table', async () => {
@@ -62,6 +63,7 @@ describe('SentryIssuesTable', () => {
         },
         count: '101',
         userCount: 202,
+        lastSeen: DateTime.now().toISO(),
       },
     ];
     const table = await renderInTestApp(
@@ -105,6 +107,6 @@ describe('SentryIssuesTable', () => {
         }}
       />,
     );
-    expect(await table.findByText('Last 24h')).toBeInTheDocument();
+    expect(await table.findByText('Stats for 24h')).toBeInTheDocument();
   });
 });