diff --git a/src/views/jobs/JobListView.js b/src/views/jobs/JobListView.js index f57109c9ea62d15efe61b136230e9f813541a42f..c9933ad1a86edeaa5eaefecaeb56b5a69fbb053a 100644 --- a/src/views/jobs/JobListView.js +++ b/src/views/jobs/JobListView.js @@ -1,7 +1,5 @@ -import React, { useContext, useState, useCallback, useMemo } from "react"; -import { Grid, Container, TextField, Autocomplete } from "@mui/material"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; +import React, { useContext, useCallback, useMemo } from "react"; +import { Grid, TextField, Autocomplete } from "@mui/material"; import { RootPaper, useAPIMethod } from "@ess-ics/ce-ui-common"; import { initRequestParams } from "../../components/common/Helper"; import { useEffect } from "react"; @@ -15,6 +13,13 @@ import { usePagination } from "../../hooks/pagination"; import { JobTable } from "../../components/Job/JobTable"; import { apiContext } from "../../api/DeployApi"; +const jobTypeOptions = [ + { label: "Show all" }, + { label: "Only deployments", filter: "DEPLOYMENT" }, + { label: "Only commands", filter: "COMMAND" } +]; +const defaultJobTypeOption = jobTypeOptions[0]; + export function JobListView() { const client = useContext(apiContext); @@ -31,7 +36,6 @@ export function JobListView() { const [urlState, setUrlState] = useUrlState( { - tab: "0", rows: "20", page: "0", query: "", @@ -40,32 +44,6 @@ export function JobListView() { { navigateMode: "replace" } ); - const [deploymentStatus, setDeploymentStatus] = useState(null); - - const handleTabChange = (event, tab) => { - setUrlState((s) => - serialize(s.tab) === serialize(tab) - ? { tab: serialize(tab) } - : { tab: serialize(tab), page: "0" } - ); - - changeTab(tab); - }; - - const changeTab = (tab) => { - if (tab === 0) { - setDeploymentStatus(null); - } else if (tab === 1) { - setDeploymentStatus("ONGOING"); - } else if (tab === 2) { - setDeploymentStatus("FINISHED"); - } - }; - - useEffect(() => { - urlState.tab && changeTab(deserialize(urlState.tab)); - }, [urlState]); - const urlPagination = useMemo(() => { return { rows: deserialize(urlState.rows), @@ -114,10 +92,6 @@ export function JobListView() { deserialize(urlState.query) ); - if (deploymentStatus) { - requestParams.status = deploymentStatus; - } - if (urlState.job_type) { requestParams.type = deserialize(urlState.job_type); } @@ -127,14 +101,7 @@ export function JobListView() { return () => { abort(); }; - }, [ - getOperations, - urlPagination, - urlState.query, - urlState.job_type, - deploymentStatus, - abort - ]); + }, [getOperations, urlPagination, urlState.query, urlState.job_type, abort]); const setSearch = useCallback( (query) => { @@ -165,12 +132,6 @@ export function JobListView() { </SearchBar> ); - const jobTypeOptions = [ - { label: "Show all" }, - { label: "Only deployments", filter: "DEPLOYMENT" }, - { label: "Only commands", filter: "COMMAND" } - ]; - return ( <RootPaper> <Grid @@ -180,21 +141,10 @@ export function JobListView() { <Grid container spacing={1} - component={Container} - justifyContent="space-between" + justifyContent="flex-end" alignItems="center" style={{ display: "flex" }} > - <Grid item> - <Tabs - value={deserialize(urlState.tab)} - onChange={handleTabChange} - > - <Tab label="All" /> - <Tab label="Only Ongoing" /> - <Tab label="Only Completed" /> - </Tabs> - </Grid> <Grid item xs={3} @@ -206,16 +156,13 @@ export function JobListView() { urlState.job_type ? jobTypeOptions.find( (o) => o.filter === urlState.job_type - ) || { - label: "Show all" - } - : { label: "Show all" } + ) || defaultJobTypeOption + : defaultJobTypeOption } getOptionLabel={(option) => option.label} isOptionEqualToValue={(option, value) => option.label === value.label } - style={{ width: "100%" }} renderInput={(params) => ( <TextField {...params}