Fix final changes

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 () {

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

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"

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,

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 (

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

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';