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/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/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 2866a979e6..7947ce7a3d 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; @@ -41,10 +43,17 @@ const _TraceFilter = (props: TraceFilterProps) => { const [serviceList, setServiceList] = useState([]); 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) + } }); }, []); @@ -111,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(); @@ -149,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) => { @@ -370,13 +382,13 @@ const _TraceFilter = (props: TraceFilterProps) => { - { setModalVisible(false); }} - /> + />} ); }; 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" }