Merge pull request #228 from kube-HPC/fix-batch-output

fix infinity scroll in job by limit more

Author: Golan Hallel

src/Routes/Tables/Jobs/GraphTab/Details.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { removeNullUndefined } from 'utils';
 import PropTypes from 'prop-types';
 // import { useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -125,7 +126,7 @@ const Details = ({ node, jobId, isDisabledBtnRunDebug }) => {
           <Tabs.TabPane tab="Algorithm Details" key="algorithms-tab">
             <OverflowContainer>
               <JsonSwitch
-                obj={algorithmDetails}
+                obj={removeNullUndefined(algorithmDetails)}
                 jobId={jobId}
                 typeDefaultView="Table"
               />

src/Routes/Tables/Jobs/index.js

@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import { Route } from 'react-router-dom';
 import styled from 'styled-components';
 import useQueryHook from 'hooks/useQuery';
-import { Table } from 'components';
+import { WTable } from 'components';
 import { Card } from 'components/common';
 import { Collapse } from 'react-collapse';
 import { Divider, Empty, BackTop, Button } from 'antd';
 import { ArrowUpOutlined } from '@ant-design/icons';
-import useJobsFunctions from './useJobsFunctions';
+import useJobsFunctionsLimit from './useJobsFunctionsLimit';
 import GridView from './GridView';
 import OverviewDrawer from './OverviewDrawer';
 import QueryForm from './QueryTable/QueryForm';
