From cf87b226ab88e7326da5b8413798411b212e02d2 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 4 Mar 2022 18:56:55 +0100
Subject: [PATCH] feat(ui) - custom metrics - wip

---
 .../CustomMetricPieChart/CustomMetricPieChart.tsx           | 2 +-
 .../CustomMetricTable/CustomMetricTable.tsx                 | 2 +-
 .../components/shared/Filters/FilterValue/FilterValue.tsx   | 1 +
 frontend/app/types/customMetric.js                          | 6 +++---
 frontend/app/types/filter/filterType.ts                     | 6 +++++-
 frontend/app/types/filter/newFilter.js                      | 5 ++++-
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
index cdb561dd7..b33a13f62 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
@@ -35,7 +35,7 @@ function CustomMetricPieChart(props: Props) {
     }
     return (
         <div>
-          <NoContent size="small" show={data.values.length === 0} >
+          <NoContent size="small" show={data.values && data.values.length === 0} >
             <ResponsiveContainer height={ 220 } width="100%">
                 <PieChart>
                     <Pie
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
index d067b6666..2b85e8839 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@@ -46,7 +46,7 @@ function CustomMetriTable(props: Props) {
     }
     return (
         <div className="" style={{ height: '240px'}}>
-           <NoContent show={data.values.length === 0} size="small">
+           <NoContent show={data.values && data.values.length === 0} size="small">
                 <Table
                     small
                     cols={ cols }
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 10f10a428..b3bc02305 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -114,6 +114,7 @@ function FilterValue(props: Props) {
           />
         )
       case FilterType.NUMBER:
+      case FilterType.NUMBER_MULTIPLE:
         return (
           <input
             className="w-full px-2 py-1 text-sm leading-tight text-gray-700 rounded-lg"
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
index 0140faec4..9db8e920e 100644
--- a/frontend/app/types/customMetric.js
+++ b/frontend/app/types/customMetric.js
@@ -28,11 +28,11 @@ export const FilterSeries = Record({
 export default Record({
   metricId: undefined,
   name: 'Series',
-  metricType: 'table',
-  metricOf: 'USERID',
+  metricType: 'timeseries',
+  metricOf: 'sessionCount',
   metricValue: ['sessionCount'],
   metricFormat: 'sessionCount',
-  viewType: 'pieChart',
+  viewType: 'lineChart',
   series: List(),
   isPublic: true,
   startDate: '',
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index 655681796..ccb5156cd 100644
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@@ -13,6 +13,7 @@ export enum FilterType {
   ISSUE = "ISSUE",
   BOOLEAN = "BOOLEAN",
   NUMBER = "NUMBER",
+  NUMBER_MULTIPLE = "NUMBER_MULTIPLE",
   DURATION = "DURATION",
   MULTIPLE = "MULTIPLE",
   SUB_FILTERS = "SUB_FILTERS",
@@ -64,6 +65,9 @@ export enum FilterKey {
   FETCH_FAILED = "FETCH_FAILED",
   FETCH = "FETCH",
   FETCH_URL = "FETCH_URL",
-  FETCH_STATUS = "FETCH_STATUS",
+  FETCH_STATUS_CODE = "FETCH_STATUS_CODE",
   FETCH_METHOD = "FETCH_METHOD",
+  FETCH_DURATION = "FETCH_DURATION",
+  FETCH_REQUEST_BODY = "FETCH_REQUEST_BODY",
+  FETCH_RESPONSE_BODY = "FETCH_RESPONSE_BODY",
 }
\ No newline at end of file
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 154db3f23..6ad2c4c22 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -35,8 +35,11 @@ export const filtersMap = {
   // PERFORMANCE
   [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, category: FilterCategory.PERFORMANCE, label: 'Fetch Request', subFilters: [
     { key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with URL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
-    { key: FilterKey.FETCH_STATUS, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
+    { key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
     { key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
+    { key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'with duration', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
+    { key: FilterKey.FETCH_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
+    { key: FilterKey.FETCH_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
   ], icon: 'filters/fetch-failed', isEvent: true },
   [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
   [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/lcpt', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },