change(ui) - insights - row item with random data and other fixes

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx

@@ -1,3 +1,4 @@
+import { IssueCategory } from 'App/types/filter/filterType';
 import React from 'react';
 import { Icon } from 'UI';
 
@@ -8,17 +9,24 @@ interface Props {
 function InsightItem(props: Props) {
   const { item, onClick = () => {} } = props;
   return (
-    // TODO update according to the new response format
     <div
       className="flex items-center py-4 hover:bg-active-blue -mx-4 px-4 border-b last:border-transparent cursor-pointer"
       onClick={onClick}
     >
       <Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
-      <div className="mx-1 font-medium">{item.ratio}</div>
-      <div className="mx-1">on</div>
-      <div className="mx-1 bg-gray-100 px-2 rounded">Update</div>
-      <div className="mx-1">increased by</div>
-      <div className="font-medium text-red">{item.increase}</div>
+      <div className="mx-1 font-medium">{item.label}</div>
+      {item.category === IssueCategory.RAGE && (
+        <>
+          <div className="mx-1">on</div>
+          <div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
+        </>
+      )}
+      {item.increase && (
+        <>
+          <div className="mx-1">increased by</div>
+          <div className="font-medium text-red">{item.increase}%</div>
+        </>
+      )}
     </div>
   );
 }

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx

@@ -25,11 +25,11 @@ function InsightsCard(props: Props) {
 
   return (
     <NoContent
-      show={metric.data.issues.length === 0}
+      show={metric.data.issues && metric.data.issues.length === 0}
       title={NO_METRIC_DATA}
       style={{ padding: '100px 0' }}
     >
-      {metric.data.issues.map((item: any) => (
+      {metric.data.issues && metric.data.issues.map((item: any) => (
         <InsightItem item={item} onClick={clickHanddler} />
       ))}
     </NoContent>

frontend/app/constants/filterOptions.js

@@ -125,6 +125,11 @@ export const issueCategories = [
   { label: 'Errors', value: IssueCategory.ERRORS },
 ]
 
+export const issueCategoriesMap = issueCategories.reduce((acc, {value, label}) => {
+  acc[value] = label;
+  return acc;
+}, {})
+
 export default {
   options,
   baseOperators,

frontend/app/mstore/types/widget.ts

@@ -3,7 +3,7 @@ import FilterSeries from './filterSeries';
 import { DateTime } from 'luxon';
 import Session from 'App/mstore/types/session';
 import Funnelissue from 'App/mstore/types/funnelIssue';
-import { issueOptions, issueCategories } from 'App/constants/filterOptions';
+import { issueOptions, issueCategories, issueCategoriesMap } from 'App/constants/filterOptions';
 import { FilterKey } from 'Types/filter/filterType';
 import Period, { LAST_24_HOURS } from 'Types/app/period';
 import { metricService } from 'App/services';
@@ -11,6 +11,47 @@ import { INSIGHTS, TABLE, WEB_VITALS } from 'App/constants/card';
 import Error from '../types/error';
 import { getChartFormatter } from 'Types/dashboard/helper';
 
+export class InishtIssue {
+  icon: string;
+  iconColor: string;
+  increase: number;
+  isNew = false;
+  category: string;
+  label: string;
+
+  constructor(
+    category: string,
+    public name: string,
+    public ratio: number,
+    increase = 0,
+    isNew = false
+  ) {
+    this.category = category;
+    // @ts-ignore
+    this.label = issueCategoriesMap[category];
+    this.icon = `ic-${category}`;
+    this.iconColor = 'red';
+
+    this.increase = increase;
+    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
@@ -85,9 +126,9 @@ export default class Widget {
       this.metricFormat = json.metricFormat;
       this.viewType = json.viewType;
       this.name = json.name;
-      this.series = json.series
+      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 =
@@ -157,13 +198,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 fromt the response
-      _data['issues'] = [1, 2, 3].map((i: any) => ({
-        icon: 'dizzy',
-        ratio: 'Click Rage',
-        increase: 10,
-        iconColor: 'red',
-      }));
+      // TODO read from the response
+      _data['issues'] = [1, 2, 3, 4].map((i: any) => randomIssue());
+      console.log('_data', _data);
     } else {
       if (data.hasOwnProperty('chart')) {
         _data['chart'] = getChartFormatter(period)(data.chart);

frontend/app/svg/icons/ic-errors.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>

frontend/app/svg/icons/ic-network.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>

frontend/app/svg/icons/ic-rage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>

frontend/app/svg/icons/ic-resources.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>

frontend/app/types/filter/filterType.ts

@@ -256,8 +256,8 @@ export enum FilterKey {
   ERRORS_PER_DOMAINS = 'errorsPerDomains',
   ERRORS_PER_TYPE = 'errorsPerType',
   CALLS_ERRORS = 'callsErrors',
-  DOMAINS_ERRORS_4XX = 'domainsErrors4Xx',
-  DOMAINS_ERRORS_5XX = 'domainsErrors5Xx',
+  DOMAINS_ERRORS_4XX = 'domainsErrors4xx',
+  DOMAINS_ERRORS_5XX = 'domainsErrors5xx',
   IMPACTED_SESSIONS_BY_JS_ERRORS = 'impactedSessionsByJsErrors',
 
   // Performance