From 48e32878e651d3f37c75bdc02a3fdb43004996fb Mon Sep 17 00:00:00 2001 From: Kishore Date: Fri, 30 Jul 2021 17:21:41 +0530 Subject: [PATCH] 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 | 7 --- frontend/src/constants/query.ts | 1 + .../Traces/TraceCustomVisualizations.tsx | 4 +- frontend/src/modules/Traces/TraceFilter.tsx | 49 ++++++++++++++++++- frontend/src/store/actions/traceFilters.ts | 1 + frontend/src/store/reducers/traceFilters.ts | 1 + 6 files changed, 54 insertions(+), 9 deletions(-) diff --git a/frontend/src/assets/index.css b/frontend/src/assets/index.css index 2ef862efba..a6bc99887c 100644 --- a/frontend/src/assets/index.css +++ b/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%; diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index f12ddeaad5..70d0bc0563 100644 --- a/frontend/src/constants/query.ts +++ b/frontend/src/constants/query.ts @@ -5,4 +5,5 @@ export enum METRICS_PAGE_QUERY_PARAM { service = "service", error = "error", operation = "operation", + kind = "kind" } diff --git a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx index c84b157f7f..710d508d76 100644 --- a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx +++ b/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 + diff --git a/frontend/src/modules/Traces/TraceFilter.tsx b/frontend/src/modules/Traces/TraceFilter.tsx index 82d679895d..216ea8ad0e 100644 --- a/frontend/src/modules/Traces/TraceFilter.tsx +++ b/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([]); const [operationList, setOperationsList] = useState([]); @@ -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 (
Filter Traces
@@ -396,6 +429,20 @@ const _TraceFilter = (props: TraceFilterProps) => { /> + + + + {/* */} diff --git a/frontend/src/store/actions/traceFilters.ts b/frontend/src/store/actions/traceFilters.ts index 7922710bc6..79b634eb11 100644 --- a/frontend/src/store/actions/traceFilters.ts +++ b/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 diff --git a/frontend/src/store/reducers/traceFilters.ts b/frontend/src/store/reducers/traceFilters.ts index 32aa198f1f..e349f14f58 100644 --- a/frontend/src/store/reducers/traceFilters.ts +++ b/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) => {