From e3c42b580f8e3e8345699ae84c9651ebf0652765 Mon Sep 17 00:00:00 2001
From: Dawid Rusnak <dawid@drcode.pl>
Date: Thu, 3 Aug 2023 13:33:00 +0200
Subject: [PATCH 1/2] fix: avoid jumping screen when metrics are loading

---
 .../EntityDetailsContent.tsx                  |  2 +-
 .../SummaryGrid/SummaryGrid.tsx               | 79 ++++++++-----------
 .../SummaryGrid/SummaryGridItem.tsx           | 23 ++++++
 3 files changed, 58 insertions(+), 46 deletions(-)
 create mode 100644 src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGridItem.tsx

diff --git a/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx b/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx
index 0b77ab961..f65eda573 100644
--- a/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx
+++ b/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx
@@ -187,7 +187,7 @@ const EntityDetailsContent: React.FC = () => {
           ) : null}
         </Space>
       </PageHeader>
-      {!isMetricsEmpty ? <SummaryGrid metrics={metrics} /> : null}
+      <SummaryGrid metrics={metrics} />
       <Tabs
         activeKey={activeTabKey}
         onChange={setActiveTabKey}
diff --git a/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGrid.tsx b/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGrid.tsx
index 269c16e79..3278d91bd 100644
--- a/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGrid.tsx
+++ b/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGrid.tsx
@@ -1,62 +1,51 @@
-import React from 'react';
+import React, {FC, memo} from 'react';
 
-import {Title} from '@custom-antd';
+import {LoadingOutlined} from '@ant-design/icons';
 
 import {Metrics} from '@models/metrics';
 
-import Colors from '@styles/Colors';
-
 import {formatDuration} from '@utils/formatDate';
 
-import {CustomText, SummaryGridItem, SummaryGridWrapper} from './SummaryGrid.styled';
+import {SummaryGridWrapper} from './SummaryGrid.styled';
+import SummaryGridItem from './SummaryGridItem';
 
 type SummaryGridProps = {
-  metrics: Metrics;
+  metrics?: Metrics;
 };
 
