feat(ui) - insights - data format

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 <RageItem onClick={onClick} item={item} className={className} />;
+    case IssueCategory.RESOURCES:
+      return <ResourcesItem onClick={onClick} item={item} className={className} />;
+    case IssueCategory.ERRORS:
+      return <ErrorItem onClick={onClick} item={item} className={className} />;
+    case IssueCategory.NETWORK:
+      return <NetworkItem onClick={onClick} item={item} className={className} />;
+    default:
+      return null;
+  }
+}
+
+export default InsightItem;
+
+function ErrorItem({ item, className, onClick }: any) {
   return (
-    <div
-      className="flex items-center py-4 hover:bg-active-blue -mx-4 px-4 border-b last:border-transparent cursor-pointer"
-      onClick={onClick}
-    >
+    <div className={className} onClick={onClick}>
       <Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
-      <div className="mx-1 font-medium">{item.label}</div>
-      {item.category === IssueCategory.RAGE && (
+      {item.isNew ? (
         <>
-          <div className="mx-1">on</div>
           <div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
+          <div className="mx-1">error observed</div>
+          <div className="mx-1 font-medium color-red">{item.ratio}%</div>
+          <div className="mx-1">more than other new errors</div>
         </>
-      )}
-      {item.increase && (
+      ) : (
         <>
-          <div className="mx-1">increased by</div>
-          <div className="font-medium text-red">{item.increase}%</div>
+          <div className="mx-1">Increase</div>
+          <div className="mx-1">in</div>
+          <div className="mx-1">{item.name}</div>
+          <div className="mx-1 font-medium color-red">{item.change}%</div>
         </>
       )}
     </div>
   );
 }
 
-export default InsightItem;
+function NetworkItem({ item, className, onClick }: any) {
+  return (
+    <div className={className} onClick={onClick}>
+      <Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
+      <div className="mx-1">Network request</div>
+      <div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
+      <div className="mx-1">{item.change > 0 ? 'increased' : 'decreased'}</div>
+      <div className="font-medium text-red">{item.change}%</div>
+    </div>
+  );
+}
+
+function ResourcesItem({ item, className, onClick }: any) {
+  return (
+    <div className={className} onClick={onClick}>
+      <Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
+      <div className="mx-1">{item.change > 0 ? 'Inrease' : 'Decrease'}</div>
+      <div className="mx-1">in</div>
+      <div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
+      <div className="font-medium text-red">{item.change}%</div>
+    </div>
+  );
+}
+
+function RageItem({ item, className, onClick }: any) {
+  return (
+    <div className={className} onClick={onClick}>
+      <Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
+      <div className="mx-1 bg-gray-100 px-2 rounded">{item.isNew ? item.name : 'Click Rage'}</div>
+      {item.isNew && <div className="mx-1">has</div>}
+      {!item.isNew && <div className="mx-1">on</div>}
+      {item.isNew && <div className="font-medium text-red">{item.ratio}%</div>}
+      {item.isNew && <div className="mx-1">more clickrage than other raged elements.</div>}
+      {!item.isNew && (
+        <>
+          <div className="mx-1">increase by</div>
+          <div className="mx-1">{item.change}</div>
+        </>
+      )}
+    </div>
+  );
+}

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) => (
-        <InsightItem item={item} onClick={clickHanddler} />
-      ))}
+      <div className="overflow-y-auto" style={{ maxHeight: '240px' }}>
+        {metric.data.issues &&
+          metric.data.issues.map((item: any) => (
+            <InsightItem item={item} onClick={clickHanddler} />
+          ))}
+      </div>
     </NoContent>
   );
 }

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();

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);