@@ -33,13 +33,12 @@ const JobsTable = () => {
     mergedParams,
     dataSourceGraph,
     debouncedZoomChanged,
-    onFetchMore,
     isGraphLoad,
     isTableLoad,
     onRow,
     columns,
     _dataSource,
-  } = useJobsFunctions();
+  } = useJobsFunctionsLimit();
 
   return (
     <>
@@ -60,26 +59,19 @@ const JobsTable = () => {
         <Divider />
       </Collapse>
 
-      <Table
+      <WTable
         id="jobsTable"
-        fetchMore={onFetchMore}
-        loading={isTableLoad && isGraphLoad}
+        loading={isTableLoad || isGraphLoad}
         onRow={onRow}
         rowKey={rowKey}
         expandIcon={false}
         columns={columns}
         dataSource={_dataSource}
         pagination={false}
-        isInfinity
-        heightScroll={filterToggeled ? '58vh' : '88vh'}
+        scroll={{ y: filterToggeled ? '50vh' : '80vh' }}
         locale={localeEmpty}
-        rowClassName={record => {
-          if (record.status.status === 'active') {
-            return 'active-row';
-          }
-          return null;
-        }}
       />
+
       <BackTop target={BackToTop}>
         <Button
           style={{ opacity: '0.5' }}

src/Routes/Tables/Jobs/useJobsFunctionsLimit.js

@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { useJobs, usePolling } from 'hooks';
+import { useQuery, useReactiveVar } from '@apollo/client';
+import {
+  filterToggeledVar,
+  instanceFiltersVar,
+  metaVar,
+  // isPinActiveJobVar,
+} from 'cache';
+import { JOB_QUERY, JOB_QUERY_GRAPH } from 'graphql/queries';
+
+import usePath from './usePath';
+
+export { default as jobColumns } from './jobColumns';
+
+const topTableScroll = () => {
+  const el = document.querySelector('.ant-table-body');
+  if (el) el.scrollTop = 0;
+};
+
+const numberLimitJobs = 100;
+const useJobsFunctionsLimit = () => {
+  const instanceFilters = useReactiveVar(instanceFiltersVar);
+  const filterToggeled = useReactiveVar(filterToggeledVar);
+  const metaMode = useReactiveVar(metaVar);
+  const [dataSourceGraph, setDataSourceGraph] = useState([]);
+  const [zoomedChangedDate, setZoomedChangedDate] = useState(Date.now());
+  const [isTableLoad, setIsTableLoad] = useState(true);
+  const [isGraphLoad, setIsGraphLoad] = useState(true);
+  const [limitGetJobs, setLimitGetJobs] = useState(numberLimitJobs);
+  const [changeDs, setChangeDs] = useState(0);
+  const [isGetMore, setIsGetMore] = useState(true);
+  const { goTo } = usePath();
+  const { columns } = useJobs();
+
+  const mergedParams = useMemo(() => {
+    const iJobs = instanceFilters.jobs;
+
+    const items = {
+      algorithmName: iJobs?.algorithmName || undefined,
+      pipelineName: iJobs?.pipelineName || undefined,
+      pipelineStatus: iJobs?.pipelineStatus || undefined,
+      datesRange: {
+        from: iJobs?.datesRange?.from || null,
+        to: iJobs?.datesRange?.to || null,
+      },
+    };
+
+    if (
+      metaMode?.experimentName != null &&
+      metaMode?.experimentName !== 'show-all'
+    ) {
+      items.experimentName = metaMode.experimentName;
+    }
+
+    return items;
+  }, [
+    instanceFilters.jobs,
+    instanceFilters.jobs.algorithmName,
+    instanceFilters.jobs.pipelineName,
+    instanceFilters.jobs.pipelineStatus,
+    instanceFilters.jobs?.datesRange?.from,
+    instanceFilters.jobs?.datesRange?.to,
+    metaMode?.experimentName,
+  ]);
+
+  // all limit Jobs
+  const queryAllJobs = useQuery(JOB_QUERY, {
+    notifyOnNetworkStatusChange: true,
+    // fetchPolicy: 'no-cache',
+    variables: {
+      limit: limitGetJobs,
+      ...mergedParams,
+    },
+
+    onCompleted: () => {
+      setIsTableLoad(false);
+      setChangeDs(!changeDs);
+      setIsGetMore(true);
+    },
+  });
+  usePolling(queryAllJobs, 2000);
+  // all Jobs to Graph
+  const queryGraph = useQuery(JOB_QUERY_GRAPH, {
+    // notifyOnNetworkStatusChange: true,
+
+    displayName: 'JOB_QUERY_GRAPH',
+    variables: {
+      limit: 100000,
+      ...mergedParams,
+    },
+    onCompleted: resGraph => {
+      if (resGraph && resGraph?.jobsAggregated?.jobs) {
+        setDataSourceGraph(resGraph.jobsAggregated.jobs);
+      } else {
+        setDataSourceGraph([]);
+      }
+
+      setIsGraphLoad(false);
+    },
+  });
+
+  const onFetchMore = () => {
+    setLimitGetJobs(previousState => previousState + numberLimitJobs);
+  };
+
+  const onZoomChanged = useCallback(
+    data => {
+      let datesRange = null;
+      if (data.min) {
+        datesRange = {
+          from: new Date(data.min).toISOString(),
+          to: new Date(data.max).toISOString(),
+        };
+      }
+
+      setZoomedChangedDate(Date.now());
+      const stateInstanceFilter = { ...instanceFiltersVar() };
+      stateInstanceFilter.jobs = { ...mergedParams, datesRange };
+
+      instanceFiltersVar(stateInstanceFilter);
+      setIsTableLoad(true);
+      setIsGraphLoad(true);
+
+      topTableScroll();
+
+      setLimitGetJobs(numberLimitJobs);
+      queryAllJobs.refetch();
+      queryGraph.refetch();
+    },
+    [mergedParams, queryAllJobs, queryGraph]
+  );
+  const debouncedZoomChanged = useDebouncedCallback(onZoomChanged, 1000);
+
+  const onQuerySubmit = useCallback(
+    values => {
+      let datesRange = null;
+      const { time, ...other } = values;
+
+      time
+        ? (datesRange = {
+            from: time[0]?.toISOString(),
+            to: time[1]?.toISOString(),
+          })
+        : null;
+
+      Object.values(other).forEach((element, index) => {
+        element === '' ? (other[Object.keys(other)[index]] = undefined) : null;
+      });
+      const stateInstanceFilter = { ...instanceFiltersVar() };
+      stateInstanceFilter.jobs = { ...other, datesRange };
+
+      instanceFiltersVar(stateInstanceFilter);
+
+      topTableScroll();
+      setIsTableLoad(true);
+      setIsGraphLoad(true);
+      setLimitGetJobs(numberLimitJobs);
+      queryAllJobs.refetch();
+      queryGraph.refetch();
+    },
+    [queryGraph]
+  );
+
+  useEffect(() => {
+    setLimitGetJobs(numberLimitJobs);
+    queryAllJobs.refetch();
+    queryGraph.refetch();
+  }, [mergedParams]);
+
+  const onRow = useCallback(
+    job => ({
+      onDoubleClick: () => goTo.overview({ nextJobId: job.key }),
+    }),
+    [goTo]
+  );
+
+  const _dataSource = useMemo(() => {
+    if (queryAllJobs && queryAllJobs.data) {
+      const dsAllJobs = [
+        ...queryAllJobs.data.jobsAggregated.jobs.filter(
+          x => x.status.status !== 'pending'
+        ),
+      ];
+
+      return dsAllJobs;
+    }
+
+    return [];
+  }, [changeDs]);
+
+  useEffect(() => {
+    const tableContent = document.querySelector('#jobsTable .ant-table-body');
+    tableContent.addEventListener('scroll', event => {
+      const maxScroll = event.target.scrollHeight - event.target.clientHeight;
+
+      const currentScroll = event.target.scrollTop;
+
+      if (isGetMore && currentScroll > maxScroll - 10) {
+        setIsTableLoad(true);
+        setIsGetMore(false);
+        onFetchMore();
+      }
+    });
+  }, []);
+
+  return {
+    zoomedChangedDate,
+    filterToggeled,
+    onQuerySubmit,
+    mergedParams,
+    dataSourceGraph,
+    debouncedZoomChanged,
+    isGraphLoad,
+    isTableLoad,
+    onRow,
+    columns,
+    _dataSource,
+    setLimitGetJobs,
+  };
+};
+
+export default useJobsFunctionsLimit;

src/Routes/Tables/QueueOrderJobs/OrderPaging.js

@@ -60,6 +60,7 @@ class OrderPaging extends React.PureComponent {
           defaultValue={numberRowToView}
           onChange={onChangeNumberRow}
         />
+
         <Button
           type="text"
           disabled={!HasNext > 0}

src/Routes/Tables/QueueOrderJobs/useQueueOrderJobs.js

@@ -54,7 +54,7 @@ const useQueueOrderJobs = () => {
         TypeTable.QUEUE
       );
 
-      return dataKeys;
+      return { ...res.data.managedList, returnList: dataKeys };
     } catch (error) {
       console.error(error);
     }
@@ -127,12 +127,12 @@ const useQueueOrderJobs = () => {
         },
       });
 
-      const dataKey = addToObjectKeyIndexId(
+      const dataKeys = addToObjectKeyIndexId(
         res.data.preferedList.returnList,
         TypeTable.PREFERRED
       );
 
-      return dataKey;
+      return { ...res.data.preferedList, returnList: dataKeys };
     } catch (error) {
       console.error(error);
     }