From 1f9f78ca0f6e5e9a647e52f826bbd526fa996238 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 3 Jan 2023 17:21:37 +0100
Subject: [PATCH] feat(ui) - fixes

---
 .../ResponseTimeDistribution.tsx               |  2 +-
 .../SpeedIndexByLocation.tsx                   |  1 +
 .../DashboardWidgetGrid.tsx                    |  2 +-
 .../components/WidgetForm/WidgetForm.tsx       |  1 +
 .../WidgetSubDetailsView.tsx                   |  2 +-
 .../components/WidgetView/WidgetView.tsx       |  2 +-
 .../shared/Filters/FilterList/FilterList.tsx   |  2 +-
 frontend/app/constants/card.ts                 | 18 +++++++++---------
 frontend/app/mstore/types/widget.ts            |  2 +-
 9 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
index 548a229ab..4326b3b3a 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
@@ -87,7 +87,7 @@ function ResponseTimeDistribution(props: Props) {
                   />
                   <Bar minPointSize={1} name="Calls" dataKey="count" stackId="a" fill={colors[2]} label="Backend" />
                   <Tooltip {...Styles.tooltip} labelFormatter={val => 'Page Response Time: ' + val} />
-                  { metric.data.percentiles.map((item, i) => (
+                  { metric.data.percentiles && metric.data.percentiles.map((item: any, i: number) => (
                     <ReferenceLine
                       key={i}
                       label={
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
index 82603eee5..ca049a677 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
@@ -24,6 +24,7 @@ function SpeedIndexByLocation(props: Props) {
         const max = metric.data.chart.reduce((acc: any, item: any) => Math.max(acc, item.value), 0);
         const min = metric.data.chart.reduce((acc: any, item: any) => Math.min(acc, item.value), 0);
         metric.data.chart.forEach((item: any) => {
+            if (!item || !item.userCountry) { return }
             item.perNumber = positionOfTheNumber(min, max, item.value, 5);
             data[item.userCountry.toLowerCase()] = item;
         });
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index ba0c33c3d..3b25bbf22 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -83,7 +83,7 @@ function DashboardWidgetGrid(props: Props) {
         {smallWidgets.length > 0 && regularWidgets.length > 0 ? (
           <div className="font-semibold text-xl py-4 flex items-center gap-2 col-span-4">
             <Icon name="grid-horizontal" size={26} />
-            All Metrics
+            All Cards
           </div>
         ) : null}
 
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index db0525aab..bc8429d87 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -78,6 +78,7 @@ function WidgetForm(props: Props) {
           break;
         case ERRORS:
         case RESOURCE_MONITORING:
+        case PERFORMANCE:
         case WEB_VITALS:
           obj.viewType = 'chart';
           break;
diff --git a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx
index 261e77efd..2cbfe12e7 100644
--- a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx
@@ -30,7 +30,7 @@ function WidgetSubDetailsView(props: Props) {
         <div>
             <Breadcrumb
                 items={[
-                    { label: dashboardId ? 'Dashboard' : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
+                    { label: dashboardId ? 'Dashboard' : 'Cards', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
                     { label: widget.name, to: withSiteId(`/metrics/${widget.metricId}`, siteId) },
                     { label: issueInstance ? issueInstance.title : 'Sub Details' }
                 ]}
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index 93228b342..12419c7ec 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -73,7 +73,7 @@ function WidgetView(props: Props) {
                 <Breadcrumb
                     items={[
                         {
-                            label: dashboardName ? dashboardName : 'Metrics',
+                            label: dashboardName ? dashboardName : 'Cards',
                             to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId),
                         },
                         { label: widget.name },
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index b541e320f..f6cbbec94 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -48,7 +48,7 @@ function FilterList(props: Props) {
                 <SegmentSelection
                   primary
                   name="eventsOrder"
-                  extraSmall={true}
+                  size="small"
                   onSelect={props.onChangeEventsOrder}
                   value={{ value: filter.eventsOrder }}
                   list={[
diff --git a/frontend/app/constants/card.ts b/frontend/app/constants/card.ts
index 24cddf9b3..92032b2b2 100644
--- a/frontend/app/constants/card.ts
+++ b/frontend/app/constants/card.ts
@@ -24,7 +24,7 @@ export const FEATURE_ADOPTION = 'featureAdoption';
 
 export const TYPES: CardType[] = [
   {
-    title: 'Add From Library',
+    title: 'Add from Library',
     icon: 'grid',
     description: 'Select a pre existing card from card library',
     slug: LIBRARY,
@@ -92,9 +92,9 @@ export const TYPES: CardType[] = [
     description: 'Retention graph of users / features over a period of time.',
     slug: PERFORMANCE,
     subTypes: [
-      { title: 'Cpu', slug: FilterKey.CPU, description: '' },
+      { title: 'CPU', slug: FilterKey.CPU, description: '' },
       { title: 'Crashes', slug: FilterKey.CRASHES, description: '' },
-      { title: 'Fps', slug: FilterKey.FPS, description: '' },
+      { title: 'FPS', slug: FilterKey.FPS, description: '' },
       { title: 'Pages Dom Build Time', slug: FilterKey.PAGES_DOM_BUILD_TIME, description: '' },
       { title: 'Memory Consumption', slug: FilterKey.MEMORY_CONSUMPTION, description: '' },
       { title: 'Pages Response Time', slug: FilterKey.PAGES_RESPONSE_TIME, description: '' },
@@ -104,16 +104,16 @@ export const TYPES: CardType[] = [
         description: '',
       },
       {
-        title: 'Resources Vs Visually Complete',
+        title: 'Resources vs Visually Complete',
         slug: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE,
         description: '',
       },
-      { title: 'Sessions Per Browser', slug: FilterKey.SESSIONS_PER_BROWSER, description: '' },
+      { title: 'Sessions per Browser', slug: FilterKey.SESSIONS_PER_BROWSER, description: '' },
       { title: 'Slowest Domains', slug: FilterKey.SLOWEST_DOMAINS, description: '' },
       { title: 'Speed Location', slug: FilterKey.SPEED_LOCATION, description: '' },
-      { title: 'Time To Render', slug: FilterKey.TIME_TO_RENDER, description: '' },
+      { title: 'Time to Render', slug: FilterKey.TIME_TO_RENDER, description: '' },
       {
-        title: 'Impacted Sessions By Slow Pages',
+        title: 'Impacted Sessions by Slow Pages',
         slug: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES,
         description: '',
       },
@@ -152,7 +152,7 @@ export const TYPES: CardType[] = [
         description: 'Uncover the issues impacting user journeys',
       },
       {
-        title: 'DOM Build Time',
+        title: 'DOM Content Loaded',
         slug: FilterKey.AVG_DOM_CONTENT_LOADED,
         description: 'Keep a close eye on errors and track their type, origin and domain.',
       },
@@ -163,7 +163,7 @@ export const TYPES: CardType[] = [
           'FInd out which resources are missing and those that may be slowign your web app.',
       },
       {
-        title: 'DOM Content Loaded',
+        title: 'First Meaningful Paint',
         slug: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
         description:
           "Optimize your app's performance by tracking slow domains, page resposne times, memory consumption, CPU usage and more.",
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 5285ba20a..4b6760bc1 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -135,7 +135,7 @@ export default class Widget {
             thumbnail: this.thumbnail,
             config: {
                 ...this.config,
-                col: (this.metricType === 'funnel' || this.metricOf === FilterKey.ERRORS || this.metricOf === FilterKey.SESSIONS) ? 4 : (this.metricType === WEB_VITALS ? 1 : 2)
+                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)
             },
         }
     }