From a5fec2560aa0024a0f1e2b06d5e45d2c04e438a4 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 22 Apr 2024 20:41:36 +0100
Subject: [PATCH] Refactor import statements and update component types in
 multiple files

---
 Common/AnalyticsModels/CommonModel.ts             |  2 ++
 CommonServer/Services/AnalyticsDatabaseService.ts |  2 --
 CommonUI/src/Components/Accordion/Accordion.tsx   |  3 ++-
 Dashboard/src/Components/Span/SpanViewer.tsx      | 14 ++++++++++----
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/Common/AnalyticsModels/CommonModel.ts b/Common/AnalyticsModels/CommonModel.ts
index a8d42c325d..629f7f874a 100644
--- a/Common/AnalyticsModels/CommonModel.ts
+++ b/Common/AnalyticsModels/CommonModel.ts
@@ -219,6 +219,8 @@ export default class CommonModel {
                         recordValue as Array<CommonModel>,
                         column.nestedModelType
                     );
+                } else {
+                    json[column.key] = recordValue;
                 }
 
                 return;
diff --git a/CommonServer/Services/AnalyticsDatabaseService.ts b/CommonServer/Services/AnalyticsDatabaseService.ts
index 7ebc5889d5..576eb2ca90 100644
--- a/CommonServer/Services/AnalyticsDatabaseService.ts
+++ b/CommonServer/Services/AnalyticsDatabaseService.ts
@@ -247,8 +247,6 @@ export default class AnalyticsDatabaseService<
                     findStatement.columns
                 );
 
-            debugger;
-
             let items: Array<TBaseModel> =
                 AnalyticsBaseModel.fromJSONArray<TBaseModel>(
                     jsonItems,
diff --git a/CommonUI/src/Components/Accordion/Accordion.tsx b/CommonUI/src/Components/Accordion/Accordion.tsx
index e5e7e521f0..4d8236e355 100644
--- a/CommonUI/src/Components/Accordion/Accordion.tsx
+++ b/CommonUI/src/Components/Accordion/Accordion.tsx
@@ -18,6 +18,7 @@ export interface ComponentProps {
     rightElement?: ReactElement | undefined;
     isLastElement?: boolean | undefined;
     isInitiallyExpanded?: boolean | undefined;
+    titleClassName?: string | undefined;
 }
 
 const Accordion: FunctionComponent<ComponentProps> = (
@@ -92,7 +93,7 @@ const Accordion: FunctionComponent<ComponentProps> = (
                                     props.onClick ? 'cursor-pointer' : ''
                                 }`}
                             >
-                                <div className="text-gray-500">
+                                <div className={`text-gray-500 ${props.titleClassName}`}>
                                     {props.title}{' '}
                                 </div>
                                 <div className="mb-2 text-sm">
diff --git a/Dashboard/src/Components/Span/SpanViewer.tsx b/Dashboard/src/Components/Span/SpanViewer.tsx
index 6afe2c40ca..fc7b47b97d 100644
--- a/Dashboard/src/Components/Span/SpanViewer.tsx
+++ b/Dashboard/src/Components/Span/SpanViewer.tsx
@@ -24,6 +24,8 @@ import SpanStatusElement from './SpanStatusElement';
 import CodeEditor from 'CommonUI/src/Components/CodeEditor/CodeEditor';
 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';
 
 export interface ComponentProps {
     id: string;
@@ -279,16 +281,20 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
                 return <ErrorMessage error="No events found for this span." />;
             }
 
+            // remove this. this is just for testing
+            console.log(span.events);
+            span.events = [...span.events, ...span.events];
+
             return (
-                <div>
+                <AccordionGroup>
                     {span.events.map((event: SpanEvent, index: number) => {
                         return (
-                            <div key={index} className="space-y-5">
+                            <Accordion titleClassName='text-sm' title={`Event: ${event.name}`} key={index} >
                                 {getEventContentElement(event)}
-                            </div>
+                            </Accordion>
                         );
                     })}
-                </div>
+                </AccordionGroup>
             );
         };