From 1ebfa0679e58cbbd9e8acbffdeb1f37eb71d28b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chimanshu=E2=80=9D?= Date: Sat, 23 Jan 2021 09:25:35 +0530 Subject: [PATCH 1/5] Add support for service from metrics to trace page --- .../src/components/metrics/ServiceMetrics.tsx | 21 ++++++++++++------- .../src/components/traces/TraceFilter.tsx | 10 +++++++++ frontend/src/constants/query.ts | 3 ++- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/metrics/ServiceMetrics.tsx b/frontend/src/components/metrics/ServiceMetrics.tsx index b71862c4d9..2c6acccad3 100644 --- a/frontend/src/components/metrics/ServiceMetrics.tsx +++ b/frontend/src/components/metrics/ServiceMetrics.tsx @@ -31,24 +31,29 @@ interface ServicesMetricsProps extends RouteComponentProps { } const _ServiceMetrics = (props: ServicesMetricsProps) => { - const params = useParams<{ servicename?: string }>(); - + const {servicename} = useParams<{ servicename?: string }>(); useEffect(() => { - props.getServicesMetrics(params.servicename, props.globalTime); - props.getTopEndpoints(params.servicename, props.globalTime); - }, [props.globalTime, params.servicename]); + props.getServicesMetrics(servicename, props.globalTime); + props.getTopEndpoints(servicename, props.globalTime); + }, [props.globalTime, servicename]); const onTracePopupClick = (timestamp: number) => { - const tMinus5Min = timestamp / 1000000 - 5 * 60 * 1000; + const tMinus15Min = timestamp / 1000000 - 15 * 60 * 1000; const currentTime = timestamp / 1000000; props.updateTimeInterval("custom", [ - tMinus5Min, + tMinus15Min, currentTime, ]); // updateTimeInterval takes second range in ms -- give -5 min to selected time, + const urlParams = new URLSearchParams(); + urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime,tMinus15Min.toString()) + urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime,currentTime.toString()) + if(servicename){ + urlParams.set(METRICS_PAGE_QUERY_PARAM.service,servicename) + } - props.history.push(`/traces?${METRICS_PAGE_QUERY_PARAM.startTime}=${tMinus5Min}&${METRICS_PAGE_QUERY_PARAM.endTime}=${currentTime}`); + props.history.push(`/traces?${urlParams.toString()}`); }; return ( diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/components/traces/TraceFilter.tsx index 2866a979e6..4e770b02b8 100644 --- a/frontend/src/components/traces/TraceFilter.tsx +++ b/frontend/src/components/traces/TraceFilter.tsx @@ -16,6 +16,8 @@ import { FilterStateDisplay } from "./FilterStateDisplay"; import FormItem from "antd/lib/form/FormItem"; import metricsAPI from "../../api/metricsAPI"; +import { useLocation } from "react-router-dom"; +import { METRICS_PAGE_QUERY_PARAM } from "../../constants/query"; const { Option } = Select; @@ -39,12 +41,20 @@ interface TagKeyOptionItem { const _TraceFilter = (props: TraceFilterProps) => { const [serviceList, setServiceList] = useState([]); + const [service, setSelectedService] = useState(null); const [operationList, setOperationsList] = useState([]); const [tagKeyOptions, setTagKeyOptions] = useState([]); + const location = useLocation() + const urlParams = new URLSearchParams(location.search.split("?")[1]); useEffect(() => { metricsAPI.get("services/list").then((response) => { setServiceList(response.data); + }).then(()=>{ + const serviceName =urlParams.get(METRICS_PAGE_QUERY_PARAM.service); + if(serviceName){ + handleChangeService(serviceName) + } }); }, []); diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index efc9065b7d..f7736736e9 100644 --- a/frontend/src/constants/query.ts +++ b/frontend/src/constants/query.ts @@ -1,6 +1,7 @@ export enum METRICS_PAGE_QUERY_PARAM { interval = "interval", startTime = "startTime", - endTime = "endTime" + endTime = "endTime", + service = "service" } From b0dd622aa39c704cd886b0a796bac7c475330b7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chimanshu=E2=80=9D?= Date: Sat, 23 Jan 2021 09:28:45 +0530 Subject: [PATCH 2/5] Remove unused var --- frontend/src/components/traces/TraceFilter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/components/traces/TraceFilter.tsx index 4e770b02b8..5b95571f8e 100644 --- a/frontend/src/components/traces/TraceFilter.tsx +++ b/frontend/src/components/traces/TraceFilter.tsx @@ -41,7 +41,6 @@ interface TagKeyOptionItem { const _TraceFilter = (props: TraceFilterProps) => { const [serviceList, setServiceList] = useState([]); - const [service, setSelectedService] = useState(null); const [operationList, setOperationsList] = useState([]); const [tagKeyOptions, setTagKeyOptions] = useState([]); const location = useLocation() From e98e3be33e914cfabe59965d508913ecac9f0a77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chimanshu=E2=80=9D?= Date: Sat, 23 Jan 2021 10:05:12 +0530 Subject: [PATCH 3/5] Preserve state in latencymodalform --- .../components/traces/LatencyModalForm.tsx | 9 ++++----- .../src/components/traces/TraceFilter.tsx | 19 +++++++++++-------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/traces/LatencyModalForm.tsx b/frontend/src/components/traces/LatencyModalForm.tsx index b3dbb1f05e..279e3d22e4 100644 --- a/frontend/src/components/traces/LatencyModalForm.tsx +++ b/frontend/src/components/traces/LatencyModalForm.tsx @@ -3,20 +3,19 @@ import { Modal, Form, InputNumber, Col, Row } from "antd"; import { Store } from "antd/lib/form/interface"; interface LatencyModalFormProps { - visible: boolean; onCreate: (values: Store) => void; //Store is defined in antd forms library onCancel: () => void; + latencyFilterValues: {min: string, max: string} } const LatencyModalForm: React.FC = ({ - visible, onCreate, - onCancel, + onCancel,latencyFilterValues }) => { const [form] = Form.useForm(); return ( = ({ form={form} layout="horizontal" name="form_in_modal" - initialValues={{ min: "100", max: "500" }} + initialValues={latencyFilterValues} > {/* */} diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/components/traces/TraceFilter.tsx index 5b95571f8e..7947ce7a3d 100644 --- a/frontend/src/components/traces/TraceFilter.tsx +++ b/frontend/src/components/traces/TraceFilter.tsx @@ -120,9 +120,9 @@ const _TraceFilter = (props: TraceFilterProps) => { const [loading] = useState(false); const [tagKeyValueApplied, setTagKeyValueApplied] = useState([""]); - const [latencyFilterValues, setLatencyFilterValues] = useState({ - min: "", - max: "", + const [latencyFilterValues, setLatencyFilterValues] = useState<{min: string, max: string}>({ + min: "100", + max: "500", }); const [form] = Form.useForm(); @@ -158,13 +158,16 @@ const _TraceFilter = (props: TraceFilterProps) => { const onLatencyModalApply = (values: Store) => { setModalVisible(false); + const { min, max}= values props.updateTraceFilters({ ...props.traceFilters, latency: { - min: values.min ? (parseInt(values.min) * 1000000).toString() : "", - max: values.max ? (parseInt(values.max) * 1000000).toString() : "", + min: min ? (parseInt(min) * 1000000).toString() : "", + max: max ? (parseInt(max) * 1000000).toString() : "", }, }); + + setLatencyFilterValues({min, max}) }; const onTagFormSubmit = (values: any) => { @@ -379,13 +382,13 @@ const _TraceFilter = (props: TraceFilterProps) => { - { setModalVisible(false); }} - /> + />} ); }; From bdd23c504c15880389196076254245458c1777c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chimanshu=E2=80=9D?= Date: Sat, 23 Jan 2021 10:16:10 +0530 Subject: [PATCH 4/5] Fix key rendering issue --- frontend/src/components/traces/FilterStateDisplay.tsx | 1 + frontend/src/constants/env.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/traces/FilterStateDisplay.tsx b/frontend/src/components/traces/FilterStateDisplay.tsx index f22c3d3d0a..4de5b30348 100644 --- a/frontend/src/components/traces/FilterStateDisplay.tsx +++ b/frontend/src/components/traces/FilterStateDisplay.tsx @@ -95,6 +95,7 @@ const _FilterStateDisplay = (props: FilterStateDisplayProps) => { { handleCloseTagElement(item); }} diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts index 46c7d2c53d..ecff2e08e2 100644 --- a/frontend/src/constants/env.ts +++ b/frontend/src/constants/env.ts @@ -1,4 +1,4 @@ export const ENVIRONMENT = { - baseURL: "", - // baseURL: "http://104.211.113.204:8080", + // baseURL: "", + baseURL: "http://104.211.113.204:8080", }; From 53a50efa00d46521cbb6ba5766782796d1591c8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chimanshu=E2=80=9D?= Date: Sat, 23 Jan 2021 11:12:04 +0530 Subject: [PATCH 5/5] Reset env --- frontend/src/constants/env.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts index ecff2e08e2..46c7d2c53d 100644 --- a/frontend/src/constants/env.ts +++ b/frontend/src/constants/env.ts @@ -1,4 +1,4 @@ export const ENVIRONMENT = { - // baseURL: "", - baseURL: "http://104.211.113.204:8080", + baseURL: "", + // baseURL: "http://104.211.113.204:8080", };