feat: Metrics (#281)

* refactor: store is updated

* temp

* fix: eslint error is fixed

* fix:eslint linting error is updated

* chore: react-grid-layout is added

* chore: linting changes are updated

* chore: linting changes are updated

* chore: @types/node is moved to devDependecies and @types/react-grid-layout is added

* chore: tsconfig is updated

* chore: updateUrl function is updated

* feat: All Dashboard is updated

* feat: All Dashboard page is updated

* feat: New Dashboard is added

* feat: App Layout is updated

* feat: Add Tags is updated

* chore: uuid package is added

* chore: AppRoutes is updated

* chore: UI components are updated

* chore: baseUrl is added in the apiUrl and removed from other api request

* chore: commonApi Response is updated

* chore: ErrorResponse handler is updated

* chore: useFetch hook is made

* chore: axios instance is updated

* chore:some of the changes are updated

* chore: list of all dashboard types is updated

* chore: logic is updated to the global state

* chore: all dashboard data is fetched from the global state

* chore: unnessary prop is removed

* chore: changes are updated

* chore: getAll and create is updated

* chore: getDashboard is updated

* chore: isEditMode is moved to the global state

* chore: get,getAll is updated

* chore: update title,tags,description is now fixed

* chore: new widget is updated

* chore: graph is updated

* chore: input component accept input props

* chore: name of the dashboard is updated

* chore: Widgets page in WIP

* chore: types for the error api is updated

* chore: getQuery data is updated

* chore: widget types is updated

* default widget is updated

* chore: getQuery is updated

* chore: Add Query is updated

* fix: creating new widget bug is resolved

* chore: widget type is updated

* chore: Query error is updated

* chore: query error and success state is handled

* chore: label of graph in WIP

* chore: legend input placeholder is updated

* chore: changes are updated

* chore: no data component is updated and error component is rendered along with the data

* chore: data fetching over the initial render is fixed over the initial mount

* chore: convertDateToAndPm is updated

* chore: x-axis label is now fixed

* chore: label is updated

* chore: labels name is updated

* chore: labels name is updated

* chore: labels color is updated

* chore: values are parsed in float

* chore: tags is updated

* chore: datasets type is updated

* chore: graph is updated

* chore: more eslint rules are updated

* chore: some of the linting changes and data is updated

* chore: chart.js version is updated

* chore: gitignore is updated

* chore: graph component is updated

* chore: apply functionality is updated

* chore: dashboard is now saved

* chore: getChartData is updated

* feat: Dashboard graph is reflected

* chore: some of the bugs is resolved

* fix: aspect ratio is made false

* chore: some small css are fixed

* chore: widgetId and graphType is preAdded if present in the search params

* chore: user is now able to change the time via global time and reflect new graph values

* chore: query is updated

* chore: onBlurHandler is updated

* fix: usage explorer is now fixed

* chore: bar element is updated

* chore: chartjs adapter is added

* chore: old instance for the charts are removed via re-chart

* chore: re-chart is removed

* chore: get chart data is updated

* chore: added the counter in the useEffect

* chore: history is added

* chore: some of the features are updated

* chore: history package is updated

* chore: AppRoutes is updated

* fix: some are components breaking while moving from BrowserRouter to Router

* chore: Dashboard icon is updated

* chore: Full screen component is updated

* stepSize (optional) is added in the widgets type

* fix: fetching query result is fixed

* update: start and end time function is updated

* fix: Alert color is updated

* update: Query fetching is updated

* fix: start and end time is fixed

* fix: chartjs data is compatable for larger data set and no ajax call for empty query is fixed

* fix: last 1 week selection is fixed

* fix: legends is added

* update: antd version is updated

* feat: value graph is updated

* feat: Title is added for the value graph

* fix: Full Screen view is updated with refresh functionality and alignment is updated to flex-end

* fix: Graph component is updated

* fix: metric graph are fixed

* feature: Delete widget functionality is updated

* fix: empty value bug is resolved

* fix: delete widget position is fixed

* fix: resize functionality is fixed

* fix: sumation of the query is fixed

* update: default legend is removed

* update: resize handlers is removed and service metric component is updated

* fix: legends is updated

* update: querySuccess reducer is updated

* Modal component is updated

* fix: ant-d tab css is updated of the tabs

* update: stringToHTML is made

* update: graph component is updated

* fix: several component in the metric and traces are updated

* wip: build error is fixed

* fix: metric section is fixed

* update: console.log are commented

* fix: onClick graph re-render is stopped

* fix: trace graph is updated

* fix: updated the min,max time for the value type graph

* getQueryMaxMin Time is updated

* fix: trace chart is updated

* fix: re-render is fixed

* fix: localstorage persistance is there

* update: if label is not present legend is not displayed

* fix: graph is changed while updated the global time

* fix: default title is updated while creation of the dashboard

* update: external database call tabs are made of same size

* fix: query graph max-min time is updated in the full screen mode

* fix: Request per sec graph is fixed

* fix: ErrorChart is fixed

Co-authored-by: Palash gupta <palashgdev@gmail.com>

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 yarn.lock
+package.json
 
 deploy/docker/environment_tiny/common_test
 frontend/node_modules

frontend/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
 		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
 		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:prettier/recommended',
 	],
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
@@ -18,7 +19,18 @@ module.exports = {
 		ecmaVersion: 12,
 		sourceType: 'module',
 	},
