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 diff --git a/.github/workflows/repo-stats.yml b/.github/workflows/repo-stats.yml new file mode 100644 index 0000000000..926bb2118d --- /dev/null +++ b/.github/workflows/repo-stats.yml @@ -0,0 +1,25 @@ +on: + schedule: + # Run this once per day, towards the end of the day for keeping the most + # recent data point most meaningful (hours are interpreted in UTC). + - cron: "0 8 * * *" + workflow_dispatch: # Allow for running this manually. + +jobs: + j1: + name: repostats + runs-on: ubuntu-latest + steps: + - name: run-ghrs + uses: jgehrcke/github-repo-stats@v1.1.0 + with: + # Define the stats repository (the repo to fetch + # stats for and to generate the report for). + # Remove the parameter when the stats repository + # and the data repository are the same. + repository: signoz/signoz + # Set a GitHub API token that can read the stats + # repository, and that can push to the data + # repository (which this workflow file lives in), + # to store data and the report files. + ghtoken: ${{ github.token }} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7b63015435..d0e7a7169b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -21,6 +21,12 @@ Need to update [https://github.com/SigNoz/signoz/tree/main/frontend](https://git - comment out frontend service section at `deploy/docker/clickhouse-setup/docker-compose.yaml#L59` - run `cd deploy` to move to deploy directory - Install signoz locally without the frontend + - Add below configuration to query-service section at `docker/clickhouse-setup/docker-compose.yaml#L36` + + ```docker + ports: + - "8080:8080" + ``` - If you are using x86_64 processors (All Intel/AMD processors) run `sudo docker-compose -f docker/clickhouse-setup/docker-compose.yaml up -d` - If you are on arm64 processors (Apple M1 Macbooks) run `sudo docker-compose -f docker/clickhouse-setup/docker-compose.arm.yaml up -d` - `cd ../frontend` and change baseURL to `http://localhost:8080` in file `src/constants/env.ts` @@ -47,20 +53,32 @@ Need to update [https://github.com/SigNoz/signoz/tree/main/pkg/query-service](ht ### To run ClickHouse setup (recommended for local development) - git clone https://github.com/SigNoz/signoz.git +- run `cd signoz` to move to signoz directory - run `sudo make dev-setup` to configure local setup to run query-service - comment out frontend service section at `docker/clickhouse-setup/docker-compose.yaml#L45` - comment out query-service section at `docker/clickhouse-setup/docker-compose.yaml#L28` -- add below configuration to clickhouse section at `docker/clickhouse-setup/docker-compose.yaml` -``` +- add below configuration to clickhouse section at `docker/clickhouse-setup/docker-compose.yaml#L6` +```docker expose: - 9000 ports: - 9001:9000 ``` + +- run `cd pkg/query-service/` to move to query-service directory +- Open ./constants/constants.go + - Replace ```const RELATIONAL_DATASOURCE_PATH = "/var/lib/signoz/signoz.db"``` \ + with ```const RELATIONAL_DATASOURCE_PATH = "./signoz.db".``` + - Install signoz locally without the frontend and query-service - If you are using x86_64 processors (All Intel/AMD processors) run `sudo make run-x86` - If you are on arm64 processors (Apple M1 Macbooks) run `sudo make run-arm` +#### Run locally +```console +ClickHouseUrl=tcp://localhost:9001 STORAGE=clickhouse go run main.go +``` + > Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` **_Query Service should now be available at `http://localhost:8080`_** @@ -68,13 +86,13 @@ Need to update [https://github.com/SigNoz/signoz/tree/main/pkg/query-service](ht > If you want to see how, frontend plays with query service, you can run frontend also in you local env with the baseURL changed to `http://localhost:8080` in file `src/constants/env.ts` as the query-service is now running at port `8080` --- -Instead of configuring a local setup, you can also use [Gitpod](https://www.gitpod.io/), a VSCode-based Web IDE. + # Contribute to SigNoz Helm Chart diff --git a/README.md b/README.md index 6bc8fec353..f9c7d1e816 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@

License - Downloads + Downloads GitHub issues tweet @@ -34,8 +34,10 @@ 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) +
+![screenzy-1647005040573](https://user-images.githubusercontent.com/504541/157875938-a3d57904-ea6d-4278-b929-bd1408d7f94c.png)

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} - {/*

*/} ); 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/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 155d11de66..2e3fbd2053 100644 --- a/frontend/src/container/Timeline/index.tsx +++ b/frontend/src/container/Timeline/index.tsx @@ -1,33 +1,27 @@ import { StyledDiv } from 'components/Styled'; import { INTERVAL_UNITS } from 'container/TraceDetail/utils'; import useThemeMode from 'hooks/useThemeMode'; -import React, { useMemo, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useMeasure } from 'react-use'; import { styles, Svg, TimelineInterval } from './styles'; import { Interval } from './types'; import { getIntervals, getIntervalSpread } 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): JSX.Element => { 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, @@ -41,7 +35,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]; + if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1]; break; } } @@ -55,7 +49,7 @@ const Timeline = ({ intervalUnit, }), ); - }, [traceMetaData, globalTraceMetadata]); + }, []); return ( @@ -96,4 +90,11 @@ const Timeline = ({ ); }; +interface TimelineProps { + traceMetaData: object; + globalTraceMetadata: object; + intervalUnit: object; + setIntervalUnit: any; +} + export default Timeline; 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..a9dacda144 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(async () => { 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 5f11be4b3d..17127f390b 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx @@ -32,6 +32,7 @@ const ErrorTag = ({ event }: ErrorTagProps): JSX.Element => { key={`${name}${JSON.stringify(attributeMap)}`} defaultActiveKey={[name || attributeMap.event]} expandIconPosition="right" + key={name} > { ); 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 || ''); @@ -48,9 +48,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, }); @@ -67,10 +67,10 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { return getNodeById(activeSelectedId, treeData); }, [activeSelectedId, treeData]); - const onSearchHandler = (value: string): void => { - 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) { 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 7e1d2f0d6b..bbf35b9fce 100644 --- a/frontend/src/container/TraceFlameGraph/index.tsx +++ b/frontend/src/container/TraceFlameGraph/index.tsx @@ -6,6 +6,7 @@ import { import useThemeMode from 'hooks/useThemeMode'; import React, { useLayoutEffect, useMemo, useState } from 'react'; import { pushDStree } from 'store/actions'; +import { ITraceTree } from 'types/api/trace/getTraceItem'; import { toFixed } from 'utils/toFixed'; import { @@ -14,6 +15,18 @@ import { 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 leftOffset = 0, // left offset in % @@ -24,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; -}): JSX.Element => { +}: 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(() => { @@ -47,13 +50,13 @@ const SpanItem = ({ ) { setIsSelected(true); } - }, [hoveredSpanId, selectedSpanId]); + }, [hoveredSpanId, selectedSpanId, isSelected, spanData]); const handleHover = (hoverState: boolean): void => { - setIsLocalHover(hoverState); + // setIsLocalHover(hoverState); if (hoverState) onSpanHover(spanData.id); - else onSpanHover(null); + else onSpanHover(''); }; const handleClick = (): void => { @@ -65,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} @@ -90,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; -}): null | JSX.Element => { +}): 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, @@ -119,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; - }): null | JSX.Element => { + }): 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); }