From 3a79778ce4c19a228f4d121f89b0fb702f5fb3f2 Mon Sep 17 00:00:00 2001
From: Himanshu DIxit <himanshu@signoz.io>
Date: Mon, 22 Feb 2021 04:44:34 +0530
Subject: [PATCH] Fix SIG-21

---
 .../src/components/metrics/ErrorRateChart.tsx     |  3 ++-
 .../components/metrics/GenericVisualization.tsx   |  2 +-
 .../src/components/metrics/LatencyLineChart.tsx   | 15 +++++++++------
 .../src/components/metrics/RequestRateChart.tsx   |  3 ++-
 frontend/src/components/traces/TraceFilter.tsx    |  5 +++++
 frontend/src/components/traces/TraceGraph.tsx     |  3 +--
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/metrics/ErrorRateChart.tsx b/frontend/src/components/metrics/ErrorRateChart.tsx
index 2e38aedbe5..edf2476d65 100644
--- a/frontend/src/components/metrics/ErrorRateChart.tsx
+++ b/frontend/src/components/metrics/ErrorRateChart.tsx
@@ -202,7 +202,7 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 				labels: ndata.map((s) => new Date(s.timestamp / 1000000)), // converting from nano second to mili second
 				datasets: [
 					{
-						label: "Errors per sec",
+						label: "",
 						data: ndata.map((s) => s.errorRate),
 						pointRadius: 0.5,
 						borderColor: "rgba(227, 74, 51,1)", // Can also add transparency in border color
@@ -215,6 +215,7 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 		return (
 			<div>
 				{this.GraphTracePopUp()}
+				<div style={{textAlign: "center"}}>Errors per sec</div>
 				<ChartJSLine
 					ref={this.chartRef}
 					data={data_chartJS}
diff --git a/frontend/src/components/metrics/GenericVisualization.tsx b/frontend/src/components/metrics/GenericVisualization.tsx
index f69da15a56..86a0350f92 100644
--- a/frontend/src/components/metrics/GenericVisualization.tsx
+++ b/frontend/src/components/metrics/GenericVisualization.tsx
@@ -15,7 +15,7 @@ interface GenericVisualizationsProps {
 
 const GenericVisualizations = (props: GenericVisualizationsProps) => {
 	const data = {
-		labels: props.data.map((s) => new Date(s.timestamp / 1000000)),
+		labels: props.data !== undefined && props.data.map((s) => new Date(s.timestamp / 1000000)),
 		datasets: [
 			{
 				data: props.data.map((s) => s.value),
diff --git a/frontend/src/components/metrics/LatencyLineChart.tsx b/frontend/src/components/metrics/LatencyLineChart.tsx
index 86886dbb42..7456487cee 100644
--- a/frontend/src/components/metrics/LatencyLineChart.tsx
+++ b/frontend/src/components/metrics/LatencyLineChart.tsx
@@ -96,7 +96,7 @@ class LatencyLineChart extends React.Component<LatencyLineChartProps> {
 
 		title: {
 			display: true,
-			text: "Application Latency in ms",
+			text: "",
 			fontSize: 20,
 			position: "top",
 			padding: 8,
@@ -237,11 +237,14 @@ class LatencyLineChart extends React.Component<LatencyLineChartProps> {
 		return (
 			<div>
 				{this.GraphTracePopUp()}
-				<ChartJSLine
-					ref={this.chartRef}
-					data={data_chartJS}
-					options={this.options_charts}
-				/>
+				<div>
+					<div style={{textAlign: "center"}}>Application latency in ms</div>
+					<ChartJSLine
+						ref={this.chartRef}
+						data={data_chartJS}
+						options={this.options_charts}
+					/>
+				</div>
 			</div>
 		);
 	}
diff --git a/frontend/src/components/metrics/RequestRateChart.tsx b/frontend/src/components/metrics/RequestRateChart.tsx
index 985a47c818..6f2bb079f5 100644
--- a/frontend/src/components/metrics/RequestRateChart.tsx
+++ b/frontend/src/components/metrics/RequestRateChart.tsx
@@ -88,7 +88,7 @@ class RequestRateChart extends React.Component<RequestRateChartProps> {
 
 		title: {
 			display: true,
-			text: "Request per sec",
+			text: "",
 			fontSize: 20,
 			position: "top",
 			padding: 2,
@@ -207,6 +207,7 @@ class RequestRateChart extends React.Component<RequestRateChartProps> {
 		return (
 			<div>
 				{this.GraphTracePopUp()}
+				<div style={{textAlign: "center"}}>Request per sec</div>
 				<ChartJSLine
 					ref={this.chartRef}
 					data={data_chartJS}
diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/components/traces/TraceFilter.tsx
index 5f6798ae99..4b46a48da3 100644
--- a/frontend/src/components/traces/TraceFilter.tsx
+++ b/frontend/src/components/traces/TraceFilter.tsx
@@ -284,6 +284,11 @@ const _TraceFilter = (props: TraceFilterProps) => {
 		});
 	};
 
+	useEffect(()=>{
+
+		return handleApplyFilterForm({})
+	},[])
+
 	return (
 		<div>
 			<div>Filter Traces</div>
diff --git a/frontend/src/components/traces/TraceGraph.tsx b/frontend/src/components/traces/TraceGraph.tsx
index a5950a70b3..eec5ad932a 100644
--- a/frontend/src/components/traces/TraceGraph.tsx
+++ b/frontend/src/components/traces/TraceGraph.tsx
@@ -68,8 +68,7 @@ const _TraceGraph = (props: TraceGraphProps) => {
 		// In that case it's doing step function sort of stuff thru computation.
 		// Source flamegraph.js line 557 and 573.
 		// .selfValue(true)
-		.onClick(onClick)
-		.title("Trace Flame graph");
+		.onClick(onClick);
 
 	return (
 		<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>