-	plugins: ['react', '@typescript-eslint', 'simple-import-sort'],
+	plugins: [
+		'react',
+		'@typescript-eslint',
+		'simple-import-sort',
+		'react-hooks',
+		'prettier',
+	],
+	settings: {
+		react: {
+			version: 'latest',
+		},
+	},
 	rules: {
 		'react/jsx-filename-extension': [
 			'error',
@@ -30,12 +42,21 @@ module.exports = {
 		'@typescript-eslint/explicit-function-return-type': 'error',
 		'@typescript-eslint/no-var-requires': 0,
 		'linebreak-style': ['error', 'unix'],
-		indent: ['error', 'tab'],
-		quotes: ['error', 'single'],
-		semi: ['error', 'always'],
 
 		// simple sort error
 		'simple-import-sort/imports': 'error',
 		'simple-import-sort/exports': 'error',
+
+		// hooks
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'warn',
+
+		'prettier/prettier': [
+			'error',
+			{},
+			{
+				usePrettierrc: true,
+			},
+		],
 	},
 };

frontend/.prettierrc.json

@@ -3,5 +3,6 @@
 	"useTabs": true,
 	"tabWidth": 1,
 	"singleQuote": true,
-	"jsxSingleQuote": false
+	"jsxSingleQuote": false,
+	"semi": true
 }

frontend/cypress/CustomFunctions/Login.ts

