Merge pull request #560 from Gerhut/dashboard/use-http-migration

dashboard: Upgrade use-http to 0.1.91 ...

src/dashboard/package.json

@@ -35,7 +35,7 @@
     "recharts": "^1.6.2",
     "typeface-roboto": "^0.0.54",
     "typeface-roboto-mono": "^0.0.54",
-    "use-http": "^0.1.79",
+    "use-http": "^0.1.91",
     "uuid": "^3.3.2"
   },
   "devDependencies": {

src/dashboard/src/contexts/Teams.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import useFetch from "use-http/dist";
+import useFetch from "use-http";
 import {
   Box, Button,
   Dialog, DialogActions,
@@ -25,7 +25,7 @@ const Context = React.createContext<Context>({
 export default Context;
 export const Provider: React.FC = ({ children }) => {
   const fetchTeamsUrl = '/api/teams';
-  const [teams] = useFetch(fetchTeamsUrl, { onMount: true });
+  const { data: teams } = useFetch(fetchTeamsUrl, { onMount: true });
   const [selectedTeam, setSelectedTeam] = React.useState<string>('');
   const saveSelectedTeam = (team: React.SetStateAction<string>) => {
     setSelectedTeam(team);

src/dashboard/src/pages/ClusterStatus/index.tsx

@@ -12,7 +12,7 @@ import {
 import { DLTSTabPanel } from '../CommonComponents/DLTSTabPanel'
 import TeamContext from "../../contexts/Teams";
 import ClusterContext from '../../contexts/Clusters';
-import useFetch from "use-http/dist";
+import useFetch from "use-http";
 
 import _ from "lodash";
 import { mergeTwoObjsByKey, convertToArrayByKey } from '../../utlities/ObjUtlities';
@@ -49,8 +49,8 @@ const ClusterStatus: FC = () => {
   const fetchVcStatusUrl = `/api`;
   const fetchiGrafanaUrl = `/api/clusters`;
 
-  const request = useFetch(fetchVcStatusUrl,options);
-  const requestGrafana = useFetch(fetchiGrafanaUrl, options);
+  const [request] = useFetch(fetchVcStatusUrl,options);
+  const [requestGrafana] = useFetch(fetchiGrafanaUrl, options);
   const fetchVC = async (cluster: string) => {
     const response = await request.get(`/teams/${selectedTeam}/clusters/${cluster}`);
     const {grafana, prometheus} = await requestGrafana.get(`/${cluster}`);

src/dashboard/src/pages/Home/GPUCard.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
-import useFetch from "use-http/dist";
+import useFetch from "use-http";
 import {
   Button,
   Card,
@@ -183,19 +183,16 @@ const GPUCard: React.FC<{ cluster: string }> = ({ cluster }) => {
   const [activate,setActivate] = useState(false);
   const { email } = React.useContext(UserContext);
   const {selectedTeam} = React.useContext(TeamsContext);
-  const options = {
-    onMount: true
-  }
   const fetchDiretoryUrl = `api/clusters/${cluster}`;
-  const request = useFetch(fetchDiretoryUrl,options);
+  const request = useFetch(fetchDiretoryUrl);
   const fetchDirectories = async () => {
     const data = await request.get('');
     const name = typeof email === 'string' ?  email.split('@', 1)[0] : email;
     setDataStorage(data.dataStorage);
     setWorkStorage(`${data.workStorage}/${name}`);
   }
   const fetchClusterStatusUrl = `/api`;
-  const requestClusterStatus = useFetch(fetchClusterStatusUrl, options);
+  const requestClusterStatus = useFetch(fetchClusterStatusUrl);
   const fetchClusterStatus = async () => {
     setActivate(false);
     const data = await requestClusterStatus.get(`/teams/${selectedTeam}/clusters/${cluster}`);

src/dashboard/src/pages/Job/Details/Endpoints.tsx

@@ -222,7 +222,7 @@ const Endpoints: React.FC<EndpointsProps> = ({setOpen}) => {
     refreshTimeout.current = null;
     await get();
     refreshTimeout.current = setTimeout(refreshFunction, 1000);
-  }, [get]);
+  }, []);
 
   useEffect(() => {
     refreshFunction();

src/dashboard/src/pages/Job/Details/RunCommand.tsx

@@ -7,7 +7,7 @@ import {
 } from '@material-ui/core';
 import {DirectionsRun} from '@material-ui/icons';
 
-import { useFetch } from 'use-http';
+import useFetch from 'use-http';
 
 import Context from './Context';
 
@@ -23,7 +23,7 @@ const RunCommand: React.FC = () => {
 
   const runCommand = useCallback(() => {
     post({ command })
-  }, [post, command]);
+  }, [command]);
 
   return (
     <TextField

src/dashboard/src/pages/Job/Details/index.tsx

@@ -12,7 +12,7 @@ import {
   CircularProgress,
   useMediaQuery, Snackbar, SnackbarContent,
 } from '@material-ui/core';
-import { useGet } from 'use-http';
+import useFetch from 'use-http';
 
 import UserContext from '../../../contexts/User';
 import Context from './Context';
@@ -36,7 +36,7 @@ interface Props {
 
 const JobDetails: React.FC<Props> = ({ clusterId, jobId, job, team }) => {
   const { email } = React.useContext(UserContext);
-  const [cluster] = useGet(`/api/clusters/${clusterId}`, { onMount: true });
+  const { data: cluster } = useFetch(`/api/clusters/${clusterId}`, { onMount: true });
   const [value, setValue] = React.useState(0);
   const theme = useTheme();
   const[showIframe, setShowIframe] = useState(false);

src/dashboard/src/pages/Job/useJob.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
-import { useGet } from "use-http";
+import useFetch from "use-http";
 
 type Job = object;
 type UseJob = [Job | undefined, Error | undefined];
 
 const useJob = (clusterId: string, jobId: string): UseJob => {
   const [job, setJob] = useState<Job>();
-  const { data, error, get } = useGet<Job>({
+  const { data, error, get } = useFetch<Job>({
     url: `/api/clusters/${clusterId}/jobs/${jobId}`,
     onMount: true
   });
@@ -20,7 +20,7 @@ const useJob = (clusterId: string, jobId: string): UseJob => {
     return () => {
       clearTimeout(timeout);
     }
-  }, [data, get]);
+  }, [data]);
 
   if (job !== undefined) {
     return [job, undefined];

src/dashboard/src/pages/Jobs/index.tsx

@@ -11,7 +11,7 @@ import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
 import {red, green, blue} from "@material-ui/core/colors";
 import { DLTSTabPanel } from '../CommonComponents/DLTSTabPanel'
 import {Link} from "react-router-dom";
-import useFetch,{usePut} from "use-http/dist";
+import useFetch from "use-http";
 import MaterialTable from 'material-table';
 import useJobs from './useJobs';
 import _ from 'lodash';
@@ -137,7 +137,7 @@ const Jobs: React.FC = (props: any) => {
     const data = await requestDelete.put(`${currentJob.cluster}/jobs/${currentJob.jobId}/status/`,body);
     return data;
   }
-  const { put: setPriority } = usePut('/api');
+  const { put: setPriority } = useFetch('/api');
   const [currentCluster, setCurrentCluster] = useState(props.match.params.cluster ? props.match.params.cluster : Array.isArray(_.map(clusters,'id') )?_.map(clusters,'id')[0] : '');
   const [jobs, error] = useJobs();
   const [allJobs, err] = useJobsAll();

src/dashboard/src/pages/Jobs/useJobs.ts

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { useGet } from "use-http";
+import useFetch from "use-http";
 import TeamContext from "../../contexts/Teams";
 
 type Jobs = object;
 type UseJob = [Jobs | undefined, Error | undefined];
 const useJobs = (): UseJob => {
   const { selectedTeam } = React.useContext(TeamContext);
   const [jobs, setJobs] = useState<Jobs>();
-  const { data, error, get } = useGet<Jobs>('/api');
+  const { data, error, get } = useFetch<Jobs>('/api');
   const params = new URLSearchParams({
     limit:'20'
   });

src/dashboard/src/pages/Jobs/useJobsAll.ts

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useGet } from "use-http";
+import useFetch from "use-http";
 import TeamContext from "../../contexts/Teams";
 type Jobs = object;
 type useJobsAll = [Jobs | undefined, Error | undefined];
@@ -11,7 +11,7 @@ const useJobsAll = (openKillWarn?: boolean,openApproveWan?: boolean): useJobsAll
     user:'all',
     limit:'100'
   });
-  const { data, error, get } = useGet<Jobs>('/api');
+  const { data, error, get } = useFetch<Jobs>('/api');
 
   useEffect(() => {
     if (data == null) return;
@@ -28,7 +28,7 @@ const useJobsAll = (openKillWarn?: boolean,openApproveWan?: boolean): useJobsAll
   useEffect(() => {
     setJobsAll(undefined);
     get(`/teams/${selectedTeam}/jobs?${params}`);
-  }, [selectedTeam, get]);
+  }, [selectedTeam]);
 
 
   if (jobsAll !== undefined) {

src/dashboard/src/pages/Submission/DataJob.tsx

@@ -20,7 +20,7 @@ import TeamsContext from "../../contexts/Teams";
 import {Link} from "react-router-dom";
 import Slide from "@material-ui/core/Slide";
 import {green} from "@material-ui/core/colors";
-import useFetch from "use-http/dist";
+import useFetch from "use-http";
 import formats from '../../Configuration/foldFormat.json';
 const useStyles = makeStyles(() =>
   createStyles({

src/dashboard/src/pages/Submission/Training.tsx

@@ -29,15 +29,14 @@ import { makeStyles, createStyles } from "@material-ui/core/styles";
 import { Info, Delete, Add } from "@material-ui/icons";
 import { withRouter } from "react-router";
 import IconButton from '@material-ui/core/IconButton';
-import { useGet, usePost, usePut } from "use-http";
+import useFetch from "use-http";
 import { join } from 'path';
 
 import ClusterSelectField from "./components/ClusterSelectField";
 import UserContext from "../../contexts/User";
 import ClustersContext from '../../contexts/Clusters';
 import TeamsContext from "../../contexts/Teams";
 import theme, { Provider as MonospacedThemeProvider } from "../../contexts/MonospacedTheme";
-import useFetch, {useDelete} from "use-http/dist";
 import {BarChart, Bar, XAxis, YAxis, CartesianGrid}  from "recharts";
 import Paper, { PaperProps } from '@material-ui/core/Paper';
 import Draggable from 'react-draggable'
@@ -106,10 +105,13 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
     return cluster.gpus[gpuModel].perNode;
   }, [cluster, gpuModel]);
 
-  const [templates, templatesLoading, templatesError, getTemplates] = useGet('/api');
+  const {
+    data: templates,
+    get: getTemplates,
+  } = useFetch('/api');
   React.useEffect(() => {
     getTemplates(`/teams/${selectedTeam}/templates`);
-  }, [getTemplates, selectedTeam]);
+  }, [selectedTeam]);
 
   const [type, setType] = React.useState("RegularJob");
   const onTypeChange = React.useCallback(
@@ -305,8 +307,10 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
     },
     [setSaveTemplateDatabase]
   );
-  const { put: saveTemplate } = usePut('/api')
-  const {delete: deleteTemplate} = useDelete('/api');
+  const {
+    put: saveTemplate,
+    delete: deleteTemplate,
+  } = useFetch('/api');
   const onSaveTemplateClick = async () => {
     try {
       const template = {
@@ -358,7 +362,6 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
       };
       const url = `/teams/${selectedTeam}/templates/${saveTemplateName}?database=${saveTemplateDatabase}`;
       await deleteTemplate(url);
-      console.log(await deleteTemplate(url,template))
       setShowDeleteTemplate(true)
     } catch (error) {
       alert('Failed to delete the template, check console (F12) for technical details.')
@@ -427,18 +430,18 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
     []
   );
 
-  const [
-    postJobData,
-    postJobLoading,
-    postJobError,
-    postJob
-  ] = usePost('/api');
-  const [
-    postEndpointsData,
-    postEndpointsLoading,
-    postEndpointsError,
-    postEndpoints
-  ] = usePost('/api');
+  const {
+    data: postJobData,
+    loading: postJobLoading,
+    error: postJobError,
+    post: postJob,
+  } = useFetch('/api');
+  const {
+    data: postEndpointsData,
+    loading: postEndpointsLoading,
+    error: postEndpointsError,
+    post: postEndpoints,
+  } = useFetch('/api');
 
   const submittable = React.useMemo(() => {
     if (!gpuModel) return false;
@@ -538,7 +541,7 @@ const Training: React.ComponentClass = withRouter(({ history }) => {
     } else {
       history.push(`/job/${selectedTeam}/${selectedCluster}/${jobId.current}`);
     }
-  }, [postJobData, postEndpoints, ssh, ipython, tensorboard, interactivePorts, history, selectedCluster]);
+  }, [postJobData, ssh, ipython, tensorboard, interactivePorts, history, selectedCluster]);
   const fetchPrometheusUrl = `/api/clusters`;
   const request = useFetch(fetchPrometheusUrl);
   const fetchPrometheus = async () => {

src/dashboard/src/pages/Submission/components/ClusterSelectField.tsx

@@ -5,7 +5,7 @@ import { BaseTextFieldProps } from "@material-ui/core/TextField";
 
 import ClustersContext from "../../../contexts/Clusters";
 import TeamsContext from "../../../contexts/Teams";
-import useFetch from "use-http/dist";
+import useFetch from "use-http";
 import _ from "lodash";
 import {sumValues} from "../../../utlities/ObjUtlities";
 
@@ -22,9 +22,7 @@ const ClusterSelectField: React.FC<ClusterSelectFieldProps & BaseTextFieldProps>
   const fetchVcStatusUrl = `/api`;
   const[helperText, setHelperText] = React.useState('');
 
-  const request = useFetch(fetchVcStatusUrl,{
-    onMount: true
-  });
+  const request = useFetch(fetchVcStatusUrl);
   const fetchVC = async () => {
     const response = await request.get(`/teams/${selectedTeam}/clusters/${selectedCluster}`);
     return response;

src/dashboard/yarn.lock

@@ -13516,22 +13516,22 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-http@^0.1.79:
-  version "0.1.79"
-  resolved "https://registry.yarnpkg.com/use-http/-/use-http-0.1.79.tgz#071867f301c8554a0294ecdbea98f1d928093651"
-  integrity sha512-/BmLS2pAYamIIlQWAerLIbe0K+kjZUX6YD6sCfHuXGnRjCZTMeKCjX+/8kz5JbSIXmgjgi8fthRVr/FhpFe35A==
+use-http@^0.1.91:
+  version "0.1.91"
+  resolved "https://registry.yarnpkg.com/use-http/-/use-http-0.1.91.tgz#cac5600f727cfdcd3751a734dcfa9ba4840b0d54"
+  integrity sha512-PG2KfM8f233P2/P3epglAqPZKVSMacbLPKiRtWIdoH2eNQXHHSSWrRX+9oMr7npdGGBmwwEJylhVrR7NKuUvHQ==
   dependencies:
-    use-ssr "^1.0.18"
+    use-ssr "^1.0.19"
 
 use-memo-one@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
   integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
 
-use-ssr@^1.0.18:
-  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.18.tgz#a7bb7d96b128bc0940b77862cfaf69c40e74da1d"
-  integrity sha512-i+1J4Gbh9Vd2k/CEUoBjVDJfpNvMfq0+YulG+woBQwqbxvBAB89OScemseEULMQDIICiDbbpEBjUnqAiprVJyw==
+use-ssr@^1.0.19:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.19.tgz#8c03bec79069103b2813f77d17d2e5fafc02461b"
+  integrity sha512-Bkor42KtUZHTTuEot4Nma0Q9bccu+ZOGqukyNJI1A11uSymNag7VX3ub2Rzi2nLez4fUYUUROn0mEtil5KOsCg==
 
 use@^3.1.0:
   version "3.1.1"