From fb1ade15b550b9777d93f3847293806f76e66b71 Mon Sep 17 00:00:00 2001
From: Himanshu DIxit <himanshu@signoz.io>
Date: Tue, 23 Feb 2021 16:46:58 +0530
Subject: [PATCH] Fix final changes

---
 frontend/gulpfile.js                          |  2 +-
 frontend/src/assets/index.css                 |  7 +++++++
 frontend/src/components/Signup.tsx            |  2 +-
 .../src/components/metrics/ErrorRateChart.tsx |  2 +-
 .../src/components/traces/TraceFilter.tsx     | 20 +++++++++++++++++--
 frontend/src/components/traces/TraceGraph.tsx | 18 +++++++++--------
 frontend/src/index.tsx                        |  2 +-
 7 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js
index 1100d84c3d..79212c4968 100644
--- a/frontend/gulpfile.js
+++ b/frontend/gulpfile.js
@@ -3,7 +3,7 @@ const gulpless = require("gulp-less");
 const postcss = require("gulp-postcss");
 const debug = require("gulp-debug");
 var csso = require("gulp-csso");
-const autoprefixer = require("autoprefixer");
+const autteoprefixer = require("autoprefixer");
 const NpmImportPlugin = require("less-plugin-npm-import");
 
 gulp.task("less", function () {
diff --git a/frontend/src/assets/index.css b/frontend/src/assets/index.css
index cf0be7ff6f..428b017013 100644
--- a/frontend/src/assets/index.css
+++ b/frontend/src/assets/index.css
@@ -19,4 +19,11 @@
 	padding: 33px 23px;
 	max-width: 800px;
 	margin-top: 40px;
+}
+
+#chart svg{
+	width: 100%;
+}
+#chart{
+	width: 100%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/Signup.tsx b/frontend/src/components/Signup.tsx
index 19d1d51624..c8e7d6593e 100644
--- a/frontend/src/components/Signup.tsx
+++ b/frontend/src/components/Signup.tsx
@@ -133,7 +133,7 @@ const Signup = (props: SignUpProps) => {
 							/>
 						</div>
 
-						<div className="text-center space-top">
+						<div className="text-center space-top" style={{marginTop: 12}}>
 							<Button
 								type="primary"
 								htmlType="submit"
diff --git a/frontend/src/components/metrics/ErrorRateChart.tsx b/frontend/src/components/metrics/ErrorRateChart.tsx
index edf2476d65..4feedacc86 100644
--- a/frontend/src/components/metrics/ErrorRateChart.tsx
+++ b/frontend/src/components/metrics/ErrorRateChart.tsx
@@ -90,7 +90,7 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 
 		title: {
 			display: true,
-			text: "Error per sec",
+			text: "",
 			fontSize: 20,
 			position: "top",
 			padding: 2,
diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/components/traces/TraceFilter.tsx
index 4b46a48da3..d62af56cdb 100644
--- a/frontend/src/components/traces/TraceFilter.tsx
+++ b/frontend/src/components/traces/TraceFilter.tsx
@@ -46,6 +46,16 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const location = useLocation();
 	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 
+	useEffect(()=>{
+		console.log("Mera")
+		handleApplyFilterForm({
+			service: "",
+			tags: [],
+			operation: "",
+			latency: { min: "", max: "" },
+		})
+	},[])
+
 	useEffect(() => {
 		metricsAPI
 			.get<string[]>("services/list")
@@ -285,8 +295,14 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	};
 
 	useEffect(()=>{
-
-		return handleApplyFilterForm({})
+		return ()=>{
+			props.updateTraceFilters({
+				service: "",
+				operation: "",
+				tags: [],
+				latency: { min: "", max: "" },
+			});
+		}
 	},[])
 
 	return (
diff --git a/frontend/src/components/traces/TraceGraph.tsx b/frontend/src/components/traces/TraceGraph.tsx
index eec5ad932a..d633b8a51f 100644
--- a/frontend/src/components/traces/TraceGraph.tsx
+++ b/frontend/src/components/traces/TraceGraph.tsx
@@ -55,7 +55,6 @@ const _TraceGraph = (props: TraceGraphProps) => {
 	};
 
 	const chart = flamegraph()
-		.width(640)
 		.cellHeight(18)
 		.transitionDuration(500)
 		.inverted(true)
@@ -77,13 +76,16 @@ const _TraceGraph = (props: TraceGraphProps) => {
 			{/*</Col>*/}
 			<Col md={24} sm={24}>
 				{/* <Card style={{ width: 640 }}> */}
-				<Space direction="vertical" size="middle">
-					<Card bodyStyle={{ padding: 80 }} style={{ height: 320 }}>
-						<div>Trace Graph component ID is {params.id} </div>
-						<Button type="primary" onClick={setResetZoom.bind(this, true)}>
-							Reset Zoom
-						</Button>
-						<div id="chart" style={{ fontSize: 12, marginTop: 20 }}></div>
+				<Space direction="vertical" size="middle" style={{width: '100%'}}>
+					<Card bodyStyle={{ padding: 80 }} style={{ height: 320,
+						 }}>
+						<div style={{display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center'}}>
+							<div style={{textAlign: "center"}}>Trace Graph component ID is {params.id} </div>
+							<Button type="primary" onClick={setResetZoom.bind(this, true)} style={{width: 160}}>
+								Reset Zoom
+							</Button>
+							<div id="chart" style={{ fontSize: 12, marginTop: 20 }}></div>
+						</div>
 					</Card>
 
 					<SelectedSpanDetails clickedSpanTags={clickedSpanTags} />
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index fd1faa9ea8..629469570f 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -9,7 +9,7 @@ import { Auth0Provider } from "@auth0/auth0-react";
 
 import AppWrapper from "Src/components/AppWrapper";
 import "Src/assets/index.css";
-import { reducers } from "./reducers";
+import { reducers } from "Src/reducers";
 import { BrowserRouter as Router } from "react-router-dom";
 import { AUTH0_CLIENT_ID, AUTH0_DOMAIN } from "./constants/env";
 // import Signup from './components/Signup';