feat(FE: Span): add span kind filter (#219)

* Added span kind filter

* changed state to const

* Removed unnecessary console

* Fixed undefined issue, changed a bit in the spanKind type

* set default value for parameter passed in handleChangeSpanKind func

frontend/src/assets/index.css

@@ -3,13 +3,6 @@
 .ant-space-item {
 	margin-right: 0 !important;
 }
-.instrument-card{
-	border-radius: 4px;
-	background: #313131;
-	padding: 33px 23px;
-	max-width: 800px;
-	margin-top: 40px;
-}
 
 #chart svg{
 	width: 100%;

frontend/src/constants/query.ts

@@ -5,4 +5,5 @@ export enum METRICS_PAGE_QUERY_PARAM {
 	service = "service",
 	error = "error",
 	operation = "operation",
+	kind = "kind"
 }

frontend/src/modules/Traces/TraceCustomVisualizations.tsx

@@ -91,7 +91,9 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => {
 			"&maxDuration=" +
 			props.traceFilters.latency?.max +
 			"&minDuration=" +
-			props.traceFilters.latency?.min;
+			props.traceFilters.latency?.min +
+			"&kind=" +
+			props.traceFilters.kind;
 		if (props.traceFilters.tags)
 			request_string =
 				request_string +

frontend/src/modules/Traces/TraceFilter.tsx

@@ -40,6 +40,11 @@ interface TagKeyOptionItem {
 	tagCount: number;
 }
 
+interface ISpanKind {
+	label: "SERVER" | "CLIENT";
+	value: string;
+}
+
 const _TraceFilter = (props: TraceFilterProps) => {
 	const [serviceList, setServiceList] = useState<string[]>([]);
 	const [operationList, setOperationsList] = useState<string[]>([]);
@@ -48,12 +53,24 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 	const { state } = useRoute();
 
+	const spanKindList: ISpanKind[] = [
+		{
+			label: "SERVER",
+			value: "2"
+		},
+		{
+			label: "CLIENT",
+			value: "3"
+		}
+	]
+
 	useEffect(() => {
 		handleApplyFilterForm({
 			service: "",
 			tags: [],
 			operation: "",
 			latency: { min: "", max: "" },
+			kind: ""
 		});
 	}, []);
 
@@ -76,6 +93,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						...props.traceFilters,
 						operation: operationName,
 						service: serviceName,
+						kind: ""
 					});
 					populateData(serviceName);
 				} else if (serviceName && errorTag) {
@@ -89,6 +107,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 								operator: "equals",
 							},
 						],
+						kind: ""
 					});
 				} else {
 					if (operationName) {
@@ -117,7 +136,9 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			"&maxDuration=" +
 			props.traceFilters.latency?.max +
 			"&minDuration=" +
-			props.traceFilters.latency?.min;
+			props.traceFilters.latency?.min +
+			"&kind=" +
+			props.traceFilters.kind;
 		if (props.traceFilters.tags)
 			request_string =
 				request_string +
@@ -173,6 +194,10 @@ const _TraceFilter = (props: TraceFilterProps) => {
 		form_basefilter.setFieldsValue({ operation: props.traceFilters.operation });
 	}, [props.traceFilters.operation]);
 
+	useEffect(() => {
+		form_basefilter.setFieldsValue({ kind: props.traceFilters.kind });
+	}, [props.traceFilters.kind]);
+
 	const [modalVisible, setModalVisible] = useState(false);
 	const [loading] = useState(false);
 
@@ -257,6 +282,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						operator: values.operator,
 					},
 				],
+				kind: props.traceFilters.kind
 			});
 		} else {
 			props.updateTraceFilters({
@@ -270,6 +296,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						operator: values.operator,
 					},
 				],
+				kind: props.traceFilters.kind
 			});
 		}
 
@@ -334,6 +361,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 				max: "",
 				min: "",
 			},
+			kind: values.kind
 		});
 	};
 
@@ -344,10 +372,15 @@ const _TraceFilter = (props: TraceFilterProps) => {
 				operation: "",
 				tags: [],
 				latency: { min: "", max: "" },
+				kind: ""
 			});
 		};
 	}, []);
 
+	const handleChangeSpanKind = (value:string = '') => {
+		props.updateTraceFilters({ ...props.traceFilters, kind: value });
+	}
+
 	return (
 		<div>
 			<div>Filter Traces</div>
@@ -396,6 +429,20 @@ const _TraceFilter = (props: TraceFilterProps) => {
 					/>
 				</FormItem>
 
+				<FormItem name="spanKind">
+					<Select
+						showSearch
+						style={{ width: 180 }}
+						onChange={handleChangeSpanKind}
+						placeholder="Select Span Kind"
+						allowClear
+					>
+						{spanKindList.map(spanKind => (
+							<Option value={spanKind.value} key={spanKind.value}>{spanKind.label}</Option>
+						))}
+					</Select>
+				</FormItem>
+
 				{/* <FormItem>
                     <Button type="primary" htmlType="submit">Apply Filters</Button>
                 </FormItem> */}

frontend/src/store/actions/traceFilters.ts

@@ -17,6 +17,7 @@ export interface TraceFilters {
 	service?: string;
 	latency?: LatencyValue;
 	operation?: string;
+	kind?: string;
 }
 
 //define interface for action. Action creator always returns object of this type

frontend/src/store/reducers/traceFilters.ts

@@ -9,6 +9,7 @@ const initialState: TraceFilters = {
 	tags: [],
 	operation: "",
 	latency: { min: "", max: "" },
+	kind: ""
 };
 
 const TraceFilterReducer = (state = initialState, action: ACTION) => {