@@ -85,7 +85,7 @@ function NetworkItem({ item, className, onClick }: any) {
function ResourcesItem({ item, className, onClick }: any) {
return (
-
+
{item.change > 0 ? 'Inrease' : 'Decrease'}
in
{item.name}
@@ -97,7 +97,7 @@ function ResourcesItem({ item, className, onClick }: any) {
function RageItem({ item, className, onClick }: any) {
return (
-
+
{item.isNew ? item.name : 'Click Rage'}
{item.isNew &&
has
}
{!item.isNew &&
on
}
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
index 48f9d29c7..9ac804853 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
@@ -4,23 +4,61 @@ import { observer } from 'mobx-react-lite';
import React from 'react';
import InsightItem from './InsightItem';
import { NO_METRIC_DATA } from 'App/constants/messages';
+import { InishtIssue } from 'App/mstore/types/widget';
+import { FilterKey, IssueCategory, IssueType } from 'App/types/filter/filterType';
+import { filtersMap } from 'Types/filter/newFilter';
-interface Props {}
-function InsightsCard(props: Props) {
+function InsightsCard() {
const { metricStore, dashboardStore } = useStore();
const metric = metricStore.instance;
const drillDownFilter = dashboardStore.drillDownFilter;
const period = dashboardStore.period;
- const clickHanddler = (e: React.MouseEvent
) => {
- console.log(e);
- // TODO update drillDownFilter
- // const periodTimestamps = period.toTimestamps();
- // drillDownFilter.merge({
- // filters: event,
- // startTimestamp: periodTimestamps.startTimestamp,
- // endTimestamp: periodTimestamps.endTimestamp,
- // });
+ const clickHanddler = (e: React.MouseEvent, item: InishtIssue) => {
+ let filter: any = {};
+ switch (item.category) {
+ case IssueCategory.RESOURCES:
+ filter = {
+ ...filtersMap[
+ item.name === IssueType.MEMORY ? FilterKey.AVG_MEMORY_USAGE : FilterKey.AVG_CPU
+ ],
+ };
+ filter.source = [item.oldValue];
+ filter.value = [];
+ break;
+ case IssueCategory.RAGE:
+ filter = { ...filtersMap[FilterKey.CLICK] };
+ filter.value = [item.name];
+ break;
+ case IssueCategory.NETWORK:
+ filter = { ...filtersMap[FilterKey.FETCH_URL] };
+ filter.filters = [
+ { ...filtersMap[FilterKey.FETCH_URL], value: [item.name] },
+ { ...filtersMap[FilterKey.FETCH_DURATION], value: [item.oldValue] },
+ ];
+ filter.value = [];
+ break;
+ case IssueCategory.ERRORS:
+ filter = { ...filtersMap[FilterKey.ERROR] };
+ break;
+ }
+
+ filter.type = filter.key;
+ delete filter.key;
+ delete filter.operatorOptions;
+ delete filter.sourceOperatorOptions;
+ delete filter.placeholder;
+ delete filter.sourcePlaceholder;
+ delete filter.sourceType;
+ delete filter.sourceUnit;
+ delete filter.category;
+ delete filter.icon;
+ delete filter.label;
+ delete filter.options;
+
+ drillDownFilter.merge({
+ filters: [filter],
+ });
};
return (
@@ -32,7 +70,7 @@ function InsightsCard(props: Props) {
{metric.data.issues &&
metric.data.issues.map((item: any) => (
-
+ clickHanddler(e, item)} />
))}
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index 64ebef507..591011214 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -112,7 +112,7 @@ function WidgetForm(props: Props) {
await confirm({
header: 'Confirm',
confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this metric?`,
+ confirmation: `Are you sure you want to permanently delete this card?`,
})
) {
metricStore.delete(metric).then(props.onDelete);
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index 32127c3dc..79f42612c 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -81,7 +81,6 @@ function WidgetSessions(props: Props) {
const customFilter = { ...filter, ...timeRange, filters: [ ...sessionStore.userFilter.filters, clickFilter]}
debounceClickMapSearch(customFilter)
} else {
- console.log(widget)
debounceRequest(widget.metricId, {
...filter,
series: widget.series,
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 22fe3491f..5e2a484ab 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -259,10 +259,10 @@ const SVG = (props: Props) => {
case 'high-engagement': return ;
case 'history': return ;
case 'hourglass-start': return ;
- case 'ic-errors': return ;
- case 'ic-network': return ;
- case 'ic-rage': return ;
- case 'ic-resources': return ;
+ case 'ic-errors': return ;
+ case 'ic-network': return ;
+ case 'ic-rage': return ;
+ case 'ic-resources': return ;
case 'id-card': return ;
case 'image': return ;
case 'info-circle-fill': return ;
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index c5f6b6b12..56e68f2d5 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -19,18 +19,21 @@ export class InishtIssue {
category: string;
label: string;
value: number;
+ oldValue: number;
isIncreased?: boolean;
constructor(
category: string,
public name: string,
public ratio: number,
+ oldValue = 0,
value = 0,
change = 0,
isNew = false
) {
this.category = category;
this.value = Math.round(value);
+ this.oldValue = Math.round(oldValue);
// @ts-ignore
this.label = issueCategoriesMap[category];
this.icon = `ic-${category}`;
@@ -43,46 +46,48 @@ export class InishtIssue {
}
export default class Widget {
- public static get ID_KEY():string { return "metricId" }
- metricId: any = undefined
- widgetId: any = undefined
- category?: string = undefined
- name: string = "Untitled Card"
- metricType: string = "timeseries"
- metricOf: string = "sessionCount"
- metricValue: string = ""
- viewType: string = "lineChart"
- metricFormat: string = "sessionCount"
- series: FilterSeries[] = []
- sessions: [] = []
- isPublic: boolean = true
- owner: string = ""
- lastModified: number = new Date().getTime()
- dashboards: any[] = []
- dashboardIds: any[] = []
- config: any = {}
- page: number = 1
- limit: number = 5
- thumbnail?: string
- params: any = { density: 70 }
+ public static get ID_KEY(): string {
+ return 'metricId';
+ }
+ metricId: any = undefined;
+ widgetId: any = undefined;
+ category?: string = undefined;
+ name: string = 'Untitled Card';
+ metricType: string = 'timeseries';
+ metricOf: string = 'sessionCount';
+ metricValue: string = '';
+ viewType: string = 'lineChart';
+ metricFormat: string = 'sessionCount';
+ series: FilterSeries[] = [];
+ sessions: [] = [];
+ isPublic: boolean = true;
+ owner: string = '';
+ lastModified: number = new Date().getTime();
+ dashboards: any[] = [];
+ dashboardIds: any[] = [];
+ config: any = {};
+ page: number = 1;
+ limit: number = 5;
+ thumbnail?: string;
+ params: any = { density: 70 };
period: Record = Period({ rangeName: LAST_24_HOURS }); // temp value in detail view
hasChanged: boolean = false;
- position: number = 0
- data: any = {
- sessions: [],
- issues: [],
- total: 0,
- chart: [],
- namesMap: {},
- avg: 0,
- percentiles: [],
- }
- isLoading: boolean = false
- isValid: boolean = false
- dashboardId: any = undefined
- predefinedKey: string = ''
+ position: number = 0;
+ data: any = {
+ sessions: [],
+ issues: [],
+ total: 0,
+ chart: [],
+ namesMap: {},
+ avg: 0,
+ percentiles: [],
+ };
+ isLoading: boolean = false;
+ isValid: boolean = false;
+ dashboardId: any = undefined;
+ predefinedKey: string = '';
constructor() {
makeAutoObservable(this);
@@ -140,34 +145,44 @@ export default class Widget {
return this;
}
- toWidget(): any {
- return {
- config: {
- position: this.position,
- col: this.config.col,
- row: this.config.row,
- }
- }
- }
+ toWidget(): any {
+ return {
+ config: {
+ position: this.position,
+ col: this.config.col,
+ row: this.config.row,
+ },
+ };
+ }
- toJson() {
- return {
- metricId: this.metricId,
- widgetId: this.widgetId,
- metricOf: this.metricOf,
- metricValue: this.metricValueToArray(this.metricValue),
- metricType: this.metricType,
- metricFormat: this.metricFormat,
- viewType: this.viewType,
- name: this.name,
- series: this.series.map((series: any) => series.toJson()),
- thumbnail: this.thumbnail,
- config: {
- ...this.config,
- col: (this.metricType === 'funnel' || this.metricOf === FilterKey.ERRORS || this.metricOf === FilterKey.SESSIONS || this.metricOf === FilterKey.SLOWEST_RESOURCES || this.metricOf === FilterKey.MISSING_RESOURCES || this.metricOf === FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION) ? 4 : (this.metricType === WEB_VITALS ? 1 : 2)
- },
- }
- }
+ toJson() {
+ return {
+ metricId: this.metricId,
+ widgetId: this.widgetId,
+ metricOf: this.metricOf,
+ metricValue: this.metricValueToArray(this.metricValue),
+ metricType: this.metricType,
+ metricFormat: this.metricFormat,
+ viewType: this.viewType,
+ name: this.name,
+ series: this.series.map((series: any) => series.toJson()),
+ thumbnail: this.thumbnail,
+ config: {
+ ...this.config,
+ col:
+ this.metricType === 'funnel' ||
+ this.metricOf === FilterKey.ERRORS ||
+ this.metricOf === FilterKey.SESSIONS ||
+ this.metricOf === FilterKey.SLOWEST_RESOURCES ||
+ this.metricOf === FilterKey.MISSING_RESOURCES ||
+ this.metricOf === FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION
+ ? 4
+ : this.metricType === WEB_VITALS
+ ? 1
+ : 2,
+ },
+ };
+ }
validate() {
this.isValid = this.name.length > 0;
@@ -189,9 +204,12 @@ 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) {
- _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)
- );
+ _data['issues'] = data
+ .filter((i: any) => i.change > 0 || i.change < 0)
+ .map(
+ (i: any) =>
+ new InishtIssue(i.category, i.name, i.ratio, i.oldValue, i.value, i.change, i.isNew)
+ );
} else {
if (data.hasOwnProperty('chart')) {
_data['chart'] = getChartFormatter(period)(data.chart);
diff --git a/frontend/app/svg/icons/ic-errors.svg b/frontend/app/svg/icons/ic-errors.svg
index 4f026cd64..64f4043d1 100644
--- a/frontend/app/svg/icons/ic-errors.svg
+++ b/frontend/app/svg/icons/ic-errors.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/app/svg/icons/ic-network.svg b/frontend/app/svg/icons/ic-network.svg
index 4f026cd64..626ffd4d9 100644
--- a/frontend/app/svg/icons/ic-network.svg
+++ b/frontend/app/svg/icons/ic-network.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/app/svg/icons/ic-rage.svg b/frontend/app/svg/icons/ic-rage.svg
index 4f026cd64..898b083d8 100644
--- a/frontend/app/svg/icons/ic-rage.svg
+++ b/frontend/app/svg/icons/ic-rage.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/app/svg/icons/ic-resources.svg b/frontend/app/svg/icons/ic-resources.svg
index 4f026cd64..5cc666d44 100644
--- a/frontend/app/svg/icons/ic-resources.svg
+++ b/frontend/app/svg/icons/ic-resources.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ No newline at end of file