Fix formatting and add selectedBarIds functionality

Common/Types/BaseDatabase/Includes.ts

@@ -31,11 +31,12 @@ export default class Includes extends SerializableObject {
 
     public static override fromJSON(json: JSONObject): Includes {
         if (json['_type'] === ObjectType.Includes) {
-
             const valuesArray: Array<string> = [];
 
-            for(const value of json['value'] as Array<string> || []) {
-                valuesArray.push(JSONFunctions.deserializeValue(value) as string);
+            for (const value of (json['value'] as Array<string>) || []) {
+                valuesArray.push(
+                    JSONFunctions.deserializeValue(value) as string
+                );
             }
 
             return new Includes(valuesArray);

CommonServer/Utils/AnalyticsDatabase/Statement.ts

@@ -105,11 +105,13 @@ export class Statement implements BaseQueryParams {
         ) {
             finalValue = v.value.value;
         } else if (v.value instanceof Includes) {
-            if (v.type === TableColumnType.Text || v.type === TableColumnType.ObjectID) {
-                
+            if (
+                v.type === TableColumnType.Text ||
+                v.type === TableColumnType.ObjectID
+            ) {
                 finalValue = v.value.values.map((val: string | ObjectID) => {
                     return `${val.toString()}`;
-                })
+                });
             } else {
                 finalValue = v.value.values;
             }
@@ -152,7 +154,9 @@ export class Statement implements BaseQueryParams {
         })}`;
     }
 
-    private static toColumnType(statementParam: StatementParameter | string): string {
+    private static toColumnType(
+        statementParam: StatementParameter | string
+    ): string {
         // ensure we have a mapping for all types (a missing mapping will
         // be a compile error)
         const columnTypes: Dictionary<string> = {
@@ -169,11 +173,13 @@ export class Statement implements BaseQueryParams {
             [TableColumnType.LongNumber]: 'Int128',
         };
 
-        if((statementParam as StatementParameter).value instanceof Includes){
+        if ((statementParam as StatementParameter).value instanceof Includes) {
             return 'Array(String)';
         }
 
-        return columnTypes[(statementParam as StatementParameter).type] || 'String';
+        return (
+            columnTypes[(statementParam as StatementParameter).type] || 'String'
+        );
     }
 }
 

CommonServer/Utils/AnalyticsDatabase/StatementGenerator.ts

@@ -405,8 +405,6 @@ export default class StatementGenerator<TBaseModel extends AnalyticsBaseModel> {
             }
         }
 
-        
-
         return whereStatement;
     }
 

CommonUI/src/Components/GanttChart/Bar/Index.tsx

@@ -23,6 +23,9 @@ export interface ComponentProps {
     chartTimelineStart: number;
     chartTimelineEnd: number;
     timelineWidth: number;
+    areOtherBarsSelected: boolean;
+    onSelect: (barId: string) => void;
+    onDeselect: (barId: string) => void;
 }
 
 const Bar: FunctionComponent<ComponentProps> = (
@@ -30,6 +33,8 @@ const Bar: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
     const [isHovered, setIsHovered] = useState(false);
 
+    const [isSelected, setIsSelected] = useState(false);
+
     // calculate bar width.
     let barWidth: number =
         ((props.bar.barTimelineEnd - props.bar.barTimelineStart) /
@@ -61,12 +66,20 @@ const Bar: FunctionComponent<ComponentProps> = (
         setIsHovered(false);
     };
 
+
+    let barOpacity: number = 1; 
+
+    if(props.areOtherBarsSelected && !isSelected) {
+        barOpacity = 0.5;
+    }
+
     return (
         // rectangle div with curved corners and text inside in tailwindcss
         <div
             className="flex absolute"
             style={{
                 marginLeft: `${barLeftPosition}px`,
+                
             }}
         >
             <div
@@ -75,9 +88,18 @@ const Bar: FunctionComponent<ComponentProps> = (
                     marginLeft: `${barLeftPosition}px`,
                     width: `${barWidth}px`,
                     backgroundColor: `${props.bar.barColor.toString()}`,
+                    opacity: barOpacity,
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
+                onClick={() => {
+                    if (isSelected) {
+                        props.onDeselect(props.bar.id);
+                    } else {
+                        props.onSelect(props.bar.id);
+                    }
+                    setIsSelected(!isSelected);
+                }}
             >
                 {!showLabelOutsideBar && (
                     <BarLabel
@@ -96,6 +118,7 @@ const Bar: FunctionComponent<ComponentProps> = (
                     className="h-8 pt-1 pb-1 mt-2.5 mb-2.5"
                     style={{
                         marginLeft: `${barLeftPosition + barWidth + 10}px`,
+                        opacity: barOpacity,
                     }}
                 >
                     <BarLabel

CommonUI/src/Components/GanttChart/Index.tsx

@@ -10,6 +10,7 @@ export interface GanttChartProps {
     rows: GanttChartRow[];
     bars: GanttChartBar[];
     timeline: GanttChartTimeline;
+    onBarSelectChange: (barIds: string[]) => void;
 }
 
 export interface ComponentProps {
@@ -21,6 +22,8 @@ const GanttChart: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
     const eachIntervalDefaultWidth: number = 100; // in pixels
 
+    const [selectedBarIds, setSelectedBarIds] = React.useState<string[]>([]);
+
     const [chartWidth, setChartWidth] = React.useState<number>(0);
     const [timelineWidth, setTimelineWidth] = React.useState<number>(2000);
 
@@ -70,6 +73,11 @@ const GanttChart: FunctionComponent<ComponentProps> = (
                     chartTimelineStart={props.chart.timeline.start}
                     rows={props.chart.rows}
                     bars={props.chart.bars}
+                    selectedBarIds={selectedBarIds}
+                    onBarSelectChange={(barIds: string[]) => {
+                        setSelectedBarIds(barIds);
+                        props.chart.onBarSelectChange(barIds);
+                    }}
                 />
             </div>
         </ChartContainer>

CommonUI/src/Components/GanttChart/Row/Index.tsx

@@ -15,6 +15,8 @@ export interface ComponentProps {
     chartTimelineStart: number;
     chartTimelineEnd: number;
     timelineWidth: number;
+    selectedBarIds: string[];
+    onBarSelectChange: (barIds: string[]) => void;
 }
 
 const Row: FunctionComponent<ComponentProps> = (
@@ -43,6 +45,28 @@ const Row: FunctionComponent<ComponentProps> = (
                             chartTimelineEnd={props.chartTimelineEnd}
                             chartTimelineStart={props.chartTimelineStart}
                             timelineWidth={props.timelineWidth}
+                            areOtherBarsSelected={props.selectedBarIds.length > 0}
+                            onSelect={(barId: string) => {
+                                // check if the bar is already selected
+                                if (props.selectedBarIds.includes(barId)) {
+                                    return;
+                                }
+
+                                props.onBarSelectChange([...props.selectedBarIds, barId]);
+                            }}
+                            onDeselect={(barId: string) => {
+
+                                // check if the bar is already selected
+                                if (!props.selectedBarIds.includes(barId)) {
+                                    return;
+                                }
+                                
+                                props.onBarSelectChange(
+                                    props.selectedBarIds.filter((id: string) => {
+                                        return id !== barId;
+                                    })
+                                );
+                            }}
                         />
                     );
                 })}

CommonUI/src/Components/GanttChart/Rows.tsx

@@ -8,6 +8,8 @@ export interface ComponentProps {
     chartTimelineStart: number;
     chartTimelineEnd: number;
     timelineWidth: number;
+    selectedBarIds: string[];
+    onBarSelectChange: (barIds: string[]) => void;
 }
 
 const Rows: FunctionComponent<ComponentProps> = (
@@ -27,6 +29,8 @@ const Rows: FunctionComponent<ComponentProps> = (
                         bars={props.bars.filter((bar: GanttChartBar) => {
                             return bar.rowId === row.id;
                         })}
+                        selectedBarIds={props.selectedBarIds}
+                        onBarSelectChange={props.onBarSelectChange}
                     />
                 );
             })}

Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx

@@ -22,6 +22,9 @@ import DashboardLogsViewer from '../../../../../../Components/LogsViewer/LogsVie
 const TraceView: FunctionComponent<PageComponentProps> = (
     _props: PageComponentProps
 ): ReactElement => {
+
+    const [selectedSpans, setSelectedSpans] = React.useState<string[]>([]);
+
     const oneuptimeSpanId: ObjectID = Navigation.getLastParamAsObjectID(0);
     const telemetryServiceId: ObjectID = Navigation.getLastParamAsObjectID(0);
 
@@ -255,6 +258,9 @@ const TraceView: FunctionComponent<PageComponentProps> = (
                     description: span.spanId!,
                 };
             }),
+            onBarSelectChange(barIds: Array<string>) {
+                setSelectedSpans(barIds);
+            },
             bars: spans.map((span: Span) => {
                 const spanColor: {
                     barColor: Color;
@@ -319,6 +325,7 @@ const TraceView: FunctionComponent<PageComponentProps> = (
                     noLogsMessage="No logs found for this trace."
                     telemetryServiceIds={[telemetryServiceId]}
                     traceIds={[traceId]}
+                    spanIds={selectedSpans}
                     enableRealtime={false}
                 />
             )}

Ingestor/API/OTelIngest.ts

@@ -140,9 +140,9 @@ router.post(
                             span['endTimeUnixNano'] as number
                         );
 
-                        dbSpan.durationUnixNano = span[
-                            'endTimeUnixNano'
-                        ] as number - (span['startTimeUnixNano'] as number);
+                        dbSpan.durationUnixNano =
+                            (span['endTimeUnixNano'] as number) -
+                            (span['startTimeUnixNano'] as number);
 
                         dbSpan.name = span['name'] as string;
                         dbSpan.kind =

Model/AnalyticsModels/Span.ts

@@ -267,7 +267,6 @@ export default class Span extends AnalyticsBaseModel {
                     },
                 }),
 
-
                 new AnalyticsTableColumn({
                     key: 'durationUnixNano',
                     title: 'Duration in Unix Nano',
@@ -588,7 +587,6 @@ export default class Span extends AnalyticsBaseModel {
         this.setColumnValue('startTimeUnixNano', v);
     }
 
-
     public get durationUnixNano(): number | undefined {
         return this.getColumnValue('durationUnixNano') as number | undefined;
     }
@@ -653,8 +651,6 @@ export default class Span extends AnalyticsBaseModel {
         this.setColumnValue('endTime', v);
     }
 
-    
-
     public get traceId(): string | undefined {
         return this.getColumnValue('traceId') as string | undefined;
     }