From 16c22f8cf685951b1c14539a3df754cc7be921d4 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 13 Jan 2023 18:20:42 +0100 Subject: [PATCH] feat(ui) - insights - data format --- .../InsightsCard/InsightItem.tsx | 84 ++++++++++++++++--- .../InsightsCard/InsightsCard.tsx | 9 +- .../MetricViewHeader/MetricViewHeader.tsx | 2 +- frontend/app/mstore/types/widget.ts | 39 ++++----- 4 files changed, 94 insertions(+), 40 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx index db81f9afb..439fcee32 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx @@ -8,27 +8,87 @@ interface Props { } function InsightItem(props: Props) { const { item, onClick = () => {} } = props; + const className = + 'flex items-center py-4 hover:bg-active-blue -mx-4 px-4 border-b last:border-transparent cursor-pointer'; + + switch (item.category) { + case IssueCategory.RAGE: + return ; + case IssueCategory.RESOURCES: + return ; + case IssueCategory.ERRORS: + return ; + case IssueCategory.NETWORK: + return ; + default: + return null; + } +} + +export default InsightItem; + +function ErrorItem({ item, className, onClick }: any) { return ( -
+
-
{item.label}
- {item.category === IssueCategory.RAGE && ( + {item.isNew ? ( <> -
on
{item.name}
+
error observed
+
{item.ratio}%
+
more than other new errors
- )} - {item.increase && ( + ) : ( <> -
increased by
-
{item.increase}%
+
Increase
+
in
+
{item.name}
+
{item.change}%
)}
); } -export default InsightItem; +function NetworkItem({ item, className, onClick }: any) { + return ( +
+ +
Network request
+
{item.name}
+
{item.change > 0 ? 'increased' : 'decreased'}
+
{item.change}%
+
+ ); +} + +function ResourcesItem({ item, className, onClick }: any) { + return ( +
+ +
{item.change > 0 ? 'Inrease' : 'Decrease'}
+
in
+
{item.name}
+
{item.change}%
+
+ ); +} + +function RageItem({ item, className, onClick }: any) { + return ( +
+ +
{item.isNew ? item.name : 'Click Rage'}
+ {item.isNew &&
has
} + {!item.isNew &&
on
} + {item.isNew &&
{item.ratio}%
} + {item.isNew &&
more clickrage than other raged elements.
} + {!item.isNew && ( + <> +
increase by
+
{item.change}
+ + )} +
+ ); +} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx index 78d384c21..48f9d29c7 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx @@ -29,9 +29,12 @@ function InsightsCard(props: Props) { title={NO_METRIC_DATA} style={{ padding: '100px 0' }} > - {metric.data.issues && metric.data.issues.map((item: any) => ( - - ))} +
+ {metric.data.issues && + metric.data.issues.map((item: any) => ( + + ))} +
); } diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx index 6dcecabb2..ea5311082 100644 --- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx +++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx @@ -4,7 +4,7 @@ import MetricsSearch from '../MetricsSearch'; import Select from 'Shared/Select'; import { useStore } from 'App/mstore'; import { observer, useObserver } from 'mobx-react-lite'; -import { DROPDOWN_OPTIONS, Option } from 'App/constants/card'; +import { DROPDOWN_OPTIONS } from 'App/constants/card'; function MetricViewHeader() { const { metricStore } = useStore(); diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 6d1e7d48e..c5f6b6b12 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -14,44 +14,34 @@ import { getChartFormatter } from 'Types/dashboard/helper'; export class InishtIssue { icon: string; iconColor: string; - increase: number; + change: number; isNew = false; category: string; label: string; + value: number; + isIncreased?: boolean; constructor( category: string, public name: string, public ratio: number, - increase = 0, + value = 0, + change = 0, isNew = false ) { this.category = category; + this.value = Math.round(value); // @ts-ignore this.label = issueCategoriesMap[category]; this.icon = `ic-${category}`; this.iconColor = 'red'; - this.increase = increase; + this.change = parseInt(change.toFixed(2)); + this.isIncreased = this.change > 0; this.isNew = isNew; } } -function generateRandomString(stringArray: string[]): string { - const randomIndex = Math.floor(Math.random() * stringArray.length); - return stringArray[randomIndex]; -} - -function randomIssue() { - return new InishtIssue( - generateRandomString(['rage', 'resources', 'network', 'errors']), - generateRandomString(['Login', 'Update', '/sessions/data', 'Reload']), - Math.floor(Math.random() * 50), - Math.floor(Math.random() * 100), - false - ); -} - export default class Widget { public static get ID_KEY():string { return "metricId" } metricId: any = undefined @@ -126,9 +116,10 @@ export default class Widget { this.metricFormat = json.metricFormat; this.viewType = json.viewType; this.name = json.name; - this.series = (json.series && json.series.length > 0) - ? json.series.map((series: any) => new FilterSeries().fromJson(series)) - : [new FilterSeries()]; + this.series = + json.series && json.series.length > 0 + ? json.series.map((series: any) => new FilterSeries().fromJson(series)) + : [new FilterSeries()]; this.dashboards = json.dashboards || []; this.owner = json.ownerEmail; this.lastModified = @@ -198,9 +189,9 @@ export default class Widget { if (this.metricOf === FilterKey.ERRORS) { _data['errors'] = data.errors.map((s: any) => new Error().fromJSON(s)); } else if (this.metricType === INSIGHTS) { - // TODO read from the response - _data['issues'] = [1, 2, 3, 4].map((i: any) => randomIssue()); - console.log('_data', _data); + _data['issues'] = data.filter((i: any) => i.change > 0 || i.change < 0).map( + (i: any) => new InishtIssue(i.category, i.name, i.ratio, i.value, i.change, i.isNew) + ); } else { if (data.hasOwnProperty('chart')) { _data['chart'] = getChartFormatter(period)(data.chart);