Update UI API usage for Boot 3 updates

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>org.springframework.cloud</groupId>
 	<artifactId>spring-cloud-dataflow-ui</artifactId>
-	<version>3.3.4-SNAPSHOT</version>
+	<version>3.4.0-SNAPSHOT</version>
 	<packaging>jar</packaging>
 	<name>Spring Cloud Data Flow User Interface</name>
 	<description>This application provides the Dashboard application of Spring Cloud Data Flow.</description>
@@ -36,6 +36,16 @@
 				<role>Project lead</role>
 			</roles>
 		</developer>
+		<developer>
+			<id>corneil</id>
+			<name>Corneil du Plessis</name>
+			<email>pcorneil at vmware.com</email>
+			<organization>VMware, Inc.</organization>
+			<organizationUrl>https://www.spring.io</organizationUrl>
+			<roles>
+				<role>Project lead</role>
+			</roles>
+		</developer>
 		<developer>
 			<id>ilayaperumalg</id>
 			<name>Ilayaperumal Gopinathan</name>

ui/proxy.conf.json

@@ -1,87 +1,92 @@
 {
-    "/about" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/audit-records" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/authenticate" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/apps" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/dashboard/logout" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/jobs" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/oauth2" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/login" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/logout" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/metrics" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/security/info" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/streams" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/tasks" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/tools" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/runtime" : {
-        "target": "http://localhost:9393/",
-        "secure": false,
-        "logLevel": "debug"
-    },
-    "/completions" : {
-      "target": "http://localhost:9393/",
-      "secure": false,
-      "logLevel": "debug"
-    },
-    "/websocket": {
-        "target": "http://localhost:9393",
-        "ws": true,
-        "logLevel": "debug"
-    }
+  "/about": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/audit-records": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/authenticate": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/apps": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/dashboard/logout": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/jobs": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/oauth2": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/login": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/logout": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/metrics": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/security/info": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/streams": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/tasks": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/tools": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/runtime": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/completions": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  },
+  "/websocket": {
+    "target": "http://localhost:9393",
+    "ws": true,
+    "logLevel": "debug"
+  },
+  "/schema": {
+    "target": "http://localhost:9393/",
+    "secure": false,
+    "logLevel": "debug"
+  }
 }

ui/src/app/app.module.ts

@@ -28,6 +28,8 @@ import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {AppsModule} from './apps/apps.module';
 import {UrlUtilities} from './url-utilities.service';
+import {TaskService} from './shared/api/task.service';
+import {JobService} from './shared/api/job.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -93,7 +95,7 @@ import {UrlUtilities} from './url-utilities.service';
             )
             .pipe(switchMap(() => settingsService.load(['en', 'de', 'ru'])))
             .toPromise(),
-      deps: [SecurityService, AboutService, SettingsService],
+      deps: [SecurityService, AboutService, SettingsService, TaskService, JobService],
       multi: true
     }
   ],

ui/src/app/apps/add/add.component.scss

@@ -3,4 +3,7 @@
     padding: .6rem 0;
     margin: 0;
   }
+  .clr-error .clr-select-wrapper:after, .clr-success .clr-select-wrapper:after {
+    right: 0;
+  }
 }

ui/src/app/apps/add/register/register.component.html

@@ -48,6 +48,32 @@
             </div>
           </div>
         </div>
+        <div
+          class="clr-form-control clr-row"
+          [class.clr-error]="submitted && form.get('bootVersion').invalid && !isFormEmpty(form)"
+        >
+          <label class="clr-col-2 clr-control-label" for="type{{ i }}">{{
+            'applications.main.bootVersion' | translate
+          }}</label>
+          <div class="clr-control-container clr-col-10" *ngIf="bootVersions">
+            <div class="clr-select-wrapper">
+              <select
+                name="bootVersion{{ i }}"
+                id="bootVersion{{ i }}"
+                formControlName="bootVersion"
+                class="clr-select"
+              >
+                <option *ngFor="let bootVersionKey of bootVersions" value="{{ bootVersionKey }}">
+                  Spring Boot&nbsp;
+                  {{ 'applications.main.bootVersions.' + bootVersionKey | translate }}
+                </option>
+              </select>
+            </div>
+            <div class="clr-subtext" *ngIf="submitted && form.get('type').invalid && !isFormEmpty(form)">
+              {{ 'applications.add.register.invalidType' | translate }}
+            </div>
+          </div>
+        </div>
         <div
           class="clr-form-control clr-row"
           [class.clr-error]="submitted && form.get('uri').invalid && !isFormEmpty(form)"

ui/src/app/apps/add/register/register.component.spec.ts

