fix duplicate summary ids (#441)

netobserv · Dec 13, 2023 · 6c3c758 · 6c3c758
1 parent 1ad111a
commit 6c3c758
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/web/src/components/query-summary/__tests__/flows-query-summary.spec.tsx b/web/src/components/query-summary/__tests__/flows-query-summary.spec.tsx
@@ -32,7 +32,7 @@ describe('<FlowsQuerySummary />', () => {
     expect(wrapper.find('#flowsCount').last().text()).toBe('3 Flows');
     expect(wrapper.find('#bytesCount').last().text()).toBe('161 kB');
     expect(wrapper.find('#packetsCount').last().text()).toBe('1k Packets');
-    expect(wrapper.find('#bpsCount').last().text()).toBe('538 Bps');
+    expect(wrapper.find('#bytesPerSecondsCount').last().text()).toBe('538 Bps');
     expect(wrapper.find('#lastRefresh').last().text()).toBe(now.toLocaleTimeString());
   });
 
@@ -43,7 +43,7 @@ describe('<FlowsQuerySummary />', () => {
     expect(wrapper.find('#flowsCount').last().text()).toBe('1k+ Flows');
     expect(wrapper.find('#bytesCount').last().text()).toBe('757+ MB');
     expect(wrapper.find('#packetsCount').last().text()).toBe('1k+ Packets');
-    expect(wrapper.find('#bpsCount').last().text()).toBe('2.52+ MBps');
+    expect(wrapper.find('#bytesPerSecondsCount').last().text()).toBe('2.52+ MBps');
     expect(wrapper.find('#lastRefresh').last().text()).toBe(now.toLocaleTimeString());
   });
 

diff --git a/web/src/components/query-summary/__tests__/metrics-query-summary.spec.tsx b/web/src/components/query-summary/__tests__/metrics-query-summary.spec.tsx
@@ -27,7 +27,7 @@ describe('<MetricsQuerySummary />', () => {
     const wrapper = mount(<MetricsQuerySummary {...mocks} />);
     expect(wrapper.find('#bytesCount').last().text()).toBe('6.8 MB');
     expect(wrapper.find('#packetsCount')).toHaveLength(0);
-    expect(wrapper.find('#bpsCount').last().text()).toBe('22.79 kBps');
+    expect(wrapper.find('#bytesPerSecondsCount').last().text()).toBe('22.79 kBps');
     expect(wrapper.find('#lastRefresh').last().text()).toBe(now.toLocaleTimeString());
   });
 

diff --git a/web/src/components/query-summary/flows-query-summary.tsx b/web/src/components/query-summary/flows-query-summary.tsx
@@ -68,7 +68,7 @@ export const FlowsQuerySummaryContent: React.FC<{
         {bytes > 0 && (
           <FlexItem>
             <Tooltip content={<Text component={TextVariants.p}>{t('Filtered average speed')}</Text>}>
-              <Text id="bpsCount" component={TextVariants.p}>
+              <Text id="bytesPerSecondsCount" component={TextVariants.p}>
                 {valueFormat(bytes / rangeInSeconds, 2, t('Bps'), limitReached)}
               </Text>
             </Tooltip>

diff --git a/web/src/components/query-summary/metrics-query-summary.tsx b/web/src/components/query-summary/metrics-query-summary.tsx
@@ -91,20 +91,20 @@ export const MetricsQuerySummaryContent: React.FC<{
             ? valueFormat(avgSum, 2, t('Bps')) + ' / ' + valueFormat(appMetrics.stats.avg, 2, t('Bps'))
             : valueFormat(avgSum, 2, t('Bps'));
           return [
-            <FlexItem key="bytesCount">
+            <FlexItem key={`${metricType}Count`}>
               <Tooltip content={<Text component={TextVariants.p}>{textAbs}</Text>}>
                 <div className="stats-query-summary-container">
-                  <Text id="bytesCount" component={TextVariants.p} style={{ color: textColor }}>
+                  <Text id={`${metricType}Count`} component={TextVariants.p} style={{ color: textColor }}>
                     {valAbs}
                   </Text>
                 </div>
               </Tooltip>
             </FlexItem>,
-            <FlexItem key="bpsCount">
+            <FlexItem key={`${metricType}PerSecondsCount`}>
               <Tooltip content={<Text component={TextVariants.p}>{textRate}</Text>}>
                 <div className="stats-query-summary-container-with-icon">
                   <TachometerAltIcon />
-                  <Text id="bpsCount" component={TextVariants.p} style={{ color: textColor }}>
+                  <Text id={`${metricType}PerSecondsCount`} component={TextVariants.p} style={{ color: textColor }}>
                     {valRate}
                   </Text>
                 </div>
@@ -122,10 +122,10 @@ export const MetricsQuerySummaryContent: React.FC<{
           const valAbs =
             (appMetrics ? `${absTotal} / ${appMetrics.stats.total}` : String(absTotal)) + ' ' + t('packets');
           return [
-            <FlexItem key="packetsCount">
+            <FlexItem key={`${metricType}Count`}>
               <Tooltip content={<Text component={TextVariants.p}>{textAbs}</Text>}>
                 <div className="stats-query-summary-container">
-                  <Text id="packetsCount" component={TextVariants.p} style={{ color: textColor }}>
+                  <Text id={`${metricType}Count`} component={TextVariants.p} style={{ color: textColor }}>
                     {valAbs}
                   </Text>
                 </div>