jwa(front): Fix unit tests (#6804)

* jwa(front): Rename form-default component Signed-off-by: Elena Zioga <elena@arrikto.com> * jwa(front): Create missing module files Signed-off-by: Elena Zioga <elena@arrikto.com> * jwa(front): Remove form-rok and form components Signed-off-by: Elena Zioga <elena@arrikto.com> * jwa(front): Update JWA's @angular/common package Signed-off-by: Elena Zioga <elena@arrikto.com> * jwa(front): Modify rok-url component Signed-off-by: Elena Zioga <elena@arrikto.com> * web-apps(front): Add Rok URL message Signed-off-by: Elena Zioga <elena@arrikto.com> * vwa(front): Update VWA's @angular/common package Signed-off-by: Elena Zioga <elena@arrikto.com> * vwa(front): Remove the headers request Remove the headers request since the common code implements it. Signed-off-by: Elena Zioga <elena@arrikto.com> * jwa(front): Fix JWA's unit tests Fix JWA's unit tests. Signed-off-by: Elena Zioga <elena@arrikto.com> * gh-actions: Add GH action to run JWA unit tests Signed-off-by: Elena Zioga <elena@arrikto.com> * jwa(build): Update Dockerfile Update Dockerfile to not build Rok. Signed-off-by: Elena Zioga <elena@arrikto.com> Signed-off-by: Elena Zioga <elena@arrikto.com>
kubeflow · Dec 7, 2022 · 539f497 · 539f497
1 parent 1ac1b9c
commit 539f497
Show file tree

Hide file tree

Showing 157 changed files with 1,740 additions and 1,490 deletions.
diff --git a/.github/workflows/jwa_frontend_tests.yaml b/.github/workflows/jwa_frontend_tests.yaml
@@ -0,0 +1,33 @@
+name: JWA Frontend Tests
+on:
+  pull_request:
+    paths:
+      - components/crud-web-apps/jupyter/frontend/**
+
+jobs:
+  frontend-unit-tests:
+    runs-on: ubuntu-latest
+    name: Unit tests
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup node version to 12
+        uses: actions/setup-node@v3
+        with:
+          node-version: 12
+
+      - name: Install Kubeflow common library dependecies
+        run: |
+          cd components/crud-web-apps/common/frontend/kubeflow-common-lib
+          npm i
+          npm run build
+          npm link ./dist/kubeflow
+      - name: Install JWA dependencies
+        run: |
+          cd components/crud-web-apps/jupyter/frontend
+          npm i
+          npm link kubeflow
+      - name: Run unit tests
+        run: |
+          cd components/crud-web-apps/jupyter/frontend
+          npm run test:prod
diff --git a/...flow-common-lib/projects/kubeflow/src/lib/form/rok-url-input/rok-url-input.component.html b/...flow-common-lib/projects/kubeflow/src/lib/form/rok-url-input/rok-url-input.component.html
@@ -17,4 +17,7 @@
     </ng-template>
   </button>
   <mat-error>{{ parseRokUrlError() }}</mat-error>
+  <mat-hint *ngIf="control.valid && dateTime"
+    >Restoring {{ snapshotType }} from {{ dateTime }}</mat-hint
+  >
 </mat-form-field>
diff --git a/...w-common-lib/projects/kubeflow/src/lib/form/rok-url-input/rok-url-input.component.spec.ts b/...w-common-lib/projects/kubeflow/src/lib/form/rok-url-input/rok-url-input.component.spec.ts
@@ -4,14 +4,21 @@ import { RokUrlInputComponent } from './rok-url-input.component';
 import { FormControl } from '@angular/forms';
 import { FormModule } from '../form.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { HttpClientModule } from '@angular/common/http';
 
 describe('RokUrlInputComponent', () => {
   let component: RokUrlInputComponent;
   let fixture: ComponentFixture<RokUrlInputComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [FormModule, BrowserAnimationsModule],
+      imports: [
+        FormModule,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        HttpClientModule,
+      ],
     }).compileComponents();
   }));
 
@@ -23,7 +30,9 @@ describe('RokUrlInputComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should return a valid date using formatDate()', () => {
+    expect(component.formatDate('2022-08-01T10:02:00.716339+00:00')).toEqual(
+      '01/08/2022 - 10:02:00',
+    );
   });
 });
diff --git a/...beflow-common-lib/projects/kubeflow/src/lib/form/rok-url-input/rok-url-input.component.ts b/...beflow-common-lib/projects/kubeflow/src/lib/form/rok-url-input/rok-url-input.component.ts
@@ -9,30 +9,32 @@ import {
 import { AbstractControl } from '@angular/forms';
 import { getRokUrlError } from '../validators';
 import { filter } from 'rxjs/operators';
-
+import { RokService } from '../../services/rok/rok.service';
+import { HttpHeaders } from '@angular/common/http';
 @Component({
   selector: 'lib-rok-url-input',
   templateUrl: './rok-url-input.component.html',
   styleUrls: ['./rok-url-input.component.scss'],
 })
 export class RokUrlInputComponent implements OnInit {
   @Input() control: AbstractControl;
+  @Input() snapshotType: string;
   @Input() mode = 'group';
   @Input() create = false;
-  @Output() urlEntered = new EventEmitter<string>();
+  @Output() snapshotHeaders = new EventEmitter<HttpHeaders>();
 
   private popupChooser;
   private chooserId = -1;
+  dateTime: string;
 
-  constructor() {}
+  constructor(public rok: RokService) {}
 
   ngOnInit() {
     // Emit an event whenever a valid url has been detected
     this.control.statusChanges
       .pipe(filter(() => this.control.valid && this.control.value !== ''))
       .subscribe(() => {
-        const url = this.control.value;
-        this.urlEntered.emit(url);
+        this.getHeaders(this.control.value);
       });
   }
 
@@ -68,4 +70,22 @@ export class RokUrlInputComponent implements OnInit {
       this.popupChooser.close();
     }
   }
+
+  getHeaders(url: string) {
+    this.rok.getObjectMetadata(url).subscribe(headers => {
+      this.snapshotHeaders.emit(headers);
+      this.dateTime = this.formatDate(
+        headers.get('x-origin-created-timestamp'),
+      );
+    });
+  }
+
+  formatDate(inputDate: string): string {
+    // More info about 'en-GB' here:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+    const myDate = new Date(inputDate).toLocaleString('en-GB', {
+      timeZone: 'UTC',
+    });
+    return myDate.replace(', ', ' - ');
+  }
 }
diff --git a/components/crud-web-apps/jupyter/Dockerfile b/components/crud-web-apps/jupyter/Dockerfile
@@ -39,7 +39,6 @@ RUN npm ci
 COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/
 
 RUN npm run build -- --output-path=./dist/default --configuration=production
-RUN npm run build -- --output-path=./dist/rok --configuration=rok-prod
 
 # Web App
 FROM python:3.8-slim
@@ -56,6 +55,5 @@ COPY ./jupyter/backend/apps/ ./apps
 COPY ./jupyter/backend/entrypoint.py .
 
 COPY --from=frontend /src/dist/default/ /src/apps/default/static/
-COPY --from=frontend /src/dist/rok/ /src/apps/rok/static/
 
 ENTRYPOINT ["/bin/bash","-c","gunicorn -w 3 --bind 0.0.0.0:5000 --access-logfile - entrypoint:app"]
diff --git a/components/crud-web-apps/jupyter/frontend/angular.json b/components/crud-web-apps/jupyter/frontend/angular.json
@@ -158,7 +158,8 @@
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "preserveSymlinks": true
           }
         },
         "lint": {

diff --git a/components/crud-web-apps/jupyter/frontend/karma.conf.js b/components/crud-web-apps/jupyter/frontend/karma.conf.js
@@ -3,7 +3,7 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
+    basePath: '../../',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
@@ -12,6 +12,31 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
+    files: [
+      {
+        pattern: 'jupyter/frontend/node_modules/monaco-editor/**',
+        watched: false,
+        included: false,
+        served: true,
+      },
+      {
+        pattern: 'jupyter/frontend/node_modules/kubeflow/**',
+        watched: false,
+        included: false,
+        served: true,
+      },
+      {
+        pattern: 'jupyter/frontend/src/assets/**',
+        watched: false,
+        included: false,
+        served: true,
+      },
+    ],
+    proxies: {
+      '/static/assets/monaco-editor/': '/base/jupyter/frontend/node_modules/monaco-editor/',
+      '/static/assets/': '/base/jupyter/frontend/node_modules/kubeflow/assets/',
+      '/static/assets/': '/base/jupyter/frontend/src/assets/',
+    },
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },