From 5bbd551672a4b230546ae5217bcf151969a9a3da Mon Sep 17 00:00:00 2001 From: ziv glik Date: Mon, 12 Dec 2022 09:26:02 +0200 Subject: [PATCH 1/5] fix timezone in graph hit jobs --- package-lock.json | 10 +++++----- package.json | 4 ++-- .../DataSources/EditDrawer/Body/VersionSelect.js | 4 +--- src/Routes/Tables/Jobs/GraphTab/index.js | 1 - .../Tables/Jobs/QueryTable/QueryDateChart.js | 11 ++++++----- src/Routes/Tables/Jobs/QueryTable/QueryForm.js | 14 ++++++++------ 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6cd0b0063..9c0ddcb26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7119,9 +7119,9 @@ } }, "apexcharts": { - "version": "3.35.2", - "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.2.tgz", - "integrity": "sha512-VOSb25mrcSv/JjaWKjnasL8277cqnA0Gp20uV1+rlgE4U6j44fdTYW850Powl+S8RkXd/lPwzBB2jvKkEOHl0Q==", + "version": "3.36.3", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.36.3.tgz", + "integrity": "sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==", "requires": { "svg.draggable.js": "^2.2.2", "svg.easing.js": "^2.0.0", @@ -26491,7 +26491,7 @@ "svg.easing.js": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", - "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=", + "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==", "requires": { "svg.js": ">=2.3.x" } @@ -26499,7 +26499,7 @@ "svg.filter.js": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", - "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=", + "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==", "requires": { "svg.js": "^2.2.5" } diff --git a/package.json b/package.json index 59b29791e..d988bdce4 100644 --- a/package.json +++ b/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": { diff --git a/src/Routes/Tables/DataSources/EditDrawer/Body/VersionSelect.js b/src/Routes/Tables/DataSources/EditDrawer/Body/VersionSelect.js index 059fdd03e..a63383abf 100644 --- a/src/Routes/Tables/DataSources/EditDrawer/Body/VersionSelect.js +++ b/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 ( <> { {isValidGraph ? ( showGraph ? ( - {console.log(adaptedGraph, events)} { 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: { diff --git a/src/Routes/Tables/Jobs/QueryTable/QueryForm.js b/src/Routes/Tables/Jobs/QueryTable/QueryForm.js index b4d3d5309..c88938c5c 100644 --- a/src/Routes/Tables/Jobs/QueryTable/QueryForm.js +++ b/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}> - + Date: Mon, 12 Dec 2022 15:28:32 +0200 Subject: [PATCH 2/5] fix count on default filter time --- src/Routes/Base/SidebarLeft/index.js | 10 +++++++++- src/cache.js | 2 ++ src/components/common/RangePickerNow.js | 9 +++++---- src/hooks/graphql/useCounters.js | 6 ++++-- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/Routes/Base/SidebarLeft/index.js b/src/Routes/Base/SidebarLeft/index.js index 178960773..4d5613870 100644 --- a/src/Routes/Base/SidebarLeft/index.js +++ b/src/Routes/Base/SidebarLeft/index.js @@ -147,7 +147,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: ( diff --git a/src/cache.js b/src/cache.js index 3b856c81f..1c7cb5dae 100644 --- a/src/cache.js +++ b/src/cache.js @@ -1,6 +1,8 @@ import { InMemoryCache, makeVar } from '@apollo/client'; import _ from 'lodash'; +import moment from 'moment'; +export const dateTimeDefaultVar = makeVar(moment(new Date().setHours(-24))); export const isPinActiveJobVar = makeVar(false); export const filterToggeledVar = makeVar(true); export const inactiveModeVar = makeVar(false); diff --git a/src/components/common/RangePickerNow.js b/src/components/common/RangePickerNow.js index a9d1f5647..ce1ec4a70 100644 --- a/src/components/common/RangePickerNow.js +++ b/src/components/common/RangePickerNow.js @@ -1,14 +1,15 @@ import { DatePicker } from 'antd'; +import { dateTimeDefaultVar } from 'cache'; import { ArrowRightOutlined } from '@ant-design/icons'; import PropTypes from 'prop-types'; +import { useReactiveVar } from '@apollo/client'; import React, { memo, forwardRef, useEffect, useState } from 'react'; -import moment from 'moment'; const DateFormat = 'YYYY-MM-DD HH:mm'; -const dateNow = new Date(); -dateNow.setHours(-24); + const RangePickerNow = forwardRef(({ onChange, value, isDisabled }) => { const [stateDate, setStateDate] = useState(value); + const dateTimeDefault = useReactiveVar(dateTimeDefaultVar); const onChangeHandel = (momentDate, param) => { let dateNew; @@ -56,7 +57,7 @@ const RangePickerNow = forwardRef(({ onChange, value, isDisabled }) => { value={ value?.datesRange?.from?.isValid() ? value?.datesRange?.from - : moment(dateNow) + : dateTimeDefault } style={{ width: '160px' }} format={DateFormat} diff --git a/src/hooks/graphql/useCounters.js b/src/hooks/graphql/useCounters.js index ae8f93f08..3c9935429 100644 --- a/src/hooks/graphql/useCounters.js +++ b/src/hooks/graphql/useCounters.js @@ -1,14 +1,16 @@ import { COUNTERS_QUERY } from 'graphql/queries'; import { usePolling } from 'hooks'; import { useQuery, useReactiveVar } from '@apollo/client'; -import { instanceFiltersVar } from 'cache'; +import { instanceFiltersVar, dateTimeDefaultVar } from 'cache'; const useCounters = () => { const instanceFilters = useReactiveVar(instanceFiltersVar); + const dateTimeDefault = useReactiveVar(dateTimeDefaultVar); + const query = useQuery(COUNTERS_QUERY, { variables: { datesRange: { - from: instanceFilters?.jobs?.datesRange?.from || null, + from: instanceFilters?.jobs?.datesRange?.from || dateTimeDefault, to: instanceFilters?.jobs?.datesRange?.to || null, }, }, From 96f48b08237e6d65020ad489b786dec7a7752dfd Mon Sep 17 00:00:00 2001 From: ziv glik Date: Wed, 14 Dec 2022 14:00:53 +0200 Subject: [PATCH 3/5] add time default to filter jobs --- .../Base/Header/Settings/SetDefaultTime.js | 67 +++++++++++++++++++ .../Base/Header/Settings/Settings.react.js | 3 + .../Tables/Jobs/useJobsFunctionsLimit.js | 7 ++ src/cache.js | 11 ++- src/components/common/RangePickerNow.js | 2 +- src/const/local-storage.js | 2 + src/hooks/graphql/useCounters.js | 2 +- src/hooks/useWizardAddPipeline.js | 27 +++++--- 8 files changed, 108 insertions(+), 13 deletions(-) create mode 100644 src/Routes/Base/Header/Settings/SetDefaultTime.js diff --git a/src/Routes/Base/Header/Settings/SetDefaultTime.js b/src/Routes/Base/Header/Settings/SetDefaultTime.js new file mode 100644 index 000000000..08f8028bb --- /dev/null +++ b/src/Routes/Base/Header/Settings/SetDefaultTime.js @@ -0,0 +1,67 @@ +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(new Date().setHours(-itemSelect)); + dateTimeDefaultVar({ hour: parseInt(itemSelect, 10), time: newDefTime }); + + instanceFilters.jobs.datesRange.from = newDefTime; + instanceFilters.jobs.datesRange.to = null; + instanceFiltersVar({ ...instanceFilters }); + }, + [instanceFilters] + ); + + return ( + + Filter Default Time +