Merge pull request #233 from kube-HPC/fix-bugs-queue

fix show active to show all active , fix time zone

Author: Golan Hallel

src/Routes/Base/Header/TagsFiltersViews.js

@@ -1,5 +1,5 @@
 import { Tag } from 'antd';
-import { instanceFiltersVar, metaVar } from 'cache';
+import { instanceFiltersVar, metaVar, isPinActiveJobVar } from 'cache';
 import { useReactiveVar } from '@apollo/client';
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -10,6 +10,7 @@ import qs from 'qs';
 
 const TagsFiltersViews = ({ sectionName }) => {
   const instanceFilters = useReactiveVar(instanceFiltersVar);
+  const isPinActiveJobs = useReactiveVar(isPinActiveJobVar);
   const metaMode = useReactiveVar(metaVar);
 
   const history = useHistory();
@@ -53,7 +54,15 @@ const TagsFiltersViews = ({ sectionName }) => {
   //  },[])
 
   useEffect(() => {
-    const _qParams = qs.stringify(instanceFilters[sectionName], {
+    // write query string params
+    const paramsToUrl = { ...instanceFilters[sectionName] };
+
+    if (sectionName === 'jobs') {
+      delete paramsToUrl.datesRange;
+      isPinActiveJobs && delete paramsToUrl.pipelineStatus;
+    }
+
+    const _qParams = qs.stringify(paramsToUrl, {
       ignoreQueryPrefix: true,
       allowDots: true,
       skipNulls: true,
@@ -70,6 +79,11 @@ const TagsFiltersViews = ({ sectionName }) => {
   }, [history, instanceFilters, sectionName, urlParams.pathname]);
 
   const cancelPropFilter = ['datesRange', 'experimentName', 'limit'];
+
+  if (isPinActiveJobs) {
+    cancelPropFilter.push('pipelineStatus');
+  }
+
   const allTags = [];
   propFilters &&
     Object.entries(propFilters).map(([key, value]) => {

src/Routes/Tables/Jobs/QueryTable/QueryForm.js

@@ -1,17 +1,18 @@
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import moment from 'moment';
 import { Form, AutoComplete, Button } from 'antd';
 import PropTypes from 'prop-types';
 import { pipelineStatuses } from '@hkube/consts';
-import { useQuery } from '@apollo/client';
+import { useQuery, useReactiveVar } from '@apollo/client';
 import { ALGORITHM_AND_PIPELINE_NAMES } from 'graphql/queries';
 import { FiltersForms } from 'styles';
 import { RangePickerNow } from 'components/common';
+import { isPinActiveJobVar } from 'cache';
 
 const DateFormat = 'YYYY-MM-DD HH:mm';
 const QueryForm = ({ onSubmit, params, zoomDate }) => {
   const [form] = Form.useForm();
-
+  const isPinActiveJobs = useReactiveVar(isPinActiveJobVar);
   const SubmitForm = () => {
     //  setLoadingJobs(true);
     form.submit();
@@ -54,19 +55,15 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
     onSubmit(values);
   };
 
-  const isShowActive = useCallback(
-    () => form.getFieldValue('pipelineStatus') === 'active',
-    [form]
-  );
-
   const onPinActive = () => {
-    // isPinActiveJobVar(!isPinActiveJobs);
-
-    if (form.getFieldValue('pipelineStatus') === 'active') {
-      form.setFieldsValue({ pipelineStatus: null });
-    } else {
+    if (!isPinActiveJobs) {
       form.setFieldsValue({ pipelineStatus: 'active' });
+    } else {
+      form.setFieldsValue({ pipelineStatus: null });
     }
+
+    isPinActiveJobVar(!isPinActiveJobs);
+
     SubmitForm();
   };
 
@@ -109,7 +106,7 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
       onFinish={onFinish}
       spacearound={1}>
       <Form.Item label="Time" name="time">
-        <RangePickerNow onChange={SubmitForm} />
+        <RangePickerNow isDisabled={isPinActiveJobs} onChange={SubmitForm} />
       </Form.Item>
       <Form.Item label="Pipeline Name" name="pipelineName">
         <AutoComplete
@@ -133,6 +130,7 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
           }
           onSelect={SubmitForm}
           onClear={SubmitForm}
+          disabled={isPinActiveJobs}
         />
       </Form.Item>
       <Form.Item label="Algorithm Name" name="algorithmName">
@@ -149,7 +147,7 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
       </Form.Item>
       <Form.Item>
         <Button
-          type={isShowActive() ? 'primary' : 'dashed'}
+          type={isPinActiveJobs ? 'primary' : 'dashed'}
           htmlType="button"
           onClick={onPinActive}
           title="Show Active">

src/Routes/Tables/Jobs/index.js

@@ -33,7 +33,7 @@ const JobsTable = () => {
     mergedParams,
     dataSourceGraph,
     debouncedZoomChanged,
-    isGraphLoad,
+
     isTableLoad,
     onRow,
     columns,
@@ -61,7 +61,7 @@ const JobsTable = () => {
 
       <WTable
         id="jobsTable"
-        loading={isTableLoad || isGraphLoad}
+        loading={isTableLoad}
         onRow={onRow}
         rowKey={rowKey}
         expandIcon={false}

src/Routes/Tables/Jobs/useJobsFunctionsLimit.js

@@ -6,7 +6,7 @@ import {
   filterToggeledVar,
   instanceFiltersVar,
   metaVar,
-  // isPinActiveJobVar,
+  isPinActiveJobVar,
 } from 'cache';
 import { JOB_QUERY, JOB_QUERY_GRAPH } from 'graphql/queries';
 
@@ -38,6 +38,8 @@ dateNow.setHours(-24);
 const useJobsFunctionsLimit = () => {
   const instanceFilters = useReactiveVar(instanceFiltersVar);
   const filterToggeled = useReactiveVar(filterToggeledVar);
+  const isPinActiveJob = useReactiveVar(isPinActiveJobVar);
+
   const metaMode = useReactiveVar(metaVar);
   const [dataSourceGraph, setDataSourceGraph] = useState([]);
   const [zoomedChangedDate, setZoomedChangedDate] = useState(Date.now());
@@ -94,7 +96,17 @@ const useJobsFunctionsLimit = () => {
       ...mergedParams,
 
       ...(mergedParams?.datesRange?.from === null && {
-        datesRange: { from: defDate, to: mergedParams?.datesRange?.to || null },
+        datesRange: {
+          from: defDate,
+          to: mergedParams?.datesRange?.to || null,
+        },
+      }),
+
+      ...(isPinActiveJob && {
+        datesRange: {
+          from: null,
+          to: null,
+        },
       }),
     },
 
@@ -114,7 +126,10 @@ const useJobsFunctionsLimit = () => {
       limit: 100000,
       ...mergedParams,
       ...(mergedParams?.datesRange?.from === null && {
-        datesRange: { from: defDate, to: mergedParams?.datesRange?.to || null },
+        datesRange: {
+          from: isPinActiveJob ? null : defDate,
+          to: isPinActiveJob ? null : mergedParams?.datesRange?.to || null,
+        },
       }),
     },
     onCompleted: resGraph => {
@@ -167,8 +182,8 @@ const useJobsFunctionsLimit = () => {
 
       if (time) {
         datesRange = {
-          from: getDateTimeZoneString(time?.datesRange?.from) || undefined,
-          to: getDateTimeZoneString(time?.datesRange?.to) || undefined,
+          from: time?.datesRange?.from || undefined,
+          to: time?.datesRange?.to || undefined,
         };
       }
 

src/components/common/RangePickerNow.js

@@ -7,7 +7,7 @@ import moment from 'moment';
 const DateFormat = 'YYYY-MM-DD HH:mm';
 const dateNow = new Date();
 dateNow.setHours(-24);
-const RangePickerNow = forwardRef(({ onChange, value }) => {
+const RangePickerNow = forwardRef(({ onChange, value, isDisabled }) => {
   const [stateDate, setStateDate] = useState(value);
 
   const onChangeHandel = (momentDate, param) => {
@@ -68,6 +68,7 @@ const RangePickerNow = forwardRef(({ onChange, value }) => {
         onChange={valueDate => onChangeHandel(valueDate, 'from')}
         placeholder="Start Date"
         allowClear={false}
+        disabled={isDisabled}
       />
 
       <ArrowRightOutlined style={{ padding: '2px', fontSize: '12px' }} />
@@ -80,6 +81,7 @@ const RangePickerNow = forwardRef(({ onChange, value }) => {
         placeholder="End Date"
         disabledDate={date => date.isBefore(stateDate?.datesRange?.from, 'day')}
         onChange={valueDate => onChangeHandel(valueDate, 'to')}
+        disabled={isDisabled}
       />
     </>
   );
@@ -93,7 +95,8 @@ RangePickerNow.propTypes = {
     PropTypes.string,
     PropTypes.node,
   ]).isRequired,
+  isDisabled: PropTypes.bool,
 };
 
-RangePickerNow.defaultProps = {};
+RangePickerNow.defaultProps = { isDisabled: false };
 export default memo(RangePickerNow);