fix(bridge): Fix wrong time in sequence timeline (#7036)

* fix(bridge): Fix wrong time in sequence timeline

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* fix timezone for UI test

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* fix timezone

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* run different test script depending on OS

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* typo

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* write console errors to terminal

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* correctly validate warning count

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* remove run-script-os dependency

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* adapted docs

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* requested changes

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

* removed comma

Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>

bridge/README.md

@@ -154,9 +154,15 @@ UI tests in Keptn Bridge must not require any API call. When writing tests, plea
 
 To test your UI tests locally, use following commands:
 
-- `yarn start:ci` - this serves Angular on port 3000 with no live reload - this will also ensure, that no API connection is made.
-- `yarn cypress:open` - Development of tests<br/>This opens a browser where changes where you can run your tests and inspect them. This will be automatically updated on every code change made on the `*.spec.ts` files.
-- or `yarn cypress:run` - Headless browser mode also used in CI<br/>This will just run the tests on a headless browser without the possibility to inspect them.
+- `yarn cypress:open` (Linux, macOS), `yarn cypress:open:win32` (Windows) - Used for the local development of tests.<br/>This opens a browser, where you can run your tests and inspect them. The tests will re-run automatically on every code change made on the `*.spec.ts` files.
+- or `yarn test:ui` (Linux, macOS), `yarn test:ui:win32` (Windows) - This starts the headless browser mode that is also used in CI.<br/>This will just run the tests on a headless browser without the possibility to inspect them.
+
+Both commands serve Angular on port 3000 with no live reload - this will also ensure that no API connection is made.
+
+#### Known issues
+
+- Currently, our UI tests are flaky because of some bugs in Cypress. You can find more information in [Known Issues](https://github.com/keptn/keptn/issues/7107).  
+- One UI test will fail if you are on Windows and in a different time zone than Europe/Berlin due to a bug in Cypress.
 
 ## IDE Setup
 

bridge/client/app/_components/ktb-sequence-timeline/ktb-sequence-timeline.component.html

@@ -6,6 +6,7 @@
         class="text-center pointer stage-item"
         *ngFor="let stage of currentSequence.getStages(); last as isLast"
         (click)="selectStage(stage)"
+        [attr.uitestid]="'keptn-sequence-timeline-stage-' + stage"
       >
         <div class="stage-info">
           <dt-icon
@@ -46,7 +47,14 @@
           ></span>
         </div>
         <p class="m-0">|</p>
-        <p class="m-0" [textContent]="currentSequence.time | date: 'HH:mm'"></p>
+        <p
+          *ngIf="currentSequence.traces.length !== 0; else showLoadingSpinner"
+          class="m-0"
+          [textContent]="currentSequence.getStageTime(stage) | date: 'HH:mm'"
+        ></p>
+        <ng-template #showLoadingSpinner>
+          <dt-loading-spinner class="gray-loading" aria-label="Fetching events..."></dt-loading-spinner>
+        </ng-template>
       </div>
     </div>
   </div>

bridge/client/app/_components/ktb-sequence-timeline/ktb-sequence-timeline.component.scss

@@ -56,4 +56,9 @@
       background-color: $aborted-color;
     }
   }
+
+  dt-loading-spinner.gray-loading {
+    height: 20px;
+    width: 20px;
+  }
 }

bridge/client/app/_models/sequence.spec.ts

@@ -507,6 +507,17 @@ describe('Sequence', () => {
     expect(sequence.state).toBe(SequenceState.TIMEDOUT);
   });
 
+  it('should return the start time of a stage', () => {
+    const sequence = getSequenceWithMultipleTracesPerStage();
+    expect(sequence.getStageTime('dev')).toBe('2022-03-02T12:46:50.991Z');
+    expect(sequence.getStageTime('staging')).toBe('2022-03-02T12:55:50.991Z');
+  });
+
+  it('should return undefined for time if traces are not loaded', () => {
+    const sequence = getDefaultSequence();
+    expect(sequence.getStageTime('dev')).toBeUndefined();
+  });
+
   function getDefaultSequence(): Sequence {
     return Sequence.fromJSON(AppUtils.copyObject(SequenceResponseMock[0]));
   }
@@ -532,6 +543,55 @@ describe('Sequence', () => {
     return sequence;
   }
 
+  function getSequenceWithMultipleTracesPerStage(): Sequence {
+    const sequence = Sequence.fromJSON(AppUtils.copyObject(SequenceResponseMock[0]));
+    sequence.traces = [
+      Trace.fromJSON({
+        data: {
+          project: 'sockshop',
+          service: 'carts',
+          stage: 'dev',
+          labels: {
+            label1: 'label1',
+          },
+        },
+        id: 'id1',
+        shkeptncontext: 'keptnContext',
+        time: '2022-03-02T12:46:50.991Z',
+        type: EventTypes.DEPLOYMENT_FINISHED,
+      }),
+      Trace.fromJSON({
+        data: {
+          project: 'sockshop',
+          service: 'carts',
+          stage: 'dev',
+          labels: {
+            label1: 'label1',
+          },
+        },
+        id: 'id2',
+        shkeptncontext: 'keptnContext',
+        time: '2022-03-02T12:50:50.991Z',
+        type: EventTypes.DEPLOYMENT_FINISHED,
+      }),
+      Trace.fromJSON({
+        data: {
+          project: 'sockshop',
+          service: 'carts',
+          stage: 'staging',
+          labels: {
+            label1: 'label1',
+          },
+        },
+        id: 'id3',
+        shkeptncontext: 'keptnContext',
+        time: '2022-03-02T12:55:50.991Z',
+        type: EventTypes.DEPLOYMENT_FINISHED,
+      }),
+    ];
+    return sequence;
+  }
+
   function getEvaluationSequenceWarning(): Sequence {
     const sequence = {
       ...SequenceResponseWithoutFailing,

bridge/client/app/_models/sequence.ts

@@ -52,6 +52,10 @@ export class Sequence extends sq {
     return this.stages.find((stage) => stage.name === stageName);
   }
 
+  public getStageTime(stageName: string): string | undefined {
+    return this.findTrace((trace) => trace.stage === stageName)?.time;
+  }
+
   public getStages(): string[] {
     return this.stages.map((stage) => stage.name);
   }

bridge/client/styles.scss

@@ -8,6 +8,10 @@ $fonts-dir: '^./assets/fonts';
 @import '~@dynatrace/barista-components/style/main';
 @import '~@dynatrace/barista-components/style/index';
 
+dt-loading-spinner.gray-loading svg {
+  stroke: #898989 !important;
+}
+
 .relative {
   position: relative;
 }