Merge branch 'aarthy/gantt-time' into 'enterprise'

ci bot · ci bot · commit 7ce1e2a3b077 · 2025-02-14T21:59:05.000Z
fix(ui): update time formats and add pipeline key to Gantt tooltip

See merge request dkinternal/observability/dataops-observability!32
diff --git a/observability_ui/apps/shell/src/app/projects/instances/instance-tests/instance-tests.component.html b/observability_ui/apps/shell/src/app/projects/instances/instance-tests/instance-tests.component.html
@@ -183,7 +183,7 @@
       <span headerLabel="start_time">Start Time</span>
     </ng-container>
     <ng-container *matCellDef="let test">
-      <div dkTooltip="{{test.start_time | date: 'medium'}}">{{test.start_time | date: 'hh:mm:ss a'}}</div>
+      <div dkTooltip="{{test.start_time | date: 'medium'}}">{{test.start_time | date: 'h:mm:ss a'}}</div>
     </ng-container>
   </ng-container>
   <ng-container matColumnDef="end_time"
@@ -193,7 +193,7 @@
       <span headerLabel="end_time">End Time</span>
     </ng-container>
     <ng-container *matCellDef="let test">
-      <div dkTooltip="{{test.end_time | date: 'medium'}}">{{test.end_time | date: 'hh:mm:ss a'}}</div>
+      <div dkTooltip="{{test.end_time | date: 'medium'}}">{{test.end_time | date: 'h:mm:ss a'}}</div>
     </ng-container>
   </ng-container>
   <ng-container matColumnDef="actions"
diff --git a/observability_ui/apps/shell/src/app/projects/instances/instance-timeline/instance-timeline.component.html b/observability_ui/apps/shell/src/app/projects/instances/instance-timeline/instance-timeline.component.html
@@ -12,8 +12,7 @@
       [start]="ganttStartDate$ | async"
       [end]="ganttEndDate$ | async"
       [nowBar]="instanceIsActive$ | async"
-      [timeformat]="timeformat$ | async"
-      [showDays]="spansMultipleDays$ | async">
+      [timeformat]="timeformat$ | async">
 
       <ng-template ganttLabel
         let-taskGroup="group">
@@ -49,8 +48,10 @@
         <ng-template #barTooltip>
           <div class="gantt-bar-tooltip">
             <span class="gantt-bar-tooltip--line gantt-bar-tooltip--name">{{ run.pipeline.display_name }}</span>
+            <span *ngIf="run.pipeline.key !== run.pipeline.display_name"
+              class="gantt-bar-tooltip--line gantt-bar-tooltip--key">Key: {{ run.pipeline.key ?? '-' }}</span>
             <span class="gantt-bar-tooltip--line gantt-bar-tooltip--status">{{ 'runStatus.' + run.status | translate }}</span>
-            <span class="gantt-bar-tooltip--line gantt-bar-tooltip--key">Key: {{ run.key ?? '-' }}</span>
+            <span class="gantt-bar-tooltip--line gantt-bar-tooltip--key">Run Key: {{ run.key ?? '-' }}</span>
             <span *ngIf="run.hasTime"
               class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ run.start_time | date: (timeformat$ | async) }}</span>
             <span *ngIf="run.hasTime && run.status !== 'RUNNING'"
diff --git a/observability_ui/apps/shell/src/app/projects/instances/instance-timeline/instance-timeline.component.ts b/observability_ui/apps/shell/src/app/projects/instances/instance-timeline/instance-timeline.component.ts
@@ -56,16 +56,11 @@ export class InstanceTimelineComponent implements OnInit, OnDestroy {
     map(([ start, end ]) => {
       const timespan = end.getTime() - start.getTime();
       if (timespan <= this.minTimespanInMilliseconds) {
-        return 'hh:mm:ss a';
+        return 'MMM d, h:mm:ss a';
       }
-      return 'hh:mm a';
-    }),
-    startWith('hh:mm a'),
-  );
-  spansMultipleDays$ = combineLatest([ this.ganttStartDate$, this.ganttEndDate$ ]).pipe(
-    map(([ start, end ]) => {
-      return (end.getTime() - start.getTime()) > 24 * 60 * 60 * 1000;
+      return 'MMM d, h:mm a';
     }),
+    startWith('MMM d, h:mm a'),
   );
 
   private minTimespanInMilliseconds: number = 1 * 60 * 1000;
