fix timezone in graph hit jobs

.env

@@ -1,4 +1,4 @@
 ESLINT_NO_DEV_ERRORS=true
 TSC_COMPILE_ON_ERROR=true
-
+REACT_APP_DATA_SOURCE_IS_ENABLE=$DATA_SOURCE_IS_ENABLE
 

package.json

@@ -41,8 +41,8 @@
     "react-collapse": "^5.1.0",
     "qs": "^6.10.1",
     "virtualizedtableforantd4": "^1.1.2",
-    "apexcharts": "^3.28.1",
-    "react-apexcharts": "^1.3.9",
+    "apexcharts": "^3.36.3",
+    "react-apexcharts": "^1.4.0",
     "isnumber": "^1.0.0"
   },
   "devDependencies": {

src/Routes/Base/Header/Settings/SetDefaultTime.js

@@ -0,0 +1,68 @@
+import { Select as AntSelect, Typography } from 'antd';
+import { FlexBox } from 'components/common';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { dateTimeDefaultVar, instanceFiltersVar } from 'cache';
+import { useReactiveVar } from '@apollo/client';
+import moment from 'moment';
+import { LOCAL_STORAGE_KEYS } from 'const';
+
+const Select = styled(AntSelect)`
+  width: 190px;
+`;
+
+// 1 hour / 24 hours/ 7 days/ 1 month
+
+const OptionDefaultTime = [
+  {
+    value: 1,
+    label: '1 hour',
+  },
+  {
+    value: 24,
+    label: '24 hour',
+  },
+  {
+    value: 168,
+    label: '7 days',
+  },
+  {
+    value: 720,
+    label: '1 month',
+  },
+];
+
+const SetDefaultTime = () => {
+  const dateTimeDefault = useReactiveVar(dateTimeDefaultVar);
+  const instanceFilters = useReactiveVar(instanceFiltersVar);
+
+  const onChange = useCallback(
+    itemSelect => {
+      window.localStorage.setItem(
+        LOCAL_STORAGE_KEYS.LOCAL_STORAGE_KEY_TIME,
+        itemSelect
+      );
+      const newDefTime = moment().add(-itemSelect, 'hours');
+
+      dateTimeDefaultVar({ hour: parseInt(itemSelect, 10), time: newDefTime });
+
+      instanceFilters.jobs.datesRange.from = newDefTime;
+      instanceFilters.jobs.datesRange.to = null;
+      instanceFiltersVar({ ...instanceFilters });
+    },
+    [instanceFilters]
+  );
+
+  return (
+    <FlexBox.Auto>
+      <Typography.Text strong>Filter Default Time</Typography.Text>
+      <Select
+        defaultValue={dateTimeDefault.hour || 24}
+        onChange={onChange}
+        options={OptionDefaultTime}
+      />
+    </FlexBox.Auto>
+  );
+};
+
+export default React.memo(SetDefaultTime);

src/Routes/Base/Header/Settings/Settings.react.js

@@ -3,13 +3,16 @@ import React from 'react';
 import GraphDirection from './GraphDirection.react';
 import LogSource from './LogSource.react';
 import LogMode from './LogMode.react';
+import SetDefaultTime from './SetDefaultTime';
+
 // import TypesSelect from './TypesSelect.react';
 
 const Settings = () => (
   <FlexBox.Auto direction="column" gutter={[10, 10]}>
     <GraphDirection />
     <LogSource />
     <LogMode />
+    <SetDefaultTime />
     {/* <TypesSelect /> */}
   </FlexBox.Auto>
 );

src/Routes/Base/SidebarLeft/index.js

@@ -19,7 +19,11 @@ import { ReactComponent as LogoFish } from 'images/logo-fish.svg';
 import { ReactComponent as LogoTitle } from 'images/logo-title.svg';
 import { ReactComponent as PipelineIcon } from 'images/pipeline-icon.svg';
 
-import { instanceCounterVar, instanceFiltersVar } from 'cache';
+import {
+  instanceCounterVar,
+  instanceFiltersVar,
+  configViewEnvVar,
+} from 'cache';
 import { Theme, COLOR_LAYOUT } from 'styles';
 import { selectors } from 'reducers';
 // import { useDiscovery } from 'hooks/graphql';
@@ -104,17 +108,6 @@ const instanceCounterAdapter = obj => ({
   [LEFT_SIDEBAR_NAMES.DATASOURCES]: obj.dataSources,
 });
 
-const menuItems = [
-  [LEFT_SIDEBAR_NAMES.JOBS, JobsIcon, '/jobs'],
-  [LEFT_SIDEBAR_NAMES.QUEUE, QueueIcon, '/queue'],
-  [LEFT_SIDEBAR_NAMES.PIPELINES, PipelineIcon, '/pipelines'],
-  [LEFT_SIDEBAR_NAMES.ALGORITHMS, AlgorithmIcon, '/algorithms'],
-  [LEFT_SIDEBAR_NAMES.DATASOURCES, DataSourceIcon, '/datasources'],
-
-  //  [LEFT_SIDEBAR_NAMES.WORKERS, WorkerIcon, '/workers'],
-  //  [LEFT_SIDEBAR_NAMES.DRIVERS, DriversIcon, '/drivers'],
-];
-
 const Name = styled.span`
   text-transform: capitalize;
 `;
@@ -125,6 +118,30 @@ const BadgeStyle = styled(Badge)`
 `;
 
 const SidebarLeft = () => {
+  // add datasources when this enable
+
+  const configViewEnv = useReactiveVar(configViewEnvVar);
+
+  const menuItems = useMemo(() => {
+    const itemsMenu = [
+      [LEFT_SIDEBAR_NAMES.JOBS, JobsIcon, '/jobs'],
+      [LEFT_SIDEBAR_NAMES.QUEUE, QueueIcon, '/queue'],
+      [LEFT_SIDEBAR_NAMES.PIPELINES, PipelineIcon, '/pipelines'],
+      [LEFT_SIDEBAR_NAMES.ALGORITHMS, AlgorithmIcon, '/algorithms'],
+      //  [LEFT_SIDEBAR_NAMES.WORKERS, WorkerIcon, '/workers'],
+      //  [LEFT_SIDEBAR_NAMES.DRIVERS, DriversIcon, '/drivers'],
+    ];
+    if (configViewEnv.dataSources) {
+      itemsMenu.push([
+        LEFT_SIDEBAR_NAMES.DATASOURCES,
+        DataSourceIcon,
+        '/datasources',
+      ]);
+    }
+
+    return itemsMenu;
+  }, []);
+
   // useDiscovery();
   const { counters } = useCounters();
   instanceCounterVar({
@@ -147,7 +164,15 @@ const SidebarLeft = () => {
     const items = [];
 
     menuItems.forEach(([name, component, path]) => {
-      const isFilters = isValuesFiltersEmpty(instanceFilters[name]);
+      const objectsFilters = { ...instanceFilters[name] };
+
+      if (name === 'jobs') {
+        delete objectsFilters.experimentName;
+        delete objectsFilters.datesRange;
+      }
+
+      const isFilters = isValuesFiltersEmpty(objectsFilters);
+
       items.push({
         label: (
           <Link to={{ pathname: path, search: location.search }}>

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/index.js

@@ -7,6 +7,8 @@ import { Button, Radio, Input, Tag } from 'antd';
 import { FlexBox } from 'components/common';
 import { NODE_KINDS_COLOR } from 'styles';
 import { KIND_NODE_SHORT_NAME } from 'const';
+import { configViewEnvVar } from 'cache';
+import { useReactiveVar } from '@apollo/client';
 import AlgorithmNode from './Algorithms';
 import DataSourceNode from './DataSource';
 import GatewayNode from './Gateway';
@@ -142,7 +144,7 @@ const Nodes = ({ style }) => {
     isStreamingPipeline,
     isRunPipeline,
   } = useWizardContext();
-
+  const configViewEnv = useReactiveVar(configViewEnvVar);
   const [ids, appendKey, dropKey] = useIds(Object.keys(initialState.nodes));
 
   const [activeNodeId, setActiveNodeId] = useState(ids[0]);
@@ -249,7 +251,10 @@ const Nodes = ({ style }) => {
                   buttonStyle="solid"
                   style={{ display: 'flex', alignItems: 'center' }}>
                   <Radio.Button value="algorithm">Algorithm</Radio.Button>
-                  <Radio.Button value="dataSource">DataSource</Radio.Button>
+
+                  {configViewEnv.dataSources && (
+                    <Radio.Button value="dataSource">DataSource</Radio.Button>
+                  )}
 
                   {isStreamingPipeline && (
                     <Radio.Button value="gateway">Gateway</Radio.Button>

src/Routes/SidebarRight/AddPipeline/Steps/Options/SliderNumber.js

@@ -21,7 +21,11 @@ const SliderNumber = forwardRef(
 
     return (
       <Container>
-        <Form.Item onChange={setValue} name={name} ref={ref}>
+        <Form.Item
+          onChange={setValue}
+          name={name}
+          ref={ref}
+          style={{ width: '90%' }}>
           <Slider min={min} />
         </Form.Item>
 

src/Routes/SidebarRight/Bar.js

@@ -1,10 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
+import { configViewEnvVar } from 'cache';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Icon from '@ant-design/icons';
 import { Layout, Menu, Badge } from 'antd';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { useErrorLogs, useStats, useStorage } from 'hooks/graphql';
+import { useReactiveVar } from '@apollo/client';
+import { RIGHT_SIDEBAR_NAMES } from 'const';
 // import useStorage from 'hooks/useStorage';
 import {
   getColorStatus,
@@ -29,6 +32,9 @@ const topMargin = { marginTop: '20%' };
 const noItemSelect = [];
 
 const SidebarRight = ({ isTop, className }) => {
+  // add datasources when this enable
+
+  const configViewEnv = useReactiveVar(configViewEnvVar);
   const { root } = useParams();
   const history = useHistory();
   const location = useLocation();
@@ -38,7 +44,9 @@ const SidebarRight = ({ isTop, className }) => {
   const { storage } = useStorage();
   const { top, bottom } = useMemo(
     () => ({
-      top: topActions,
+      top: configViewEnv.dataSources
+        ? topActions
+        : topActions.filter(x => x.name !== RIGHT_SIDEBAR_NAMES.ADD_DATASOURCE),
       bottom: getBottomActions({
         warnings: totalNewWarnings,
         cpuStatus: getColorStatus(cpu),

src/Routes/Tables/DataSources/EditDrawer/Body/VersionSelect.js

@@ -202,9 +202,7 @@ const Versions = ({
     }
   }, [snapshotName, dataSource]);
   const hasMissingSnapshot = snapshotName && !activeSnapshot;
-  // console.log("Selector versionsCollection",versionsCollection,isPending)
-  // console.log("Selector dataSource",dataSource)
-  // console.log("Selector activeSnapshot",activeSnapshot,hasMissingSnapshot)
+
   return (
     <>
       <Selector

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

@@ -126,7 +126,6 @@ const GraphTab = ({ graph, pipeline }) => {
         {isValidGraph ? (
           showGraph ? (
             <Fallback>
-              {console.log(adaptedGraph, events)}
               <Graph
                 graph={adaptedGraph}
                 options={graphOptions}

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

@@ -3,7 +3,6 @@ import { Theme } from 'styles/colors';
 import ReactApexChart from 'react-apexcharts';
 import histogram from 'utils/histogram';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 
 const QueryDateChart = props => {
   const { dataSource } = props;
@@ -23,6 +22,7 @@ const QueryDateChart = props => {
   const data = {
     // option chart
     options: {
+      timezone: '',
       grid: {
         show: false,
       },
@@ -104,13 +104,14 @@ const QueryDateChart = props => {
       },
       xaxis: {
         type: 'datetime',
-
+        labels: {
+          datetimeUTC: false,
+        },
         categories:
           _histogram && _histogram.sections && _histogram.sections.length > 0
-            ? _histogram?.sections?.map(s =>
-                moment(s).utc(moment(s).format('Z')).format()
-              )
+            ? _histogram?.sections?.map(s => new Date(s).toISOString())
             : [],
+        // ? _histogram?.sections?.map(s => moment(s).utc(moment(s).format('Z')).format()): [],
         //  categories: _histogram && _histogram.sections && _histogram.sections.length > 0 ? _histogram?.sections?.map(s => new Date(s).toLocaleString()) : [],
       },
       legend: {

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

@@ -9,8 +9,6 @@ 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);
@@ -25,8 +23,8 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
       form.setFieldsValue({
         time: {
           datesRange: {
-            from: moment(params.datesRange.from, DateFormat),
-            to: moment(params.datesRange.to, DateFormat),
+            from: moment(params.datesRange.from),
+            to: moment(params.datesRange.to),
           },
         },
       });
@@ -51,7 +49,7 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
     } else {
       form.resetFields(['pipelineStatus']);
     }
-  }, [params, zoomDate]);
+  }, [params]);
 
   const onFinish = values => {
     onSubmit(values);
@@ -108,7 +106,11 @@ const QueryForm = ({ onSubmit, params, zoomDate }) => {
       onFinish={onFinish}
       spacearound={1}>
       <Form.Item label="Time" name="time">
-        <RangePickerNow isDisabled={isPinActiveJobs} onChange={SubmitForm} />
+        <RangePickerNow
+          isDisabled={isPinActiveJobs}
+          onChange={SubmitForm}
+          zoomDateChange={zoomDate}
+        />
       </Form.Item>
       <Form.Item label="Pipeline Name" name="pipelineName">
         <AutoComplete