From 8e4f987cf6d62fdd5753e943c9fd02cf829a2aae Mon Sep 17 00:00:00 2001 From: Palash gupta Date: Sun, 6 Mar 2022 12:02:21 +0530 Subject: [PATCH 1/8] bug: timeline interval is updated --- frontend/src/container/Timeline/index.tsx | 36 ++++++++++------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx index c729ac15f0..0c20e35a60 100644 --- a/frontend/src/container/Timeline/index.tsx +++ b/frontend/src/container/Timeline/index.tsx @@ -1,36 +1,25 @@ -import React, { useState, useMemo } from 'react'; -import { isEqual } from 'lodash-es'; +import React, { useState, useMemo, useEffect } from 'react'; import styles from './style.module.css'; import { useMeasure } from 'react-use'; -import { toFixed } from 'utils/toFixed'; -import { - INTERVAL_UNITS, - resolveTimeFromInterval, -} from 'container/TraceDetail/utils'; +import { INTERVAL_UNITS } from 'container/TraceDetail/utils'; import useThemeMode from 'hooks/useThemeMode'; import { Interval } from './types'; import { getIntervalSpread, getIntervals } from './utils'; -interface TimelineProps { - traceMetaData: object; - globalTraceMetadata: object; - intervalUnit: object; - setIntervalUnit: Function; -} + +const Timeline_Height = 22; +const Timeline_H_Spacing = 0; + const Timeline = ({ traceMetaData, globalTraceMetadata, - intervalUnit, setIntervalUnit, }: TimelineProps) => { const [ref, { width }] = useMeasure(); const { isDarkMode } = useThemeMode(); - const Timeline_Height = 22; - const Timeline_H_Spacing = 0; - const [intervals, setIntervals] = useState(null); - useMemo(() => { + useEffect(() => { const { baseInterval, baseSpread, @@ -44,7 +33,7 @@ const Timeline = ({ for (const idx in INTERVAL_UNITS) { const standard_interval = INTERVAL_UNITS[idx]; if (baseSpread * standard_interval.multiplier < 1) { - intervalUnit = INTERVAL_UNITS[idx - 1]; + intervalUnit = INTERVAL_UNITS[idx]; break; } } @@ -58,7 +47,7 @@ const Timeline = ({ intervalUnit, }), ); - }, [traceMetaData, globalTraceMetadata]); + }, []); return (
@@ -102,4 +91,11 @@ const Timeline = ({ ); }; +interface TimelineProps { + traceMetaData: object; + globalTraceMetadata: object; + intervalUnit: object; + setIntervalUnit: Function; +} + export default Timeline; From 239cdad57b1d8513a995ce68455d451ba1c4a7cd Mon Sep 17 00:00:00 2001 From: Prashant Shahi Date: Mon, 7 Mar 2022 16:07:38 +0530 Subject: [PATCH 2/8] =?UTF-8?q?ci:=20=F0=9F=92=9A=20fix=20e2e-k3s=20workfl?= =?UTF-8?q?ow=20with=20chart=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Prashant Shahi --- .github/workflows/e2e-k3s.yaml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/e2e-k3s.yaml b/.github/workflows/e2e-k3s.yaml index 16b02cc943..f25b8afdbe 100644 --- a/.github/workflows/e2e-k3s.yaml +++ b/.github/workflows/e2e-k3s.yaml @@ -52,14 +52,11 @@ jobs: helm install my-release signoz/signoz -n platform \ --wait \ --timeout 10m0s \ - --set cloud=null \ --set frontend.service.type=LoadBalancer \ - --set query-service.image.tag=$DOCKER_TAG \ + --set queryService.image.tag=$DOCKER_TAG \ --set frontend.image.tag=$DOCKER_TAG # get pods, services and the container images - kubectl describe deploy/my-release-frontend -n platform | grep Image - kubectl describe statefulset/my-release-query-service -n platform | grep Image kubectl get pods -n platform kubectl get svc -n platform From c04c0284dcb230a7b8793d4f5344b90c8c450715 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Mon, 7 Mar 2022 16:08:37 +0530 Subject: [PATCH 3/8] fix: add if condition for timeline interval --- frontend/src/container/Timeline/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx index 0c20e35a60..8f25f5c290 100644 --- a/frontend/src/container/Timeline/index.tsx +++ b/frontend/src/container/Timeline/index.tsx @@ -33,7 +33,7 @@ const Timeline = ({ for (const idx in INTERVAL_UNITS) { const standard_interval = INTERVAL_UNITS[idx]; if (baseSpread * standard_interval.multiplier < 1) { - intervalUnit = INTERVAL_UNITS[idx]; + if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1]; break; } } @@ -68,10 +68,9 @@ const Timeline = ({ {intervals && intervals.map((interval, index) => ( From 24a4177a73947ce607ff60282a8c5f0c898ef996 Mon Sep 17 00:00:00 2001 From: Pranay Prateek Date: Fri, 11 Mar 2022 18:53:37 +0530 Subject: [PATCH 4/8] Update README.md --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index edbbb81c44..3d031f0ec6 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,12 @@ SigNoz helps developers monitor applications and troubleshoot problems in their ![screenzy-1644432902955](https://user-images.githubusercontent.com/504541/153270713-1b2156e6-ec03-42de-975b-3c02b8ec1836.png) - +
![screenzy-1644432986784](https://user-images.githubusercontent.com/504541/153270725-0efb73b3-06ed-4207-bf13-9b7e2e17c4b8.png) +
+ + +![trace-detail](https://user-images.githubusercontent.com/504541/157875257-b60a275f-8987-4aef-b694-c64f3d6c4473.png)

From 988ce36047ee24b3de2a4b88803eab74500fc353 Mon Sep 17 00:00:00 2001 From: Pranay Prateek Date: Fri, 11 Mar 2022 18:54:28 +0530 Subject: [PATCH 5/8] Update README.md --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 3d031f0ec6..f9c7d1e816 100644 --- a/README.md +++ b/README.md @@ -37,9 +37,7 @@ SigNoz helps developers monitor applications and troubleshoot problems in their
![screenzy-1644432986784](https://user-images.githubusercontent.com/504541/153270725-0efb73b3-06ed-4207-bf13-9b7e2e17c4b8.png)
- - -![trace-detail](https://user-images.githubusercontent.com/504541/157875257-b60a275f-8987-4aef-b694-c64f3d6c4473.png) +![screenzy-1647005040573](https://user-images.githubusercontent.com/504541/157875938-a3d57904-ea6d-4278-b929-bd1408d7f94c.png)

From 84b70c970f5991dd4806c4e8cfa317f6b82ed2ba Mon Sep 17 00:00:00 2001 From: Palash gupta Date: Mon, 14 Mar 2022 20:12:42 +0530 Subject: [PATCH 6/8] chore: eslint fixes are updated --- .../CustomFunctions/uncaughtExpection.ts | 11 +-- .../cypress/integration/rules/index.spec.ts | 8 +- .../cypress/integration/trace/index.spec.ts | 32 ++++--- frontend/src/AppRoutes/index.tsx | 6 +- frontend/src/AppRoutes/routes.ts | 2 +- frontend/src/api/alerts/getGroup.ts | 2 +- frontend/src/api/browser/localstorage/get.ts | 3 +- frontend/src/api/trace/getFilters.ts | 2 +- frontend/src/api/trace/getTraceItem.ts | 2 +- frontend/src/assets/Dashboard/TimeSeries.tsx | 7 +- frontend/src/assets/Dashboard/Value.tsx | 35 ++++---- frontend/src/components/DatePicker/index.tsx | 2 +- .../src/components/Graph/Plugin/Legend.ts | 12 ++- frontend/src/components/Loadable/index.tsx | 4 +- frontend/src/components/RouteTab/index.tsx | 2 +- .../src/container/AllAlertChannels/index.tsx | 2 +- .../src/container/AllAlertChannels/styles.ts | 2 +- frontend/src/container/AppLayout/index.tsx | 5 +- frontend/src/container/AppLayout/styles.ts | 7 -- .../container/GantChart/SpanLength/index.tsx | 19 ++-- .../container/GantChart/SpanName/index.tsx | 5 +- .../container/GantChart/SpanName/styles.ts | 2 +- .../src/container/GantChart/Trace/index.tsx | 79 ++++++++-------- frontend/src/container/GantChart/index.tsx | 25 +++--- frontend/src/container/GantChart/utils.ts | 24 ++--- .../container/GridGraphLayout/Graph/index.tsx | 2 +- .../Header/DateTimeSelection/index.tsx | 2 +- frontend/src/container/Header/index.tsx | 2 +- .../container/ListAlertRules/ListAlert.tsx | 2 +- .../src/container/ListAlertRules/styles.ts | 2 +- .../ListOfDashboard/TableComponents/Name.tsx | 3 +- .../src/container/ListOfDashboard/index.tsx | 2 +- frontend/src/container/MetricsTable/index.tsx | 11 ++- .../NewDashboard/ComponentsSlider/index.tsx | 4 +- .../ComponentsSlider/menuItems.ts | 2 +- .../LeftContainer/QuerySection/Query.tsx | 2 +- frontend/src/container/NewWidget/index.tsx | 19 ++-- frontend/src/container/SideNav/index.tsx | 6 +- frontend/src/container/Timeline/index.tsx | 13 +-- frontend/src/container/Timeline/utils.ts | 24 ++--- .../Panel/PanelBody/Common/Checkbox.tsx | 24 ++--- .../Panel/PanelBody/CommonCheckBox/index.tsx | 1 + .../Panel/PanelBody/Duration/index.tsx | 20 ++--- .../Panel/PanelBody/Duration/styles.ts | 2 +- .../Trace/Filters/Panel/PanelBody/index.tsx | 12 +-- .../Filters/Panel/PanelHeading/index.tsx | 18 ++-- frontend/src/container/Trace/Graph/config.ts | 4 +- frontend/src/container/Trace/Graph/index.tsx | 10 +-- .../Trace/Search/AllTags/Tag/TagKey.tsx | 17 ++-- .../Trace/Search/AllTags/Tag/index.tsx | 30 +++---- .../Trace/Search/AllTags/Tag/styles.ts | 2 +- .../container/Trace/Search/AllTags/index.tsx | 33 +++---- .../container/Trace/Search/AllTags/styles.ts | 2 +- frontend/src/container/Trace/Search/index.tsx | 43 ++++----- frontend/src/container/Trace/Search/styles.ts | 2 +- .../Trace/TraceGraphFilter/index.tsx | 25 +++--- .../Trace/TraceGraphFilter/styles.ts | 1 - .../SelectedSpanDetails/ErrorTag.tsx | 17 ++-- .../TraceDetail/SelectedSpanDetails/index.tsx | 7 +- frontend/src/container/TraceDetail/index.tsx | 31 +++---- frontend/src/container/TraceDetail/utils.ts | 8 +- .../__tests__/TraceFlameGraph.test.tsx | 2 +- .../src/container/TraceFlameGraph/index.tsx | 90 +++++++++---------- .../src/container/TraceFlameGraph/styles.ts | 12 +-- frontend/src/hooks/useClickOutside.ts | 21 ++--- frontend/src/hooks/useDebouncedFunction.ts | 11 ++- frontend/src/hooks/useThemeMode.ts | 2 +- frontend/src/hooks/useUrlQuery.ts | 2 +- frontend/src/lib/getRandomColor.ts | 6 +- .../src/lib/getStartAndEndTime/getMinAgo.ts | 4 +- frontend/src/lib/getStep.ts | 5 +- .../src/lib/query/convertObjectIntoParams.ts | 4 +- .../src/pages/AlertChannelCreate/index.tsx | 2 +- frontend/src/pages/AllAlertChannels/index.tsx | 6 +- frontend/src/pages/CreateAlert/index.tsx | 14 ++- frontend/src/pages/Metrics/index.tsx | 2 +- frontend/src/pages/Settings/index.tsx | 6 +- frontend/src/pages/SignUp/SignUp.tsx | 21 +++-- frontend/src/pages/SignUp/index.tsx | 18 ++-- frontend/src/pages/SignUp/styles.ts | 2 +- frontend/src/pages/Trace/index.tsx | 2 +- frontend/src/pages/Trace/styles.ts | 2 +- frontend/src/pages/TraceDetail/index.tsx | 10 +-- .../actions/dashboard/getQueryResults.ts | 2 +- .../store/actions/metrics/getInitialData.ts | 2 - .../store/actions/trace/getInitialFilter.ts | 31 +++---- frontend/src/store/actions/trace/getSpans.ts | 4 +- .../actions/trace/parseFilter/current.ts | 1 + .../store/actions/trace/parseFilter/filter.ts | 1 + .../trace/parseFilter/filterToFetchData.ts | 3 +- .../store/actions/trace/parseFilter/index.ts | 8 +- .../trace/parseFilter/isFilterExclude.ts | 1 + .../trace/parseFilter/selectedFilter.ts | 1 + .../actions/trace/parseFilter/selectedTags.ts | 1 + .../store/actions/trace/selectTraceFilter.ts | 1 + .../store/actions/trace/updateIsTagsError.ts | 2 +- .../actions/trace/updateTagPanelVisiblity.ts | 2 +- .../store/actions/trace/updateTagsSelected.ts | 2 +- frontend/src/store/actions/trace/util.ts | 11 +-- frontend/src/store/reducers/app.ts | 8 +- frontend/src/store/reducers/trace.ts | 18 ++-- frontend/src/utils/app.ts | 2 +- frontend/src/utils/getSpanTreeMetadata.ts | 13 ++- frontend/src/utils/spanToTree.ts | 2 +- frontend/src/utils/toFixed.ts | 2 +- 105 files changed, 554 insertions(+), 513 deletions(-) diff --git a/frontend/cypress/CustomFunctions/uncaughtExpection.ts b/frontend/cypress/CustomFunctions/uncaughtExpection.ts index 341ddd8cee..dd423208f3 100644 --- a/frontend/cypress/CustomFunctions/uncaughtExpection.ts +++ b/frontend/cypress/CustomFunctions/uncaughtExpection.ts @@ -1,13 +1,10 @@ const resizeObserverLoopErrRe = /ResizeObserver loop limit exceeded/; -const unCaughtExpection = () => { +const unCaughtExpection = (): void => { cy.on('uncaught:exception', (err) => { - if (resizeObserverLoopErrRe.test(err.message)) { - // returning false here prevents Cypress from - // failing the test - return false; - } - return true; + // returning false here prevents Cypress from + // failing the test + return !resizeObserverLoopErrRe.test(err.message); }); }; diff --git a/frontend/cypress/integration/rules/index.spec.ts b/frontend/cypress/integration/rules/index.spec.ts index 0ac59b3052..e5349a33e6 100644 --- a/frontend/cypress/integration/rules/index.spec.ts +++ b/frontend/cypress/integration/rules/index.spec.ts @@ -4,6 +4,8 @@ import ROUTES from 'constants/routes'; import defaultRules from '../../fixtures/defaultRules.json'; +const defaultRuleRoutes = `**/rules/**`; + describe('Alerts', () => { beforeEach(() => { window.localStorage.setItem('isLoggedIn', 'yes'); @@ -21,7 +23,7 @@ describe('Alerts', () => { it('Edit Rules Page Failure', async () => { cy - .intercept('**/rules/**', { + .intercept(defaultRuleRoutes, { statusCode: 500, }) .as('Get Rules Error'); @@ -49,7 +51,7 @@ describe('Alerts', () => { const text = 'this is the sample value'; cy - .intercept('**/rules/**', { + .intercept(defaultRuleRoutes, { statusCode: 200, body: { data: { @@ -103,7 +105,7 @@ describe('Alerts', () => { it('Rules are Deleted', async () => { cy - .intercept('**/rules/**', { + .intercept(defaultRuleRoutes, { body: { data: 'Deleted', message: 'Success', diff --git a/frontend/cypress/integration/trace/index.spec.ts b/frontend/cypress/integration/trace/index.spec.ts index 3ca79ecdce..1cfecef08e 100644 --- a/frontend/cypress/integration/trace/index.spec.ts +++ b/frontend/cypress/integration/trace/index.spec.ts @@ -1,9 +1,15 @@ +/* eslint-disable sonarjs/no-duplicate-string */ import ROUTES from 'constants/routes'; -import { TraceFilterEnum } from 'types/reducer/trace'; -import TableInitialResponse from '../../fixtures/trace/initialSpans.json'; -import FilterInitialResponse from '../../fixtures/trace/initialSpanFilter.json'; -import GraphInitialResponse from '../../fixtures/trace/initialAggregates.json'; import { AppState } from 'store/reducers'; +import { TraceFilterEnum } from 'types/reducer/trace'; + +import GraphInitialResponse from '../../fixtures/trace/initialAggregates.json'; +import FilterInitialResponse from '../../fixtures/trace/initialSpanFilter.json'; +import TableInitialResponse from '../../fixtures/trace/initialSpans.json'; + +const allFilters = '@Filters.all'; +const allGraphs = '@Graph.all'; +const allTable = '@Table.all'; describe('Trace', () => { beforeEach(() => { @@ -74,9 +80,9 @@ describe('Trace', () => { JSON.stringify(TableInitialResponse), ); }); - cy.get('@Filters.all').should('have.length', 1); - cy.get('@Graph.all').should('have.length', 1); - cy.get('@Table.all').should('have.length', 1); + cy.get(allFilters).should('have.length', 1); + cy.get(allGraphs).should('have.length', 1); + cy.get(allTable).should('have.length', 1); }); it('Clear All', () => { @@ -102,9 +108,9 @@ describe('Trace', () => { cy.wait(['@Filters', '@Graph', '@Table']); // insuring the api get call - cy.get('@Filters.all').should('have.length', 2); - cy.get('@Graph.all').should('have.length', 2); - cy.get('@Table.all').should('have.length', 2); + cy.get(allFilters).should('have.length', 2); + cy.get(allGraphs).should('have.length', 2); + cy.get(allTable).should('have.length', 2); cy .window() @@ -146,9 +152,9 @@ describe('Trace', () => { expect(tableBody.exclude[0] === 'status').to.be.true; }); - cy.get('@Filters.all').should('have.length', 2); - cy.get('@Graph.all').should('have.length', 2); - cy.get('@Table.all').should('have.length', 2); + cy.get(allFilters).should('have.length', 2); + cy.get(allGraphs).should('have.length', 2); + cy.get(allTable).should('have.length', 2); }); }); }); diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index 17c56f1d03..7c7b60d90d 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/frontend/src/AppRoutes/index.tsx @@ -11,7 +11,6 @@ import AppReducer from 'types/reducer/app'; import routes from './routes'; - const App = (): JSX.Element => { const { isLoggedIn } = useSelector((state) => state.app); @@ -20,8 +19,8 @@ const App = (): JSX.Element => { }> - {routes.map(({ path, component, exact }, index) => ( - + {routes.map(({ path, component, exact }) => ( + ))} { ); }; - export default App; diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index fd598b1b2c..474f71f510 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/frontend/src/AppRoutes/routes.ts @@ -17,8 +17,8 @@ import { ServicesTablePage, SettingsPage, SignupPage, - TraceFilter, TraceDetail, + TraceFilter, UsageExplorerPage, } from './pageComponents'; diff --git a/frontend/src/api/alerts/getGroup.ts b/frontend/src/api/alerts/getGroup.ts index adfd0c18e6..f5e72472d0 100644 --- a/frontend/src/api/alerts/getGroup.ts +++ b/frontend/src/api/alerts/getGroup.ts @@ -1,9 +1,9 @@ import { AxiosAlertManagerInstance } from 'api'; import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; import { AxiosError } from 'axios'; +import convertObjectIntoParams from 'lib/query/convertObjectIntoParams'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { PayloadProps, Props } from 'types/api/alerts/getGroups'; -import convertObjectIntoParams from 'lib/query/convertObjectIntoParams'; const getGroups = async ( props: Props, diff --git a/frontend/src/api/browser/localstorage/get.ts b/frontend/src/api/browser/localstorage/get.ts index e7d5e3da91..026c7a7171 100644 --- a/frontend/src/api/browser/localstorage/get.ts +++ b/frontend/src/api/browser/localstorage/get.ts @@ -1,7 +1,6 @@ const get = (key: string): string | null => { try { - const value = localStorage.getItem(key); - return value; + return localStorage.getItem(key); } catch (e) { return ''; } diff --git a/frontend/src/api/trace/getFilters.ts b/frontend/src/api/trace/getFilters.ts index 6fb484673f..1d18752961 100644 --- a/frontend/src/api/trace/getFilters.ts +++ b/frontend/src/api/trace/getFilters.ts @@ -1,9 +1,9 @@ import axios from 'api'; import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; import { AxiosError } from 'axios'; +import omitBy from 'lodash-es/omitBy'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { PayloadProps, Props } from 'types/api/trace/getFilters'; -import omitBy from 'lodash-es/omitBy'; const getFilters = async ( props: Props, diff --git a/frontend/src/api/trace/getTraceItem.ts b/frontend/src/api/trace/getTraceItem.ts index 1d00340852..bf93269669 100644 --- a/frontend/src/api/trace/getTraceItem.ts +++ b/frontend/src/api/trace/getTraceItem.ts @@ -2,7 +2,7 @@ import axios from 'api'; import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; import { AxiosError } from 'axios'; import { ErrorResponse, SuccessResponse } from 'types/api'; -import { Props, PayloadProps } from 'types/api/trace/getTraceItem'; +import { PayloadProps, Props } from 'types/api/trace/getTraceItem'; const getTraceItem = async ( props: Props, diff --git a/frontend/src/assets/Dashboard/TimeSeries.tsx b/frontend/src/assets/Dashboard/TimeSeries.tsx index 439d99235b..81d9e5de76 100644 --- a/frontend/src/assets/Dashboard/TimeSeries.tsx +++ b/frontend/src/assets/Dashboard/TimeSeries.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const TimeSeries = (props: TimeSeriesProps): JSX.Element => ( +const TimeSeries = (): JSX.Element => ( ( ); -export interface TimeSeriesProps{ - fillColor: React.CSSProperties['color']; -} - - export default TimeSeries; diff --git a/frontend/src/assets/Dashboard/Value.tsx b/frontend/src/assets/Dashboard/Value.tsx index 02a0dda6ca..b8bf1d9572 100644 --- a/frontend/src/assets/Dashboard/Value.tsx +++ b/frontend/src/assets/Dashboard/Value.tsx @@ -1,24 +1,25 @@ import React from 'react'; const Value = (props: ValueProps): JSX.Element => { - return( - - - - - -)}; + return ( + + + + + + ); +}; -interface ValueProps{ +interface ValueProps { fillColor: React.CSSProperties['color']; } diff --git a/frontend/src/components/DatePicker/index.tsx b/frontend/src/components/DatePicker/index.tsx index f76439d9d2..daad8c5e6f 100644 --- a/frontend/src/components/DatePicker/index.tsx +++ b/frontend/src/components/DatePicker/index.tsx @@ -1,6 +1,6 @@ +import generatePicker from 'antd/es/date-picker/generatePicker'; import { Dayjs } from 'dayjs'; import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'; -import generatePicker from 'antd/es/date-picker/generatePicker'; const DatePicker = generatePicker(dayjsGenerateConfig); diff --git a/frontend/src/components/Graph/Plugin/Legend.ts b/frontend/src/components/Graph/Plugin/Legend.ts index 6c4826e5f7..a2fc684f30 100644 --- a/frontend/src/components/Graph/Plugin/Legend.ts +++ b/frontend/src/components/Graph/Plugin/Legend.ts @@ -1,7 +1,11 @@ -import { Plugin, ChartType, Chart, ChartOptions } from 'chart.js'; +import { Chart, ChartType, Plugin } from 'chart.js'; import { colors } from 'lib/getRandomColor'; -const getOrCreateLegendList = (chart: Chart, id: string, isLonger: boolean) => { +const getOrCreateLegendList = ( + chart: Chart, + id: string, + isLonger: boolean, +): HTMLUListElement => { const legendContainer = document.getElementById(id); let listContainer = legendContainer?.querySelector('ul'); @@ -27,7 +31,7 @@ const getOrCreateLegendList = (chart: Chart, id: string, isLonger: boolean) => { export const legend = (id: string, isLonger: boolean): Plugin => { return { id: 'htmlLegend', - afterUpdate(chart, args, options: ChartOptions) { + afterUpdate(chart): void { const ul = getOrCreateLegendList(chart, id || 'legend', isLonger); // Remove old legend items @@ -46,7 +50,7 @@ export const legend = (id: string, isLonger: boolean): Plugin => { li.style.marginLeft = '10px'; li.style.marginTop = '5px'; - li.onclick = () => { + li.onclick = (): void => { const { type } = chart.config; if (type === 'pie' || type === 'doughnut') { // Pie and doughnut charts only have a single dataset and visibility is per item diff --git a/frontend/src/components/Loadable/index.tsx b/frontend/src/components/Loadable/index.tsx index f1b6774b16..60c794f542 100644 --- a/frontend/src/components/Loadable/index.tsx +++ b/frontend/src/components/Loadable/index.tsx @@ -3,9 +3,7 @@ import { ComponentType, lazy } from 'react'; function Loadable(importPath: { (): LoadableProps; }): React.LazyExoticComponent { - const LazyComponent = lazy(() => importPath()); - - return LazyComponent; + return lazy(() => importPath()); } type LazyComponent = ComponentType>; diff --git a/frontend/src/components/RouteTab/index.tsx b/frontend/src/components/RouteTab/index.tsx index 12ce2d2a70..2ed51b65b8 100644 --- a/frontend/src/components/RouteTab/index.tsx +++ b/frontend/src/components/RouteTab/index.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import { Tabs, TabsProps } from 'antd'; +import React from 'react'; const { TabPane } = Tabs; import history from 'lib/history'; diff --git a/frontend/src/container/AllAlertChannels/index.tsx b/frontend/src/container/AllAlertChannels/index.tsx index c69a41e855..ca40c78254 100644 --- a/frontend/src/container/AllAlertChannels/index.tsx +++ b/frontend/src/container/AllAlertChannels/index.tsx @@ -10,7 +10,7 @@ import React, { useCallback } from 'react'; const { Paragraph } = Typography; import AlertChannlesComponent from './AlertChannels'; -import { ButtonContainer, Button } from './styles'; +import { Button, ButtonContainer } from './styles'; const AlertChannels = (): JSX.Element => { const onToggleHandler = useCallback(() => { diff --git a/frontend/src/container/AllAlertChannels/styles.ts b/frontend/src/container/AllAlertChannels/styles.ts index bfcab1154a..b2d03a4cea 100644 --- a/frontend/src/container/AllAlertChannels/styles.ts +++ b/frontend/src/container/AllAlertChannels/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Button as ButtonComponent } from 'antd'; +import styled from 'styled-components'; export const ButtonContainer = styled.div` &&& { diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx index b5a47f6c5c..5e0163b355 100644 --- a/frontend/src/container/AppLayout/index.tsx +++ b/frontend/src/container/AppLayout/index.tsx @@ -7,7 +7,7 @@ import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import AppReducer from 'types/reducer/app'; -import { Content, Footer, Layout } from './styles'; +import { Content, Layout } from './styles'; const AppLayout: React.FC = ({ children }) => { const { isLoggedIn } = useSelector((state) => state.app); @@ -27,8 +27,6 @@ const AppLayout: React.FC = ({ children }) => { } }, [isLoggedIn, isSignUpPage]); - const currentYear = new Date().getFullYear(); - return ( {!isSignUpPage && } @@ -37,7 +35,6 @@ const AppLayout: React.FC = ({ children }) => { {!isSignUpPage && } {children} - {/*
{`SigNoz Inc. © ${currentYear}`}
*/} ); diff --git a/frontend/src/container/AppLayout/styles.ts b/frontend/src/container/AppLayout/styles.ts index 3bbd06db34..f3e9d573b0 100644 --- a/frontend/src/container/AppLayout/styles.ts +++ b/frontend/src/container/AppLayout/styles.ts @@ -16,10 +16,3 @@ export const Content = styled(LayoutComponent.Content)` flex-direction: column; } `; - -export const Footer = styled(LayoutComponent.Footer)` - &&& { - text-align: center; - font-size: 0.7rem; - } -`; diff --git a/frontend/src/container/GantChart/SpanLength/index.tsx b/frontend/src/container/GantChart/SpanLength/index.tsx index 38d6d46b4e..890577f379 100644 --- a/frontend/src/container/GantChart/SpanLength/index.tsx +++ b/frontend/src/container/GantChart/SpanLength/index.tsx @@ -1,9 +1,13 @@ import { Tooltip, Typography } from 'antd'; -import React from 'react'; -import { SpanBorder, SpanText, SpanWrapper, SpanLine } from './styles'; -import { toFixed } from 'utils/toFixed' -import { IIntervalUnit, resolveTimeFromInterval } from 'container/TraceDetail/utils'; +import { + IIntervalUnit, + resolveTimeFromInterval, +} from 'container/TraceDetail/utils'; import useThemeMode from 'hooks/useThemeMode'; +import React from 'react'; +import { toFixed } from 'utils/toFixed'; + +import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles'; interface SpanLengthProps { width: string; leftOffset: string; @@ -16,12 +20,15 @@ interface SpanLengthProps { const SpanLength = (props: SpanLengthProps): JSX.Element => { const { width, leftOffset, bgColor, intervalUnit } = props; - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useThemeMode(); return ( - {`${toFixed(resolveTimeFromInterval(props.inMsCount, intervalUnit), 2)} ${intervalUnit.name}`} + {`${toFixed( + resolveTimeFromInterval(props.inMsCount, intervalUnit), + 2, + )} ${intervalUnit.name}`} ); }; diff --git a/frontend/src/container/GantChart/SpanName/index.tsx b/frontend/src/container/GantChart/SpanName/index.tsx index e0614b4600..13e220554a 100644 --- a/frontend/src/container/GantChart/SpanName/index.tsx +++ b/frontend/src/container/GantChart/SpanName/index.tsx @@ -1,11 +1,12 @@ import React from 'react'; + import { + Container, Service, Span, - SpanWrapper, SpanConnector, - Container, SpanName, + SpanWrapper, } from './styles'; const SpanNameComponent = ({ diff --git a/frontend/src/container/GantChart/SpanName/styles.ts b/frontend/src/container/GantChart/SpanName/styles.ts index b037349d7e..642e28f639 100644 --- a/frontend/src/container/GantChart/SpanName/styles.ts +++ b/frontend/src/container/GantChart/SpanName/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Typography } from 'antd'; +import styled from 'styled-components'; export const Span = styled(Typography.Paragraph)` &&& { diff --git a/frontend/src/container/GantChart/Trace/index.tsx b/frontend/src/container/GantChart/Trace/index.tsx index a4d10052b8..4b409a60f7 100644 --- a/frontend/src/container/GantChart/Trace/index.tsx +++ b/frontend/src/container/GantChart/Trace/index.tsx @@ -1,22 +1,25 @@ -import React, { useRef, useState, useEffect } from 'react'; +import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons'; +import { Col, Row } from 'antd'; +import { + IIntervalUnit, + resolveTimeFromInterval, +} from 'container/TraceDetail/utils'; +import useThemeMode from 'hooks/useThemeMode'; +import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; +import React, { useEffect, useRef, useState } from 'react'; +import { pushDStree } from 'store/actions'; +import { ITraceMetaData } from '..'; +import SpanLength from '../SpanLength'; +import SpanName from '../SpanName'; +import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils'; import { CardComponent, CardContainer, CaretContainer, - Wrapper, HoverCard, + Wrapper, } from './styles'; -import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons'; -import SpanLength from '../SpanLength'; -import SpanName from '../SpanName'; -import { pushDStree } from 'store/actions'; -import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils'; -import { ITraceMetaData } from '..'; -import { Col, Row } from 'antd'; -import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants' -import { IIntervalUnit, resolveTimeFromInterval } from 'container/TraceDetail/utils'; -import useThemeMode from 'hooks/useThemeMode'; const Trace = (props: TraceProps): JSX.Element => { const { @@ -38,7 +41,7 @@ const Trace = (props: TraceProps): JSX.Element => { intervalUnit, } = props; - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useThemeMode(); const [isOpen, setOpen] = useState(activeSpanPath[level] === id); const localTreeExpandInteraction = useRef(0); // Boolean is for the state of the expansion whereas the number i.e. 0 is for skipping the user interaction. @@ -47,20 +50,18 @@ const Trace = (props: TraceProps): JSX.Element => { if (localTreeExpandInteraction.current !== 0) { setOpen(localTreeExpandInteraction.current); localTreeExpandInteraction.current = 0; + } else if (!isOpen) { + setOpen(activeSpanPath[level] === id); } - else if (!isOpen) { - setOpen(activeSpanPath[level] === id) - } - }, [activeSpanPath, isOpen]) + }, [activeSpanPath, isOpen]); useEffect(() => { if (isExpandAll) { - setOpen(isExpandAll) + setOpen(isExpandAll); + } else { + setOpen(activeSpanPath[level] === id); } - else { - setOpen(activeSpanPath[level] === id) - } - }, [isExpandAll]) + }, [isExpandAll]); const isOnlyChild = props.children.length === 1; const [top, setTop] = useState(0); @@ -69,9 +70,13 @@ const Trace = (props: TraceProps): JSX.Element => { React.useEffect(() => { if (activeSelectedId === id) { - ref.current?.scrollIntoView({ block: 'nearest', behavior: 'auto', inline: 'nearest' }); + ref.current?.scrollIntoView({ + block: 'nearest', + behavior: 'auto', + inline: 'nearest', + }); } - }, [activeSelectedId]) + }, [activeSelectedId]); const onMouseEnterHandler = () => { setActiveHoverId(props.id); @@ -87,18 +92,21 @@ const Trace = (props: TraceProps): JSX.Element => { const onClick = () => { setActiveSelectedId(id); - } + }; const onClickTreeExpansion = (event) => { - event.stopPropagation() - setOpen((state) => { localTreeExpandInteraction.current = !isOpen; return !state }); - } + event.stopPropagation(); + setOpen((state) => { + localTreeExpandInteraction.current = !isOpen; + return !state; + }); + }; const { totalSpans } = getMetaDataFromSpanTree(props); const inMsCount = value; const nodeLeftOffset = ((startTime - globalStart) * 1e2) / globalSpread; const width = (value * 1e2) / (globalSpread * 1e6); - const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - (level * (16 + 1)) - 16; + const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 16; return ( <> @@ -115,17 +123,12 @@ const Trace = (props: TraceProps): JSX.Element => { isDarkMode={isDarkMode} /> - + {totalSpans !== 1 && ( - + {totalSpans} {isOpen ? : } @@ -138,13 +141,13 @@ const Trace = (props: TraceProps): JSX.Element => { - + diff --git a/frontend/src/container/GantChart/index.tsx b/frontend/src/container/GantChart/index.tsx index fa8b37d15a..7c22d29a3b 100644 --- a/frontend/src/container/GantChart/index.tsx +++ b/frontend/src/container/GantChart/index.tsx @@ -1,11 +1,12 @@ +import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'; +import { IIntervalUnit } from 'container/TraceDetail/utils'; import React, { useEffect, useState } from 'react'; -import Trace from './Trace'; -import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons' -import { Wrapper, CardWrapper, CardContainer, CollapseButton } from './styles'; -import { getSpanPath } from './utils'; -import { IIntervalUnit } from 'container/TraceDetail/utils' import { ITraceTree } from 'types/api/trace/getTraceItem'; +import { CardContainer, CardWrapper, CollapseButton, Wrapper } from './styles'; +import Trace from './Trace'; +import { getSpanPath } from './utils'; + const GanttChart = (props: GanttChartProps): JSX.Element => { const { data, @@ -15,7 +16,7 @@ const GanttChart = (props: GanttChartProps): JSX.Element => { activeSelectedId, setActiveSelectedId, spanId, - intervalUnit + intervalUnit, } = props; const { globalStart, spread: globalSpread } = traceMetaData; @@ -24,11 +25,11 @@ const GanttChart = (props: GanttChartProps): JSX.Element => { const [activeSpanPath, setActiveSpanPath] = useState([]); useEffect(() => { - setActiveSpanPath(getSpanPath(data, spanId)) + setActiveSpanPath(getSpanPath(data, spanId)); }, [spanId]); useEffect(() => { - setActiveSpanPath(getSpanPath(data, activeSelectedId)) + setActiveSpanPath(getSpanPath(data, activeSelectedId)); }, [activeSelectedId]); const handleCollapse = () => { @@ -38,7 +39,11 @@ const GanttChart = (props: GanttChartProps): JSX.Element => { <> - + {isExpandAll ? : } @@ -81,7 +86,7 @@ export interface GanttChartProps { setActiveHoverId: React.Dispatch>; setActiveSelectedId: React.Dispatch>; spanId: string; - intervalUnit: IIntervalUnit + intervalUnit: IIntervalUnit; } export default GanttChart; diff --git a/frontend/src/container/GantChart/utils.ts b/frontend/src/container/GantChart/utils.ts index 8ee9411e05..7fe4b2b1e9 100644 --- a/frontend/src/container/GantChart/utils.ts +++ b/frontend/src/container/GantChart/utils.ts @@ -5,7 +5,7 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => { let globalEnd = Number.NEGATIVE_INFINITY; let totalSpans = 0; let levels = 1; - const traverse = (treeNode: ITraceTree, level: number = 0) => { + const traverse = (treeNode: ITraceTree, level = 0) => { if (!treeNode) { return; } @@ -35,19 +35,19 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => { }; export function getTopLeftFromBody(elem: HTMLElement) { - let box = elem.getBoundingClientRect(); + const box = elem.getBoundingClientRect(); - let body = document.body; - let docEl = document.documentElement; + const body = document.body; + const docEl = document.documentElement; - let scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; - let scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; - let clientTop = docEl.clientTop || body.clientTop || 0; - let clientLeft = docEl.clientLeft || body.clientLeft || 0; + const clientTop = docEl.clientTop || body.clientTop || 0; + const clientLeft = docEl.clientLeft || body.clientLeft || 0; - let top = box.top + scrollTop - clientTop; - let left = box.left + scrollLeft - clientLeft; + const top = box.top + scrollTop - clientTop; + const left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } @@ -57,7 +57,7 @@ export const getNodeById = ( treeData: ITraceTree, ): ITraceTree | undefined => { let foundNode: ITraceTree | undefined = undefined; - const traverse = (treeNode: ITraceTree, level: number = 0) => { + const traverse = (treeNode: ITraceTree, level = 0) => { if (!treeNode) { return; } @@ -115,7 +115,7 @@ export const isSpanPresent = ( const traverse = ( treeNode: ITraceTree, - level: number = 0, + level = 0, foundNode: ITraceTree[], ) => { if (!treeNode) { diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx index 0cf795b06d..dec25182b6 100644 --- a/frontend/src/container/GridGraphLayout/Graph/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx @@ -23,7 +23,7 @@ import { Widgets } from 'types/api/dashboard/getAll'; import Bar from './Bar'; import FullView from './FullView'; -import { Modal, FullViewContainer, ErrorContainer } from './styles'; +import { ErrorContainer, FullViewContainer, Modal } from './styles'; const GridCardGraph = ({ widget, diff --git a/frontend/src/container/Header/DateTimeSelection/index.tsx b/frontend/src/container/Header/DateTimeSelection/index.tsx index ce7dcce6d6..fce010e9e7 100644 --- a/frontend/src/container/Header/DateTimeSelection/index.tsx +++ b/frontend/src/container/Header/DateTimeSelection/index.tsx @@ -7,8 +7,8 @@ const { Option } = DefaultSelect; import getLocalStorageKey from 'api/browser/localstorage/get'; import setLocalStorageKey from 'api/browser/localstorage/set'; import { LOCAL_STORAGE } from 'constants/localStorage'; -import getTimeString from 'lib/getTimeString'; import dayjs, { Dayjs } from 'dayjs'; +import getTimeString from 'lib/getTimeString'; import { connect, useSelector } from 'react-redux'; import { RouteComponentProps, withRouter } from 'react-router'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx index a9636c0b9f..b800f2d542 100644 --- a/frontend/src/container/Header/index.tsx +++ b/frontend/src/container/Header/index.tsx @@ -2,7 +2,7 @@ import { Col } from 'antd'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import React from 'react'; -import { useLocation, matchPath } from 'react-router-dom'; +import { matchPath, useLocation } from 'react-router-dom'; import ShowBreadcrumbs from './Breadcrumbs'; import DateTimeSelector from './DateTimeSelection'; diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 7fd5d8d049..1a0f09b609 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -12,7 +12,7 @@ import { generatePath } from 'react-router'; import { Alerts } from 'types/api/alerts/getAll'; import DeleteAlert from './DeleteAlert'; -import { ButtonContainer, Button } from './styles'; +import { Button, ButtonContainer } from './styles'; import Status from './TableComponents/Status'; const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => { diff --git a/frontend/src/container/ListAlertRules/styles.ts b/frontend/src/container/ListAlertRules/styles.ts index 2c54d3ec91..fa993568fb 100644 --- a/frontend/src/container/ListAlertRules/styles.ts +++ b/frontend/src/container/ListAlertRules/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Button as ButtonComponent } from 'antd'; +import styled from 'styled-components'; export const ButtonContainer = styled.div` &&& { diff --git a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx index 31fea67bc3..aea20a766b 100644 --- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx +++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx @@ -1,8 +1,9 @@ import { Button } from 'antd'; import ROUTES from 'constants/routes'; +import history from 'lib/history'; import React from 'react'; import { generatePath } from 'react-router-dom'; -import history from 'lib/history'; + import { Data } from '..'; const Name = (name: Data['name'], data: Data): JSX.Element => { diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx index ffbc84d044..a7009a4bad 100644 --- a/frontend/src/container/ListOfDashboard/index.tsx +++ b/frontend/src/container/ListOfDashboard/index.tsx @@ -11,7 +11,7 @@ import { AppState } from 'store/reducers'; import DashboardReducer from 'types/reducer/dashboards'; import { v4 } from 'uuid'; -import { NewDashboardButton, TableContainer, ButtonContainer } from './styles'; +import { ButtonContainer, NewDashboardButton, TableContainer } from './styles'; import Createdby from './TableComponents/CreatedBy'; import DateComponent from './TableComponents/Date'; import DeleteButton from './TableComponents/DeleteButton'; diff --git a/frontend/src/container/MetricsTable/index.tsx b/frontend/src/container/MetricsTable/index.tsx index ed50b7fdd7..63a2d94439 100644 --- a/frontend/src/container/MetricsTable/index.tsx +++ b/frontend/src/container/MetricsTable/index.tsx @@ -1,4 +1,6 @@ import Table, { ColumnsType } from 'antd/lib/table'; +import localStorageGet from 'api/browser/localstorage/get'; +import localStorageSet from 'api/browser/localstorage/set'; import { SKIP_ONBOARDING } from 'constants/onboarding'; import ROUTES from 'constants/routes'; import history from 'lib/history'; @@ -10,8 +12,6 @@ import MetricReducer from 'types/reducer/metrics'; import SkipBoardModal from './SkipOnBoardModal'; import { Container, Name } from './styles'; -import localStorageGet from 'api/browser/localstorage/get'; -import localStorageSet from 'api/browser/localstorage/set'; const Metrics = (): JSX.Element => { const [skipOnboarding, setSkipOnboarding] = useState( @@ -31,7 +31,12 @@ const Metrics = (): JSX.Element => { history.push(to); }; - if (services.length === 0 && loading === false && !skipOnboarding && error === true) { + if ( + services.length === 0 && + loading === false && + !skipOnboarding && + error === true + ) { return ; } diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx index 2e1107abff..6826e55f69 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx +++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx @@ -26,7 +26,7 @@ const DashboardGraphSlider = (): JSX.Element => { [push, pathname], ); const { isDarkMode } = useSelector((state) => state.app); - const fillColor:React.CSSProperties['color'] = isDarkMode?"white" : "black"; + const fillColor: React.CSSProperties['color'] = isDarkMode ? 'white' : 'black'; return ( {menuItems.map(({ name, Icon, display }) => ( @@ -37,7 +37,7 @@ const DashboardGraphSlider = (): JSX.Element => { key={name} draggable > - + {display} ))} diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts index 458f8db062..36adfe1385 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts +++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts @@ -1,6 +1,6 @@ import TimeSeries from 'assets/Dashboard/TimeSeries'; -import ValueIcon from 'assets/Dashboard/Value'; import { TimeSeriesProps as IconProps } from 'assets/Dashboard/TimeSeries'; +import ValueIcon from 'assets/Dashboard/Value'; const Items: ItemsProps[] = [ { diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx index 343e576516..1a7a70aaba 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx @@ -16,10 +16,10 @@ import AppActions from 'types/actions'; import { DeleteQueryProps } from 'types/actions/dashboard'; import { + ButtonContainer, Container, InputContainer, QueryWrapper, - ButtonContainer, } from './styles'; const Query = ({ diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 832aec9f4b..dc3ea1a93e 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -17,7 +17,10 @@ import { SaveDashboard, SaveDashboardProps, } from 'store/actions/dashboard/saveDashboard'; -import { UpdateQuery, UpdateQueryProps } from 'store/actions/dashboard/updateQuery'; +import { + UpdateQuery, + UpdateQueryProps, +} from 'store/actions/dashboard/updateQuery'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { GlobalTime } from 'types/actions/globalTime'; @@ -40,7 +43,7 @@ const NewWidget = ({ applySettingsToPanel, saveSettingOfPanel, getQueryResults, - updateQuery + updateQuery, }: Props): JSX.Element => { const { dashboards } = useSelector( (state) => state.dashboards, @@ -127,11 +130,11 @@ const NewWidget = ({ updateQuery({ widgetId: selectedWidget?.id || '', query: element.query || '', - legend: element.legend || '', - currentIndex: index + legend: element.legend || '', + currentIndex: index, }); - }) - + }); + applySettingsToPanel({ description, isStacked: stacked, @@ -141,7 +144,7 @@ const NewWidget = ({ title, widgetId: selectedWidget?.id || '', }); - } + }; const onClickDiscardHandler = useCallback(() => { push(generatePath(ROUTES.DASHBOARD, { dashboardId })); @@ -233,7 +236,7 @@ const mapDispatchToProps = ( applySettingsToPanel: bindActionCreators(ApplySettingsToPanel, dispatch), saveSettingOfPanel: bindActionCreators(SaveDashboard, dispatch), getQueryResults: bindActionCreators(GetQueryResults, dispatch), - updateQuery: bindActionCreators(UpdateQuery, dispatch) + updateQuery: bindActionCreators(UpdateQuery, dispatch), }); type Props = DispatchProps & NewWidgetProps; diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index 93c618205b..687bf2639b 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -1,7 +1,7 @@ import { Menu, Typography } from 'antd'; -import { SlackButton, SlackMenuItemContainer, ToggleButton } from './styles'; import ROUTES from 'constants/routes'; import history from 'lib/history'; +import setTheme from 'lib/theme/setTheme'; import React, { useCallback, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { NavLink } from 'react-router-dom'; @@ -12,11 +12,11 @@ import { ToggleDarkMode } from 'store/actions'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import AppReducer from 'types/reducer/app'; -import setTheme from 'lib/theme/setTheme'; import menus from './menuItems'; -import { Logo, Sider, ThemeSwitcherWrapper } from './styles'; import Slack from './Slack'; +import { SlackButton, SlackMenuItemContainer, ToggleButton } from './styles'; +import { Logo, Sider, ThemeSwitcherWrapper } from './styles'; const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { const [collapsed, setCollapsed] = useState(false); diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx index c729ac15f0..435f5c8c3c 100644 --- a/frontend/src/container/Timeline/index.tsx +++ b/frontend/src/container/Timeline/index.tsx @@ -1,15 +1,16 @@ -import React, { useState, useMemo } from 'react'; -import { isEqual } from 'lodash-es'; -import styles from './style.module.css'; -import { useMeasure } from 'react-use'; -import { toFixed } from 'utils/toFixed'; import { INTERVAL_UNITS, resolveTimeFromInterval, } from 'container/TraceDetail/utils'; import useThemeMode from 'hooks/useThemeMode'; +import { isEqual } from 'lodash-es'; +import React, { useMemo, useState } from 'react'; +import { useMeasure } from 'react-use'; +import { toFixed } from 'utils/toFixed'; + +import styles from './style.module.css'; import { Interval } from './types'; -import { getIntervalSpread, getIntervals } from './utils'; +import { getIntervals, getIntervalSpread } from './utils'; interface TimelineProps { traceMetaData: object; globalTraceMetadata: object; diff --git a/frontend/src/container/Timeline/utils.ts b/frontend/src/container/Timeline/utils.ts index e7e6a79a01..f6edc34271 100644 --- a/frontend/src/container/Timeline/utils.ts +++ b/frontend/src/container/Timeline/utils.ts @@ -1,20 +1,22 @@ -import { isEqual } from 'lodash-es'; -import { toFixed } from 'utils/toFixed'; import { INTERVAL_UNITS, resolveTimeFromInterval, } from 'container/TraceDetail/utils'; +import { isEqual } from 'lodash-es'; +import { toFixed } from 'utils/toFixed'; + +import { Interval } from './types'; export const getIntervalSpread = ({ localTraceMetaData, globalTraceMetadata, -}) => { - const { - globalStart: localStart, - globalEnd: localEnd, - spread: localSpread, - } = localTraceMetaData; - const { globalStart, globalEnd, globalSpread } = globalTraceMetadata; +}): { + baseInterval: number; + baseSpread: number; + intervalSpreadNormalized: number; +} => { + const { globalStart: localStart, spread: localSpread } = localTraceMetaData; + const { globalStart } = globalTraceMetadata; let baseInterval = 0; @@ -24,7 +26,7 @@ export const getIntervalSpread = ({ const MIN_INTERVALS = 5; const baseSpread = localSpread; - let intervalSpread = (baseSpread / MIN_INTERVALS) * 1.0; + const intervalSpread = (baseSpread / MIN_INTERVALS) * 1.0; const integerPartString = intervalSpread.toString().split('.')[0]; const integerPartLength = integerPartString.length; const intervalSpreadNormalized = @@ -45,7 +47,7 @@ export const getIntervals = ({ baseSpread, intervalSpreadNormalized, intervalUnit, -}) => { +}): Interval[] => { const intervals: Interval[] = [ { label: `${toFixed(resolveTimeFromInterval(baseInterval, intervalUnit), 2)}${ diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx index 7ee07f2c20..a5d01a2822 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx @@ -1,19 +1,19 @@ -import React, { useState } from 'react'; -import { CheckBoxContainer } from './styles'; import { Checkbox, notification, Typography } from 'antd'; -import { connect, useDispatch, useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; - -import { SelectedTraceFilter } from 'store/actions/trace/selectTraceFilter'; -import AppActions from 'types/actions'; -import { ThunkDispatch } from 'redux-thunk'; -import { bindActionCreators, Dispatch } from 'redux'; -import { getFilter, updateURL } from 'store/actions/trace/util'; import getFilters from 'api/trace/getFilters'; import { AxiosError } from 'axios'; -import { GlobalReducer } from 'types/reducer/globalTime'; +import React, { useState } from 'react'; +import { connect, useDispatch, useSelector } from 'react-redux'; +import { bindActionCreators, Dispatch } from 'redux'; +import { ThunkDispatch } from 'redux-thunk'; +import { SelectedTraceFilter } from 'store/actions/trace/selectTraceFilter'; +import { getFilter, updateURL } from 'store/actions/trace/util'; +import { AppState } from 'store/reducers'; +import AppActions from 'types/actions'; import { UPDATE_ALL_FILTERS } from 'types/actions/trace'; +import { GlobalReducer } from 'types/reducer/globalTime'; +import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + +import { CheckBoxContainer } from './styles'; const CheckBoxComponent = (props: CheckBoxProps): JSX.Element => { const { diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx index a19e7c4ecd..2502e21e07 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + import CheckBoxComponent from '../Common/Checkbox'; const CommonCheckBox = (props: CommonCheckBoxProps): JSX.Element => { diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx index f6025b8fbd..c6f42c4656 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx @@ -1,20 +1,20 @@ -import React, { useState } from 'react'; - import { Input, Slider } from 'antd'; -import { Container, InputContainer, Text } from './styles'; -import { useDispatch, useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { TraceReducer } from 'types/reducer/trace'; -import useDebouncedFn from 'hooks/useDebouncedFunction'; -import { getFilter, updateURL } from 'store/actions/trace/util'; +import { SliderRangeProps } from 'antd/lib/slider'; +import getFilters from 'api/trace/getFilters'; import dayjs from 'dayjs'; import durationPlugin from 'dayjs/plugin/duration'; +import useDebouncedFn from 'hooks/useDebouncedFunction'; +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; +import { getFilter, updateURL } from 'store/actions/trace/util'; +import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { UPDATE_ALL_FILTERS } from 'types/actions/trace'; -import getFilters from 'api/trace/getFilters'; import { GlobalReducer } from 'types/reducer/globalTime'; -import { SliderRangeProps } from 'antd/lib/slider'; +import { TraceReducer } from 'types/reducer/trace'; + +import { Container, InputContainer, Text } from './styles'; dayjs.extend(durationPlugin); diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts index 150391fce2..d80c0e503d 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Typography } from 'antd'; +import styled from 'styled-components'; export const DurationText = styled.div` display: flex; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx index 98364e14d4..3afcd0fbcd 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; import { Card } from 'antd'; - -import Duration from './Duration'; -import CommonCheckBox from './CommonCheckBox'; +import Spinner from 'components/Spinner'; +import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; -import Spinner from 'components/Spinner'; +import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + +import CommonCheckBox from './CommonCheckBox'; +import Duration from './Duration'; const PanelBody = (props: PanelBodyProps): JSX.Element => { const { type } = props; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx index 785362c25c..6ee390b60c 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx @@ -1,6 +1,9 @@ -import React, { useState } from 'react'; import { DownOutlined, RightOutlined } from '@ant-design/icons'; -import { Card, Typography, Divider, notification } from 'antd'; +import { Card, Divider, notification, Typography } from 'antd'; +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; +import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; import { ButtonComponent, @@ -9,19 +12,16 @@ import { IconContainer, TextCotainer, } from './styles'; -import { useDispatch, useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; const { Text } = Typography; -import { AllPanelHeading } from 'types/reducer/trace'; import getFilters from 'api/trace/getFilters'; -import { GlobalReducer } from 'types/reducer/globalTime'; +import { AxiosError } from 'axios'; +import { Dispatch } from 'redux'; import { getFilter, updateURL } from 'store/actions/trace/util'; import AppActions from 'types/actions'; -import { Dispatch } from 'redux'; import { UPDATE_ALL_FILTERS } from 'types/actions/trace'; -import { AxiosError } from 'axios'; +import { GlobalReducer } from 'types/reducer/globalTime'; +import { AllPanelHeading } from 'types/reducer/trace'; const PanelHeading = (props: PanelHeadingProps): JSX.Element => { const { diff --git a/frontend/src/container/Trace/Graph/config.ts b/frontend/src/container/Trace/Graph/config.ts index 17344b52ef..978ada0062 100644 --- a/frontend/src/container/Trace/Graph/config.ts +++ b/frontend/src/container/Trace/Graph/config.ts @@ -1,10 +1,10 @@ import { ChartData, ChartDataset, ChartDatasetProperties } from 'chart.js'; -import { TraceReducer } from 'types/reducer/trace'; import dayjs from 'dayjs'; import { colors } from 'lib/getRandomColor'; +import { TraceReducer } from 'types/reducer/trace'; function transposeArray(array: number[][], arrayLength: number) { - let newArray: number[][] = []; + const newArray: number[][] = []; for (let i = 0; i < array.length; i++) { newArray.push([]); } diff --git a/frontend/src/container/Trace/Graph/index.tsx b/frontend/src/container/Trace/Graph/index.tsx index efc8a9d137..7ee311cc89 100644 --- a/frontend/src/container/Trace/Graph/index.tsx +++ b/frontend/src/container/Trace/Graph/index.tsx @@ -1,13 +1,13 @@ -import React, { useMemo } from 'react'; - +import { Typography } from 'antd'; import Graph from 'components/Graph'; +import Spinner from 'components/Spinner'; +import React, { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { TraceReducer } from 'types/reducer/trace'; -import Spinner from 'components/Spinner'; -import { Container } from './styles'; -import { Typography } from 'antd'; + import { getChartData, getChartDataforGroupBy } from './config'; +import { Container } from './styles'; const TraceGraph = () => { const { spansGraph, selectedGroupBy } = useSelector( diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx index f82a39a291..d27a374e66 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx +++ b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx @@ -1,6 +1,6 @@ import { AutoComplete, AutoCompleteProps, Input, notification } from 'antd'; import getTagFilters from 'api/trace/getTagFilter'; -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { GlobalReducer } from 'types/reducer/globalTime'; @@ -18,7 +18,7 @@ const TagsKey = (props: TagsKeysProps): JSX.Element => { const [options, setOptions] = useState([]); - const onSearchHandler = async () => { + const onSearchHandler = useCallback(() => { try { setSelectLoading(true); const response = await getTagFilters({ @@ -55,11 +55,16 @@ const TagsKey = (props: TagsKeysProps): JSX.Element => { }); setSelectLoading(false); } - }; + }, [globalTime, traces]); + + const counter = useRef(0); useEffect(() => { - onSearchHandler(); - }, []); + if (counter.current === 0) { + counter.current = 1; + onSearchHandler(); + } + }, [onSearchHandler]); return ( { style={{ width: 300 }} options={options} value={selectedKey} - onChange={(value) => { + onChange={(value): void => { if (options && options.find((option) => option.value === value)) { setSelectedKey(value); diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx index f8072ab895..004e1f96a0 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx +++ b/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx @@ -1,21 +1,21 @@ -import React from 'react'; - +import { CloseOutlined } from '@ant-design/icons'; import { Select } from 'antd'; +import { SelectValue } from 'antd/lib/select'; +import React from 'react'; +import { connect, useSelector } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { ThunkDispatch } from 'redux-thunk'; +import { UpdateSelectedTags } from 'store/actions/trace/updateTagsSelected'; +import { AppState } from 'store/reducers'; +import AppActions from 'types/actions'; +import { TraceReducer } from 'types/reducer/trace'; + import { Container, IconContainer, SelectComponent, ValueSelect, } from './styles'; -import { connect, useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { TraceReducer } from 'types/reducer/trace'; -import { CloseOutlined } from '@ant-design/icons'; -import { SelectValue } from 'antd/lib/select'; -import { ThunkDispatch } from 'redux-thunk'; -import AppActions from 'types/actions'; -import { bindActionCreators } from 'redux'; -import { UpdateSelectedTags } from 'store/actions/trace/updateTagsSelected'; import TagsKey from './TagKey'; const { Option } = Select; @@ -45,11 +45,11 @@ const SingleTags = (props: AllTagsProps): JSX.Element => { Values: selectedValues, } = props.tag; - const onDeleteTagHandler = (index: number) => { + const onDeleteTagHandler = (index: number): void => { props.onCloseHandler(index); }; - const onChangeOperatorHandler = (key: SelectValue) => { + const onChangeOperatorHandler = (key: SelectValue): void => { props.setLocalSelectedTags([ ...traces.selectedTags.slice(0, props.index), { @@ -83,7 +83,7 @@ const SingleTags = (props: AllTagsProps): JSX.Element => { { + onChange={(value): void => { props.setLocalSelectedTags((tags) => [ ...tags.slice(0, props.index), { @@ -99,7 +99,7 @@ const SingleTags = (props: AllTagsProps): JSX.Element => { onDeleteTagHandler(props.index)} + onClick={(): void => onDeleteTagHandler(props.index)} > diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts b/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts index 91da16b124..8da702197d 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts +++ b/frontend/src/container/Trace/Search/AllTags/Tag/styles.ts @@ -1,5 +1,5 @@ +import { Select, Space } from 'antd'; import styled from 'styled-components'; -import { Button, Select, Space } from 'antd'; export const SpaceComponent = styled(Space)` &&& { diff --git a/frontend/src/container/Trace/Search/AllTags/index.tsx b/frontend/src/container/Trace/Search/AllTags/index.tsx index e2a449ff6d..95083efb47 100644 --- a/frontend/src/container/Trace/Search/AllTags/index.tsx +++ b/frontend/src/container/Trace/Search/AllTags/index.tsx @@ -1,27 +1,28 @@ +import { CaretRightFilled } from '@ant-design/icons'; +import { Button, Space, Typography } from 'antd'; import React, { useEffect, useState } from 'react'; -import { Button, Space, Typography } from 'antd'; -import { CaretRightFilled } from '@ant-design/icons'; import { - Container, ButtonContainer, + Container, CurrentTagsContainer, - Wrapper, ErrorContainer, + Wrapper, } from './styles'; import Tags from './Tag'; const { Text } = Typography; import { PlusOutlined } from '@ant-design/icons'; +import { isEqual } from 'lodash-es'; import { connect, useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { TraceReducer } from 'types/reducer/trace'; import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; -import AppActions from 'types/actions'; import { UpdateTagIsError } from 'store/actions/trace/updateIsTagsError'; -import { parseTagsToQuery } from '../util'; -import { isEqual } from 'lodash-es'; import { UpdateTagVisiblity } from 'store/actions/trace/updateTagPanelVisiblity'; +import { AppState } from 'store/reducers'; +import AppActions from 'types/actions'; +import { TraceReducer } from 'types/reducer/trace'; + +import { parseTagsToQuery } from '../util'; const { Paragraph } = Typography; @@ -37,7 +38,7 @@ const AllTags = ({ TraceReducer['selectedTags'] >(traces.selectedTags); - const onTagAddHandler = () => { + const onTagAddHandler = (): void => { setLocalSelectedTags((tags) => [ ...tags, { @@ -52,16 +53,16 @@ const AllTags = ({ if (!isEqual(traces.selectedTags, localSelectedTags)) { setLocalSelectedTags(traces.selectedTags); } - }, [traces.selectedTags]); + }, [traces.selectedTags, localSelectedTags]); - const onCloseHandler = (index: number) => { + const onCloseHandler = (index: number): void => { setLocalSelectedTags([ ...localSelectedTags.slice(0, index), ...localSelectedTags.slice(index + 1, localSelectedTags.length), ]); }; - const onRunQueryHandler = () => { + const onRunQueryHandler = (): void => { const parsedQuery = parseTagsToQuery(localSelectedTags); if (parsedQuery.isError) { @@ -74,7 +75,7 @@ const AllTags = ({ } }; - const onResetHandler = () => { + const onResetHandler = (): void => { setLocalSelectedTags([]); }; @@ -102,10 +103,10 @@ const AllTags = ({ {localSelectedTags.map((tags, index) => ( onCloseHandler(index)} + onCloseHandler={(): void => onCloseHandler(index)} setLocalSelectedTags={setLocalSelectedTags} /> ))} diff --git a/frontend/src/container/Trace/Search/AllTags/styles.ts b/frontend/src/container/Trace/Search/AllTags/styles.ts index ef875287a1..c43b32c5ea 100644 --- a/frontend/src/container/Trace/Search/AllTags/styles.ts +++ b/frontend/src/container/Trace/Search/AllTags/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Card } from 'antd'; +import styled from 'styled-components'; export const Container = styled(Card)` top: 120%; diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx index 1b6e59eba6..df919e3134 100644 --- a/frontend/src/container/Trace/Search/index.tsx +++ b/frontend/src/container/Trace/Search/index.tsx @@ -1,20 +1,21 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Space } from 'antd'; -import { Container, SearchComponent } from './styles'; -import useClickOutside from 'hooks/useClickOutside'; -import Tags from './AllTags'; -import { connect, useDispatch, useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { TraceReducer } from 'types/reducer/trace'; -import { ThunkDispatch } from 'redux-thunk'; -import AppActions from 'types/actions'; -import { bindActionCreators, Dispatch } from 'redux'; -import { UpdateTagVisiblity } from 'store/actions/trace/updateTagPanelVisiblity'; -import { parseQueryToTags, parseTagsToQuery } from './util'; -import { UpdateTagIsError } from 'store/actions/trace/updateIsTagsError'; import { CaretRightFilled } from '@ant-design/icons'; +import { Space } from 'antd'; +import useClickOutside from 'hooks/useClickOutside'; +import React, { useEffect, useRef, useState } from 'react'; +import { connect, useDispatch, useSelector } from 'react-redux'; +import { bindActionCreators, Dispatch } from 'redux'; +import { ThunkDispatch } from 'redux-thunk'; +import { UpdateTagIsError } from 'store/actions/trace/updateIsTagsError'; +import { UpdateTagVisiblity } from 'store/actions/trace/updateTagPanelVisiblity'; import { updateURL } from 'store/actions/trace/util'; +import { AppState } from 'store/reducers'; +import AppActions from 'types/actions'; import { UPDATE_ALL_FILTERS } from 'types/actions/trace'; +import { TraceReducer } from 'types/reducer/trace'; + +import Tags from './AllTags'; +import { Container, SearchComponent } from './styles'; +import { parseQueryToTags, parseTagsToQuery } from './util'; const Search = ({ updateTagVisiblity, @@ -38,7 +39,7 @@ const Search = ({ if (value.length === 0 && traces.isTagModalError) { updateTagIsError(false); } - }, [traces.isTagModalError, value]); + }, [traces.isTagModalError, value, updateTagIsError]); const tagRef = useRef(null); @@ -69,11 +70,11 @@ const Search = ({ } }); - const onChangeHandler = (search: string) => { + const onChangeHandler = (search: string): void => { setValue(search); }; - const setIsTagsModalHandler = (value: boolean) => { + const setIsTagsModalHandler = (value: boolean): void => { updateTagVisiblity(value); }; @@ -82,7 +83,9 @@ const Search = ({ setIsTagsModalHandler(true); }; - const updateFilters = async (selectedTags: TraceReducer['selectedTags']) => { + const updateFilters = async ( + selectedTags: TraceReducer['selectedTags'], + ): Promise => { dispatch({ type: UPDATE_ALL_FILTERS, payload: { @@ -111,7 +114,7 @@ const Search = ({ onChangeHandler(event.target.value)} + onChange={(event): void => onChangeHandler(event.target.value)} value={value} allowClear disabled={traces.filterLoading} @@ -119,7 +122,7 @@ const Search = ({ placeholder="Click to filter by tags" type={'search'} enterButton={} - onSearch={(string) => { + onSearch={(string): void => { if (string.length === 0) { updateTagVisiblity(false); updateFilters([]); diff --git a/frontend/src/container/Trace/Search/styles.ts b/frontend/src/container/Trace/Search/styles.ts index f6f342aca9..9cbec7a213 100644 --- a/frontend/src/container/Trace/Search/styles.ts +++ b/frontend/src/container/Trace/Search/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Input } from 'antd'; +import styled from 'styled-components'; const { Search } = Input; diff --git a/frontend/src/container/Trace/TraceGraphFilter/index.tsx b/frontend/src/container/Trace/TraceGraphFilter/index.tsx index e6aad7374a..1b9ca5f801 100644 --- a/frontend/src/container/Trace/TraceGraphFilter/index.tsx +++ b/frontend/src/container/Trace/TraceGraphFilter/index.tsx @@ -1,21 +1,22 @@ +import { SelectProps, Space } from 'antd'; +import { SelectValue } from 'antd/lib/select'; import React from 'react'; -import { Space, SelectProps } from 'antd'; -import { functions, groupBy } from './config'; import { useDispatch, useSelector } from 'react-redux'; +import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; -import { TraceReducer } from 'types/reducer/trace'; import AppActions from 'types/actions'; import { UPDATE_SELECTED_FUNCTION, UPDATE_SELECTED_GROUP_BY, } from 'types/actions/trace'; -import { Dispatch } from 'redux'; +import { TraceReducer } from 'types/reducer/trace'; + +import { functions, groupBy } from './config'; import { SelectComponent } from './styles'; -import { SelectValue } from 'antd/lib/select'; const { Option } = SelectComponent; -const TraceGraphFilter = () => { +const TraceGraphFilter = (): JSX.Element => { const { selectedFunction, selectedGroupBy } = useSelector< AppState, TraceReducer @@ -74,11 +75,13 @@ const TraceGraphFilter = () => { value={groupBy.find((e) => selectedGroupBy === e.key)?.displayValue} onChange={onClickSelectedGroupByHandler} > - {groupBy.map((value) => ( - - ))} + {groupBy.map( + (value): JSX.Element => ( + + ), + )} ); diff --git a/frontend/src/container/Trace/TraceGraphFilter/styles.ts b/frontend/src/container/Trace/TraceGraphFilter/styles.ts index be712d4cba..2acd767d8c 100644 --- a/frontend/src/container/Trace/TraceGraphFilter/styles.ts +++ b/frontend/src/container/Trace/TraceGraphFilter/styles.ts @@ -1,5 +1,4 @@ import { Select } from 'antd'; - import styled from 'styled-components'; export const SelectComponent = styled(Select)` diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx index ebe2ea2559..8de84e5bdc 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx @@ -1,13 +1,13 @@ -import { Button, Modal, Collapse } from 'antd'; +import { Button, Collapse, Modal } from 'antd'; import useThemeMode from 'hooks/useThemeMode'; -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; import { ITraceTree } from 'types/api/trace/getTraceItem'; + import { CustomSubText, CustomSubTitle } from './styles'; -// import Editor from 'components/Editor'; const { Panel } = Collapse; -const ErrorTag = ({ event }: ErrorTagProps) => { +const ErrorTag = ({ event }: ErrorTagProps): JSX.Element => { const [isOpen, setIsOpen] = useState(false); const { isDarkMode } = useThemeMode(); // const useTextRef = useRef(''); @@ -17,7 +17,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => { subText: '', }); - const onToggleHandler = (state: boolean) => { + const onToggleHandler = (state: boolean): void => { setIsOpen(state); }; @@ -30,6 +30,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => { { {isEllipsed && ( )} - - ); })} @@ -72,7 +71,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => { ); })} onToggleHandler(false)} + onCancel={(): void => onToggleHandler(false)} title="Log Message" visible={isOpen} destroyOnClose diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx index 35ed013d9c..21ccde3de9 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx @@ -1,6 +1,9 @@ import { Space, Tabs, Typography } from 'antd'; +import useThemeMode from 'hooks/useThemeMode'; import React from 'react'; import { ITraceTree } from 'types/api/trace/getTraceItem'; + +import ErrorTag from './ErrorTag'; import { CardContainer, CustomSubText, @@ -8,8 +11,6 @@ import { CustomText, CustomTitle, } from './styles'; -import ErrorTag from './ErrorTag'; -import useThemeMode from 'hooks/useThemeMode'; const { TabPane } = Tabs; @@ -40,7 +41,7 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => { {tags.length !== 0 ? ( tags.map((tags) => { return ( - + {tags.value && ( <> {tags.key} diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx index 99d693fc85..7c9d5ab8de 100644 --- a/frontend/src/container/TraceDetail/index.tsx +++ b/frontend/src/container/TraceDetail/index.tsx @@ -1,21 +1,22 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { Col, Divider, Row, Typography, Space, Button } from 'antd'; import { FilterOutlined } from '@ant-design/icons'; +import { Button, Col, Divider, Row, Space, Typography } from 'antd'; import GanttChart from 'container/GantChart'; import { getNodeById } from 'container/GantChart/utils'; import Timeline from 'container/Timeline'; import TraceFlameGraph from 'container/TraceFlameGraph'; import dayjs from 'dayjs'; +import useUrlQuery from 'hooks/useUrlQuery'; import { spanServiceNameToColorMapping } from 'lib/getRandomColor'; -import { getSortedData } from './utils'; +import history from 'lib/history'; +import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; +import React, { useEffect, useMemo, useState } from 'react'; import { ITraceTree, PayloadProps } from 'types/api/trace/getTraceItem'; import { getSpanTreeMetadata } from 'utils/getSpanTreeMetadata'; import { spanToTreeUtil } from 'utils/spanToTree'; + import SelectedSpanDetails from './SelectedSpanDetails'; -import useUrlQuery from 'hooks/useUrlQuery'; import styles from './TraceGraph.module.css'; -import history from 'lib/history'; -import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; +import { getSortedData } from './utils'; import { INTERVAL_UNITS } from './utils'; const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { @@ -25,10 +26,10 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { ); const urlQuery = useUrlQuery(); - const [spanId, _setSpanId] = useState(urlQuery.get('spanId')); + const [spanId] = useState(urlQuery.get('spanId')); const [intervalUnit, setIntervalUnit] = useState(INTERVAL_UNITS[0]); - const [searchSpanString, setSearchSpanString] = useState(''); + // const [searchSpanString, setSearchSpanString] = useState(''); const [activeHoverId, setActiveHoverId] = useState(''); const [activeSelectedId, setActiveSelectedId] = useState(spanId || ''); @@ -38,9 +39,9 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { const { treeData: tree, ...traceMetaData } = useMemo(() => { return getSpanTreeMetadata(getSortedData(treeData), spanServiceColors); - }, [treeData]); + }, [treeData, spanServiceColors]); - const [globalTraceMetadata, _setGlobalTraceMetadata] = useState({ + const [globalTraceMetadata] = useState>({ ...traceMetaData, }); @@ -57,10 +58,10 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { return getNodeById(activeSelectedId, treeData); }, [activeSelectedId, treeData]); - const onSearchHandler = (value: string) => { - setSearchSpanString(value); - setTreeData(spanToTreeUtil(response[0].events)); - }; + // const onSearchHandler = (value: string) => { + // setSearchSpanString(value); + // setTreeData(spanToTreeUtil(response[0].events)); + // }; const onFocusSelectedSpanHandler = () => { const treeNode = getNodeById(activeSelectedId, tree); if (treeNode) { @@ -68,7 +69,7 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { } }; - const onResetHandler = () => { + const onResetHandler = (): void => { setTreeData(spanToTreeUtil(response[0].events)); }; diff --git a/frontend/src/container/TraceDetail/utils.ts b/frontend/src/container/TraceDetail/utils.ts index c92e6b37bb..dcad26dd6e 100644 --- a/frontend/src/container/TraceDetail/utils.ts +++ b/frontend/src/container/TraceDetail/utils.ts @@ -1,8 +1,8 @@ /** * string is present on the span or not */ -import { ITraceTree, Span } from 'types/api/trace/getTraceItem'; import { sortBy } from 'lodash-es'; +import { ITraceTree, Span } from 'types/api/trace/getTraceItem'; export const filterSpansByString = ( searchString: string, @@ -35,12 +35,12 @@ export const INTERVAL_UNITS: IIntervalUnit[] = [ export const resolveTimeFromInterval = ( intervalTime: number, intervalUnit: IIntervalUnit, -) => { +): number => { return intervalTime * intervalUnit.multiplier; }; -export const getSortedData = (treeData: ITraceTree) => { - const traverse = (treeNode: ITraceTree, level: number = 0) => { +export const getSortedData = (treeData: ITraceTree): undefined | ITraceTree => { + const traverse = (treeNode: ITraceTree, level = 0): void => { if (!treeNode) { return; } diff --git a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx index 74c17c3139..7a8e1381d0 100644 --- a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx +++ b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx @@ -1,7 +1,7 @@ import { expect } from '@jest/globals'; -import React from 'react'; import { render } from '@testing-library/react'; import TraceFlameGraph from 'container/TraceFlameGraph'; +import React from 'react'; test('loads and displays greeting', async () => { const { asFragment } = render(); diff --git a/frontend/src/container/TraceFlameGraph/index.tsx b/frontend/src/container/TraceFlameGraph/index.tsx index 511becaf39..eec06e000e 100644 --- a/frontend/src/container/TraceFlameGraph/index.tsx +++ b/frontend/src/container/TraceFlameGraph/index.tsx @@ -1,17 +1,31 @@ -import React, { useState, useLayoutEffect, useMemo } from 'react'; import Color from 'color'; -import { pushDStree } from 'store/actions'; -import { - SpanItemContainer, - TraceFlameGraphContainer, - TOTAL_SPAN_HEIGHT, -} from './styles'; +import { ITraceMetaData } from 'container/GantChart'; import { IIntervalUnit, resolveTimeFromInterval, } from 'container/TraceDetail/utils'; -import { toFixed } from 'utils/toFixed'; import useThemeMode from 'hooks/useThemeMode'; +import React, { useLayoutEffect, useMemo, useState } from 'react'; +import { ITraceTree } from 'types/api/trace/getTraceItem'; +import { toFixed } from 'utils/toFixed'; + +import { + SpanItemContainer, + TOTAL_SPAN_HEIGHT, + TraceFlameGraphContainer, +} from './styles'; + +interface SpanItem { + topOffset: number; + leftOffset: number; + width: number; + spanData: ITraceTree; + tooltipText: string; + onSpanSelect: (id: string) => void; + onSpanHover: React.Dispatch>; + hoveredSpanId: string; + selectedSpanId: string; +} const SpanItem = ({ topOffset = 0, // top offset in px @@ -23,20 +37,10 @@ const SpanItem = ({ onSpanHover, hoveredSpanId, selectedSpanId, -}: { - topOffset: number; - leftOffset: number; - width: number; - spanData: pushDStree; - tooltipText: string; - onSpanSelect: Function; - onSpanHover: Function; - hoveredSpanId: string; - selectedSpanId: string; -}) => { +}: SpanItem): JSX.Element => { const { serviceColour } = spanData; const [isSelected, setIsSelected] = useState(false); - const [isLocalHover, setIsLocalHover] = useState(false); + // const [isLocalHover, setIsLocalHover] = useState(false); const { isDarkMode } = useThemeMode(); useLayoutEffect(() => { @@ -46,16 +50,16 @@ const SpanItem = ({ ) { setIsSelected(true); } - }, [hoveredSpanId, selectedSpanId]); + }, [hoveredSpanId, selectedSpanId, isSelected, spanData]); - const handleHover = (hoverState: boolean) => { - setIsLocalHover(hoverState); + const handleHover = (hoverState: boolean): void => { + // setIsLocalHover(hoverState); if (hoverState) onSpanHover(spanData.id); - else onSpanHover(null); + else onSpanHover(''); }; - const handleClick = () => { + const handleClick = (): void => { onSpanSelect(spanData.id); }; @@ -64,17 +68,17 @@ const SpanItem = ({ ? Color(serviceColour).lighten(0.3) : Color(serviceColour).darken(0.3); return `${isSelected ? selectedSpanColor : serviceColour}`; - }, [isSelected, serviceColour]); + }, [isSelected, serviceColour, isDarkMode]); return ( <> { + onMouseEnter={(): void => { handleHover(true); }} - onMouseLeave={() => { + onMouseLeave={(): void => { handleHover(false); }} topOffset={topOffset} @@ -89,26 +93,20 @@ const SpanItem = ({ }; const TraceFlameGraph = (props: { - treeData: pushDStree; - traceMetaData: any; - onSpanHover: Function; - onSpanSelect: Function; + treeData: ITraceTree; + traceMetaData: ITraceMetaData; + onSpanHover: SpanItem['onSpanHover']; + onSpanSelect: SpanItem['onSpanSelect']; hoveredSpanId: string; selectedSpanId: string; intervalUnit: IIntervalUnit; -}) => { +}): JSX.Element => { if (!props.treeData || props.treeData.id === 'empty' || !props.traceMetaData) { - return null; + return <>; } const { intervalUnit } = props; - const { - globalStart, - globalEnd, - spread, - totalSpans, - levels, - } = props.traceMetaData; + const { globalStart, spread, levels } = props.traceMetaData; const RenderSpanRecursive = ({ level = 0, spanData, @@ -118,16 +116,16 @@ const TraceFlameGraph = (props: { hoveredSpanId, selectedSpanId, }: { - spanData: pushDStree; + spanData: ITraceTree; level?: number; parentLeftOffset?: number; - onSpanHover: Function; - onSpanSelect: Function; + onSpanHover: SpanItem['onSpanHover']; + onSpanSelect: SpanItem['onSpanSelect']; hoveredSpanId: string; selectedSpanId: string; - }) => { + }): JSX.Element => { if (!spanData) { - return null; + return <>; } const leftOffset = ((spanData.startTime - globalStart) * 100) / spread; diff --git a/frontend/src/container/TraceFlameGraph/styles.ts b/frontend/src/container/TraceFlameGraph/styles.ts index ad262421cd..3c3ee3b807 100644 --- a/frontend/src/container/TraceFlameGraph/styles.ts +++ b/frontend/src/container/TraceFlameGraph/styles.ts @@ -16,14 +16,14 @@ export const SpanItemContainer = styled.div<{ zIdx: number; }>` position: absolute; - top: ${(props) => props.topOffset}px; - left: ${(props) => props.leftOffset}%; - width: ${(props) => props.width}%; + top: ${(props): string | number => props.topOffset}px; + left: ${(props): string | number => props.leftOffset}%; + width: ${(props): string | number => props.width}%; height: ${SPAN_HEIGHT}px; margin: ${SPAN_V_PADDING}px 0; - background-color: ${({ spanColor }) => spanColor}; + background-color: ${({ spanColor }): string | number => spanColor}; border-radius: ${SPAN_HEIGHT / 2}px; - z-index: ${(props) => props.zIdx}; + z-index: ${(props): string | number => props.zIdx}; `; /** @@ -34,5 +34,5 @@ export const TraceFlameGraphContainer = styled.div<{ }>` position: relative; width: 100%; - height: ${({ height }) => (height ? height : 120)}px; + height: ${({ height }): string | number => (height ? height : 120)}px; `; diff --git a/frontend/src/hooks/useClickOutside.ts b/frontend/src/hooks/useClickOutside.ts index d3d7ce83c7..48294c45eb 100644 --- a/frontend/src/hooks/useClickOutside.ts +++ b/frontend/src/hooks/useClickOutside.ts @@ -1,26 +1,27 @@ -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; const useClickOutside = ( ref: React.RefObject, callback: (e: HTMLElement) => void | null, -) => { - const listener = (e: Event) => { - const node = e?.target as HTMLElement; +): void => { + const listener = useCallback( + (e: Event) => { + const node = e?.target as HTMLElement; - if (ref.current && !ref.current.contains(node)) { - if (callback) { + if (ref.current && !ref.current.contains(node) && callback) { callback(node); } - } - }; + }, + [callback, ref], + ); useEffect(() => { document.addEventListener('click', listener); - return () => { + return (): void => { document.removeEventListener('click', listener); }; - }, [ref, callback]); + }, [ref, callback, listener]); }; export default useClickOutside; diff --git a/frontend/src/hooks/useDebouncedFunction.ts b/frontend/src/hooks/useDebouncedFunction.ts index e63b8c6021..64ff442791 100644 --- a/frontend/src/hooks/useDebouncedFunction.ts +++ b/frontend/src/hooks/useDebouncedFunction.ts @@ -1,7 +1,7 @@ -import { useMemo, useRef } from 'react'; import debounce from 'lodash-es/debounce'; +import { useMemo, useRef } from 'react'; -export interface DebouncedFunc any> { +export interface DebouncedFunc unknown> { (...args: Parameters): ReturnType | undefined; cancel(): void; @@ -20,18 +20,17 @@ const defaultOptions: DebounceOptions = { trailing: true, }; -const useDebouncedFn = any>( +const useDebouncedFn = ) => unknown>( fn: T, - wait: number = 100, + wait = 100, options: DebounceOptions = defaultOptions, - dependencies?: ReadonlyArray, ): DebouncedFunc => { const fnRef = useRef(fn); fnRef.current = fn; return useMemo( () => debounce(((...args) => fnRef.current(...args)) as T, wait, options), - [...(dependencies || [])], + [options, wait], ); }; diff --git a/frontend/src/hooks/useThemeMode.ts b/frontend/src/hooks/useThemeMode.ts index 496ea82904..ec98139f68 100644 --- a/frontend/src/hooks/useThemeMode.ts +++ b/frontend/src/hooks/useThemeMode.ts @@ -6,7 +6,7 @@ export interface IUseThemeModeReturn { isDarkMode: boolean; } -const useThemeMode = () => { +const useThemeMode = (): IUseThemeModeReturn => { const { isDarkMode } = useSelector((state) => state.app); return { isDarkMode }; diff --git a/frontend/src/hooks/useUrlQuery.ts b/frontend/src/hooks/useUrlQuery.ts index 6f20744a2d..11cb555485 100644 --- a/frontend/src/hooks/useUrlQuery.ts +++ b/frontend/src/hooks/useUrlQuery.ts @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { useLocation } from 'react-router-dom'; -function useUrlQuery() { +function useUrlQuery(): URLSearchParams { const { search } = useLocation(); return useMemo(() => new URLSearchParams(search), [search]); diff --git a/frontend/src/lib/getRandomColor.ts b/frontend/src/lib/getRandomColor.ts index 5eaaa2a724..64618cb314 100644 --- a/frontend/src/lib/getRandomColor.ts +++ b/frontend/src/lib/getRandomColor.ts @@ -1,4 +1,4 @@ -import { span } from 'store/actions'; +import { Span } from 'types/api/trace/getTraceItem'; export const colors = [ '#2F80ED', @@ -21,7 +21,9 @@ const getRandomColor = (): string => { return colors[index]; }; -export const spanServiceNameToColorMapping = (spans: span[]) => { +export const spanServiceNameToColorMapping = ( + spans: Span[], +): { [key: string]: string } => { const serviceNameSet = new Set(); spans.forEach((spanItem) => { serviceNameSet.add(spanItem[3]); diff --git a/frontend/src/lib/getStartAndEndTime/getMinAgo.ts b/frontend/src/lib/getStartAndEndTime/getMinAgo.ts index a302d7649e..dcae1c0cf7 100644 --- a/frontend/src/lib/getStartAndEndTime/getMinAgo.ts +++ b/frontend/src/lib/getStartAndEndTime/getMinAgo.ts @@ -1,9 +1,7 @@ const getMinAgo = ({ minutes }: getMinAgoProps): Date => { const currentDate = new Date(); - const agoDate = new Date(currentDate.getTime() - minutes * 60000); - - return agoDate; + return new Date(currentDate.getTime() - minutes * 60000); }; interface getMinAgoProps { diff --git a/frontend/src/lib/getStep.ts b/frontend/src/lib/getStep.ts index 2458782d27..c0ba74950b 100644 --- a/frontend/src/lib/getStep.ts +++ b/frontend/src/lib/getStep.ts @@ -12,7 +12,10 @@ interface GetStepInput { /** * Converts given timestamp to ms. */ -const convertToMs = (timestamp: number, inputFormat: DateInputFormatType) => { +const convertToMs = ( + timestamp: number, + inputFormat: DateInputFormatType, +): number => { switch (inputFormat) { case 's': return timestamp * 1e3; diff --git a/frontend/src/lib/query/convertObjectIntoParams.ts b/frontend/src/lib/query/convertObjectIntoParams.ts index fa6dc3f6f5..15bbed2c9c 100644 --- a/frontend/src/lib/query/convertObjectIntoParams.ts +++ b/frontend/src/lib/query/convertObjectIntoParams.ts @@ -1,7 +1,7 @@ const convertObjectIntoParams = ( - props: Record, + props: Record, stringify = false, -) => { +): string => { return Object.keys(props) .map( (e) => diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx index 226f2ca2c2..77a97adcf8 100644 --- a/frontend/src/pages/AlertChannelCreate/index.tsx +++ b/frontend/src/pages/AlertChannelCreate/index.tsx @@ -18,7 +18,7 @@ const SettingsPage = (): JSX.Element => { route: ROUTES.SETTINGS, }, { - Component: () => { + Component: (): JSX.Element => { return ; }, name: 'Alert Channels', diff --git a/frontend/src/pages/AllAlertChannels/index.tsx b/frontend/src/pages/AllAlertChannels/index.tsx index e557f4e861..a15d070d51 100644 --- a/frontend/src/pages/AllAlertChannels/index.tsx +++ b/frontend/src/pages/AllAlertChannels/index.tsx @@ -1,9 +1,9 @@ -import AlertChannels from 'container/AllAlertChannels'; -import GeneralSettings from 'container/GeneralSettings'; -import React from 'react'; import RouteTab from 'components/RouteTab'; import ROUTES from 'constants/routes'; +import AlertChannels from 'container/AllAlertChannels'; +import GeneralSettings from 'container/GeneralSettings'; import history from 'lib/history'; +import React from 'react'; const AllAlertChannels = (): JSX.Element => { const pathName = history.location.pathname; diff --git a/frontend/src/pages/CreateAlert/index.tsx b/frontend/src/pages/CreateAlert/index.tsx index 4d773df9bf..667a2cdfdf 100644 --- a/frontend/src/pages/CreateAlert/index.tsx +++ b/frontend/src/pages/CreateAlert/index.tsx @@ -26,6 +26,9 @@ const CreateAlert = (): JSX.Element => { }); const [notifications, Element] = notification.useNotification(); + const defaultError = + 'Oops! Some issue occured in saving the alert please try again or contact support@signoz.io'; + const onSaveHandler = useCallback(async () => { try { setNewAlertState((state) => ({ @@ -65,24 +68,19 @@ const CreateAlert = (): JSX.Element => { }, 3000); } else { notifications.error({ - description: - response.error || - 'Oops! Some issue occured in saving the alert please try again or contact support@signoz.io', + description: response.error || defaultError, message: 'Error', }); setNewAlertState((state) => ({ ...state, loading: false, error: true, - errorMessage: - response.error || - 'Oops! Some issue occured in saving the alert please try again or contact support@signoz.io', + errorMessage: response.error || defaultError, })); } } catch (error) { notifications.error({ - message: - 'Oops! Some issue occured in saving the alert please try again or contact support@signoz.io', + message: defaultError, }); } }, [notifications]); diff --git a/frontend/src/pages/Metrics/index.tsx b/frontend/src/pages/Metrics/index.tsx index dce97b84cf..6e393d999d 100644 --- a/frontend/src/pages/Metrics/index.tsx +++ b/frontend/src/pages/Metrics/index.tsx @@ -1,3 +1,4 @@ +import getLocalStorageKey from 'api/browser/localstorage/get'; import Spinner from 'components/Spinner'; import { SKIP_ONBOARDING } from 'constants/onboarding'; import MetricTable from 'container/MetricsTable'; @@ -10,7 +11,6 @@ import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { GlobalReducer } from 'types/reducer/globalTime'; import MetricReducer from 'types/reducer/metrics'; -import getLocalStorageKey from 'api/browser/localstorage/get'; const Metrics = ({ getService }: MetricsProps): JSX.Element => { const { minTime, maxTime, loading, selectedTime } = useSelector< diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx index c5310107f3..d229f5061b 100644 --- a/frontend/src/pages/Settings/index.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -1,9 +1,9 @@ -import AlertChannels from 'container/AllAlertChannels'; -import GeneralSettings from 'container/GeneralSettings'; -import React from 'react'; import RouteTab from 'components/RouteTab'; import ROUTES from 'constants/routes'; +import AlertChannels from 'container/AllAlertChannels'; +import GeneralSettings from 'container/GeneralSettings'; import history from 'lib/history'; +import React from 'react'; const SettingsPage = (): JSX.Element => { const pathName = history.location.pathname; diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx index c7f540836a..f5e874ca0f 100644 --- a/frontend/src/pages/SignUp/SignUp.tsx +++ b/frontend/src/pages/SignUp/SignUp.tsx @@ -1,20 +1,23 @@ import { Button, + Card, Input, notification, - Typography, - Switch, Space, - Card, + Switch, + Typography, } from 'antd'; +import setLocalStorageKey from 'api/browser/localstorage/set'; import signup from 'api/user/signup'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import React, { useEffect, useState } from 'react'; -import setLocalStorageKey from 'api/browser/localstorage/set'; - import AppActions from 'types/actions'; const { Title } = Typography; +import setPreference from 'api/user/setPreference'; +import { IS_LOGGED_IN } from 'constants/auth'; +import { useDispatch } from 'react-redux'; +import { Dispatch } from 'redux'; import { PayloadProps } from 'types/api/user/getUserPreference'; import { @@ -26,10 +29,6 @@ import { Logo, MarginTop, } from './styles'; -import { IS_LOGGED_IN } from 'constants/auth'; -import { useDispatch } from 'react-redux'; -import { Dispatch } from 'redux'; -import setPreference from 'api/user/setPreference'; const Signup = ({ version, userpref }: SignupProps): JSX.Element => { const [loading, setLoading] = useState(false); @@ -52,7 +51,7 @@ const Signup = ({ version, userpref }: SignupProps): JSX.Element => { const setState = ( value: string, setFunction: React.Dispatch>, - ) => { + ): void => { setFunction(value); }; @@ -109,7 +108,7 @@ const Signup = ({ version, userpref }: SignupProps): JSX.Element => { const onSwitchHandler = ( value: boolean, setFunction: React.Dispatch>, - ) => { + ): void => { setFunction(value); }; diff --git a/frontend/src/pages/SignUp/index.tsx b/frontend/src/pages/SignUp/index.tsx index 88131c7143..f2445b92ae 100644 --- a/frontend/src/pages/SignUp/index.tsx +++ b/frontend/src/pages/SignUp/index.tsx @@ -1,15 +1,15 @@ -import useFetch from 'hooks/useFetch'; -import React from 'react'; -import SignUpComponent from './SignUp'; -import getVersion from 'api/user/getVersion'; -import { PayloadProps as VersionPayload } from 'types/api/user/getVersion'; -import { PayloadProps as UserPrefPayload } from 'types/api/user/getUserPreference'; - -import Spinner from 'components/Spinner'; import { Typography } from 'antd'; import getPreference from 'api/user/getPreference'; +import getVersion from 'api/user/getVersion'; +import Spinner from 'components/Spinner'; +import useFetch from 'hooks/useFetch'; +import React from 'react'; +import { PayloadProps as UserPrefPayload } from 'types/api/user/getUserPreference'; +import { PayloadProps as VersionPayload } from 'types/api/user/getVersion'; -const SignUp = () => { +import SignUpComponent from './SignUp'; + +const SignUp = (): JSX.Element => { const versionResponse = useFetch(getVersion); const userPrefResponse = useFetch(getPreference); diff --git a/frontend/src/pages/SignUp/styles.ts b/frontend/src/pages/SignUp/styles.ts index ca9e899165..3bdfc77389 100644 --- a/frontend/src/pages/SignUp/styles.ts +++ b/frontend/src/pages/SignUp/styles.ts @@ -45,7 +45,7 @@ interface Props { } export const MarginTop = styled.div` - margin-top: ${({ marginTop }) => marginTop}; + margin-top: ${({ marginTop = 0 }): number | string => marginTop}; `; export const Logo = styled.img` diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx index 5fd2894365..08e3d038c3 100644 --- a/frontend/src/pages/Trace/index.tsx +++ b/frontend/src/pages/Trace/index.tsx @@ -23,10 +23,10 @@ import { GlobalReducer } from 'types/reducer/globalTime'; import { TraceReducer } from 'types/reducer/trace'; import { + ClearAllFilter, Container, LeftContainer, RightContainer, - ClearAllFilter, } from './styles'; const Trace = ({ diff --git a/frontend/src/pages/Trace/styles.ts b/frontend/src/pages/Trace/styles.ts index d7cf4c0869..d6b3cfcbcd 100644 --- a/frontend/src/pages/Trace/styles.ts +++ b/frontend/src/pages/Trace/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import { Button, Card } from 'antd'; +import styled from 'styled-components'; export const Container = styled.div` display: flex; diff --git a/frontend/src/pages/TraceDetail/index.tsx b/frontend/src/pages/TraceDetail/index.tsx index bf29a5244b..8c3f515877 100644 --- a/frontend/src/pages/TraceDetail/index.tsx +++ b/frontend/src/pages/TraceDetail/index.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import useFetch from 'hooks/useFetch'; +import { Typography } from 'antd'; import getTraceItem from 'api/trace/getTraceItem'; +import Spinner from 'components/Spinner'; +import TraceDetailContainer from 'container/TraceDetail'; +import useFetch from 'hooks/useFetch'; +import React from 'react'; import { useParams } from 'react-router-dom'; import { Props as TraceDetailProps } from 'types/api/trace/getTraceItem'; -import Spinner from 'components/Spinner'; -import { Typography } from 'antd'; -import TraceDetailContainer from 'container/TraceDetail'; const TraceDetail = (): JSX.Element => { const { id } = useParams(); diff --git a/frontend/src/store/actions/dashboard/getQueryResults.ts b/frontend/src/store/actions/dashboard/getQueryResults.ts index b779a665d2..d189223e1c 100644 --- a/frontend/src/store/actions/dashboard/getQueryResults.ts +++ b/frontend/src/store/actions/dashboard/getQueryResults.ts @@ -6,10 +6,10 @@ import GetMaxMinTime from 'lib/getMaxMinTime'; import GetMinMax from 'lib/getMinMax'; import GetStartAndEndTime from 'lib/getStartAndEndTime'; import { Dispatch } from 'redux'; +import store from 'store'; import AppActions from 'types/actions'; import { Query } from 'types/api/dashboard/getAll'; import { GlobalReducer } from 'types/reducer/globalTime'; -import store from 'store'; export const GetQueryResults = ( props: GetQueryResultsProps, diff --git a/frontend/src/store/actions/metrics/getInitialData.ts b/frontend/src/store/actions/metrics/getInitialData.ts index 942cb0dbed..27672f63a4 100644 --- a/frontend/src/store/actions/metrics/getInitialData.ts +++ b/frontend/src/store/actions/metrics/getInitialData.ts @@ -39,8 +39,6 @@ export const GetInitialData = ( globalTime.maxTime / 1000000, ]); - const step = 60; - const [ // getDBOverViewResponse, // getExternalAverageDurationResponse, diff --git a/frontend/src/store/actions/trace/getInitialFilter.ts b/frontend/src/store/actions/trace/getInitialFilter.ts index 99e3fee6c5..7954b0f1ba 100644 --- a/frontend/src/store/actions/trace/getInitialFilter.ts +++ b/frontend/src/store/actions/trace/getInitialFilter.ts @@ -1,25 +1,26 @@ +import { notification } from 'antd'; +import getFiltersApi from 'api/trace/getFilters'; +import xor from 'lodash-es/xor'; import { Dispatch, Store } from 'redux'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; -import { GlobalReducer } from 'types/reducer/globalTime'; -import getFiltersApi from 'api/trace/getFilters'; -import { - parseSelectedFilter, - parseFilterToFetchData, - parseQueryIntoCurrent, - parseQueryIntoSelectedTags, - isTraceFilterEnum, - parseQueryIntoFilter, - parseIsSkippedSelection, - parseFilterExclude, -} from './util'; import { UPDATE_ALL_FILTERS, UPDATE_TRACE_FILTER_LOADING, } from 'types/actions/trace'; +import { GlobalReducer } from 'types/reducer/globalTime'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; -import { notification } from 'antd'; -import xor from 'lodash-es/xor'; + +import { + isTraceFilterEnum, + parseFilterExclude, + parseFilterToFetchData, + parseIsSkippedSelection, + parseQueryIntoCurrent, + parseQueryIntoFilter, + parseQueryIntoSelectedTags, + parseSelectedFilter, +} from './util'; export const GetInitialTraceFilter = ( minTime: GlobalReducer['minTime'], @@ -89,7 +90,7 @@ export const GetInitialTraceFilter = ( isFilterExclude: getIsFilterExcluded.currentValue, }); - let preSelectedFilter: Map = new Map( + const preSelectedFilter: Map = new Map( getSelectedFilter.currentValue, ); diff --git a/frontend/src/store/actions/trace/getSpans.ts b/frontend/src/store/actions/trace/getSpans.ts index 6cee9a95c8..22e4e11755 100644 --- a/frontend/src/store/actions/trace/getSpans.ts +++ b/frontend/src/store/actions/trace/getSpans.ts @@ -1,3 +1,5 @@ +import { notification } from 'antd'; +import getSpans from 'api/trace/getSpans'; import { Dispatch, Store } from 'redux'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; @@ -6,9 +8,7 @@ import { UPDATE_TRACE_GRAPH_LOADING, UPDATE_TRACE_GRAPH_SUCCESS, } from 'types/actions/trace'; -import getSpans from 'api/trace/getSpans'; import { Props } from 'types/api/trace/getSpans'; -import { notification } from 'antd'; export const GetSpans = ( props: GetSpansProps, diff --git a/frontend/src/store/actions/trace/parseFilter/current.ts b/frontend/src/store/actions/trace/parseFilter/current.ts index e8faae05c1..4bdd0aa7f7 100644 --- a/frontend/src/store/actions/trace/parseFilter/current.ts +++ b/frontend/src/store/actions/trace/parseFilter/current.ts @@ -1,4 +1,5 @@ import { TraceReducer } from 'types/reducer/trace'; + import { ParsedUrl } from '../util'; export const parseQueryIntoCurrent = ( diff --git a/frontend/src/store/actions/trace/parseFilter/filter.ts b/frontend/src/store/actions/trace/parseFilter/filter.ts index 0d91dfc9e6..934d370864 100644 --- a/frontend/src/store/actions/trace/parseFilter/filter.ts +++ b/frontend/src/store/actions/trace/parseFilter/filter.ts @@ -1,4 +1,5 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + import { isTraceFilterEnum, ParsedUrl } from '../util'; export const parseQueryIntoFilter = ( diff --git a/frontend/src/store/actions/trace/parseFilter/filterToFetchData.ts b/frontend/src/store/actions/trace/parseFilter/filterToFetchData.ts index 5016bc7702..baf0f2f99d 100644 --- a/frontend/src/store/actions/trace/parseFilter/filterToFetchData.ts +++ b/frontend/src/store/actions/trace/parseFilter/filterToFetchData.ts @@ -1,4 +1,5 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + import { ParsedUrl } from '../util'; export const parseFilterToFetchData = ( @@ -7,7 +8,7 @@ export const parseFilterToFetchData = ( ): ParsedUrl => { const url = new URLSearchParams(query); - let filterToFetchData: TraceFilterEnum[] = []; + const filterToFetchData: TraceFilterEnum[] = []; const selected = url.get('filterToFetchData'); diff --git a/frontend/src/store/actions/trace/parseFilter/index.ts b/frontend/src/store/actions/trace/parseFilter/index.ts index e9fb1f3b19..fc7a14bc9f 100644 --- a/frontend/src/store/actions/trace/parseFilter/index.ts +++ b/frontend/src/store/actions/trace/parseFilter/index.ts @@ -1,8 +1,8 @@ +export * from './current'; +export * from './filter'; +export * from './filterToFetchData'; +export * from './isFilterExclude'; export * from './minMaxTime'; export * from './selectedFilter'; -export * from './filterToFetchData'; export * from './selectedTags'; -export * from './filter'; export * from './skippedSelected'; -export * from './current'; -export * from './isFilterExclude'; diff --git a/frontend/src/store/actions/trace/parseFilter/isFilterExclude.ts b/frontend/src/store/actions/trace/parseFilter/isFilterExclude.ts index a07bc4b3b0..84a0aa37aa 100644 --- a/frontend/src/store/actions/trace/parseFilter/isFilterExclude.ts +++ b/frontend/src/store/actions/trace/parseFilter/isFilterExclude.ts @@ -1,4 +1,5 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + import { isTraceFilterEnum, ParsedUrl } from '../util'; export const parseFilterExclude = ( diff --git a/frontend/src/store/actions/trace/parseFilter/selectedFilter.ts b/frontend/src/store/actions/trace/parseFilter/selectedFilter.ts index 973e4ba331..f6e15c4952 100644 --- a/frontend/src/store/actions/trace/parseFilter/selectedFilter.ts +++ b/frontend/src/store/actions/trace/parseFilter/selectedFilter.ts @@ -1,4 +1,5 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; + import { isTraceFilterEnum, ParsedUrl } from '../util'; export const parseSelectedFilter = ( diff --git a/frontend/src/store/actions/trace/parseFilter/selectedTags.ts b/frontend/src/store/actions/trace/parseFilter/selectedTags.ts index a98cbda921..14aef54f73 100644 --- a/frontend/src/store/actions/trace/parseFilter/selectedTags.ts +++ b/frontend/src/store/actions/trace/parseFilter/selectedTags.ts @@ -1,4 +1,5 @@ import { TraceReducer } from 'types/reducer/trace'; + import { ParsedUrl } from '../util'; export const parseQueryIntoSelectedTags = ( diff --git a/frontend/src/store/actions/trace/selectTraceFilter.ts b/frontend/src/store/actions/trace/selectTraceFilter.ts index b18443ad3e..7b1cd16729 100644 --- a/frontend/src/store/actions/trace/selectTraceFilter.ts +++ b/frontend/src/store/actions/trace/selectTraceFilter.ts @@ -2,6 +2,7 @@ import { Dispatch, Store } from 'redux'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { TraceFilterEnum } from 'types/reducer/trace'; + import { updateURL } from './util'; export const SelectedTraceFilter = (props: { diff --git a/frontend/src/store/actions/trace/updateIsTagsError.ts b/frontend/src/store/actions/trace/updateIsTagsError.ts index be7b0b5f89..f59f031c2f 100644 --- a/frontend/src/store/actions/trace/updateIsTagsError.ts +++ b/frontend/src/store/actions/trace/updateIsTagsError.ts @@ -1,7 +1,7 @@ import { Dispatch } from 'redux'; import AppActions from 'types/actions'; -import { TraceReducer } from 'types/reducer/trace'; import { UPDATE_IS_TAG_ERROR } from 'types/actions/trace'; +import { TraceReducer } from 'types/reducer/trace'; export const UpdateTagIsError = ( isTagModalError: TraceReducer['isTagModalError'], diff --git a/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts b/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts index 0ff8321670..a3815b308b 100644 --- a/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts +++ b/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts @@ -1,7 +1,7 @@ import { Dispatch } from 'redux'; import AppActions from 'types/actions'; -import { TraceReducer } from 'types/reducer/trace'; import { UPDATE_TAG_MODAL_VISIBLITY } from 'types/actions/trace'; +import { TraceReducer } from 'types/reducer/trace'; export const UpdateTagVisiblity = ( isTagModalOpen: TraceReducer['isTagModalOpen'], diff --git a/frontend/src/store/actions/trace/updateTagsSelected.ts b/frontend/src/store/actions/trace/updateTagsSelected.ts index 459aaca1a6..ff254ba9cb 100644 --- a/frontend/src/store/actions/trace/updateTagsSelected.ts +++ b/frontend/src/store/actions/trace/updateTagsSelected.ts @@ -1,7 +1,7 @@ import { Dispatch } from 'redux'; import AppActions from 'types/actions'; -import { TraceReducer } from 'types/reducer/trace'; import { UPDATE_SELECTED_TAGS } from 'types/actions/trace'; +import { TraceReducer } from 'types/reducer/trace'; export const UpdateSelectedTags = ( selectedTags: TraceReducer['selectedTags'], diff --git a/frontend/src/store/actions/trace/util.ts b/frontend/src/store/actions/trace/util.ts index 8b3cab27b0..fea9576348 100644 --- a/frontend/src/store/actions/trace/util.ts +++ b/frontend/src/store/actions/trace/util.ts @@ -1,7 +1,7 @@ -import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; -import history from 'lib/history'; import { AllTraceFilterEnum } from 'container/Trace/Filters'; +import history from 'lib/history'; import { PayloadProps as GetFilterPayload } from 'types/api/trace/getFilters'; +import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; export * from './parseFilter'; export interface ParsedUrl { currentValue: T; @@ -11,10 +11,7 @@ export interface ParsedUrl { export function isTraceFilterEnum( value: TraceFilterEnum | string, ): value is TraceFilterEnum { - if (AllTraceFilterEnum.find((enums) => enums === value)) { - return true; - } - return false; + return AllTraceFilterEnum.find((enums) => enums === value) ? true : false; } export const updateURL = ( @@ -25,7 +22,7 @@ export const updateURL = ( filter: TraceReducer['filter'], isFilterExclude: TraceReducer['isFilterExclude'], userSelectedFilter: TraceReducer['userSelectedFilter'], -) => { +): void => { const search = new URLSearchParams(location.search); const preResult: { key: string; value: string }[] = []; diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts index 8a786919b9..ff72e5bf59 100644 --- a/frontend/src/store/reducers/app.ts +++ b/frontend/src/store/reducers/app.ts @@ -1,8 +1,8 @@ -import { IS_LOGGED_IN } from 'constants/auth'; -import { AppAction, LOGGED_IN, SWITCH_DARK_MODE } from 'types/actions/app'; -import getTheme from 'lib/theme/getTheme'; -import InitialValueTypes from 'types/reducer/app'; import getLocalStorageKey from 'api/browser/localstorage/get'; +import { IS_LOGGED_IN } from 'constants/auth'; +import getTheme from 'lib/theme/getTheme'; +import { AppAction, LOGGED_IN, SWITCH_DARK_MODE } from 'types/actions/app'; +import InitialValueTypes from 'types/reducer/app'; const InitialValue: InitialValueTypes = { isDarkMode: getTheme() === 'darkMode' ? true : false, diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index cbccb6e7af..edebd3736b 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/frontend/src/store/reducers/trace.ts @@ -1,21 +1,21 @@ import { + RESET_TRACE_FILTER, SELECT_TRACE_FILTER, TraceActions, - UPDATE_TRACE_FILTER, - UPDATE_TRACE_FILTER_LOADING, UPDATE_ALL_FILTERS, - UPDATE_SELECTED_TAGS, - UPDATE_SPANS_AGGREEGATE, - UPDATE_TAG_MODAL_VISIBLITY, + UPDATE_FILTER_EXCLUDE, + UPDATE_FILTER_RESPONSE_SELECTED, UPDATE_IS_TAG_ERROR, UPDATE_SELECTED_FUNCTION, UPDATE_SELECTED_GROUP_BY, - UPDATE_TRACE_GRAPH_LOADING, + UPDATE_SELECTED_TAGS, + UPDATE_SPANS_AGGREEGATE, + UPDATE_TAG_MODAL_VISIBLITY, + UPDATE_TRACE_FILTER, + UPDATE_TRACE_FILTER_LOADING, UPDATE_TRACE_GRAPH_ERROR, + UPDATE_TRACE_GRAPH_LOADING, UPDATE_TRACE_GRAPH_SUCCESS, - RESET_TRACE_FILTER, - UPDATE_FILTER_RESPONSE_SELECTED, - UPDATE_FILTER_EXCLUDE, } from 'types/actions/trace'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts index f538e4597c..bd2f5ee16f 100644 --- a/frontend/src/utils/app.ts +++ b/frontend/src/utils/app.ts @@ -1,5 +1,5 @@ -import { SKIP_ONBOARDING } from 'constants/onboarding'; import getLocalStorage from 'api/browser/localstorage/get'; +import { SKIP_ONBOARDING } from 'constants/onboarding'; export const isOnboardingSkipped = (): boolean => { return getLocalStorage(SKIP_ONBOARDING) === 'true'; diff --git a/frontend/src/utils/getSpanTreeMetadata.ts b/frontend/src/utils/getSpanTreeMetadata.ts index 2938507603..12c01cc894 100644 --- a/frontend/src/utils/getSpanTreeMetadata.ts +++ b/frontend/src/utils/getSpanTreeMetadata.ts @@ -7,12 +7,12 @@ import { ITraceTree } from 'types/api/trace/getTraceItem'; export const getSpanTreeMetadata = ( treeData: ITraceTree, spanServiceColours: { [key: string]: string }, -) => { +): GetSpanTreeMetaData => { let globalStart = Number.POSITIVE_INFINITY; let globalEnd = Number.NEGATIVE_INFINITY; let totalSpans = 0; let levels = 1; - const traverse = (treeNode: ITraceTree, level: number = 0) => { + const traverse = (treeNode: ITraceTree, level = 0): void => { if (!treeNode) { return; } @@ -40,3 +40,12 @@ export const getSpanTreeMetadata = ( treeData, }; }; + +interface GetSpanTreeMetaData { + globalStart: number; + globalEnd: number; + spread: number; + totalSpans: number; + levels: number; + treeData: ITraceTree; +} diff --git a/frontend/src/utils/spanToTree.ts b/frontend/src/utils/spanToTree.ts index 0f50cf6d40..3127085d04 100644 --- a/frontend/src/utils/spanToTree.ts +++ b/frontend/src/utils/spanToTree.ts @@ -16,7 +16,7 @@ export const spanToTreeUtil = (originalList: Span[]): ITraceTree => { serviceName: '', }; - let spanlist = cloneDeep(originalList); + const spanlist = cloneDeep(originalList); // let spans :spanItem[]= trace.spans; diff --git a/frontend/src/utils/toFixed.ts b/frontend/src/utils/toFixed.ts index 6aabbb267e..fef653ffad 100644 --- a/frontend/src/utils/toFixed.ts +++ b/frontend/src/utils/toFixed.ts @@ -1,4 +1,4 @@ -export const toFixed = (input: number, fixedCount: number) => { +export const toFixed = (input: number, fixedCount: number): number | string => { if (input.toString().split('.').length > 1) { return input.toFixed(fixedCount); } From 08f24fbdff69018a4664193abdd276c1d4484b8a Mon Sep 17 00:00:00 2001 From: Palash gupta Date: Mon, 14 Mar 2022 21:34:22 +0530 Subject: [PATCH 7/8] chore: function is made async --- frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx index d27a374e66..a9dacda144 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx +++ b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx @@ -18,7 +18,7 @@ const TagsKey = (props: TagsKeysProps): JSX.Element => { const [options, setOptions] = useState([]); - const onSearchHandler = useCallback(() => { + const onSearchHandler = useCallback(async () => { try { setSelectLoading(true); const response = await getTagFilters({ From a95656b3a0e3d665d0f214d2e6251bf9e055ebfe Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Wed, 16 Mar 2022 15:29:23 +0530 Subject: [PATCH 8/8] fix: x axis label when the time stamp is not parsed --- frontend/src/components/Graph/xAxisConfig.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Graph/xAxisConfig.ts b/frontend/src/components/Graph/xAxisConfig.ts index 493c36e5b7..ae99a49a23 100644 --- a/frontend/src/components/Graph/xAxisConfig.ts +++ b/frontend/src/components/Graph/xAxisConfig.ts @@ -77,8 +77,8 @@ export const useXAxisTimeUnit = (data: Chart['data']): IAxisTimeConfig => { try { let minTime = Number.POSITIVE_INFINITY; let maxTime = Number.NEGATIVE_INFINITY; - data?.labels?.forEach((timeStamp: any) => { - timeStamp = Date.parse(timeStamp); + data?.labels?.forEach((timeStamp: string | number): void => { + if (typeof timeStamp === 'string') timeStamp = Date.parse(timeStamp); minTime = Math.min(timeStamp, minTime); maxTime = Math.max(timeStamp, maxTime); });