Add filter by status

frontend/package.json

@@ -4,14 +4,14 @@
   "homepage": "/lighter",
   "private": true,
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.13",
-    "@chakra-ui/react": "^1.6.2",
-    "@chakra-ui/system": "^1.12.0",
+    "@chakra-ui/icons": "^2.0.1",
+    "@chakra-ui/react": "^2.1.1",
+    "@chakra-ui/system": "^2.1.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@fontsource/open-sans": "^4.4.5",
-    "axios": "^0.26.1",
-    "framer-motion": "^3.10.6",
+    "axios": "^0.27.2",
+    "framer-motion": "^6.2.9",
     "moment": "^2.29.1",
     "query-string": "^7.0.0",
     "react": "^18.0.0",
@@ -29,7 +29,7 @@
     "@testing-library/react": "^13.1.1",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
-    "@types/react": "^18.0.6",
+    "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.2",
     "@types/react-router-dom": "^5.1.7",
     "dotenv": "^16.0.0",
@@ -38,7 +38,7 @@
     "prop-types": "^15.8.1"
   },
   "resolutions": {
-    "@types/react": "^17.0.0"
+    "@types/react": "^18.0.9"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/client/client.ts

@@ -16,8 +16,8 @@ export class Api {
     return this.client.delete(url);
   }
 
-  fetchBatches(size: number, from: number): Promise<BatchPage> {
-    return this.get(`/api/batches?size=${size}&from=${from}`);
+  fetchBatches(size: number, from: number, status?: string | null): Promise<BatchPage> {
+    return this.get(`/api/batches?size=${size}&from=${from}${status ? '&state=' + status : ''}`);
   }
 
   fetchBatch(id: string): Promise<Application> {

frontend/src/components/AppStatus.tsx

@@ -1,7 +1,7 @@
 import {Badge, BadgeProps} from '@chakra-ui/react';
-import React from 'react';
+import React, {ReactNode} from 'react';
 
-const statusMap: {[key: string]: BadgeProps['colorScheme']} = {
+export const statusMap: {[key: string]: BadgeProps['colorScheme']} = {
   NOT_STARTED: 'purple',
   // STARTING: '',
   // IDLE: '',
@@ -13,8 +13,18 @@ const statusMap: {[key: string]: BadgeProps['colorScheme']} = {
   SUCCESS: 'green',
 };
 
-const AppStatus: React.FC<{status: string}> = ({status}) => {
-  return <Badge colorScheme={statusMap[status.toUpperCase()]}>{status}</Badge>;
+interface Props {
+  status: string;
+  prefix?: ReactNode;
+}
+
+const AppStatus: React.FC<Props> = ({status, prefix}) => {
+  return (
+    <Badge colorScheme={statusMap[status.toUpperCase()]}>
+      {prefix}
+      {status}
+    </Badge>
+  );
 };
 
 export default AppStatus;

frontend/src/components/Pagination.tsx

@@ -1,16 +1,22 @@
 import {Spacer, Stack} from '@chakra-ui/layout';
 import React from 'react';
 import {generatePath} from 'react-router';
+import {toQueryString, useQueryString} from '../hooks/common';
 import ButtonLink from './ButtonLink';
 
 interface PaginationProps {
   path: string;
   size: number;
-  from: number;
   visibleSize: number;
 }
 
-const Pagination: React.FC<PaginationProps> = ({path, size, from, visibleSize}) => {
+const Pagination: React.FC<PaginationProps> = ({path, size, visibleSize}) => {
+  const queryParams = useQueryString();
+  const from = Number(queryParams.from) || 0;
+  const queryString = (from: number) => {
+    return toQueryString({...queryParams, from});
+  };
+
   if (from === 0 && visibleSize < size) {
     return null;
   }
@@ -19,12 +25,12 @@ const Pagination: React.FC<PaginationProps> = ({path, size, from, visibleSize})
     <Stack borderWidth="1px" borderRadius="lg" padding="4" mt="5" direction="row" spacing={4}>
       <Spacer />
       {from > 0 && (
-        <ButtonLink size="sm" to={generatePath(path + `?from=${from - size}`)}>
+        <ButtonLink size="sm" to={generatePath(path + queryString(from - size))}>
           Previous
         </ButtonLink>
       )}
       {visibleSize === size && (
-        <ButtonLink size="sm" to={generatePath(path + `?from=${from + size}`)}>
+        <ButtonLink size="sm" to={generatePath(path + queryString(from + size))}>
           Next
         </ButtonLink>
       )}

frontend/src/components/StatusFilter.tsx

@@ -0,0 +1,26 @@
+import {CheckIcon} from '@chakra-ui/icons';
+import {Stack, Text} from '@chakra-ui/react';
+import {generatePath, Link} from 'react-router-dom';
+import AppStatus, {statusMap} from './AppStatus';
+
+interface Props {
+  status?: string;
+  path: string;
+}
+const StatusFilter: React.FC<Props> = ({status, path}) => {
+  return (
+    <Stack borderWidth="1px" borderRadius="lg" padding="4" mt="5" mb="5" direction="row" spacing={4}>
+      <Text>Filter by status:</Text>
+      <Link to={generatePath(path)}>
+        <AppStatus prefix={!status ? <CheckIcon marginEnd="1" /> : null} status="ALL" />
+      </Link>
+      {Object.keys(statusMap).map((key) => (
+        <Link to={generatePath(path + `?status=${key}`)} key={key}>
+          <AppStatus prefix={status === key ? <CheckIcon marginEnd="1" /> : null} status={key} />
+        </Link>
+      ))}
+    </Stack>
+  );
+};
+
+export default StatusFilter;

frontend/src/hooks/batch.ts

@@ -1,9 +1,9 @@
 import {useApi} from '../client/hooks';
 import {useMutation, useQuery, useQueryClient} from 'react-query';
 
-export function useBatches(size: number, from: number) {
+export function useBatches(size: number, from: number, status?: string | null) {
   const api = useApi();
-  return useQuery(['batches', size, from], () => api.fetchBatches(size, from));
+  return useQuery(['batches', size, from, status], () => api.fetchBatches(size, from, status));
 }
 
 export function useBatch(id: string) {

frontend/src/hooks/common.ts

@@ -5,3 +5,7 @@ export function useQueryString() {
   const {search} = useLocation();
   return queryString.parse(search);
 }
+
+export function toQueryString(params: Record<string, unknown>) {
+  return '?' + queryString.stringify(params);
+}

frontend/src/pages/Batches.tsx

@@ -10,10 +10,12 @@ import Link from '../components/Link';
 import AppStatus from '../components/AppStatus';
 import DateTime from '../components/DateTime';
 import AppActions from '../components/AppActions';
+import StatusFilter from '../components/StatusFilter';
 
 const Batches: React.FC = () => {
-  const from = Number(useQueryString().from) || 0;
-  const {data, isLoading} = useBatches(pageSize, from);
+  const {from, status} = useQueryString();
+  const fromInt = Number(from) || 0;
+  const {data, isLoading} = useBatches(pageSize, fromInt, status as string);
   const {mutate: doDelete, isLoading: isDeleting} = useBatchDelete();
 
   if (isLoading || isDeleting) {
@@ -23,6 +25,7 @@ const Batches: React.FC = () => {
   return (
     <>
       <PageHeading>Batches</PageHeading>
+      <StatusFilter path="./" status={status as string} />
       <Table variant="simple" size="sm">
         <Thead>
           <Tr>
@@ -53,7 +56,7 @@ const Batches: React.FC = () => {
           ))}
         </Tbody>
       </Table>
-      <Pagination path="./" from={from} size={pageSize} visibleSize={data?.applications?.length || 0} />
+      <Pagination path="./" size={pageSize} visibleSize={data?.applications?.length || 0} />
     </>
   );
 };

frontend/src/pages/Sessions.tsx

@@ -53,7 +53,7 @@ const Sessions: React.FC = () => {
           ))}
         </Tbody>
       </Table>
-      <Pagination path="./" from={from} size={pageSize} visibleSize={data?.applications?.length || 0} />
+      <Pagination path="./" size={pageSize} visibleSize={data?.applications?.length || 0} />
     </>
   );
 };