-const SummaryGrid: React.FC<SummaryGridProps> = props => {
+const SummaryGrid: FC<SummaryGridProps> = memo(props => {
   const {metrics} = props;
 
-  return (
-    <>
+  if (!metrics) {
+    return (
       <SummaryGridWrapper>
-        <SummaryGridItem>
-          <CustomText title="PASS/FAIL RATIO" className="uppercase middle" $color={Colors.slate500}>
-            pass/fail ratio
-          </CustomText>
-          <Title level={3}>{metrics?.passFailRatio ? `${metrics?.passFailRatio.toFixed(2)}%` : '-'}</Title>
-        </SummaryGridItem>
-        <SummaryGridItem>
-          <CustomText title="EXECUTION DURATION (P50)" className="uppercase middle" $color={Colors.slate500}>
-            execution duration (p50)
-          </CustomText>
-          <Title level={3}>
-            {metrics?.executionDurationP50ms ? formatDuration(metrics?.executionDurationP50ms / 1000) : '-'}
-          </Title>
-        </SummaryGridItem>
-        <SummaryGridItem>
-          <CustomText title="EXECUTION DURATION (P95)" className="uppercase middle" $color={Colors.slate500}>
-            execution duration (p95)
-          </CustomText>
-          <Title level={3}>
-            {metrics?.executionDurationP95ms ? formatDuration(metrics?.executionDurationP95ms / 1000) : '-'}
-          </Title>
-        </SummaryGridItem>
-        <SummaryGridItem>
-          <CustomText title="FAILED EXECUTIONS" className="uppercase middle" $color={Colors.slate500}>
-            failed executions
-          </CustomText>
-          <Title level={3}>{metrics?.failedExecutions || '-'}</Title>
-        </SummaryGridItem>
-        <SummaryGridItem>
-          <CustomText title="TOTAL EXECUTIONS" className="uppercase middle" $color={Colors.slate500}>
-            total executions
-          </CustomText>
-          <Title level={3}>{metrics?.totalExecutions || '-'}</Title>
-        </SummaryGridItem>
+        <SummaryGridItem title="PASS/FAIL RATIO" value={<LoadingOutlined />} />
+        <SummaryGridItem title="EXECUTION DURATION (P50)" value={<LoadingOutlined />} />
+        <SummaryGridItem title="EXECUTION DURATION (P95)" value={<LoadingOutlined />} />
+        <SummaryGridItem title="FAILED EXECUTIONS" value={<LoadingOutlined />} />
+        <SummaryGridItem title="TOTAL EXECUTIONS" value={<LoadingOutlined />} />
       </SummaryGridWrapper>
-    </>
+    );
+  }
+
+  return (
+    <SummaryGridWrapper>
+      <SummaryGridItem
+        title="PASS/FAIL RATIO"
+        value={metrics.passFailRatio && `${metrics.passFailRatio.toFixed(2)}%`}
+      />
+      <SummaryGridItem
+        title="EXECUTION DURATION (P50)"
+        value={metrics.executionDurationP50ms && formatDuration(metrics.executionDurationP50ms / 1000)}
+      />
+      <SummaryGridItem
+        title="EXECUTION DURATION (P95)"
+        value={metrics.executionDurationP95ms && formatDuration(metrics.executionDurationP95ms / 1000)}
+      />
+      <SummaryGridItem title="FAILED EXECUTIONS" value={metrics.failedExecutions} />
+      <SummaryGridItem title="TOTAL EXECUTIONS" value={metrics.totalExecutions} />
+    </SummaryGridWrapper>
   );
-};
+});
 
 export default SummaryGrid;
diff --git a/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGridItem.tsx b/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGridItem.tsx
new file mode 100644
index 000000000..3e149fa68
--- /dev/null
+++ b/src/components/organisms/EntityDetails/EntityDetailsContent/SummaryGrid/SummaryGridItem.tsx
@@ -0,0 +1,23 @@
+import React, {FC, ReactNode, memo} from 'react';
+
+import {Title} from '@custom-antd';
+
+import Colors from '@styles/Colors';
+
+import {CustomText, SummaryGridItem as ItemContainer} from './SummaryGrid.styled';
+
+type SummaryGridProps = {
+  title: string;
+  value?: ReactNode;
+};
+
+const SummaryGridItem: FC<SummaryGridProps> = memo(({title, value}) => (
+  <ItemContainer>
+    <CustomText title={title} className="uppercase middle" $color={Colors.slate500}>
+      {title}
+    </CustomText>
+    <Title level={3}>{value ?? '-'}</Title>
+  </ItemContainer>
+));
+
+export default SummaryGridItem;

From 2bf1c0ac72ff593f020ec35667b4276074807445 Mon Sep 17 00:00:00 2001
From: Dawid Rusnak <dawid@drcode.pl>
Date: Thu, 3 Aug 2023 13:38:15 +0200
Subject: [PATCH 2/2] fix: always show filtering by date

Relates to: kubeshop/testkube#4083
---
 .../EntityDetailsContent.tsx                  | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx b/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx
index f65eda573..a10a51af5 100644
--- a/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx
+++ b/src/components/organisms/EntityDetails/EntityDetailsContent/EntityDetailsContent.tsx
@@ -137,8 +137,6 @@ const EntityDetailsContent: React.FC = () => {
       }
     : {};
 
-  const isMetricsEmpty = !metrics?.executions || !metrics?.executions.length;
-
   const isPageDisabled = !name;
 
   return (
@@ -149,16 +147,14 @@ const EntityDetailsContent: React.FC = () => {
         onBack={() => navigate(defaultStackRoute)}
         title={name || 'Loading...'}
         extra={[
-          !isMetricsEmpty ? (
-            <Select
-              placeholder="Last 7/30/90/Year/All days"
-              options={filterOptions}
-              style={{width: 250}}
-              value={daysFilterValue}
-              onChange={setDaysFilterValue}
-              key="days-filter-select"
-            />
-          ) : null,
+          <Select
+            placeholder="Last 7/30/90/Year/All days"
+            options={filterOptions}
+            style={{width: 250}}
+            value={daysFilterValue}
+            onChange={setDaysFilterValue}
+            key="days-filter-select"
+          />,
           <DotsDropdown
             key="entity-options"
             items={[{key: 1, label: <span onClick={onAbortAllExecutionsClick}>Abort all executions</span>}]}