From f716ece35fd4b0480424ad46efec5cdf97b638ce Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Tue, 23 Apr 2024 14:03:37 +0100
Subject: [PATCH] Refactor Tab component to include countBadge and tabType
 properties

---
 CommonUI/src/Components/Tabs/Tab.tsx         | 37 ++++++++++++++++++--
 Dashboard/src/Components/Span/SpanViewer.tsx | 31 ++++++++++++++--
 2 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/CommonUI/src/Components/Tabs/Tab.tsx b/CommonUI/src/Components/Tabs/Tab.tsx
index b0f33fd4b3..ec91aad0ef 100644
--- a/CommonUI/src/Components/Tabs/Tab.tsx
+++ b/CommonUI/src/Components/Tabs/Tab.tsx
@@ -1,7 +1,16 @@
 import React, { FunctionComponent, ReactElement } from 'react';
 
+export enum TabType {
+    Error = 'error',
+    Warning = 'warning',
+    Info = 'info',
+    Success = 'success',
+}
+
 export interface Tab {
     name: string;
+    countBadge?: number | undefined;
+    tabType?: TabType | undefined;
     children: ReactElement;
 }
 
@@ -14,6 +23,8 @@ export interface ComponentProps {
 const TabElement: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
+    const backgroundColor: string = 'bg-gray-100';
+
     return (
         <div className="mt-3 mb-3">
             <div
@@ -21,13 +32,33 @@ const TabElement: FunctionComponent<ComponentProps> = (
                 onClick={props.onClick}
                 className={`${
                     (props.isSelected
-                        ? 'bg-gray-100 text-gray-700'
+                        ? backgroundColor + ' text-gray-700'
                         : 'text-gray-500 hover:text-gray-700') +
-                    ' rounded-md px-3 py-2 text-sm font-medium cursor-pointer'
+                    ' rounded-md px-3 py-2 text-sm font-medium cursor-pointer flex'
                 }`}
                 aria-current={props.isSelected ? 'page' : undefined}
             >
-                {props.tab.name}
+                <div>{props.tab.name}</div>
+
+                {props.tab.countBadge && props.tab.countBadge > 0 ? (
+                    <span
+                        className={`${
+                            props.tab.tabType === TabType.Error
+                                ? 'bg-red-500'
+                                : props.tab.tabType === TabType.Warning
+                                ? 'bg-yellow-500'
+                                : props.tab.tabType === TabType.Info
+                                ? 'bg-indigo-500'
+                                : props.tab.tabType === TabType.Success
+                                ? 'bg-green-500'
+                                : 'bg-gray-500'
+                        } text-white rounded-full px-2 py-1 text-xs font-semibold ml-2 -mt-0.5`}
+                    >
+                        {props.tab.countBadge}
+                    </span>
+                ) : (
+                    <></>
+                )}
             </div>
         </div>
     );
diff --git a/Dashboard/src/Components/Span/SpanViewer.tsx b/Dashboard/src/Components/Span/SpanViewer.tsx
index 9f8a608613..3c096fce27 100644
--- a/Dashboard/src/Components/Span/SpanViewer.tsx
+++ b/Dashboard/src/Components/Span/SpanViewer.tsx
@@ -26,6 +26,7 @@ import CodeType from 'Common/Types/Code/CodeType';
 import JSONFunctions from 'Common/Types/JSONFunctions';
 import AccordionGroup from 'CommonUI/src/Components/Accordion/AccordionGroup';
 import Accordion from 'CommonUI/src/Components/Accordion/Accordion';
+import { TabType } from 'CommonUI/src/Components/Tabs/Tab';
 
 export interface ComponentProps {
     id: string;
@@ -288,9 +289,9 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
             (event: SpanEvent) => {
                 if (eventType === SpanEventType.Exception) {
                     // name of the event is exception
-                    return event.name === SpanEventType.Exception;
+                    return event.name === SpanEventType.Exception.toLowerCase();
                 }
-                return event.name !== SpanEventType.Exception;
+                return event.name !== SpanEventType.Exception.toLowerCase();
             }
         );
 
@@ -303,6 +304,12 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
             return <ErrorMessage error="No events found for this span." />;
         }
 
+        let bgColorClassName: string = 'bg-indigo-500';
+
+        if (eventType === SpanEventType.Exception) {
+            bgColorClassName = 'bg-red-500';
+        }
+
         return (
             <AccordionGroup>
                 {eventsToShow.map((event: SpanEvent, index: number) => {
@@ -312,7 +319,9 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
                             title={
                                 <div className="flex space-x-2">
                                     <div className="flex space-x-2">
-                                        <div className="rounded-md bg-indigo-500 text-white p-1 text-xs font-semibold">
+                                        <div
+                                            className={`rounded-md text-white p-1 text-xs font-semibold ${bgColorClassName}`}
+                                        >
                                             {eventType}: {index + 1}
                                         </div>
                                         <div className="flex space-x-1">
@@ -523,6 +532,8 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
                     {
                         name: 'Logs',
                         children: getLogsContentElement(),
+                        countBadge: logs.length,
+                        tabType: TabType.Info,
                     },
                     {
                         name: 'Attributes',
@@ -531,10 +542,24 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
                     {
                         name: 'Events',
                         children: getEventsContentElement(),
+                        countBadge: span?.events?.filter((event: SpanEvent) => {
+                            return (
+                                event.name !==
+                                SpanEventType.Exception.toLowerCase()
+                            );
+                        }).length,
+                        tabType: TabType.Info,
                     },
                     {
                         name: 'Exceptions',
                         children: getExceptionsContentElement(),
+                        tabType: TabType.Error,
+                        countBadge: span?.events?.filter((event: SpanEvent) => {
+                            return (
+                                event.name ===
+                                SpanEventType.Exception.toLowerCase()
+                            );
+                        }).length,
                     },
                 ]}
                 onTabChange={() => {}}