diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index 78ce774500..777098951a 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/frontend/src/AppRoutes/index.tsx @@ -1,8 +1,7 @@ import NotFound from 'components/NotFound'; import Spinner from 'components/Spinner'; +import AppLayout from 'container/AppLayout'; import history from 'lib/history'; -import AppLayout from 'modules/AppLayout'; -import { RouteProvider } from 'modules/RouteProvider'; import React, { Suspense } from 'react'; import { Route, Router, Switch } from 'react-router-dom'; @@ -10,20 +9,18 @@ import routes from './routes'; const App = (): JSX.Element => ( - - - }> - - {routes.map(({ path, component, exact }, index) => { - return ( - - ); - })} - - - - - + + }> + + {routes.map(({ path, component, exact }, index) => { + return ( + + ); + })} + + + + ); diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts index 7a351c744b..84b92d6f15 100644 --- a/frontend/src/AppRoutes/pageComponents.ts +++ b/frontend/src/AppRoutes/pageComponents.ts @@ -1,9 +1,13 @@ import Loadable from 'components/Loadable'; +export const ServicesTablePage = Loadable( + () => import(/* webpackChunkName: "ServicesTablePage" */ 'pages/Metrics'), +); + export const ServiceMetricsPage = Loadable( () => import( - /* webpackChunkName: "ServiceMetricsPage" */ 'modules/Metrics/ServiceMetricsDef' + /* webpackChunkName: "ServiceMetricsPage" */ 'pages/MetricApplication' ), ); @@ -35,13 +39,6 @@ export const UsageExplorerPage = Loadable( ), ); -export const ServicesTablePage = Loadable( - () => - import( - /* webpackChunkName: "ServicesTablePage" */ 'modules/Metrics/ServicesTableDef' - ), -); - export const SignupPage = Loadable( () => import(/* webpackChunkName: "SignupPage" */ 'pages/SignUp'), ); diff --git a/frontend/src/api/browser/localstorage/get.ts b/frontend/src/api/browser/localstorage/get.ts new file mode 100644 index 0000000000..675d6995c4 --- /dev/null +++ b/frontend/src/api/browser/localstorage/get.ts @@ -0,0 +1,5 @@ +const get = (key: string): string | null => { + return localStorage.getItem(key); +}; + +export default get; diff --git a/frontend/src/api/browser/localstorage/remove.ts b/frontend/src/api/browser/localstorage/remove.ts new file mode 100644 index 0000000000..6e0546ff1e --- /dev/null +++ b/frontend/src/api/browser/localstorage/remove.ts @@ -0,0 +1,5 @@ +const remove = (key: string): void => { + window.localStorage.removeItem(key); +}; + +export default remove; diff --git a/frontend/src/api/browser/localstorage/set.ts b/frontend/src/api/browser/localstorage/set.ts new file mode 100644 index 0000000000..b0910a0c96 --- /dev/null +++ b/frontend/src/api/browser/localstorage/set.ts @@ -0,0 +1,5 @@ +const set = (key: string, value: string): void => { + localStorage.setItem(key, value); +}; + +export default set; diff --git a/frontend/src/api/metrics/getDBOverView.ts b/frontend/src/api/metrics/getDBOverView.ts new file mode 100644 index 0000000000..7afd56d75d --- /dev/null +++ b/frontend/src/api/metrics/getDBOverView.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps, Props } from 'types/api/metrics/getDBOverview'; + +const getDBOverView = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/service/dbOverview?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getDBOverView; diff --git a/frontend/src/api/metrics/getExternalAverageDuration.ts b/frontend/src/api/metrics/getExternalAverageDuration.ts new file mode 100644 index 0000000000..51be375d94 --- /dev/null +++ b/frontend/src/api/metrics/getExternalAverageDuration.ts @@ -0,0 +1,29 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { + PayloadProps, + Props, +} from 'types/api/metrics/getExternalAverageDuration'; + +const getExternalAverageDuration = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/service/externalAvgDuration?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getExternalAverageDuration; diff --git a/frontend/src/api/metrics/getExternalError.ts b/frontend/src/api/metrics/getExternalError.ts new file mode 100644 index 0000000000..3587639bb9 --- /dev/null +++ b/frontend/src/api/metrics/getExternalError.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps, Props } from 'types/api/metrics/getExternalError'; + +const getExternalError = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/service/externalErrors?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getExternalError; diff --git a/frontend/src/api/metrics/getExternalService.ts b/frontend/src/api/metrics/getExternalService.ts new file mode 100644 index 0000000000..de9bf65173 --- /dev/null +++ b/frontend/src/api/metrics/getExternalService.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps, Props } from 'types/api/metrics/getExternalService'; + +const getExternalService = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/service/external?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getExternalService; diff --git a/frontend/src/api/metrics/getService.ts b/frontend/src/api/metrics/getService.ts new file mode 100644 index 0000000000..29909b2905 --- /dev/null +++ b/frontend/src/api/metrics/getService.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps, Props } from 'types/api/metrics/getService'; + +const getService = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/services?&start=${props.start}&end=${props.end}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getService; diff --git a/frontend/src/api/metrics/getServiceOverview.ts b/frontend/src/api/metrics/getServiceOverview.ts new file mode 100644 index 0000000000..3ceb794e0e --- /dev/null +++ b/frontend/src/api/metrics/getServiceOverview.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps, Props } from 'types/api/metrics/getServiceOverview'; + +const getServiceOverview = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/service/overview?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getServiceOverview; diff --git a/frontend/src/api/metrics/getTopEndPoints.ts b/frontend/src/api/metrics/getTopEndPoints.ts new file mode 100644 index 0000000000..a2973d1866 --- /dev/null +++ b/frontend/src/api/metrics/getTopEndPoints.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps, Props } from 'types/api/metrics/getTopEndPoints'; + +const getTopEndPoints = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.get( + `/service/top_endpoints?&start=${props.start}&end=${props.end}&service=${props.service}`, + ); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getTopEndPoints; diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx index ee1fcce187..a7a901bc06 100644 --- a/frontend/src/components/Graph/index.tsx +++ b/frontend/src/components/Graph/index.tsx @@ -1,8 +1,11 @@ import { + ActiveElement, BarController, BarElement, CategoryScale, Chart, + ChartData, + ChartEvent, ChartOptions, ChartType, Decimation, @@ -13,7 +16,6 @@ import { LineController, LineElement, PointElement, - ScaleOptions, SubTitle, TimeScale, TimeSeriesScale, @@ -53,8 +55,6 @@ const Graph = ({ type, title, isStacked, - label, - xAxisType, onClickHandler, }: GraphProps): JSX.Element => { const { isDarkMode } = useSelector((state) => state.app); @@ -97,25 +97,18 @@ const Graph = ({ legend: { // just making sure that label is present display: !( - data.datasets.find((e) => e.label !== undefined) === undefined + data.datasets.find((e) => { + if (e.label?.length === 0) { + return false; + } + return e.label !== undefined; + }) === undefined ), labels: { usePointStyle: true, pointStyle: 'circle', }, position: 'bottom', - // labels: { - // generateLabels: (chart: Chart): LegendItem[] => { - // return (data.datasets || []).map((e, index) => { - // return { - // text: e.label || '', - // datasetIndex: index, - // }; - // }); - // }, - // pointStyle: 'circle', - // usePointStyle: true, - // }, }, }, layout: { @@ -123,16 +116,17 @@ const Graph = ({ }, scales: { x: { - animate: false, grid: { display: true, color: getGridColor(), }, - labels: label, adapters: { date: chartjsAdapter, }, - type: xAxisType, + time: { + unit: 'minute', + }, + type: 'timeseries', }, y: { display: true, @@ -151,77 +145,26 @@ const Graph = ({ cubicInterpolationMode: 'monotone', }, }, - onClick: onClickHandler, + onClick: (event, element, chart) => { + if (onClickHandler) { + onClickHandler(event, element, chart, data); + } + }, }; lineChartRef.current = new Chart(chartRef.current, { type: type, data: data, options, - // plugins: [ - // { - // id: 'htmlLegendPlugin', - // afterUpdate: (chart: Chart): void => { - // if ( - // chart && - // chart.options && - // chart.options.plugins && - // chart.options.plugins.legend && - // chart.options.plugins.legend.labels && - // chart.options.plugins.legend.labels.generateLabels - // ) { - // const labels = chart.options.plugins?.legend?.labels?.generateLabels( - // chart, - // ); - - // const id = 'htmlLegend'; - - // const response = document.getElementById(id); - - // if (labels && response && response?.childNodes.length === 0) { - // const labelComponent = labels.map((e, index) => { - // return { - // element: Legends({ - // text: e.text, - // color: colors[index] || 'white', - // }), - // dataIndex: e.datasetIndex, - // }; - // }); - - // labelComponent.map((e) => { - // const el = stringToHTML(e.element); - - // if (el) { - // el.addEventListener('click', () => { - // chart.setDatasetVisibility( - // e.dataIndex, - // !chart.isDatasetVisible(e.dataIndex), - // ); - // chart.update(); - // }); - // response.append(el); - // } - // }); - // } - // } - // }, - // }, - // ], }); } - }, [chartRef, data, type, title, isStacked, label, xAxisType, getGridColor]); + }, [chartRef, data, type, title, isStacked, getGridColor, onClickHandler]); useEffect(() => { buildChart(); }, [buildChart]); - return ( - <> - - {/* */} - - ); + return ; }; interface GraphProps { @@ -230,8 +173,14 @@ interface GraphProps { title?: string; isStacked?: boolean; label?: string[]; - xAxisType?: ScaleOptions['type']; - onClickHandler?: ChartOptions['onClick']; + onClickHandler?: graphOnClickHandler; } +export type graphOnClickHandler = ( + event: ChartEvent, + elements: ActiveElement[], + chart: Chart, + data: ChartData, +) => void; + export default Graph; diff --git a/frontend/src/modules/AppLayout.tsx b/frontend/src/container/AppLayout/index.tsx similarity index 68% rename from frontend/src/modules/AppLayout.tsx rename to frontend/src/container/AppLayout/index.tsx index f2f707cf31..66cc5f1fc4 100644 --- a/frontend/src/modules/AppLayout.tsx +++ b/frontend/src/container/AppLayout/index.tsx @@ -1,39 +1,38 @@ import { Layout } from 'antd'; -import SideNav from 'components/SideNav'; +import get from 'api/browser/localstorage/get'; import ROUTES from 'constants/routes'; +import TopNav from 'container/Header'; +import SideNav from 'container/SideNav'; import history from 'lib/history'; import React, { ReactNode, useEffect } from 'react'; import { useSelector } from 'react-redux'; -import { useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; import AppReducer from 'types/reducer/app'; -import TopNav from './Nav/TopNav'; -import { useRoute } from './RouteProvider'; - const { Content, Footer } = Layout; - interface BaseLayoutProps { children: ReactNode; } const BaseLayout: React.FC = ({ children }) => { - const location = useLocation(); - const { dispatch } = useRoute(); - const currentYear = new Date().getFullYear(); const { isLoggedIn } = useSelector((state) => state.app); + const isLoggedInLocalStorage = get('isLoggedIn'); useEffect(() => { - dispatch({ type: 'ROUTE_IS_LOADED', payload: location.pathname }); - }, [location, dispatch]); + if (isLoggedIn && history.location.pathname === '/') { + history.push(ROUTES.APPLICATION); + } - useEffect(() => { - if (isLoggedIn) { + if (!isLoggedIn && isLoggedInLocalStorage !== null) { history.push(ROUTES.APPLICATION); } else { - history.push(ROUTES.SIGN_UP); + if (isLoggedInLocalStorage === null) { + history.push(ROUTES.SIGN_UP); + } } - }, [isLoggedIn]); + }, [isLoggedIn, isLoggedInLocalStorage]); + + const currentYear = new Date().getFullYear(); return ( diff --git a/frontend/src/container/AppLayout/styles.ts b/frontend/src/container/AppLayout/styles.ts new file mode 100644 index 0000000000..5a3a409479 --- /dev/null +++ b/frontend/src/container/AppLayout/styles.ts @@ -0,0 +1,26 @@ +import { Layout as LayoutComponent } from 'antd'; +import styled from 'styled-components'; + +export const Layout = styled.div` + &&& { + min-height: 100vh; + display: flex; + } +`; + +export const Content = styled(LayoutComponent.Content)` + &&& { + margin: 0 1rem; + } +`; + +export const Footer = styled(LayoutComponent.Footer)` + &&& { + text-align: center; + font-size: 0.7rem; + } +`; + +export const Main = styled.main` + min-height: 80vh; +`; diff --git a/frontend/src/container/GridGraphComponent/index.tsx b/frontend/src/container/GridGraphComponent/index.tsx index 4831bf7794..94da26c2f2 100644 --- a/frontend/src/container/GridGraphComponent/index.tsx +++ b/frontend/src/container/GridGraphComponent/index.tsx @@ -1,6 +1,6 @@ import { Typography } from 'antd'; -import { ChartData } from 'chart.js'; -import Graph from 'components/Graph'; +import { ChartData, ChartOptions } from 'chart.js'; +import Graph, { graphOnClickHandler } from 'components/Graph'; import ValueGraph from 'components/ValueGraph'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import history from 'lib/history'; @@ -14,6 +14,7 @@ const GridGraphComponent = ({ title, opacity, isStacked, + onClickHandler, }: GridGraphComponentProps): JSX.Element | null => { const location = history.location.pathname; @@ -29,6 +30,7 @@ const GridGraphComponent = ({ isStacked, opacity, xAxisType: 'time', + onClickHandler: onClickHandler, }} /> ); @@ -66,6 +68,7 @@ export interface GridGraphComponentProps { title?: string; opacity?: string; isStacked?: boolean; + onClickHandler?: graphOnClickHandler; } export default GridGraphComponent; diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx new file mode 100644 index 0000000000..3a6144ac9f --- /dev/null +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx @@ -0,0 +1,90 @@ +import Graph, { graphOnClickHandler } from 'components/Graph'; +import { timePreferance } from 'container/NewWidget/RightContainer/timeItems'; +import GetMaxMinTime from 'lib/getMaxMinTime'; +import { colors } from 'lib/getRandomColor'; +import getStartAndEndTime from 'lib/getStartAndEndTime'; +import getTimeString from 'lib/getTimeString'; +import React, { useCallback } from 'react'; +import { useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; +import { Widgets } from 'types/api/dashboard/getAll'; +import { GlobalReducer } from 'types/reducer/globalTime'; + +const EmptyGraph = ({ + selectedTime, + widget, + onClickHandler, +}: EmptyGraphProps): JSX.Element => { + const { minTime, maxTime, loading } = useSelector( + (state) => state.globalTime, + ); + + const maxMinTime = GetMaxMinTime({ + graphType: widget.panelTypes, + maxTime, + minTime, + }); + + const { end, start } = getStartAndEndTime({ + type: selectedTime.enum, + maxTime: maxMinTime.maxTime, + minTime: maxMinTime.minTime, + }); + + const dateFunction = useCallback(() => { + if (!loading) { + const dates: Date[] = []; + + const startString = getTimeString(start); + const endString = getTimeString(end); + + const parsedStart = parseInt(startString, 10); + const parsedEnd = parseInt(endString, 10); + + let startDate = parsedStart; + const endDate = parsedEnd; + + while (endDate >= startDate) { + const newDate = new Date(startDate); + + startDate = startDate + 20000; + + dates.push(newDate); + } + return dates; + } + return []; + }, [start, end, loading]); + + const date = dateFunction(); + + return ( + + ); +}; + +interface EmptyGraphProps { + selectedTime: timePreferance; + widget: Widgets; + onClickHandler: graphOnClickHandler | undefined; +} + +export default EmptyGraph; diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx index 5f9310d312..d053e621d4 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx @@ -2,6 +2,7 @@ import { Button, Typography } from 'antd'; import getQueryResult from 'api/widgets/getQuery'; import { AxiosError } from 'axios'; import { ChartData } from 'chart.js'; +import { graphOnClickHandler } from 'components/Graph'; import Spinner from 'components/Spinner'; import TimePreference from 'components/TimePreferenceDropDown'; import GridGraphComponent from 'container/GridGraphComponent'; @@ -12,15 +13,21 @@ import { import getChartData from 'lib/getChartData'; import GetMaxMinTime from 'lib/getMaxMinTime'; import getStartAndEndTime from 'lib/getStartAndEndTime'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { memo, useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -import { GlobalTime } from 'store/actions'; import { AppState } from 'store/reducers'; +import { GlobalTime } from 'types/actions/globalTime'; import { Widgets } from 'types/api/dashboard/getAll'; +import EmptyGraph from './EmptyGraph'; import { GraphContainer, NotFoundContainer, TimeContainer } from './styles'; -const FullView = ({ widget }: FullViewProps): JSX.Element => { +const FullView = ({ + widget, + fullViewOptions = true, + onClickHandler, + noDataGraph = false, +}: FullViewProps): JSX.Element => { const { minTime, maxTime } = useSelector( (state) => state.globalTime, ); @@ -65,7 +72,7 @@ const FullView = ({ widget }: FullViewProps): JSX.Element => { end, query: query.query, start: start, - step: '30', + step: '60', }); return { query: query.query, @@ -118,39 +125,69 @@ const FullView = ({ widget }: FullViewProps): JSX.Element => { onFetchDataHandler(); }, [onFetchDataHandler]); + if (state.error && !state.loading) { + return ( + + {state.errorMessage} + + ); + } + if (state.loading || state.payload === undefined) { - return ; + return ( +
+ +
+ ); } if (state.loading === false && state.payload.datasets.length === 0) { return ( <> - - - No Data - + {fullViewOptions && ( + + + + + )} + + {noDataGraph ? ( + + ) : ( + + No Data + + )} ); } return ( <> - - - - + {fullViewOptions && ( + + + + + )} { isStacked: widget.isStacked, opacity: widget.opacity, title: widget.title, + onClickHandler: onClickHandler, }} /> @@ -176,6 +214,20 @@ interface FullViewState { interface FullViewProps { widget: Widgets; + fullViewOptions?: boolean; + onClickHandler?: graphOnClickHandler; + noDataGraph?: boolean; } -export default FullView; +export default memo(FullView, (prev, next) => { + if ( + next.widget.query.length !== prev.widget.query.length && + next.widget.query.every((value, index) => { + return value === prev.widget.query[index]; + }) + ) { + return false; + } + + return true; +}); diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts index 10d21cd4da..7b85723a29 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts @@ -6,6 +6,7 @@ export const GraphContainer = styled.div` justify-content: center; display: flex; flex-direction: column; + width: 100%; `; export const NotFoundContainer = styled.div` diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx index 05adbd4654..e1a21c383c 100644 --- a/frontend/src/container/GridGraphLayout/Graph/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx @@ -12,13 +12,13 @@ import { useSelector } from 'react-redux'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; -import { GlobalTime } from 'store/actions'; import { DeleteWidget, DeleteWidgetProps, } from 'store/actions/dashboard/deleteWidget'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; +import { GlobalTime } from 'types/actions/globalTime'; import { Widgets } from 'types/api/dashboard/getAll'; import Bar from './Bar'; @@ -65,7 +65,7 @@ const GridCardGraph = ({ end, query: query.query, start: start, - step: '30', + step: '60', }); return { diff --git a/frontend/src/container/Header/Breadcrumbs/index.tsx b/frontend/src/container/Header/Breadcrumbs/index.tsx new file mode 100644 index 0000000000..b28a933af4 --- /dev/null +++ b/frontend/src/container/Header/Breadcrumbs/index.tsx @@ -0,0 +1,48 @@ +import { Breadcrumb } from 'antd'; +import ROUTES from 'constants/routes'; +import React from 'react'; +import { Link } from 'react-router-dom'; + +const breadcrumbNameMap = { + [ROUTES.APPLICATION]: 'Application', + [ROUTES.TRACES]: 'Traces', + [ROUTES.SERVICE_MAP]: 'Service Map', + [ROUTES.USAGE_EXPLORER]: 'Usage Explorer', + [ROUTES.INSTRUMENTATION]: 'Add instrumentation', + [ROUTES.SETTINGS]: 'Settings', + [ROUTES.DASHBOARD]: 'Dashboard', +}; + +import { RouteComponentProps, withRouter } from 'react-router'; + +const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => { + const pathArray = props.location.pathname.split('/').filter((i) => i); + + const extraBreadcrumbItems = pathArray.map((_, index) => { + const url = `/${pathArray.slice(0, index + 1).join('/')}`; + + if (breadcrumbNameMap[url] === undefined) { + return ( + + {url.split('/').slice(-1)[0]} + + ); + } else { + return ( + + {breadcrumbNameMap[url]} + + ); + } + }); + + const breadcrumbItems = [ + + Home + , + ].concat(extraBreadcrumbItems); + + return {breadcrumbItems}; +}; + +export default withRouter(ShowBreadcrumbs); diff --git a/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx b/frontend/src/container/Header/CustomDateTimeModal/index.tsx similarity index 81% rename from frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx rename to frontend/src/container/Header/CustomDateTimeModal/index.tsx index f1ce19078a..8ebb25bd32 100644 --- a/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx +++ b/frontend/src/container/Header/CustomDateTimeModal/index.tsx @@ -2,22 +2,15 @@ import { DatePicker, Modal } from 'antd'; import { Moment } from 'moment'; import moment from 'moment'; import React, { useState } from 'react'; -import { DateTimeRangeType } from 'store/actions'; +export type DateTimeRangeType = [Moment | null, Moment | null] | null; const { RangePicker } = DatePicker; -interface CustomDateTimeModalProps { - visible: boolean; - onCreate: (dateTimeRange: DateTimeRangeType) => void; //Store is defined in antd forms library - onCancel: () => void; -} - -const CustomDateTimeModal: React.FC = ({ - //destructuring props +const CustomDateTimeModal = ({ visible, onCreate, onCancel, -}) => { +}: CustomDateTimeModalProps): JSX.Element => { const [ customDateTimeRange, setCustomDateTimeRange, @@ -26,6 +19,7 @@ const CustomDateTimeModal: React.FC = ({ function handleRangePickerOk(date_time: DateTimeRangeType): void { setCustomDateTimeRange(date_time); } + function disabledDate(current: Moment): boolean { if (current > moment()) { return true; @@ -53,4 +47,10 @@ const CustomDateTimeModal: React.FC = ({ ); }; +interface CustomDateTimeModalProps { + visible: boolean; + onCreate: (dateTimeRange: DateTimeRangeType) => void; + onCancel: () => void; +} + export default CustomDateTimeModal; diff --git a/frontend/src/container/Header/DateTimeSelection/config.ts b/frontend/src/container/Header/DateTimeSelection/config.ts new file mode 100644 index 0000000000..500267ac1c --- /dev/null +++ b/frontend/src/container/Header/DateTimeSelection/config.ts @@ -0,0 +1,60 @@ +import ROUTES from 'constants/routes'; + +type fiveMin = '5min'; +type fifteenMin = '15min'; +type thrityMin = '30min'; +type oneMin = '1min'; +type sixHour = '6hr'; +type oneHour = '1hr'; +type oneDay = '1day'; +type oneWeek = '1week'; +type custom = 'custom'; + +export type Time = + | fiveMin + | fifteenMin + | thrityMin + | oneMin + | sixHour + | oneHour + | custom + | oneWeek + | oneDay; + +export const Options: Option[] = [ + { value: '5min', label: 'Last 5 min' }, + { value: '15min', label: 'Last 15 min' }, + { value: '30min', label: 'Last 30 min' }, + { value: '1hr', label: 'Last 1 hour' }, + { value: '6hr', label: 'Last 6 hour' }, + { value: '1day', label: 'Last 1 day' }, + { value: '1week', label: 'Last 1 week' }, + { value: 'custom', label: 'Custom' }, +]; + +export interface Option { + value: Time; + label: string; +} + +export const ServiceMapOptions: Option[] = [ + { value: '1min', label: 'Last 1 min' }, + { value: '5min', label: 'Last 5 min' }, +]; + +export const getDefaultOption = (route: string): Time => { + if (route === ROUTES.SERVICE_MAP) { + return ServiceMapOptions[0].value; + } + if (route === ROUTES.APPLICATION) { + return Options[0].value; + } + return Options[2].value; +}; + +export const getOptions = (routes: string): Option[] => { + if (routes === ROUTES.SERVICE_MAP) { + return ServiceMapOptions; + } + return Options; +}; diff --git a/frontend/src/container/Header/DateTimeSelection/index.tsx b/frontend/src/container/Header/DateTimeSelection/index.tsx new file mode 100644 index 0000000000..2cfd86d758 --- /dev/null +++ b/frontend/src/container/Header/DateTimeSelection/index.tsx @@ -0,0 +1,328 @@ +import { Button, Select as DefaultSelect } from 'antd'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +import { getDefaultOption, getOptions, Time } from './config'; +import { + Container, + Form, + FormItem, + RefreshTextContainer, + Typography, +} from './styles'; +const { Option } = DefaultSelect; +import get from 'api/browser/localstorage/get'; +import set from 'api/browser/localstorage/set'; +import { LOCAL_STORAGE } from 'constants/localStorage'; +import getTimeString from 'lib/getTimeString'; +import moment from 'moment'; +import { connect, useSelector } from 'react-redux'; +import { RouteComponentProps, withRouter } from 'react-router'; +import { bindActionCreators, Dispatch } from 'redux'; +import { ThunkDispatch } from 'redux-thunk'; +import { UpdateTimeInterval } from 'store/actions'; +import { AppState } from 'store/reducers'; +import AppActions from 'types/actions'; +import { GlobalReducer } from 'types/reducer/globalTime'; + +import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal'; + +const DateTimeSelection = ({ + location, + updateTimeInterval, +}: Props): JSX.Element => { + const [form_dtselector] = Form.useForm(); + const [startTime, setStartTime] = useState(); + const [endTime, setEndTime] = useState(); + const [options, setOptions] = useState(getOptions(location.pathname)); + const [refreshButtonHidden, setRefreshButtonHidden] = useState(false); + const [refreshText, setRefreshText] = useState(''); + const [customDateTimeVisible, setCustomDTPickerVisible] = useState( + false, + ); + const isOnSelectHandler = useRef(false); + + const { maxTime, loading, minTime } = useSelector( + (state) => state.globalTime, + ); + + const getDefaultTime = (pathName: string): Time => { + const defaultSelectedOption = getDefaultOption(pathName); + + const routes = get(LOCAL_STORAGE.METRICS_TIME_IN_DURATION); + + if (routes !== null) { + const routesObject = JSON.parse(routes); + const selectedTime = routesObject[pathName]; + + if (selectedTime) { + return selectedTime; + } + } + + return defaultSelectedOption; + }; + + const [selectedTimeInterval, setSelectedTimeInterval] = useState