@@ -1,38 +1,38 @@
-import ROUTES from "constants/routes";
+import ROUTES from 'constants/routes';
 
 const Login = ({ email, name }: LoginProps): void => {
-	const emailInput = cy.findByPlaceholderText("mike@netflix.com");
+	const emailInput = cy.findByPlaceholderText('mike@netflix.com');
 
 	emailInput.then((emailInput) => {
 		const element = emailInput[0];
 		// element is present
 		expect(element).not.undefined;
-		expect(element.nodeName).to.be.equal("INPUT");
+		expect(element.nodeName).to.be.equal('INPUT');
 	});
 	emailInput.type(email).then((inputElements) => {
 		const inputElement = inputElements[0];
-		const inputValue = inputElement.getAttribute("value");
+		const inputValue = inputElement.getAttribute('value');
 		expect(inputValue).to.be.equals(email);
 	});
 
-	const firstNameInput = cy.findByPlaceholderText("Mike");
+	const firstNameInput = cy.findByPlaceholderText('Mike');
 	firstNameInput.then((firstNameInput) => {
 		const element = firstNameInput[0];
 		// element is present
 		expect(element).not.undefined;
-		expect(element.nodeName).to.be.equal("INPUT");
+		expect(element.nodeName).to.be.equal('INPUT');
 	});
 
 	firstNameInput.type(name).then((inputElements) => {
 		const inputElement = inputElements[0];
-		const inputValue = inputElement.getAttribute("value");
+		const inputValue = inputElement.getAttribute('value');
 		expect(inputValue).to.be.equals(name);
 	});
 
-	const gettingStartedButton = cy.get("button");
+	const gettingStartedButton = cy.get('button');
 	gettingStartedButton.click();
 
-	cy.location("pathname").then((e) => {
+	cy.location('pathname').then((e) => {
 		expect(e).to.be.equal(ROUTES.APPLICATION);
 	});
 };

frontend/cypress/integration/appLayout/index.spec.ts

@@ -1,20 +1,20 @@
 /// <reference types="cypress" />
-import ROUTES from "constants/routes";
+import ROUTES from 'constants/routes';
 
-describe("App Layout", () => {
+describe('App Layout', () => {
 	beforeEach(() => {
-		cy.visit(Cypress.env("baseUrl"));
+		cy.visit(Cypress.env('baseUrl'));
 	});
 
-	it("Check the user is in Logged Out State", async () => {
-		cy.location("pathname").then((e) => {
+	it('Check the user is in Logged Out State', async () => {
+		cy.location('pathname').then((e) => {
 			expect(e).to.be.equal(ROUTES.SIGN_UP);
 		});
 	});
 
-	it("Logged In State", () => {
-		const testEmail = "test@test.com";
-		const firstName = "Test";
+	it('Logged In State', () => {
+		const testEmail = 'test@test.com';
+		const firstName = 'Test';
 
 		cy.login({
 			email: testEmail,

frontend/cypress/integration/metrics/index.spec.ts

@@ -1,27 +1,28 @@
 /// <reference types="cypress" />
-import defaultApps from "../../fixtures/defaultApp.json";
-import convertToNanoSecondsToSecond from "lib/convertToNanoSecondsToSecond";
+import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
 
-describe("Metrics", () => {
+import defaultApps from '../../fixtures/defaultApp.json';
+
+describe('Metrics', () => {
 	beforeEach(() => {
-		cy.visit(Cypress.env("baseUrl"));
+		cy.visit(Cypress.env('baseUrl'));
 
-		const testEmail = "test@test.com";
-		const firstName = "Test";
+		const testEmail = 'test@test.com';
+		const firstName = 'Test';
 		cy
-			.intercept("GET", "/api/v1//services?start*", { fixture: "defaultApp.json" })
-			.as("defaultApps");
+			.intercept('GET', '/api/v1//services?start*', { fixture: 'defaultApp.json' })
+			.as('defaultApps');
 
 		cy.login({
 			email: testEmail,
 			name: firstName,
 		});
 	});
 
-	it("Default Apps", () => {
-		cy.wait("@defaultApps");
+	it('Default Apps', () => {
+		cy.wait('@defaultApps');
 
-		cy.get("tbody").then((elements) => {
+		cy.get('tbody').then((elements) => {
 			const trElements = elements.children();
 			expect(trElements.length).to.be.equal(defaultApps.length);
 

frontend/cypress/support/commands.ts

@@ -1,4 +1,5 @@
 import '@testing-library/cypress/add-commands';
+
 import Login, { LoginProps } from '../CustomFunctions/Login';
 
 Cypress.Commands.add('login', Login);

frontend/package.json

@@ -26,18 +26,16 @@
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
-		"@types/chart.js": "^2.9.28",
 		"@types/d3": "^6.2.0",
 		"@types/jest": "^26.0.15",
-		"@types/node": "^14.14.7",
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^16.9.9",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-router-dom": "^5.1.6",
 		"@types/redux": "^3.6.0",
 		"@types/styled-components": "^5.1.4",
 		"@types/vis": "^4.21.21",
-		"antd": "^4.8.0",
+		"antd": "^4.16.13",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^26.6.0",
@@ -48,7 +46,8 @@
 		"bfj": "^7.0.2",
 		"camelcase": "^6.1.0",
 		"case-sensitive-paths-webpack-plugin": "2.3.0",
-		"chart.js": "^2.9.4",
+		"chart.js": "^3.4.0",
+		"chartjs-adapter-date-fns": "^2.0.0",
 		"css-loader": "4.3.0",
 		"d3": "^6.2.0",
 		"d3-flame-graph": "^3.1.1",
@@ -64,6 +63,7 @@
 		"eslint-webpack-plugin": "^2.1.0",
 		"file-loader": "6.1.1",
 		"fs-extra": "^9.0.1",
+		"history": "4.10.1",
 		"html-webpack-plugin": "5.1.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "26.6.0",
@@ -78,13 +78,13 @@
 		"prop-types": "^15.6.2",
 		"react": "17.0.0",
 		"react-app-polyfill": "^2.0.0",
-		"react-chartjs-2": "^2.11.1",
 		"react-chips": "^0.8.0",
 		"react-css-theme-switcher": "^0.1.6",
 		"react-dev-utils": "^11.0.0",
 		"react-dom": "17.0.0",
 		"react-force-graph": "^1.41.0",
 		"react-graph-vis": "^1.0.5",
+		"react-grid-layout": "^1.2.5",
 		"react-modal": "^3.12.1",
 		"react-redux": "^7.2.2",
 		"react-refresh": "^0.8.3",
@@ -103,6 +103,7 @@
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
 		"url-loader": "4.1.1",
+		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "^5.23.0",
 		"webpack-dev-server": "^3.11.2",
@@ -129,7 +130,11 @@
 		"@babel/preset-react": "^7.12.13",
 		"@babel/preset-typescript": "^7.12.17",
 		"@testing-library/cypress": "^8.0.0",
+		"@types/d3-tip": "^3.5.5",
 		"@types/lodash-es": "^4.17.4",
+		"@types/node": "^14.17.12",
+		"@types/react-grid-layout": "^1.1.2",
+		"@types/uuid": "^8.3.1",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
 		"@typescript-eslint/parser": "^4.28.2",
 		"autoprefixer": "^9.0.0",
@@ -138,9 +143,11 @@
 		"copy-webpack-plugin": "^7.0.0",
 		"cypress": "^8.3.0",
 		"eslint": "^7.30.0",
+		"eslint-config-prettier": "^8.3.0",
 		"eslint-config-standard": "^16.0.3",
 		"eslint-plugin-import": "^2.23.4",
 		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-promise": "^5.1.0",
 		"eslint-plugin-react": "^7.24.0",
 		"eslint-plugin-simple-import-sort": "^7.0.0",

frontend/src/AppRoutes/index.tsx

@@ -2,41 +2,44 @@ import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { IS_LOGGED_IN } from 'constants/auth';
 import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import AppLayout from 'modules/AppLayout';
 import { RouteProvider } from 'modules/RouteProvider';
 import React, { Suspense } from 'react';
-import { BrowserRouter, Redirect,Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Router, Switch } from 'react-router-dom';
 
 import routes from './routes';
 
-const App = () => (
-	<BrowserRouter basename="/">
+const App = (): JSX.Element => (
+	<Router history={history}>
 		<RouteProvider>
 			<AppLayout>
 				<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
 					<Switch>
-						{routes.map(({ path, component, exact }) => {
-							return <Route exact={exact} path={path} component={component} />;
+						{routes.map(({ path, component, exact }, index) => {
+							return (
+								<Route key={index} exact={exact} path={path} component={component} />
+							);
 						})}
 
 						{/* This logic should be moved to app layout */}
 						<Route
 							path="/"
 							exact
-							render={() => {
+							render={(): JSX.Element => {
 								return localStorage.getItem(IS_LOGGED_IN) === 'yes' ? (
 									<Redirect to={ROUTES.APPLICATION} />
 								) : (
 									<Redirect to={ROUTES.SIGN_UP} />
 								);
 							}}
 						/>
-						<Route path="*" component={NotFound} />
+						<Route path="*" exact component={NotFound} />
 					</Switch>
 				</Suspense>
 			</AppLayout>
 		</RouteProvider>
-	</BrowserRouter>
+	</Router>
 );
 
 export default App;

frontend/src/pages.ts → frontend/src/AppRoutes/pageComponents.ts

@@ -1,4 +1,4 @@
-import Loadable from './components/Loadable';
+import Loadable from 'components/Loadable';
 
 export const ServiceMetricsPage = Loadable(
 	() =>
@@ -59,3 +59,16 @@ export const InstrumentationPage = Loadable(
 			/* webpackChunkName: "InstrumentationPage" */ 'modules/add-instrumentation/instrumentationPage'
 		),
 );
+
+export const DashboardPage = Loadable(
+	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/Dashboard'),
+);
+
+export const NewDashboardPage = Loadable(
+	() => import(/* webpackChunkName: "New DashboardPage" */ 'pages/NewDashboard'),
+);
+
+export const DashboardWidget = Loadable(
+	() =>
+		import(/* webpackChunkName: "New DashboardPage" */ 'pages/DashboardWidget'),
+);

frontend/src/AppRoutes/routes.ts

@@ -1,6 +1,11 @@
 import ROUTES from 'constants/routes';
+import DashboardWidget from 'pages/DashboardWidget';
+import { RouteProps } from 'react-router-dom';
+
 import {
+	DashboardPage,
 	InstrumentationPage,
+	NewDashboardPage,
 	ServiceMapPage,
 	ServiceMetricsPage,
 	ServicesTablePage,
@@ -9,8 +14,7 @@ import {
 	TraceDetailPage,
 	TraceGraphPage,
 	UsageExplorerPage,
-} from 'pages';
-import { RouteProps } from 'react-router-dom';
+} from './pageComponents';
 
 const routes: AppRoutes[] = [
 	{
@@ -58,6 +62,21 @@ const routes: AppRoutes[] = [
 		exact: true,
 		component: TraceDetailPage,
 	},
+	{
+		path: ROUTES.ALL_DASHBOARD,
+		exact: true,
+		component: DashboardPage,
+	},
+	{
+		path: ROUTES.DASHBOARD,
+		exact: true,
+		component: NewDashboardPage,
+	},
+	{
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+		component: DashboardWidget,
+	},
 ];
 
 interface AppRoutes {