Skip to content

Commit

Permalink
Merge branch 'main' into datamapping-fix
Browse files Browse the repository at this point in the history
  • Loading branch information
SanthoshVasabhaktula authored Nov 13, 2024
2 parents 77c7286 + 9ce1a95 commit f723b72
Showing 26 changed files with 610 additions and 205 deletions.
7 changes: 7 additions & 0 deletions web-console-v2/src/App.module.css
Original file line number Diff line number Diff line change
@@ -11,6 +11,13 @@
max-height: calc(100vh - 3.7rem);
}

.mainLoginContainer {
flex-grow: 1;
padding: 1rem 0 1rem 0;
transition: margin-left 0.3s ease;
max-height: calc(100vh - 3.7rem);
}

.expanded .mainContainer {
margin-left: 16rem;
width: 65rem;
14 changes: 6 additions & 8 deletions web-console-v2/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useCallback, FC, lazy, useEffect } from 'react';
import React, { useState, useCallback, FC, useEffect } from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import SideBar from 'components/Sidebar/Sidebar';
@@ -17,7 +17,7 @@ const useSidebarToggle = () => {

const sidebarExpandValue = localStorage.getItem('sidebarExpand')
const [isSidebarExpanded, setSidebarExpanded] = useState<boolean>(
_.isEqual(localStorage.getItem('sidebarExpand'), "true") && window.location.pathname !== '/console/login'
_.isEqual(sidebarExpandValue, "true")
);

const toggleSidebar = useCallback(() => {
@@ -35,7 +35,7 @@ const useSidebarToggle = () => {

const App: FC = () => {
const { isSidebarExpanded, toggleSidebar } = useSidebarToggle();

const isLoginRoute = window.location.pathname.includes("/login")
useEffect(() => {
fetchSystemSettings();
}, []);
@@ -45,13 +45,11 @@ const App: FC = () => {
<Locales>
<BrowserRouter basename={getBaseURL()}>
<Navbar />
<div
className={`${styles.appContainer} ${isSidebarExpanded ? styles.expanded : styles.collapsed}`}
>
<SideBar onExpandToggle={toggleSidebar} expand={isSidebarExpanded} />
<div className={`${styles.appContainer} ${isSidebarExpanded ? styles.expanded : styles.collapsed}`}>
{!isLoginRoute && (<SideBar onExpandToggle={toggleSidebar} expand={isSidebarExpanded} />)}
<AlertContextProvider>
<AlertComponent />
<main className={styles.mainContainer}>
<main className={isLoginRoute ? styles.mainLoginContainer : styles.mainContainer}>
<AppRouter />
</main>
</AlertContextProvider>
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
.cardContainer {
width: 100%;
height: 100%;
padding-bottom: 0;
overflow: visible;
}

.card {
box-shadow: var(--dashboard-card-box-shadow) !important;
border-radius: 1.125rem !important;
padding-bottom: 0;
z-index: -1;
height: 100%;
}

.cardContent {
display: flex;
flex-grow: 1;
flex-direction: column;
gap: 1.5rem;
overflow: visible;
}

.loadingText {
font-size: 1.7rem !important;
}

.labelContainer {
display: flex !important;
justify-content: space-between;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.label {
font-size: 1rem !important;
word-wrap: break-word;
white-space: normal;
}

.symbol {
margin-left: auto;
text-align: center;
font-size: 1rem !important;
}

.linearProgressContainer{
display: flex;
align-items: center;
}

.linearProgress{
width: 100%;
margin-right: 0.5rem;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import * as React from 'react';
import { useEffect, useMemo, useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import { ArrowUpward, ArrowDownward } from '@mui/icons-material';
import { Box, Grid, Tooltip } from '@mui/material';
import _ from 'lodash';
import { fetchMetricData } from '../../../services/chartMetrics';
import styles from "./DatasetMetricsCard.module.css"
import chartMeta from 'data/chartsV1';
import dayjs from 'dayjs';
import { druidQueries } from 'services/druid';
import { useParams } from 'react-router-dom';
import { useAlert } from 'contexts/AlertContextProvider';
import { DatasetStatus, DatasetType } from 'types/datasets';
import ApexWithFilters from 'sections/dashboard/analytics/ChartFilters';
import ApexChart from 'sections/dashboard/analytics/apex';
import filters from 'data/chartFilters';

const getQueryByType = (queryType: string, datasetId: any, isMasterDataset: boolean, interval: string) => {
const dateFormat = 'YYYY-MM-DDT00:00:00+05:30'

switch (queryType) {
case 'status': {
return { ..._.get(chartMeta, 'druid_health_status.query') }
};
case 'last_synced_time': {
const startDate = '2000-01-01';
const endDate = dayjs().add(1, 'day').format(dateFormat);
const body = druidQueries.last_synced_time({ datasetId, intervals: `${startDate}/${endDate}`, master: isMasterDataset, })
return { ..._.get(chartMeta, 'last_synced_time.query'), body }
};

case 'total_events_processed': {
const startDate = interval === 'today' ? dayjs().format(dateFormat) : dayjs().subtract(1, 'day').format(dateFormat);
const endDate = interval === 'today' ? dayjs().add(1, 'day').format(dateFormat) : dayjs().format(dateFormat);
const body = druidQueries.total_events_processed({ datasetId, intervals: `${startDate}/${endDate}`, master: isMasterDataset, })
return { ..._.get(chartMeta, 'total_events_processed.query'), body }
};

case 'min_processing_time': {
const startDate = interval === 'today' ? dayjs().format(dateFormat) : dayjs().subtract(1, 'day').format(dateFormat);
const endDate = interval === 'today' ? dayjs().add(1, 'day').format(dateFormat) : dayjs().format(dateFormat);
const body = druidQueries.druid_min_processing_time({ datasetId, intervals: `${startDate}/${endDate}`, master: isMasterDataset, });
return { ..._.get(chartMeta, 'minProcessingTime.query'), body }
};

case 'average_processing_time': {
const startDate = interval === 'today' ? dayjs().format(dateFormat) : dayjs().subtract(1, 'day').format(dateFormat);
const endDate = interval === 'today' ? dayjs().add(1, 'day').format(dateFormat) : dayjs().format(dateFormat);
const body = druidQueries.druid_avg_processing_time({ datasetId, intervals: `${startDate}/${endDate}`, master: isMasterDataset, });
return { ..._.get(chartMeta, 'avgProcessingTime.query'), body }
};

case 'max_processing_time': {
const startDate = interval === 'today' ? dayjs().format(dateFormat) : dayjs().subtract(1, 'day').format(dateFormat);
const endDate = interval === 'today' ? dayjs().add(1, 'day').format(dateFormat) : dayjs().format(dateFormat);
const body = druidQueries.druid_max_processing_time({ datasetId, intervals: `${startDate}/${endDate}`, master: isMasterDataset, });
return { ..._.get(chartMeta, 'maxProcessingTime.query'), body }
};

case 'total_duplicate_batches': {
const endDate = interval === 'today' ? dayjs().endOf('day').unix() : dayjs().endOf('day').subtract(1, 'day').unix();
return { ..._.get(chartMeta, 'duplicate_batches_summary.query'), time: endDate, dataset: datasetId, }
};

case 'total_duplicate_events': {
const endDate = interval === 'today' ? dayjs().endOf('day').unix() : dayjs().format(dateFormat);;
return { ..._.get(chartMeta, 'duplicate_events_summary.query'), time: endDate, dataset: datasetId, }
};

case 'total_failed_events': {
const endDate = interval === 'today' ? dayjs().endOf('day').unix() : dayjs().endOf('day').subtract(1, 'day').unix();
const metadata = isMasterDataset ?
_.cloneDeep({ ..._.get(chartMeta, 'failed_events_summary_master_datasets.query'), time: endDate, dataset: datasetId, }) :
_.cloneDeep({ ..._.get(chartMeta, 'failed_events_summary.query'), time: endDate, dataset: datasetId, });
return metadata;
};

case 'total_events_processed_apex_charts': {
const metadata = isMasterDataset ?
_.cloneDeep(_.get(chartMeta, 'totalEventsProcessedTimeSeriesPerMasterDataset')) :
_.cloneDeep(_.get(chartMeta, 'totalEventsProcessedTimeSeriesPerDataset'));
_.set(metadata, 'query.body.query.filter.fields[1].value', datasetId);
return metadata;
};

case 'events_processing_time_apex_charts': {
const metadata = isMasterDataset ?
_.cloneDeep(_.get(chartMeta, 'minProcessingTimeSeriesPerMasterDataset')) :
_.cloneDeep(_.get(chartMeta, 'minProcessingTimeSeriesPerDataset'));
_.set(metadata, 'query.body.query.filter.fields[1].value', datasetId);
return metadata;
};

default:
throw new Error(`Unknown query type: ${queryType}`);
}
};

const DatasetMetricsCard: React.FC<any> = (props: any) => {
const params = useParams();
const { datasetId, datasetType } = params;
const [datasetDetails, setDatasetDetails] = useState({ data: null, status: "loading" });
const { showAlert } = useAlert();
const isMasterDataset = useMemo(() => _.get(datasetDetails, 'data.type') === DatasetType.MasterDataset, [datasetDetails]);
const hasBatchConfig = useMemo(() => _.get(datasetDetails, ['data', 'extraction_config', 'is_batch_event',]), [datasetDetails]);
const { label, icon, queryType, uuid, transformer, description, refresh, interval, isApexChart } = props;
const query = getQueryByType(queryType, datasetId, isMasterDataset, interval);
const [value, setValue] = useState<any>('');
const [loading, setLoading] = useState(false);
const change = '0%';
const isPositive = change.startsWith('+');
const symbol = isPositive ? (
<ArrowUpward sx={{ fontSize: 'small', color: 'success.main' }} />
) : (
<ArrowDownward sx={{ fontSize: 'small', color: 'error.main' }} />
);

const fetchMetric = async (query: any) => {
try {
setLoading(true);
const response = await fetchMetricData(query, { uuid });
const transformedLabel =
(await (transformer && transformer(response))) || response;
setValue(response);
setLoading(false);
} catch (error) {
console.log('error occured', error);
}
};

useEffect(() => {
fetchMetric(query);
}, [refresh?.api]);

return (
!isApexChart ?
<Tooltip title={description}>
<Box className={styles.cardContainer}>
<Card
elevation={0}
className={styles.card}
>
<CardContent
className={styles.cardContent}
>
<span>{icon}</span>
<Typography variant="bodyBold" className={styles.loadingText}>
{loading ? 'Loading...' : _.isArray(value) ? value[0] : value}
</Typography>

<Grid
container
className={styles.labelContainer}
>
<Typography variant="captionMedium" className={styles.label}>
{label}
</Typography>

{/* <Typography
color={isPositive ? 'success.main' : 'error.main'}
className={styles.symbol}
>
{symbol} {_.trimStart(change, '+-')}
</Typography> */}
</Grid>
</CardContent>
</Card>
</Box>
</Tooltip>
:
<ApexWithFilters title={label} filters={_.get(filters, 'variant1')}>
<ApexChart metadata={getQueryByType(queryType, datasetId, isMasterDataset, interval)} interval={1140}></ApexChart>
</ApexWithFilters>
);
};

export default DatasetMetricsCard;
3 changes: 2 additions & 1 deletion web-console-v2/src/components/Sidebar/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -134,7 +134,8 @@ const Sidebar: React.FC<Props> = ({ onExpandToggle, expand }) => {
const handleLogout = () => {
http.get(apiEndpoints.logout).then(() => {
localStorage.clear();
navigate(`/login`);
//navigate(`/login`);
window.location.href = '/console/login'
}).catch(() => {
showAlert('Failed to logout', 'error');
})
12 changes: 4 additions & 8 deletions web-console-v2/src/data/chartsComponents/druid.ts
Original file line number Diff line number Diff line change
@@ -78,10 +78,8 @@ export default {
parse: (response: any) => {
const ms = _.get(response, 'result[0].event.last_synced_time') || 0;
if (!ms) return ["N/A", "primary"];
return {
"value": dayjs(ms).fromNow(),
"hoverValue": dayjs(ms).format('YYYY-MM-DD HH:mm:ss')
}
const timeAgo = dayjs(ms).fromNow();
return timeAgo
},
error() {
return ["N/A", "error"]
@@ -100,10 +98,8 @@ export default {
parse: (response: any) => {
const ms = _.get(response, 'result[0].event.last_synced_time') || 0;
if (!ms) return ["N/A", "primary"];
return {
"value": dayjs(ms).fromNow(),
"hoverValue": dayjs(ms).format('YYYY-MM-DD HH:mm:ss')
}
const timeAgo = dayjs(ms).fromNow();
return timeAgo
},
error() {
return ["N/A", "error"]
8 changes: 4 additions & 4 deletions web-console-v2/src/data/chartsV1/api.ts
Original file line number Diff line number Diff line change
@@ -186,7 +186,7 @@ export default {
const endpoint = _.get(payload, 'metric.exported_endpoint');
const name = (endpoint && _.last(_.split(endpoint, "/")));
return {
name: name || 'Total Api Calls',
name: name || 'Total API Calls',
data: _.get(payload, 'values')
}
})
@@ -278,7 +278,7 @@ export default {
const endpoint = _.get(payload, 'metric.exported_endpoint');
const name = (endpoint && _.last(_.split(endpoint, "/")));
return {
name: name || 'Total Failed Api Calls',
name: name || 'Total Failed API Calls',
data: _.get(payload, 'values')
}
})
@@ -370,7 +370,7 @@ export default {
const endpoint = _.get(payload, 'metric.exported_endpoint');
const name = (endpoint && _.last(_.split(endpoint, "/")));
return {
name: name || 'Total Api Calls',
name: name || 'Total API Calls',
data: _.get(payload, 'values')
}
})
@@ -462,7 +462,7 @@ export default {
const endpoint = _.get(payload, 'metric.exported_endpoint');
const name = (endpoint && _.last(_.split(endpoint, "/")));
return {
name: name || 'Total Failed Api Calls',
name: name || 'Total Failed API Calls',
data: _.get(payload, 'values')
}
})
12 changes: 4 additions & 8 deletions web-console-v2/src/data/chartsV1/druid.ts
Original file line number Diff line number Diff line change
@@ -78,10 +78,8 @@ export default {
parse: (response: any) => {
const ms = _.get(response, 'result[0].event.last_synced_time') || 0;
if (!ms) return ["N/A", "primary"];
return {
"value": dayjs(ms).fromNow(),
"hoverValue": dayjs(ms).format('YYYY-MM-DD HH:mm:ss')
}
const timeAgo = dayjs(ms).fromNow();
return timeAgo
},
error() {
return ["N/A", "error"]
@@ -100,10 +98,8 @@ export default {
parse: (response: any) => {
const ms = _.get(response, 'result[0].event.last_synced_time') || 0;
if (!ms) return ["N/A", "primary"];
return {
"value": dayjs(ms).fromNow(),
"hoverValue": dayjs(ms).format('YYYY-MM-DD HH:mm:ss')
}
const timeAgo = dayjs(ms).fromNow();
return timeAgo
},
error() {
return ["N/A", "error"]
Loading

0 comments on commit f723b72

Please sign in to comment.