diff --git a/observability_ui/apps/shell/src/app/projects/overview/overview.component.html b/observability_ui/apps/shell/src/app/projects/overview/overview.component.html
@@ -145,22 +145,22 @@ <h1 class="page-title">{{ 'overview' | translate }}</h1>
                   <span class="gantt-bar-tooltip--line">{{ instance.errorAlertsCount }}
                     errors, {{ instance.warningAlertsCount }} warnings</span>
                   <span class="gantt-bar-tooltip--line gantt-bar-tooltip--runs">Total Runs: {{ instance.runsCount }}</span>
-                  <span class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ instance.start_time | date:'MMM d, hh:mm a' }}</span>
+                  <span class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ instance.start_time | date:'MMM d, h:mm a' }}</span>
                   <span *ngIf="!instance.active"
-                    class="gantt-bar-tooltip--line gantt-bar-tooltip--end">End Time: {{ instance.end_time | date:'MMM d, hh:mm a' }}</span>
+                    class="gantt-bar-tooltip--line gantt-bar-tooltip--end">End Time: {{ instance.end_time | date:'MMM d, h:mm a' }}</span>
                   <span class="gantt-bar-tooltip--line gantt-bar-tooltip--duration">Duration: {{ instance.start_time | duration:instance.end_time }}</span>
                 </ng-container>
 
                 <ng-container *ngIf="instance.status === 'UPCOMING'">
 
                 <span *ngIf="instance.expected_start_time"
                   class="gantt-bar-tooltip--line gantt-bar-tooltip--start">
-                  Expected Start Time: {{ instance.start_time | date:'MMM d, hh:mm a' }}
+                  Expected Start Time: {{ instance.start_time | date:'MMM d, h:mm a' }}
                 </span>
 
                   <span *ngIf="instance.expected_end_time"
                     class="gantt-bar-tooltip--line gantt-bar-tooltip--end">
-                  Expected End Time: {{ instance.end_time | date:'MMM d, hh:mm a' }}
+                  Expected End Time: {{ instance.end_time | date:'MMM d, h:mm a' }}
                 </span>
 
                 </ng-container>
@@ -246,22 +246,22 @@ <h1 class="page-title">{{ 'overview' | translate }}</h1>
                         <span class="gantt-bar-tooltip--line gantt-bar-tooltip--runs">{{ directive.value.active ? 'Active' : 'Ended' }}</span>
                         <span class="gantt-bar-tooltip--line gantt-bar-tooltip--status">{{ directive.value.errorAlertsCount }}
                           errors, {{ directive.value.warningAlertsCount }} warnings</span>
-                        <span class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ directive.value.start_time | date:'MMM d, hh:mm a' }}</span>
+                        <span class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ directive.value.start_time | date:'MMM d, h:mm a' }}</span>
                         <span *ngIf="!directive.value.active"
-                          class="gantt-bar-tooltip--line gantt-bar-tooltip--end">End Time: {{ directive.value.end_time | date:'MMM d, hh:mm a' }}</span>
+                          class="gantt-bar-tooltip--line gantt-bar-tooltip--end">End Time: {{ directive.value.end_time | date:'MMM d, h:mm a' }}</span>
                         <span class="gantt-bar-tooltip--line gantt-bar-tooltip--duration">Duration: {{ directive.value.start_time | duration:directive.value.end_time }}</span>
                         <span class="gantt-bar-tooltip--line gantt-bar-tooltip--runs">Total Runs: {{ directive.value.runsCount }}</span>
                       </ng-container>
 
                       <ng-container *ngIf="directive.value.status === 'UPCOMING'">
                       <span *ngIf="directive.value.expected_start_time"
                         class="gantt-bar-tooltip--line gantt-bar-tooltip--start mt-2">
-                        Expected Start Time: {{ directive.value.start_time | date:'MMM d, hh:mm a' }}
+                        Expected Start Time: {{ directive.value.start_time | date:'MMM d, h:mm a' }}
                       </span>
 
                         <span *ngIf="directive.value.expected_end_time"
                           class="gantt-bar-tooltip--line gantt-bar-tooltip--end">
