Fix SIG-21

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}

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),

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,12 +237,15 @@ class LatencyLineChart extends React.Component<LatencyLineChartProps> {
 		return (
 			<div>
 				{this.GraphTracePopUp()}
+				<div>
+					<div style={{textAlign: "center"}}>Application latency in ms</div>
 					<ChartJSLine
 						ref={this.chartRef}
 						data={data_chartJS}
 						options={this.options_charts}
 					/>
 				</div>
+			</div>
 		);
 	}
 }

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}

frontend/src/components/traces/TraceFilter.tsx

@@ -284,6 +284,11 @@ const _TraceFilter = (props: TraceFilterProps) => {
 		});
 	};
 
+	useEffect(()=>{
+
+		return handleApplyFilterForm({})
+	},[])
+
 	return (
 		<div>
 			<div>Filter Traces</div>

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