Merge pull request #11 from himanshu-source21/ft-carry-forward-service-name

Ft carry forward service name from metrics page -> traces page

frontend/src/components/metrics/ServiceMetrics.tsx

@@ -31,24 +31,29 @@ interface ServicesMetricsProps extends RouteComponentProps<any> {
 }
 
 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 (
 		<Tabs defaultActiveKey="1">

frontend/src/components/traces/FilterStateDisplay.tsx

@@ -95,6 +95,7 @@ const _FilterStateDisplay = (props: FilterStateDisplayProps) => {
 						<Tag
 							style={{ fontSize: 14, padding: 8 }}
 							closable
+							key={`${item.key}-${item.operator}-${item.value}`}
 							onClose={(e) => {
 								handleCloseTagElement(item);
 							}}

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<LatencyModalFormProps> = ({
-	visible,
 	onCreate,
-	onCancel,
+	onCancel,latencyFilterValues
 }) => {
 	const [form] = Form.useForm();
 	return (
 		<Modal
-			visible={visible}
+			visible={true}
 			title="Chose min and max values of Latency"
 			okText="Apply"
 			cancelText="Cancel"
@@ -37,7 +36,7 @@ const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
 				form={form}
 				layout="horizontal"
 				name="form_in_modal"
-				initialValues={{ min: "100", max: "500" }}
+				initialValues={latencyFilterValues}
 			>
 				<Row>
 					{/* <Input.Group compact> */}

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<string[]>([]);
 	const [operationList, setOperationsList] = useState<string[]>([]);
 	const [tagKeyOptions, setTagKeyOptions] = useState<TagKeyOptionItem[]>([]);
+	const location = useLocation()
+	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 
 	useEffect(() => {
 		metricsAPI.get<string[]>("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) => {
 				</FormItem>
 			</Form>
 
-			<LatencyModalForm
-				visible={modalVisible}
+			{modalVisible && <LatencyModalForm
 				onCreate={onLatencyModalApply}
+				latencyFilterValues={latencyFilterValues}
 				onCancel={() => {
 					setModalVisible(false);
 				}}
-			/>
+			/>}
 		</div>
 	);
 };

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"
 }