-                        Expected End Time: {{ directive.value.end_time | date:'MMM d, hh:mm a' }}
+                        Expected End Time: {{ directive.value.end_time | date:'MMM d, h:mm a' }}
                       </span>
 
                       </ng-container>
@@ -290,9 +290,9 @@ <h1 class="page-title">{{ 'overview' | translate }}</h1>
                           <span class="gantt-bar-tooltip--line gantt-bar-tooltip--status">{{ 'runStatus.' + run.status | translate }}</span>
                           <span class="gantt-bar-tooltip--line gantt-bar-tooltip--key">Key: {{ run.key ?? '-' }}</span>
                           <span *ngIf="run.hasTime"
-                            class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ run.start_time | date: 'MMM d, hh:mm a' }}</span>
+                            class="gantt-bar-tooltip--line gantt-bar-tooltip--start">Start Time: {{ run.start_time | date: 'MMM d, h:mm a' }}</span>
                           <span *ngIf="run.hasTime && run.status !== 'RUNNING'"
-                            class="gantt-bar-tooltip--line gantt-bar-tooltip--end">End Time: {{ run.end_time | date: 'MMM d, hh:mm a' }}</span>
+                            class="gantt-bar-tooltip--line gantt-bar-tooltip--end">End Time: {{ run.end_time | date: 'MMM d, h:mm a' }}</span>
                           <span *ngIf="run.hasTime"
                             class="gantt-bar-tooltip--line gantt-bar-tooltip--duration">Duration: {{ run.start_time | duration: (run.end_time ?? (now$ | async)) }}</span>
                         </div>
diff --git a/observability_ui/apps/shell/src/app/projects/runs/run-tests/run-tests.component.html b/observability_ui/apps/shell/src/app/projects/runs/run-tests/run-tests.component.html
@@ -165,7 +165,7 @@
       <span headerLabel="start_time">Start Time</span>
     </ng-container>
     <ng-container *matCellDef="let test">
-      <div dkTooltip="{{test.start_time | date: 'medium'}}">{{test.start_time | date: 'hh:mm:ss a'}}</div>
+      <div dkTooltip="{{test.start_time | date: 'medium'}}">{{test.start_time | date: 'h:mm:ss a'}}</div>
     </ng-container>
   </ng-container>
   <ng-container matColumnDef="end_time"
@@ -175,7 +175,7 @@
       <span headerLabel="end_time">End Time</span>
     </ng-container>
     <ng-container *matCellDef="let test">
-      <div dkTooltip="{{test.end_time | date: 'medium'}}">{{test.end_time | date: 'hh:mm:ss a'}}</div>
+      <div dkTooltip="{{test.end_time | date: 'medium'}}">{{test.end_time | date: 'h:mm:ss a'}}</div>
     </ng-container>
   </ng-container>
   <ng-container matColumnDef="actions"
diff --git a/observability_ui/apps/shell/src/app/projects/runs/run-timeline/run-timeline.component.html b/observability_ui/apps/shell/src/app/projects/runs/run-timeline/run-timeline.component.html
@@ -12,8 +12,7 @@
       [start]="ganttStartDate$ | async"
       [end]="ganttEndDate$ | async"
       [nowBar]="(run$ | async)?.active"
-      [timeformat]="timeformat$ | async"
-      [showDays]="spansMultipleDays$ | async">
+      [timeformat]="timeformat$ | async">
 
       <ng-template ganttLabel
         let-taskGroup="group">
diff --git a/observability_ui/apps/shell/src/app/projects/runs/run-timeline/run-timeline.component.ts b/observability_ui/apps/shell/src/app/projects/runs/run-timeline/run-timeline.component.ts
@@ -60,16 +60,11 @@ export class RunTimelineComponent implements OnInit, OnDestroy {
     map(([ start, end ]) => {
       const timespan = end.getTime() - start.getTime();
       if (timespan <= this.minTimespanInMilliseconds) {
-        return 'hh:mm:ss a';
+        return 'MMM d, h:mm:ss a';
       }
-      return 'hh:mm a';
-    }),
-    startWith('hh:mm a'),
-  );
-  spansMultipleDays$ = combineLatest([ this.ganttStartDate$, this.ganttEndDate$ ]).pipe(
-    map(([ start, end ]) => {
-      return (end.getTime() - start.getTime()) > 24 * 60 * 60 * 1000;
+      return 'MMM d, h:mm a';
     }),
+    startWith('MMM d, h:mm a'),
   );
 
   private subscriptions: Subscription[] = [];