@@ -70,22 +70,24 @@ describe('apps/register/register.component.ts', () => {
     const navigate = spyOn((<any>component).router, 'navigateByUrl');
     fixture.detectChanges();
     const tests = [
-      {name: 'foobar1', type: 'source', uri: 'https://foo.bar', metaDataUri: '', force: false},
-      {name: '', type: '', uri: '', metaDataUri: '', force: false},
-      {name: '', type: '', uri: '', metaDataUri: '', force: false}
+      {name: 'foobar1', type: 'source', uri: 'https://foo.bar', metaDataUri: '', bootVersion: '3', force: false},
+      {name: '', type: '', uri: '', metaDataUri: '', bootVersion: '2', force: false},
+      {name: '', type: '', uri: '', metaDataUri: '', bootVersion: '2', force: false}
     ];
     component.newForm();
     component.newForm();
     tests.forEach((test, index) => {
       component.forms[index].get('name').setValue(test.name);
       component.forms[index].get('type').setValue(test.type);
       component.forms[index].get('uri').setValue(test.uri);
+      component.forms[index].get('bootVersion').setValue(test.bootVersion);
       component.forms[index].get('metaDataUri').setValue(test.metaDataUri);
       component.forms[index].get('force').setValue(test.force);
     });
     fixture.detectChanges();
     fixture.debugElement.query(By.css('button[name=register]')).nativeElement.click();
     fixture.detectChanges();
+
     expect(component.isValid()).toBeTruthy();
     expect(component.noValue()).toBeFalsy();
     expect(NotificationServiceMock.mock.successNotifications[0].title).toContain('Register application(s).');
@@ -106,16 +108,17 @@ describe('apps/register/register.component.ts', () => {
   it('should display errors form', () => {
     fixture.detectChanges();
     const tests = [
-      {name: 'foobar1', type: 'source', uri: 'https://foo.bar', metaDataUri: '', force: false},
-      {name: 'foobar2', type: 'sink', uri: 'https://foo.bar', metaDataUri: '', force: false},
-      {name: 'foobar3', type: 'processor', uri: '', metaDataUri: '', force: false}
+      {name: 'foobar1', type: 'source', uri: 'https://foo.bar', metaDataUri: '', bootVersion: '3', force: false},
+      {name: 'foobar2', type: 'sink', uri: 'https://foo.bar', metaDataUri: '', bootVersion: '2', force: false},
+      {name: 'foobar3', type: 'processor', uri: '', metaDataUri: '', bootVersion: '3', force: false}
     ];
     component.newForm();
     component.newForm();
     tests.forEach((test, index) => {
       component.forms[index].get('name').setValue(test.name);
       component.forms[index].get('type').setValue(test.type);
       component.forms[index].get('uri').setValue(test.uri);
+      component.forms[index].get('bootVersion').setValue(test.bootVersion);
       component.forms[index].get('metaDataUri').setValue(test.metaDataUri);
       component.forms[index].get('force').setValue(test.force);
     });
@@ -129,10 +132,18 @@ describe('apps/register/register.component.ts', () => {
   it('should handle error on run', () => {
     spyOn(AppServiceMock.mock, 'registerProps').and.callFake(() => throwError(new Error('Fake error')));
     fixture.detectChanges();
-    const test = {name: 'foobar1', type: 'source', uri: 'https://foo.bar', metaDataUri: '', force: false};
+    const test = {
+      name: 'foobar1',
+      type: 'source',
+      uri: 'https://foo.bar',
+      metaDataUri: '',
+      bootVersion: '3',
+      force: false
+    };
     component.forms[0].get('name').setValue(test.name);
     component.forms[0].get('type').setValue(test.type);
     component.forms[0].get('uri').setValue(test.uri);
+    component.forms[0].get('bootVersion').setValue(test.bootVersion);
     component.forms[0].get('metaDataUri').setValue(test.metaDataUri);
     component.forms[0].get('force').setValue(test.force);
     fixture.detectChanges();

ui/src/app/apps/add/register/register.component.ts

@@ -14,6 +14,8 @@ import {TranslateService} from '@ngx-translate/core';
 export class RegisterComponent implements OnInit {
   forms: UntypedFormGroup[] = [];
   applicationTypes = ApplicationType;
+  bootVersions: Array<string>;
+  defaultBoot: string;
   submitted = false;
   isImporting = false;
 
@@ -26,7 +28,11 @@ export class RegisterComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.newForm();
+    this.appService.getBootVersions().subscribe((data: any) => {
+      this.bootVersions = data.versions;
+      this.defaultBoot = data.defaultSchemaVersion;
+      this.newForm();
+    });
   }
 
   register(): void {
@@ -53,6 +59,7 @@ export class RegisterComponent implements OnInit {
               type: form.get('type').value as ApplicationType,
               uri: form.get('uri').value,
               metaDataUri: form.get('metaDataUri').value,
+              bootVersion: form.get('bootVersion').value,
               force: form.get('force').value
             };
           }
@@ -102,7 +109,8 @@ export class RegisterComponent implements OnInit {
       form.get('uri').hasError('required') &&
       form.get('name').hasError('required') &&
       form.get('metaDataUri').value === '' &&
-      form.get('type').hasError('required')
+      form.get('type').hasError('required') &&
+      form.get('bootVersion').value === this.defaultBoot
     );
   }
 
@@ -113,6 +121,7 @@ export class RegisterComponent implements OnInit {
       type: new UntypedFormControl('', Validators.required),
       uri: new UntypedFormControl('', [AppsAddValidator.appUri, Validators.required]),
       metaDataUri: new UntypedFormControl('', AppsAddValidator.appUri),
+      bootVersion: new UntypedFormControl(this.defaultBoot, Validators.required),
       force: new UntypedFormControl(false)
     });