Merge pull request #48 from SigNoz/time-fixes-on-trace

Timestamp related fixes on trace

frontend/src/components/metrics/ServiceMetrics.tsx

@@ -38,14 +38,14 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 	}, [props.globalTime, servicename]);
 
 	const onTracePopupClick = (timestamp: number) => {
-		const tMinus15Min = timestamp / 1000000 - 15 * 60 * 1000;
 		const currentTime = timestamp / 1000000;
+		const tPlusOne = timestamp / 1000000 + 1 * 60 * 1000;
 
-		props.updateTimeInterval("custom", [tMinus15Min, currentTime]); // updateTimeInterval takes second range in ms -- give -5 min to selected time,
+		props.updateTimeInterval("custom", [currentTime, tPlusOne]); // updateTimeInterval takes second range in ms -- give -5 min to selected time,
 
 		const urlParams = new URLSearchParams();
-		urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime, tMinus15Min.toString());
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime, currentTime.toString());
-		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, currentTime.toString());
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
 		if (servicename) {
 			urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
 		}

frontend/src/components/traces/FilterStateDisplay.tsx

@@ -1,10 +1,17 @@
 import React from "react";
-import { Card, Tag } from "antd";
+import { Card, Tag as AntTag } from "antd";
 import { connect } from "react-redux";
-
+import styled from "styled-components";
 import { StoreState } from "../../reducers";
 import { TagItem, TraceFilters, updateTraceFilters } from "../../actions";
 
+const Tag = styled(AntTag)`
+	.anticon {
+		position: relative;
+		top: -3px;
+	}
+`;
+
 interface FilterStateDisplayProps {
 	traceFilters: TraceFilters;
 	updateTraceFilters: Function;

frontend/src/components/traces/TraceCustomVisualizations.tsx

@@ -151,7 +151,6 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => {
 		<Card>
 			{/* <Space direction="vertical"> */}
 			<div>Custom Visualizations</div>
-
 			<Form
 				form={form}
 				onFinish={handleFinish}

frontend/src/components/traces/TraceFilter.tsx

@@ -46,14 +46,14 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const location = useLocation();
 	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 
-	useEffect(()=>{
+	useEffect(() => {
 		handleApplyFilterForm({
 			service: "",
 			tags: [],
 			operation: "",
 			latency: { min: "", max: "" },
-		})
+		});
-	},[])
+	}, []);
 
 	useEffect(() => {
 		metricsAPI
@@ -287,21 +287,21 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			operation: values.operation,
 			latency: {
 				max: "",
-				min: ""
+				min: "",
 			},
 		});
 	};
 
-	useEffect(()=>{
+	useEffect(() => {
-		return ()=>{
+		return () => {
 			props.updateTraceFilters({
 				service: "",
 				operation: "",
 				tags: [],
 				latency: { min: "", max: "" },
 			});
-		}
+		};
-	},[])
+	}, []);
 
 	return (
 		<div>

frontend/src/components/traces/TraceList.tsx

@@ -6,7 +6,12 @@ import { Space, Table } from "antd";
 import { traceResponseNew, fetchTraces, pushDStree } from "../../actions";
 import { StoreState } from "../../reducers";
 import { isOnboardingSkipped } from "../../utils/app";
+import moment from "moment";
+import styled from "styled-components";
 
+const TraceHeader = styled.div`
+	margin: 16px 0;
+`;
 interface TraceListProps {
 	traces: traceResponseNew;
 	fetchTraces: Function;
@@ -41,12 +46,12 @@ const _TraceList = (props: TraceListProps) => {
 
 	const columns: any = [
 		{
-			title: "Start Time (UTC Time)",
+			title: "Start Time",
 			dataIndex: "startTime",
 			key: "startTime",
 			sorter: (a: any, b: any) => a.startTime - b.startTime,
 			sortDirections: ["descend", "ascend"],
-			render: (value: number) => new Date(Math.round(value)).toUTCString(),
+			render: (value: number) => moment(value).format("YYYY-MM-DD hh:mm:ss"),
 
 			// new Date() assumes input in milliseconds. Start Time stamp returned by druid api for span list is in ms
 		},
@@ -130,7 +135,7 @@ const _TraceList = (props: TraceListProps) => {
 
 	return (
 		<div>
-			<div>List of traces with spanID</div>
+			<TraceHeader>List of traces with spanID</TraceHeader>
 			<div>{renderTraces()}</div>
 		</div>
 	);

frontend/webpack.config.js

@@ -10,6 +10,8 @@ module.exports = {
 		historyApiFallback: true,
 		publicPath: "/",
 		transportMode: "ws",
+		open: true,
+		openPage: "application",
 		contentBase: [resolve(__dirname, "./public")],
 		hot: true,
 		liveReload: false,