From 4dfbdd2d63b58465783e03a55904897ff5463be0 Mon Sep 17 00:00:00 2001 From: pal-sig <88981777+pal-sig@users.noreply.github.com> Date: Mon, 22 Nov 2021 12:26:20 +0530 Subject: [PATCH] Fix(FE): some eslint error are fixed (#382) * chore(UI): @types/node version is updated and port sync finder is removed * chore(UI): tsconfig is updated * fix(bug) webpack config is updated * fix(bug): some eslint error is now fixed * chore(lock): yarn lock is fixed --- frontend/cypress/plugins/index.ts | 4 +- frontend/cypress/tsconfig.json | 2 +- frontend/src/AppRoutes/pageComponents.ts | 7 - frontend/src/AppRoutes/routes.ts | 6 - frontend/src/components/Spinner/styles.ts | 2 +- frontend/src/constants/routes.ts | 1 - .../container/GridGraphComponent/index.tsx | 2 +- .../Header/DateTimeSelection/index.tsx | 4 +- .../DescriptionOfDashboard/index.tsx | 10 +- .../TraceCustomVisualization/index.tsx | 9 +- frontend/src/container/TraceFilter/Filter.tsx | 7 +- frontend/src/container/TraceFilter/index.tsx | 10 +- .../src/modules/Servicemap/SelectService.tsx | 77 +-- .../src/modules/Servicemap/ServiceMap.tsx | 16 +- .../src/modules/Traces/LatencyModalForm.tsx | 94 ---- .../modules/Traces/SelectedSpanDetails.tsx | 2 +- .../Traces/TraceCustomVisualizations.tsx | 272 ---------- frontend/src/modules/Traces/TraceDetail.tsx | 17 - frontend/src/modules/Traces/TraceFilter.tsx | 487 ------------------ frontend/src/modules/Traces/TraceList.tsx | 160 ------ frontend/src/modules/Usage/UsageExplorer.tsx | 69 ++- .../src/pages/MetricApplication/index.tsx | 6 +- frontend/src/pages/TraceDetails/index.tsx | 4 +- .../store/actions/metrics/resetInitialData.ts | 2 +- frontend/src/store/actions/serviceMap.ts | 4 +- frontend/src/store/actions/trace/index.ts | 2 +- frontend/src/store/actions/traceFilters.ts | 4 +- frontend/src/store/actions/usage.ts | 2 +- frontend/src/store/reducers/index.ts | 2 - frontend/src/store/reducers/metric.ts | 2 +- frontend/src/store/reducers/metrics.ts | 112 ---- frontend/src/store/reducers/serviceMap.ts | 5 +- frontend/src/store/reducers/trace.ts | 4 +- frontend/src/store/reducers/traceFilters.ts | 5 +- frontend/src/store/reducers/traces.ts | 4 +- frontend/src/store/reducers/usage.ts | 2 +- frontend/src/typings/react-graph-vis.ts | 2 +- frontend/yarn.lock | 6 +- 38 files changed, 153 insertions(+), 1273 deletions(-) delete mode 100644 frontend/src/modules/Traces/LatencyModalForm.tsx delete mode 100644 frontend/src/modules/Traces/TraceCustomVisualizations.tsx delete mode 100644 frontend/src/modules/Traces/TraceDetail.tsx delete mode 100644 frontend/src/modules/Traces/TraceFilter.tsx delete mode 100644 frontend/src/modules/Traces/TraceList.tsx delete mode 100644 frontend/src/store/reducers/metrics.ts diff --git a/frontend/cypress/plugins/index.ts b/frontend/cypress/plugins/index.ts index 0db3bdca21..69e261ef89 100644 --- a/frontend/cypress/plugins/index.ts +++ b/frontend/cypress/plugins/index.ts @@ -19,6 +19,8 @@ /** * @type {Cypress.PluginConfig} */ -module.exports = (on, config: Cypress.ConfigOptions): void => {}; +module.exports = (): void => { + return undefined; +}; export {}; diff --git a/frontend/cypress/tsconfig.json b/frontend/cypress/tsconfig.json index 249c11127d..b72f233542 100644 --- a/frontend/cypress/tsconfig.json +++ b/frontend/cypress/tsconfig.json @@ -6,7 +6,7 @@ "noEmit": true, // be explicit about types included // to avoid clashing with Jest types - "types": ["cypress", "@testing-library/cypress"], + "types": ["cypress", "@testing-library/cypress", "node"], "isolatedModules": false }, "include": ["../node_modules/cypress", "./**/*.ts"] diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts index 9ffc25aff3..ee9095f014 100644 --- a/frontend/src/AppRoutes/pageComponents.ts +++ b/frontend/src/AppRoutes/pageComponents.ts @@ -18,13 +18,6 @@ export const ServiceMapPage = Loadable( ), ); -export const TraceDetailPage = Loadable( - () => - import( - /* webpackChunkName: "TraceDetailPage" */ 'modules/Traces/TraceDetail' - ), -); - export const TraceDetailPages = Loadable( () => import(/* webpackChunkName: "TraceDetailPage" */ 'pages/TraceDetails'), ); diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index 59ba0ebf30..d508828dea 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/frontend/src/AppRoutes/routes.ts @@ -17,7 +17,6 @@ import { ServicesTablePage, SettingsPage, SignupPage, - TraceDetailPage, TraceDetailPages, TraceGraphPage, UsageExplorerPage, @@ -64,11 +63,6 @@ const routes: AppRoutes[] = [ exact: true, component: InstrumentationPage, }, - { - path: ROUTES.TRACES, - exact: true, - component: TraceDetailPage, - }, { path: ROUTES.ALL_DASHBOARD, exact: true, diff --git a/frontend/src/components/Spinner/styles.ts b/frontend/src/components/Spinner/styles.ts index 875ee11d4f..53a77a8978 100644 --- a/frontend/src/components/Spinner/styles.ts +++ b/frontend/src/components/Spinner/styles.ts @@ -12,5 +12,5 @@ export const SpinerStyle = styled.div` display: flex; justify-content: center; align-items: center; - height: ${({ height = '100vh' }) => height}; + height: ${({ height = '100vh' }): number | string => height}; `; diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index f8ab430edb..1c42e7df58 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -2,7 +2,6 @@ const ROUTES = { SIGN_UP: '/signup', SERVICE_METRICS: '/application/:servicename', SERVICE_MAP: '/service-map', - TRACES: '/traces', TRACE: '/trace', TRACE_GRAPH: '/traces/:id', SETTINGS: '/settings', diff --git a/frontend/src/container/GridGraphComponent/index.tsx b/frontend/src/container/GridGraphComponent/index.tsx index 94da26c2f2..6849903c2f 100644 --- a/frontend/src/container/GridGraphComponent/index.tsx +++ b/frontend/src/container/GridGraphComponent/index.tsx @@ -1,5 +1,5 @@ import { Typography } from 'antd'; -import { ChartData, ChartOptions } from 'chart.js'; +import { ChartData } from 'chart.js'; import Graph, { graphOnClickHandler } from 'components/Graph'; import ValueGraph from 'components/ValueGraph'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; diff --git a/frontend/src/container/Header/DateTimeSelection/index.tsx b/frontend/src/container/Header/DateTimeSelection/index.tsx index a706d10cc4..4494d442cb 100644 --- a/frontend/src/container/Header/DateTimeSelection/index.tsx +++ b/frontend/src/container/Header/DateTimeSelection/index.tsx @@ -1,5 +1,5 @@ import { Button, Select as DefaultSelect } from 'antd'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { getDefaultOption, getOptions, Time } from './config'; import { Container, Form, FormItem } from './styles'; @@ -75,7 +75,7 @@ const DateTimeSelection = ({ false, ); - const { maxTime, minTime, selectedTime, loading } = useSelector< + const { maxTime, minTime, selectedTime } = useSelector< AppState, GlobalReducer >((state) => state.globalTime); diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx index 7d8d670ebc..797ae3e383 100644 --- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx +++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx @@ -56,7 +56,15 @@ const DescriptionOfDashboard = ({ } else { toggleEditMode(); } - }, [isEditMode, updatedTitle, updatedTags, updatedDescription]); + }, [ + isEditMode, + updatedTitle, + updatedTags, + updatedDescription, + selectedDashboard, + toggleEditMode, + updateDashboardTitleDescriptionTags, + ]); return ( <> diff --git a/frontend/src/container/TraceCustomVisualization/index.tsx b/frontend/src/container/TraceCustomVisualization/index.tsx index 08ef2f63f3..3f9f0a050b 100644 --- a/frontend/src/container/TraceCustomVisualization/index.tsx +++ b/frontend/src/container/TraceCustomVisualization/index.tsx @@ -6,17 +6,16 @@ import { AppState } from 'store/reducers'; const { Option } = Select; import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; - +import { + GetTraceVisualAggregates, + GetTraceVisualAggregatesProps, +} from 'store/actions/trace/getTraceVisualAgrregates'; import AppActions from 'types/actions'; import { TraceReducer } from 'types/reducer/trace'; import { aggregation_options, entity } from './config'; import { Card, CustomVisualizationsTitle, FormItem, Space } from './styles'; import TraceCustomGraph from './TraceCustomGraph'; -import { - GetTraceVisualAggregates, - GetTraceVisualAggregatesProps, -} from 'store/actions/trace/getTraceVisualAgrregates'; const TraceCustomVisualisation = ({ getTraceVisualAggregates, diff --git a/frontend/src/container/TraceFilter/Filter.tsx b/frontend/src/container/TraceFilter/Filter.tsx index 729be85b1a..ca4a2754a1 100644 --- a/frontend/src/container/TraceFilter/Filter.tsx +++ b/frontend/src/container/TraceFilter/Filter.tsx @@ -5,12 +5,7 @@ import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; import { TagItem } from 'store/actions'; -import { - UpdateSelectedLatency, - UpdateSelectedOperation, - UpdateSelectedService, - UpdateSelectedTags, -} from 'store/actions/trace'; +import { UpdateSelectedTags } from 'store/actions/trace'; import { UpdateSelectedData, UpdateSelectedDataProps, diff --git a/frontend/src/container/TraceFilter/index.tsx b/frontend/src/container/TraceFilter/index.tsx index 79fd84ef93..3d4f7d2f43 100644 --- a/frontend/src/container/TraceFilter/index.tsx +++ b/frontend/src/container/TraceFilter/index.tsx @@ -1,4 +1,4 @@ -import { Button, Input, Typography, notification } from 'antd'; +import { Button, Input, notification, Typography } from 'antd'; import { SelectValue } from 'antd/lib/select'; import React, { useCallback, useEffect, useState } from 'react'; import { connect, useSelector } from 'react-redux'; @@ -237,7 +237,13 @@ const TraceList = ({ } ms`, }); } - }, [selectedService, selectedOperation, selectedKind, selectedLatency]); + }, [ + selectedService, + selectedOperation, + selectedKind, + selectedLatency, + form_basefilter, + ]); return ( <> diff --git a/frontend/src/modules/Servicemap/SelectService.tsx b/frontend/src/modules/Servicemap/SelectService.tsx index d15c542e4d..81cd97fde2 100644 --- a/frontend/src/modules/Servicemap/SelectService.tsx +++ b/frontend/src/modules/Servicemap/SelectService.tsx @@ -1,26 +1,26 @@ -import React, { useState } from "react"; -import { servicesItem } from "store/actions"; -import { InfoCircleOutlined } from "@ant-design/icons"; -import { Select } from "antd"; -import styled from "styled-components"; +import { InfoCircleOutlined } from '@ant-design/icons'; +import { Select } from 'antd'; +import React, { useState } from 'react'; +import { servicesItem } from 'store/actions'; +import styled from 'styled-components'; const { Option } = Select; -import { cloneDeep } from "lodash-es"; +import { cloneDeep } from 'lodash-es'; const Container = styled.div` - margin-top: 12px; - display: flex; - .info { - display:flex; - font-family: Roboto; - margin-left: auto; - margin-right: 12px; - color: #4F4F4F; - font-size: 14px; - .anticon-info-circle { - margin-top: 22px; - margin-right: 18px; - } - } + margin-top: 12px; + display: flex; + .info { + display: flex; + font-family: Roboto; + margin-left: auto; + margin-right: 12px; + color: #4f4f4f; + font-size: 14px; + .anticon-info-circle { + margin-top: 22px; + margin-right: 18px; + } + } `; interface SelectServiceProps { @@ -30,17 +30,20 @@ interface SelectServiceProps { } const defaultOption = { - serviceName: "Default" + serviceName: 'Default', }; -const SelectService = (props: SelectServiceProps) => { - const [selectedVal, setSelectedVal] = useState(defaultOption.serviceName); +const SelectService = (props: SelectServiceProps): JSX.Element => { + const [selectedVal, setSelectedVal] = useState( + defaultOption.serviceName, + ); const { zoomToService, zoomToDefault } = props; const services = cloneDeep(props.services); - services.unshift(defaultOption) - const handleSelect = (value: string) => { - if(value === defaultOption.serviceName){ - zoomToDefault() + services.unshift(defaultOption); + + const handleSelect = (value: string): void => { + if (value === defaultOption.serviceName) { + zoomToDefault(); } else { zoomToService(value); } @@ -49,7 +52,7 @@ const SelectService = (props: SelectServiceProps) => { return ( -
- -
- -
-> Size of circles is proportial to the number of requests served by each node
-
-> Click on node name to reposition the node
-
-
+
+ +
+
+ > Size of circles is proportial to the number of requests served by + each node +
+
> Click on node name to reposition the node
+
+
); }; diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 4f3b397cf6..b3b76961d9 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -34,8 +34,8 @@ const Container = styled.div` interface ServiceMapProps extends RouteComponentProps { serviceMap: serviceMapStore; globalTime: GlobalTime; - getServiceMapItems: Function; - getDetailedServiceMapItems: Function; + getServiceMapItems: (time: GlobalTime) => void; + getDetailedServiceMapItems: (time: GlobalTime) => void; } interface graphNode { id: string; @@ -51,7 +51,7 @@ export interface graphDataType { links: graphLink[]; } -const ServiceMap = (props: ServiceMapProps) => { +const ServiceMap = (props: ServiceMapProps): JSX.Element => { const fgRef = useRef(); const { @@ -68,7 +68,7 @@ const ServiceMap = (props: ServiceMapProps) => { */ getServiceMapItems(globalTime); getDetailedServiceMapItems(globalTime); - }, [globalTime]); + }, [globalTime, getServiceMapItems, getDetailedServiceMapItems]); useEffect(() => { fgRef.current && fgRef.current.d3Force('charge').strength(-400); @@ -77,12 +77,14 @@ const ServiceMap = (props: ServiceMapProps) => { return ; } - const zoomToService = (value: string) => { - fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value); + const zoomToService = (value: string): void => { + fgRef && + fgRef.current && + fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value); }; const zoomToDefault = () => { - fgRef && fgRef.current.zoomToFit(100, 120); + fgRef && fgRef.current && fgRef.current.zoomToFit(100, 120); }; const { nodes, links } = getGraphData(serviceMap); diff --git a/frontend/src/modules/Traces/LatencyModalForm.tsx b/frontend/src/modules/Traces/LatencyModalForm.tsx deleted file mode 100644 index c52993baaf..0000000000 --- a/frontend/src/modules/Traces/LatencyModalForm.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { Col, Form, InputNumber, Modal, Row } from 'antd'; -import { NamePath, Store } from 'antd/lib/form/interface'; -import React from 'react'; - -interface LatencyModalFormProps { - onCreate: (values: Store) => void; //Store is defined in antd forms library - onCancel: () => void; - latencyFilterValues: { min: string; max: string }; -} - -const LatencyModalForm: React.FC = ({ - onCreate, - onCancel, - latencyFilterValues, -}) => { - const [form] = Form.useForm(); - - const validateMinValue = ({ - getFieldValue, - }: { - getFieldValue: (name: NamePath) => any; - }) => ({ - validator(_, value: any) { - if (value < getFieldValue('max')) { - return Promise.resolve(); - } - return Promise.reject(new Error('Min value should be less than Max value')); - }, - }); - - const validateMaxValue = ({ - getFieldValue, - }: { - getFieldValue: (name: NamePath) => any; - }) => ({ - validator(_, value: any) { - if (value > getFieldValue('min')) { - return Promise.resolve(); - } - return Promise.reject( - new Error('Max value should be greater than Min value'), - ); - }, - }); - - return ( - { - form - .validateFields() - .then((values) => { - form.resetFields(); - onCreate(values); // giving error for values - }) - .catch((info) => { - // console.log('Validate Failed:', info); - }); - }} - > -
- - - - - - - - - - - - - {/* */} -
- - ); -}; - -export default LatencyModalForm; diff --git a/frontend/src/modules/Traces/SelectedSpanDetails.tsx b/frontend/src/modules/Traces/SelectedSpanDetails.tsx index b502c92c71..0d42ed4f94 100644 --- a/frontend/src/modules/Traces/SelectedSpanDetails.tsx +++ b/frontend/src/modules/Traces/SelectedSpanDetails.tsx @@ -54,7 +54,7 @@ const CardContainer = styled(Card)` } `; -const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => { +const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => { const spanTags = props.data?.tags; const service = props.data?.name?.split(':')[0]; const operation = props.data?.name?.split(':')[1]; diff --git a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx deleted file mode 100644 index 638940c075..0000000000 --- a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { Form, Select, Space } from 'antd'; -import Graph from 'components/Graph'; -import React, { useEffect, useState } from 'react'; -import { connect, useSelector } from 'react-redux'; -import { TraceFilters } from 'store/actions'; -import { getFilteredTraceMetrics } from 'store/actions/MetricsActions'; -import { customMetricsItem } from 'store/actions/MetricsActions'; -import { AppState } from 'store/reducers'; -const { Option } = Select; -import { colors } from 'lib/getRandomColor'; -import { GlobalTime } from 'types/actions/globalTime'; -import { GlobalReducer } from 'types/reducer/globalTime'; - -import { - Card, - CustomGraphContainer, - CustomVisualizationsTitle, -} from './styles'; - -const entity = [ - { - title: 'Calls', - key: 'calls', - dataindex: 'calls', - }, - { - title: 'Duration', - key: 'duration', - dataindex: 'duration', - }, - { - title: 'Error', - key: 'error', - dataindex: 'error', - }, - { - title: 'Status Code', - key: 'status_code', - dataindex: 'status_code', - }, -]; - -const aggregation_options = [ - { - linked_entity: 'calls', - default_selected: { title: 'Count', dataindex: 'count' }, - options_available: [ - { title: 'Count', dataindex: 'count' }, - { title: 'Rate (per sec)', dataindex: 'rate_per_sec' }, - ], - }, - { - linked_entity: 'duration', - default_selected: { title: 'p99', dataindex: 'p99' }, - // options_available: [ {title:'Avg', dataindex:'avg'}, {title:'Max', dataindex:'max'},{title:'Min', dataindex:'min'}, {title:'p50', dataindex:'p50'},{title:'p95', dataindex:'p95'}, {title:'p95', dataindex:'p95'}] - options_available: [ - { title: 'p50', dataindex: 'p50' }, - { title: 'p95', dataindex: 'p95' }, - { title: 'p99', dataindex: 'p99' }, - ], - }, - { - linked_entity: 'error', - default_selected: { title: 'Count', dataindex: 'count' }, - options_available: [ - { title: 'Count', dataindex: 'count' }, - { title: 'Rate (per sec)', dataindex: 'rate_per_sec' }, - ], - }, - { - linked_entity: 'status_code', - default_selected: { title: 'Count', dataindex: 'count' }, - options_available: [{ title: 'Count', dataindex: 'count' }], - }, -]; - -interface TraceCustomVisualizationsProps { - filteredTraceMetrics: customMetricsItem[]; - globalTime: GlobalTime; - getFilteredTraceMetrics: (value: string, time: GlobalTime) => void; - traceFilters: TraceFilters; -} - -const _TraceCustomVisualizations = ( - props: TraceCustomVisualizationsProps, -): JSX.Element => { - const [selectedEntity, setSelectedEntity] = useState('calls'); - const [selectedAggOption, setSelectedAggOption] = useState('count'); - const [form] = Form.useForm(); - const selectedStep = '60'; - const { - filteredTraceMetrics, - getFilteredTraceMetrics, - globalTime, - traceFilters, - } = props; - const { loading } = useSelector( - (state) => state.globalTime, - ); - - // Step should be multiples of 60, 60 -> 1 min - useEffect(() => { - let request_string = - 'service=' + - traceFilters.service + - '&operation=' + - traceFilters.operation + - '&maxDuration=' + - traceFilters.latency?.max + - '&minDuration=' + - traceFilters.latency?.min + - '&kind=' + - traceFilters.kind; - if (traceFilters.tags) - request_string = - request_string + - '&tags=' + - encodeURIComponent(JSON.stringify(traceFilters.tags)); - if (selectedEntity) - request_string = - request_string + '&dimension=' + selectedEntity.toLowerCase(); - if (selectedAggOption) - request_string = - request_string + '&aggregation_option=' + selectedAggOption.toLowerCase(); - if (selectedStep) request_string = request_string + '&step=' + selectedStep; - const plusMinus15 = { - minTime: globalTime.minTime - 15 * 60 * 1000000000, - maxTime: globalTime.maxTime + 15 * 60 * 1000000000, - }; - - /* - Call the apis only when the route is loaded. - Check this issue: https://github.com/SigNoz/signoz/issues/110 - */ - if (loading === false) { - getFilteredTraceMetrics(request_string, plusMinus15); - } - }, [ - selectedEntity, - selectedAggOption, - traceFilters, - getFilteredTraceMetrics, - globalTime, - loading, - ]); - - //Custom metrics API called if time, tracefilters, selected entity or agg option changes - - // PNOTE - Can also use 'coordinate' option in antd Select for implementing this - https://ant.design/components/select/ - const handleFormValuesChange = (changedValues: any): void => { - const formFieldName = Object.keys(changedValues)[0]; - if (formFieldName === 'entity') { - const temp_entity = aggregation_options.filter( - (item) => item.linked_entity === changedValues[formFieldName], - )[0]; - - form.setFieldsValue({ - agg_options: temp_entity.default_selected.title, - // PNOTE - TO DO Check if this has the same behaviour as selecting an option? - }); - - const temp = form.getFieldsValue(['agg_options', 'entity']); - - setSelectedEntity(temp.entity); - setSelectedAggOption(temp.agg_options); - //form.setFieldsValue({ agg_options: aggregation_options.filter( item => item.linked_entity === selectedEntity )[0] }); //reset product selection - // PNOTE - https://stackoverflow.com/questions/64377293/update-select-option-list-based-on-other-select-field-selection-ant-design - } - - if (formFieldName === 'agg_options') { - setSelectedAggOption(changedValues[formFieldName]); - } - }; - - return ( - - Custom Visualizations -
- - - - - - - - - - - - - - - - - - {/* Need heading for each option */} - - - - -
- - - new Date(s.timestamp / 1000000)), - datasets: [ - { - data: filteredTraceMetrics.map((e) => e.value), - borderColor: colors[0], - }, - ], - }} - /> - - - ); -}; - -const mapStateToProps = ( - state: AppState, -): { - filteredTraceMetrics: customMetricsItem[]; - globalTime: GlobalTime; - traceFilters: TraceFilters; -} => { - return { - filteredTraceMetrics: state.metricsData.customMetricsItem, - globalTime: state.globalTime, - traceFilters: state.traceFilters, - }; -}; - -export const TraceCustomVisualizations = connect(mapStateToProps, { - getFilteredTraceMetrics: getFilteredTraceMetrics, -})(_TraceCustomVisualizations); diff --git a/frontend/src/modules/Traces/TraceDetail.tsx b/frontend/src/modules/Traces/TraceDetail.tsx deleted file mode 100644 index ede374bae8..0000000000 --- a/frontend/src/modules/Traces/TraceDetail.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { TraceCustomVisualizations } from './TraceCustomVisualizations'; -import { TraceFilter } from './TraceFilter'; -import { TraceList } from './TraceList'; - -const TraceDetail = (): JSX.Element => { - return ( - <> - - - - - ); -}; - -export default TraceDetail; diff --git a/frontend/src/modules/Traces/TraceFilter.tsx b/frontend/src/modules/Traces/TraceFilter.tsx deleted file mode 100644 index 4ea95996a7..0000000000 --- a/frontend/src/modules/Traces/TraceFilter.tsx +++ /dev/null @@ -1,487 +0,0 @@ -import { AutoComplete, Button, Form, Input, Select, Typography } from 'antd'; -import FormItem from 'antd/lib/form/FormItem'; -import { Store } from 'antd/lib/form/interface'; -import api from 'api'; -import { METRICS_PAGE_QUERY_PARAM } from 'constants/query'; -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; -import { connect, useSelector } from 'react-redux'; -import { useLocation } from 'react-router-dom'; -import { fetchTraces, TraceFilters, updateTraceFilters } from 'store/actions'; -import { AppState } from 'store/reducers'; -import styled from 'styled-components'; -import { GlobalTime } from 'types/actions/globalTime'; -import { GlobalReducer } from 'types/reducer/globalTime'; - -import { FilterStateDisplay } from './FilterStateDisplay'; -import LatencyModalForm from './LatencyModalForm'; - -const { Option } = Select; - -const InfoWrapper = styled.div` - padding-top: 10px; - font-style: italic; - font-size: 12px; -`; - -interface TraceFilterProps { - traceFilters: TraceFilters; - globalTime: GlobalTime; - updateTraceFilters: (props: TraceFilters) => void; - fetchTraces: (globalTime: GlobalTime, filter_params: string) => void; -} - -interface TagKeyOptionItem { - tagKeys: string; - tagCount: number; -} - -interface ISpanKind { - label: 'SERVER' | 'CLIENT'; - value: string; -} - -const _TraceFilter = (props: TraceFilterProps): JSX.Element => { - const [serviceList, setServiceList] = useState([]); - const [operationList, setOperationsList] = useState([]); - const [tagKeyOptions, setTagKeyOptions] = useState([]); - const location = useLocation(); - const urlParams = useMemo(() => { - return new URLSearchParams(location.search.split('?')[1]); - }, [location.search]); - - const { loading } = useSelector( - (state) => state.globalTime, - ); - - const { updateTraceFilters, traceFilters, globalTime, fetchTraces } = props; - const [modalVisible, setModalVisible] = useState(false); - - const [latencyFilterValues, setLatencyFilterValues] = useState<{ - min: string; - max: string; - }>({ - min: '100', - max: '500', - }); - - const [form] = Form.useForm(); - - const [form_basefilter] = Form.useForm(); - - const handleChangeOperation = useCallback( - (value: string) => { - updateTraceFilters({ ...traceFilters, operation: value }); - }, - [traceFilters, updateTraceFilters], - ); - - const populateData = useCallback( - (value: string) => { - if (loading === false) { - const service_request = '/service/' + value + '/operations'; - api.get(service_request).then((response) => { - // form_basefilter.resetFields(['operation',]) - setOperationsList(response.data); - }); - - const tagkeyoptions_request = '/tags?service=' + value; - api.get(tagkeyoptions_request).then((response) => { - setTagKeyOptions(response.data); - }); - } - }, - [loading], - ); - - const handleChangeService = useCallback( - (value: string) => { - populateData(value); - updateTraceFilters({ ...traceFilters, service: value }); - }, - [traceFilters, updateTraceFilters, populateData], - ); - - const spanKindList: ISpanKind[] = [ - { - label: 'SERVER', - value: '2', - }, - { - label: 'CLIENT', - value: '3', - }, - ]; - - const handleApplyFilterForm = useCallback( - (values: any): void => { - updateTraceFilters({ - service: values.service, - operation: values.operation, - latency: { - max: '', - min: '', - }, - kind: values.kind, - }); - }, - [updateTraceFilters], - ); - - useEffect(() => { - handleApplyFilterForm({ - service: '', - tags: [], - operation: '', - latency: { min: '', max: '' }, - kind: '', - }); - }, [handleApplyFilterForm]); - - const onTagFormSubmit = useCallback( - (values) => { - if (traceFilters.tags) { - // If there are existing tag filters present - updateTraceFilters({ - service: traceFilters.service, - operation: traceFilters.operation, - latency: traceFilters.latency, - tags: [ - ...traceFilters.tags, - { - key: values.tag_key, - value: values.tag_value, - operator: values.operator, - }, - ], - kind: traceFilters.kind, - }); - } else { - updateTraceFilters({ - service: traceFilters.service, - operation: traceFilters.operation, - latency: traceFilters.latency, - tags: [ - { - key: values.tag_key, - value: values.tag_value, - operator: values.operator, - }, - ], - kind: traceFilters.kind, - }); - } - - form.resetFields(); - }, - [form, traceFilters, updateTraceFilters], - ); - - const counter = useRef(0); - - useEffect(() => { - if (loading === false && counter.current === 0) { - counter.current = 1; - api - .get(`/services/list`) - .then((response) => { - setServiceList(response.data); - }) - .then(() => { - const operationName = urlParams.get(METRICS_PAGE_QUERY_PARAM.operation); - const serviceName = urlParams.get(METRICS_PAGE_QUERY_PARAM.service); - const errorTag = urlParams.get(METRICS_PAGE_QUERY_PARAM.error); - if (operationName && serviceName) { - updateTraceFilters({ - ...traceFilters, - operation: operationName, - service: serviceName, - kind: '', - }); - populateData(serviceName); - } else if (serviceName && errorTag) { - updateTraceFilters({ - ...traceFilters, - service: serviceName, - tags: [ - { - key: METRICS_PAGE_QUERY_PARAM.error, - value: errorTag, - operator: 'equals', - }, - ], - kind: '', - }); - } else { - if (operationName) { - handleChangeOperation(operationName); - } - if (serviceName) { - handleChangeService(serviceName); - } - if (errorTag) { - onTagFormSubmit({ - tag_key: METRICS_PAGE_QUERY_PARAM.error, - tag_value: errorTag, - operator: 'equals', - }); - } - } - }); - } - }, [ - handleChangeOperation, - onTagFormSubmit, - handleChangeService, - traceFilters, - urlParams, - updateTraceFilters, - populateData, - loading, - ]); - - useEffect(() => { - let request_string = - 'service=' + - traceFilters.service + - '&operation=' + - traceFilters.operation + - '&maxDuration=' + - traceFilters.latency?.max + - '&minDuration=' + - traceFilters.latency?.min + - '&kind=' + - traceFilters.kind; - if (traceFilters.tags) - request_string = - request_string + - '&tags=' + - encodeURIComponent(JSON.stringify(traceFilters.tags)); - - if (loading === false) { - fetchTraces(globalTime, request_string); - } - }, [traceFilters, fetchTraces, loading, globalTime]); - - useEffect(() => { - let latencyButtonText = 'Latency'; - if (traceFilters.latency?.min === '' && traceFilters.latency?.max !== '') - latencyButtonText = - 'Latency<' + - (parseInt(traceFilters.latency?.max) / 1000000).toString() + - 'ms'; - else if (traceFilters.latency?.min !== '' && traceFilters.latency?.max === '') - latencyButtonText = - 'Latency>' + - (parseInt(traceFilters.latency?.min) / 1000000).toString() + - 'ms'; - else if ( - traceFilters.latency !== undefined && - traceFilters.latency?.min !== '' && - traceFilters.latency?.max !== '' - ) - latencyButtonText = - (parseInt(traceFilters.latency.min) / 1000000).toString() + - 'ms { - setModalVisible(true); - }; - - const onLatencyModalApply = (values: Store): void => { - setModalVisible(false); - const { min, max } = values; - updateTraceFilters({ - ...traceFilters, - latency: { - min: min ? (parseInt(min) * 1000000).toString() : '', - max: max ? (parseInt(max) * 1000000).toString() : '', - }, - }); - - setLatencyFilterValues({ min, max }); - }; - - // For autocomplete - //Setting value when autocomplete field is changed - const onChangeTagKey = (data: string): void => { - form.setFieldsValue({ tag_key: data }); - }; - - const dataSource = ['status:200']; - const children = []; - for (let i = 0; i < dataSource.length; i++) { - children.push( - , - ); - } - - useEffect(() => { - return (): void => { - updateTraceFilters({ - service: '', - operation: '', - tags: [], - latency: { min: '', max: '' }, - kind: '', - }); - }; - }, [updateTraceFilters]); - - const handleChangeSpanKind = (value = ''): void => { - updateTraceFilters({ ...traceFilters, kind: value }); - }; - - return ( -
- Filter Traces -
- - - - - - - - - - - - - - - -
- - - - Select Service to get Tag suggestions - -
- - { - return { value: s.tagKeys }; - })} - style={{ width: 200, textAlign: 'center' }} - onChange={onChangeTagKey} - filterOption={(inputValue, option): boolean => - option?.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 - } - placeholder="Tag Key" - /> - - - - - - - - - - - - - -
- - {modalVisible && ( - { - setModalVisible(false); - }} - /> - )} -
- ); -}; - -const mapStateToProps = ( - state: AppState, -): { traceFilters: TraceFilters; globalTime: GlobalTime } => { - return { traceFilters: state.traceFilters, globalTime: state.globalTime }; -}; - -export const TraceFilter = connect(mapStateToProps, { - updateTraceFilters: updateTraceFilters, - fetchTraces: fetchTraces, -})(_TraceFilter); diff --git a/frontend/src/modules/Traces/TraceList.tsx b/frontend/src/modules/Traces/TraceList.tsx deleted file mode 100644 index c7329ed408..0000000000 --- a/frontend/src/modules/Traces/TraceList.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import { Space, Table } from 'antd'; -import ROUTES from 'constants/routes'; -import moment from 'moment'; -import React, { useEffect } from 'react'; -import { connect } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { fetchTraces, pushDStree, traceResponseNew } from 'store/actions'; -import { AppState } from 'store/reducers'; -import styled from 'styled-components'; -import { isOnboardingSkipped } from 'utils/app'; - -const StyledTable = styled(Table)` - cursor: pointer; -`; - -const TraceHeader = styled.div` - margin: 16px 0; -`; - -interface TraceListProps { - traces: traceResponseNew; - fetchTraces: Function; -} - -interface TableDataSourceItem { - key: string; - spanid: string; - traceid: string; - operationName: string; - startTime: number; - duration: number; - service: string; -} - -const _TraceList = (props: TraceListProps) => { - // PNOTE (TO DO) - Currently this use of useEffect gives warning. May need to memoise fetchtraces - https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook - const history = useHistory(); - - useEffect(() => { - props.fetchTraces(); - }, []); - - const columns: any = [ - { - title: 'Start Time', - dataIndex: 'startTime', - key: 'startTime', - sorter: (a: any, b: any) => a.startTime - b.startTime, - sortDirections: ['descend', 'ascend'], - render: (value: number) => moment(value).format('YYYY-MM-DD hh:mm:ss'), - - // new Date() assumes input in milliseconds. Start Time stamp returned by druid api for span list is in ms - }, - { - title: 'Service', - dataIndex: 'service', - key: 'service', - }, - { - title: 'Operation', - dataIndex: 'operationName', - key: 'operationName', - }, - { - title: 'Duration (in ms)', - dataIndex: 'duration', - key: 'duration', - sorter: (a: any, b: any) => a.duration - b.duration, - sortDirections: ['descend', 'ascend'], - render: (value: number) => (value / 1000000).toFixed(2), - }, - ]; - - const dataSource: TableDataSourceItem[] = []; - - const renderTraces = () => { - if ( - typeof props.traces[0] !== 'undefined' && - props.traces[0].events.length > 0 - ) { - props.traces[0].events.map( - (item: (number | string | string[] | pushDStree[])[], index) => { - if ( - typeof item[0] === 'number' && - typeof item[4] === 'string' && - typeof item[6] === 'string' && - typeof item[1] === 'string' && - typeof item[2] === 'string' && - typeof item[3] === 'string' - ) - dataSource.push({ - startTime: item[0], - operationName: item[4], - duration: parseInt(item[6]), - spanid: item[1], - traceid: item[2], - key: index.toString(), - service: item[3], - }); - }, - ); - - //antd table in typescript - https://codesandbox.io/s/react-typescript-669cv - - return ( - ({ - onClick: () => { - history.push({ - pathname: ROUTES.TRACES + '/' + record.traceid, - state: { - spanId: record.spanid, - }, - }); - }, - })} - /> - ); - } else { - if (isOnboardingSkipped()) { - return ( - - No spans found. Please add instrumentation (follow this - - guide - - ) - - ); - } - return
No spans found for given filter!
; - } - }; // end of renderTraces - - return ( -
- List of filtered spans -
{renderTraces()}
-
- ); -}; - -const mapStateToProps = (state: AppState): { traces: traceResponseNew } => { - return { traces: state.traces }; -}; - -export const TraceList = connect(mapStateToProps, { - fetchTraces: fetchTraces, -})(_TraceList); diff --git a/frontend/src/modules/Usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx index 3fadaba522..505cf525b5 100644 --- a/frontend/src/modules/Usage/UsageExplorer.tsx +++ b/frontend/src/modules/Usage/UsageExplorer.tsx @@ -14,8 +14,13 @@ import { Card } from './styles'; interface UsageExplorerProps { usageData: usageDataItem[]; - getUsageData: Function; - getServicesList: Function; + getUsageData: ( + minTime: number, + maxTime: number, + selectedInterval: any, + selectedService: string, + ) => void; + getServicesList: (time: GlobalTime) => void; globalTime: GlobalTime; servicesList: servicesListItem[]; totalCount: number; @@ -47,27 +52,30 @@ const interval = [ }, ]; -const _UsageExplorer = (props: UsageExplorerProps) => { +const _UsageExplorer = (props: UsageExplorerProps): JSX.Element => { const [selectedTime, setSelectedTime] = useState(timeDaysOptions[1]); const [selectedInterval, setSelectedInterval] = useState(interval[2]); const [selectedService, setSelectedService] = useState(''); const { loading } = useSelector( (state) => state.globalTime, ); + const { + getServicesList, + getUsageData, + globalTime, + servicesList, + totalCount, + usageData, + } = props; useEffect(() => { if (selectedTime && selectedInterval) { const maxTime = new Date().getTime() * 1000000; const minTime = maxTime - selectedTime.value * 24 * 3600000 * 1000000; - props.getUsageData( - minTime, - maxTime, - selectedInterval!.value, - selectedService, - ); + getUsageData(minTime, maxTime, selectedInterval.value, selectedService); } - }, [selectedTime, selectedInterval, selectedService]); + }, [selectedTime, selectedInterval, selectedService, getUsageData]); useEffect(() => { /* @@ -75,16 +83,16 @@ const _UsageExplorer = (props: UsageExplorerProps) => { Check this issue: https://github.com/SigNoz/signoz/issues/110 */ if (loading) { - props.getServicesList(props.globalTime); + getServicesList(globalTime); } - }, [loading, props]); + }, [loading, globalTime, getServicesList]); const data = { - labels: props.usageData.map((s) => new Date(s.timestamp / 1000000)), + labels: usageData.map((s) => new Date(s.timestamp / 1000000)), datasets: [ { label: 'Span Count', - data: props.usageData.map((s) => s.count), + data: usageData.map((s) => s.count), backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 2, @@ -94,11 +102,10 @@ const _UsageExplorer = (props: UsageExplorerProps) => { return ( - {/* PNOTE - TODO - Keep it in reponsive row column tab */} - {isOnboardingSkipped() && props.totalCount === 0 ? ( + {isOnboardingSkipped() && totalCount === 0 ? ( { ) : ( - {`Total count is ${props.totalCount}`} + {`Total count is ${totalCount}`} )} @@ -191,7 +204,7 @@ const mapStateToProps = ( totalCount: totalCount, usageData: state.usageDate, globalTime: state.globalTime, - servicesList: state.metricsData.serviceList, + servicesList: state.metricsData.serviceList || [], }; }; diff --git a/frontend/src/pages/MetricApplication/index.tsx b/frontend/src/pages/MetricApplication/index.tsx index ac741e3ed5..49f6c6aedd 100644 --- a/frontend/src/pages/MetricApplication/index.tsx +++ b/frontend/src/pages/MetricApplication/index.tsx @@ -1,7 +1,7 @@ import { Typography } from 'antd'; import Spinner from 'components/Spinner'; import MetricsApplicationContainer from 'container/MetricsApplication'; -import React, { useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import { connect, useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import { bindActionCreators } from 'redux'; @@ -38,10 +38,10 @@ const MetricsApplication = ({ }); } - return () => { + return (): void => { resetInitialData(); }; - }, [servicename, getInitialData, selectedTime]); + }, [servicename, getInitialData, selectedTime, resetInitialData]); if (metricsApplicationLoading) { return ; diff --git a/frontend/src/pages/TraceDetails/index.tsx b/frontend/src/pages/TraceDetails/index.tsx index 247a87201a..4f58d3c554 100644 --- a/frontend/src/pages/TraceDetails/index.tsx +++ b/frontend/src/pages/TraceDetails/index.tsx @@ -9,8 +9,8 @@ import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; import { GetInitialTraceData, - ResetRaceData, GetInitialTraceDataProps, + ResetRaceData, } from 'store/actions/trace'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; @@ -40,7 +40,7 @@ const TraceDetail = ({ return (): void => { resetTraceData(); }; - }, [getInitialTraceData, loading, selectedTime]); + }, [getInitialTraceData, loading, selectedTime, resetTraceData]); if (error) { return {errorMessage}; diff --git a/frontend/src/store/actions/metrics/resetInitialData.ts b/frontend/src/store/actions/metrics/resetInitialData.ts index 58e77be111..fe21077a30 100644 --- a/frontend/src/store/actions/metrics/resetInitialData.ts +++ b/frontend/src/store/actions/metrics/resetInitialData.ts @@ -6,7 +6,7 @@ export const ResetInitialData = (): (( dispatch: Dispatch, getState: () => AppState, ) => void) => { - return (dispatch, getState): void => { + return (dispatch): void => { dispatch({ type: 'RESET_INITIAL_APPLICATION_DATA', }); diff --git a/frontend/src/store/actions/serviceMap.ts b/frontend/src/store/actions/serviceMap.ts index 78811c1327..9a1fa6cc46 100644 --- a/frontend/src/store/actions/serviceMap.ts +++ b/frontend/src/store/actions/serviceMap.ts @@ -38,7 +38,7 @@ export interface servicesAction { } export const getServiceMapItems = (globalTime: GlobalTime) => { - return async (dispatch: Dispatch) => { + return async (dispatch: Dispatch): Promise => { dispatch({ type: ActionTypes.getServiceMapItems, payload: [], @@ -60,7 +60,7 @@ export const getServiceMapItems = (globalTime: GlobalTime) => { }; export const getDetailedServiceMapItems = (globalTime: GlobalTime) => { - return async (dispatch: Dispatch) => { + return async (dispatch: Dispatch): Promise => { dispatch({ type: ActionTypes.getServices, payload: [], diff --git a/frontend/src/store/actions/trace/index.ts b/frontend/src/store/actions/trace/index.ts index 09567a180d..f8d65f3eff 100644 --- a/frontend/src/store/actions/trace/index.ts +++ b/frontend/src/store/actions/trace/index.ts @@ -1,4 +1,5 @@ export * from './getInitialData'; +export * from './resetTraceDetails'; export * from './updateSelectedAggOption'; export * from './updateSelectedEntity'; export * from './updateSelectedKind'; @@ -6,4 +7,3 @@ export * from './updateSelectedLatency'; export * from './updateSelectedOperation'; export * from './updateSelectedService'; export * from './updateSelectedTags'; -export * from './resetTraceDetails'; diff --git a/frontend/src/store/actions/traceFilters.ts b/frontend/src/store/actions/traceFilters.ts index aa18b704b2..35502674fd 100644 --- a/frontend/src/store/actions/traceFilters.ts +++ b/frontend/src/store/actions/traceFilters.ts @@ -26,7 +26,9 @@ export interface updateTraceFiltersAction { payload: TraceFilters; } -export const updateTraceFilters = (traceFilters: TraceFilters) => { +export const updateTraceFilters = ( + traceFilters: TraceFilters, +): updateTraceFiltersAction => { return { type: ActionTypes.updateTraceFilters, payload: traceFilters, diff --git a/frontend/src/store/actions/usage.ts b/frontend/src/store/actions/usage.ts index c93fe9eb9c..cd427c3eb5 100644 --- a/frontend/src/store/actions/usage.ts +++ b/frontend/src/store/actions/usage.ts @@ -20,7 +20,7 @@ export const getUsageData = ( step: number, service: string, ) => { - return async (dispatch: Dispatch) => { + return async (dispatch: Dispatch): Promise => { const request_string = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch( maxTime, )}&step=${step}&service=${service ? service : ''}`; diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index 6a89c4735a..4eba388f72 100644 --- a/frontend/src/store/reducers/index.ts +++ b/frontend/src/store/reducers/index.ts @@ -4,7 +4,6 @@ import appReducer from './app'; import dashboardReducer from './dashboard'; import globalTimeReducer from './global'; import metricsReducers from './metric'; -import { metricsReducer } from './metrics'; import { ServiceMapReducer } from './serviceMap'; import { traceReducer } from './trace'; import TraceFilterReducer from './traceFilters'; @@ -18,7 +17,6 @@ const reducers = combineReducers({ trace: traceReducer, usageDate: usageDataReducer, globalTime: globalTimeReducer, - metricsData: metricsReducer, serviceMap: ServiceMapReducer, dashboards: dashboardReducer, app: appReducer, diff --git a/frontend/src/store/reducers/metric.ts b/frontend/src/store/reducers/metric.ts index 18bb456c2f..cc14cba59c 100644 --- a/frontend/src/store/reducers/metric.ts +++ b/frontend/src/store/reducers/metric.ts @@ -5,8 +5,8 @@ import { GET_SERVICE_LIST_ERROR, GET_SERVICE_LIST_LOADING_START, GET_SERVICE_LIST_SUCCESS, - RESET_INITIAL_APPLICATION_DATA, MetricsActions, + RESET_INITIAL_APPLICATION_DATA, } from 'types/actions/metrics'; import InitialValueTypes from 'types/reducer/metrics'; diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts deleted file mode 100644 index 130293dd85..0000000000 --- a/frontend/src/store/reducers/metrics.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { - customMetricsItem, - dbOverviewMetricsItem, - externalErrCodeMetricsItem, - externalMetricsAvgDurationItem, - externalMetricsItem, - metricItem, - servicesListItem, - topEndpointListItem, -} from 'store/actions/MetricsActions'; -import { MetricsActionTypes as ActionTypes } from 'store/actions/MetricsActions/metricsActionTypes'; - -export type MetricsInitialState = { - serviceList?: servicesListItem[]; - metricItems?: metricItem[]; - topEndpointListItem?: topEndpointListItem[]; - externalMetricsAvgDurationItem?: externalMetricsAvgDurationItem[]; - externalErrCodeMetricsItem?: externalErrCodeMetricsItem[]; - externalMetricsItem?: externalMetricsItem[]; - dbOverviewMetricsItem?: dbOverviewMetricsItem[]; - customMetricsItem?: customMetricsItem[]; - loading: boolean; -}; -export const metricsInitialState: MetricsInitialState = { - serviceList: [], - metricItems: [], - topEndpointListItem: [], - externalMetricsAvgDurationItem: [], - externalErrCodeMetricsItem: [], - externalMetricsItem: [], - dbOverviewMetricsItem: [], - customMetricsItem: [], - loading: false, -}; - -type ActionType = { - type: string; - payload: any; -}; - -export const metricsReducer = ( - state: MetricsInitialState = metricsInitialState, - action: ActionType, -) => { - switch (action.type) { - case ActionTypes.getFilteredTraceMetrics: - return { - ...state, - customMetricsItem: action.payload, - }; - case ActionTypes.getServiceMetrics: - return { - ...state, - metricItems: action.payload, - }; - case ActionTypes.getDbOverviewMetrics: - return { - ...state, - dbOverviewMetricsItem: action.payload, - }; - case ActionTypes.getExternalMetrics: - return { - ...state, - externalMetricsItem: action.payload, - }; - case ActionTypes.getTopEndpoints: - return { - ...state, - topEndpointListItem: action.payload, - }; - case ActionTypes.getErrCodeMetrics: - return { - ...state, - externalErrCodeMetricsItem: action.payload, - }; - case ActionTypes.getAvgDurationMetrics: - return { - ...state, - externalMetricsAvgDurationItem: action.payload, - }; - - case ActionTypes.getServicesList: - return { - ...state, - serviceList: action.payload, - }; - - case 'UPDATE_INITIAL_VALUE_START': { - return { - ...state, - loading: true, - }; - } - - case 'UPDATE_INITIAL_VALUE': { - return { - ...state, - dbOverviewMetricsItem: action.payload.dbResponse, - topEndpointListItem: action.payload.topEndPointsResponse, - externalMetricsAvgDurationItem: action.payload.avgExternalDurationResponse, - externalErrCodeMetricsItem: action.payload.externalErrorCodeMetricsResponse, - metricItems: action.payload.serviceOverViewResponse, - externalMetricsItem: action.payload.externalServiceResponse, - loading: false, - }; - } - default: - return { - ...state, - }; - } -}; diff --git a/frontend/src/store/reducers/serviceMap.ts b/frontend/src/store/reducers/serviceMap.ts index ebb7408069..b81178a47b 100644 --- a/frontend/src/store/reducers/serviceMap.ts +++ b/frontend/src/store/reducers/serviceMap.ts @@ -5,7 +5,10 @@ const initialState: serviceMapStore = { services: [], }; -export const ServiceMapReducer = (state = initialState, action: Action) => { +export const ServiceMapReducer = ( + state = initialState, + action: Action, +): serviceMapStore => { switch (action.type) { case ActionTypes.getServiceMapItems: return { diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index c19c27983c..ae9e27e343 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/frontend/src/store/reducers/trace.ts @@ -3,7 +3,9 @@ import { GET_TRACE_INITIAL_DATA_SUCCESS, GET_TRACE_LOADING_END, GET_TRACE_LOADING_START, + RESET_TRACE_DATA, TraceActions, + UPDATE_AGGREGATES, UPDATE_SELECTED_AGG_OPTION, UPDATE_SELECTED_ENTITY, UPDATE_SELECTED_TRACE_DATA, @@ -13,8 +15,6 @@ import { UPDATE_TRACE_SELECTED_OPERATION, UPDATE_TRACE_SELECTED_SERVICE, UPDATE_TRACE_SELECTED_TAGS, - RESET_TRACE_DATA, - UPDATE_AGGREGATES, } from 'types/actions/trace'; import { TraceReducer } from 'types/reducer/trace'; diff --git a/frontend/src/store/reducers/traceFilters.ts b/frontend/src/store/reducers/traceFilters.ts index 57dc93dad6..d234015c73 100644 --- a/frontend/src/store/reducers/traceFilters.ts +++ b/frontend/src/store/reducers/traceFilters.ts @@ -14,7 +14,10 @@ const initialState: TraceFilters = { kind: '', }; -const TraceFilterReducer = (state = initialState, action: ACTION) => { +const TraceFilterReducer = ( + state = initialState, + action: ACTION, +): TraceFilters => { switch (action.type) { case ActionTypes.updateTraceFilters: return action.payload; diff --git a/frontend/src/store/reducers/traces.ts b/frontend/src/store/reducers/traces.ts index 97c18dd689..afe8436818 100644 --- a/frontend/src/store/reducers/traces.ts +++ b/frontend/src/store/reducers/traces.ts @@ -11,7 +11,7 @@ const spanlistinstance: spanList = { events: [], segmentID: '', columns: [] }; export const tracesReducer = ( state: traceResponseNew = { '0': spanlistinstance }, action: Action, -) => { +): traceResponseNew => { switch (action.type) { case ActionTypes.fetchTraces: return action.payload; @@ -23,7 +23,7 @@ export const tracesReducer = ( export const traceItemReducer = ( state: spansWSameTraceIDResponse = { '0': spanlistinstance }, action: Action, -) => { +): spansWSameTraceIDResponse => { switch (action.type) { case ActionTypes.fetchTraceItem: return action.payload; diff --git a/frontend/src/store/reducers/usage.ts b/frontend/src/store/reducers/usage.ts index d49be80a40..eaaface3f1 100644 --- a/frontend/src/store/reducers/usage.ts +++ b/frontend/src/store/reducers/usage.ts @@ -3,7 +3,7 @@ import { Action, ActionTypes, usageDataItem } from 'store/actions'; export const usageDataReducer = ( state: usageDataItem[] = [{ timestamp: 0, count: 0 }], action: Action, -) => { +): usageDataItem[] => { switch (action.type) { case ActionTypes.getUsageData: return action.payload; diff --git a/frontend/src/typings/react-graph-vis.ts b/frontend/src/typings/react-graph-vis.ts index c19a3c6301..bef518e573 100644 --- a/frontend/src/typings/react-graph-vis.ts +++ b/frontend/src/typings/react-graph-vis.ts @@ -34,6 +34,6 @@ declare module 'react-graph-vis' { NetworkGraphProps, NetworkGraphState > { - render(); + render(): JSX.Element; } } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index ec8c5d3838..f5e2f70e87 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2236,9 +2236,9 @@ integrity sha512-09x2d6kNBwjHgyh3jOUE2GE4DFoxDriDvWdu6mFhMP1ysynGYazt4ecZmJlL6/fe4Zi2vtYvTvtL7epjQQrBhA== "@types/node@^16.10.3": - version "16.10.3" - resolved "https://registry.yarnpkg.com/@types/node/-/node-16.10.3.tgz#7a8f2838603ea314d1d22bb3171d899e15c57bd5" - integrity sha512-ho3Ruq+fFnBrZhUYI46n/bV2GjwzSkwuT4dTf0GkuNFmnb8nq4ny2z9JEVemFi6bdEJanHLlYfy9c6FN9B9McQ== + version "16.11.9" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.9.tgz#879be3ad7af29f4c1a5c433421bf99fab7047185" + integrity sha512-MKmdASMf3LtPzwLyRrFjtFFZ48cMf8jmX5VRYrDQiJa8Ybu5VAmkqBWqKU8fdCwD8ysw4mQ9nrEHvzg6gunR7A== "@types/normalize-package-data@^2.4.0": version "2.4.0"