diff --git a/observability_ui/libs/ui/src/lib/fields/schedule-field/schedule-field.component.html b/observability_ui/libs/ui/src/lib/fields/schedule-field/schedule-field.component.html
@@ -64,7 +64,7 @@
 
         <div class="schedule-field-overlay--form--main--summary">
           <span>Cron Expression: {{ cronExpression$ | async }}</span>
-          <span>Next Time: {{ nextTime$ | async | date: 'MMM d, YYYY hh:mm a' }}</span>
+          <span>Next Time: {{ nextTime$ | async | date: 'MMM d, YYYY h:mm a' }}</span>
         </div>
 
         <help-link href="https://docs.datakitchen.io/article/dataops-observability-help/cron-expressions-in-observability">cron expressions</help-link>
diff --git a/observability_ui/libs/ui/src/lib/gantt-chart/gantt-chart.component.html b/observability_ui/libs/ui/src/lib/gantt-chart/gantt-chart.component.html
@@ -7,7 +7,7 @@
   class="now-layer"
   [style.left]="now()?.offset + 'px'">
   <span class="now-layer--bar">
-    {{ now()?.time | date:'hh:mm a' }}
+    {{ now()?.time | date:'h:mm a' }}
   </span>
 </div>
 
diff --git a/observability_ui/libs/ui/src/lib/gantt-chart/gantt-chart.component.spec.ts b/observability_ui/libs/ui/src/lib/gantt-chart/gantt-chart.component.spec.ts
@@ -116,7 +116,7 @@ describe('GanttChartComponent', () => {
   });
 
   it('should render the ticks', () => {
-    const format = 'hh:mm a';
+    const format = 'h:mm a';
     const start = testComponent.start;
     const end = testComponent.end;
 
diff --git a/observability_ui/libs/ui/src/lib/gantt-chart/gantt-chart.component.ts b/observability_ui/libs/ui/src/lib/gantt-chart/gantt-chart.component.ts
@@ -31,12 +31,8 @@ export class GanttChartComponent implements AfterContentInit {
 
   @Input() nowBar: boolean = false;
 
-  @Input() set showDays(value: boolean) {
-    this._showDays.set(value);
-  }
-
   @Input() set timeformat(value: string) {
-    this._timeformat.set(value ?? 'hh:mm a');
+    this._timeformat.set(value ?? 'h:mm a');
   }
 
   ticks: Signal<Array<{ format: string, time: Date }>> = computed(() => {
@@ -46,18 +42,12 @@ export class GanttChartComponent implements AfterContentInit {
     }
 
     const format = this._timeformat();
-    const showDays = this._showDays();
 
     const span = end.getTime() - start.getTime();
     const tickSpan = Math.floor(span / this.ticksCount);
     const extraTicks = Array(this.ticksCount).fill(0).map((_, idx) => new Date(start.getTime() + (idx * tickSpan)));
     const ticks = [ start, ...extraTicks.slice(1), end ].map(time => ({ format, time }));
 
-    if (showDays) {
-      ticks[0].format = `MMM d ${format}`;
-      ticks[ticks.length - 1].format = `MMM d ${format}`;
-    }
-
     return ticks;
   });
 
@@ -139,8 +129,7 @@ export class GanttChartComponent implements AfterContentInit {
 
   private _regroup: WritableSignal<number> = signal(0);
   private _resized: WritableSignal<number> = signal(0);
-  private _showDays: WritableSignal<boolean> = signal(false);
-  private _timeformat: WritableSignal<string> = signal('hh:mm a');
+  private _timeformat: WritableSignal<string> = signal('h:mm a');
   private _dateRange: WritableSignal<{ start?: Date, end?: Date }> = signal({
     start: undefined,
     end: undefined
diff --git a/observability_ui/libs/ui/styles/_gantt-chart.scss b/observability_ui/libs/ui/styles/_gantt-chart.scss
@@ -52,6 +52,10 @@ gantt-chart {
     font-weight: 700;
   }
 
+  &--status {
+    margin-bottom: variables.$space-xs;
+  }
+
   &--key,
   &--start,
   &--end,
