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 ( <> - + 24H + 7D + 14D + All + + + + + } + subtitle={statsFor ? `Stats for ${statsFor}` : undefined} data={filteredIssues} />