diff --git a/telemetry/ui/src/components/routes/AppList.tsx b/telemetry/ui/src/components/routes/AppList.tsx index 95ba29d0..fd6e020d 100644 --- a/telemetry/ui/src/components/routes/AppList.tsx +++ b/telemetry/ui/src/components/routes/AppList.tsx @@ -5,15 +5,41 @@ import { ApplicationSummary, DefaultService } from '../../api'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../common/table'; import { DateTimeDisplay } from '../common/dates'; import { Button } from '../common/button'; +import { useState } from 'react'; +import { FunnelIcon } from '@heroicons/react/24/outline'; + +const StepCountHeader = (props: { + displayZeroCount: boolean; + setDisplayZeroCount: (displayZeroCount: boolean) => void; +}) => { + const fillColor = props.displayZeroCount ? 'fill-gray-300' : 'fill-gray-700'; + const borderColor = props.displayZeroCount ? 'text-gray-300' : 'text-gray-700'; + return ( +
+ { + props.setDisplayZeroCount(!props.displayZeroCount); + }} + /> + Count +
+ ); +}; /** * List of applications. Purely rendering a list, also sorts them. */ export const AppListTable = (props: { apps: ApplicationSummary[]; projectId: string }) => { const appsCopy = [...props.apps]; - const appsSorted = appsCopy.sort((a, b) => { - return new Date(a.last_written) > new Date(b.last_written) ? -1 : 1; - }); + const [displayZeroCount, setDisplayZeroCount] = useState(false); + const appsToDisplay = appsCopy + .sort((a, b) => { + return new Date(a.last_written) > new Date(b.last_written) ? -1 : 1; + }) + .filter((app) => { + return app.num_steps > 0 || displayZeroCount; + }); return ( @@ -21,13 +47,18 @@ export const AppListTable = (props: { apps: ApplicationSummary[]; projectId: str ID First Seen Last Run - Step Count + + + - {appsSorted.map((app) => ( + {appsToDisplay.map((app) => ( {app.app_id}