feat: Update SCDF-UI to use the latest APIs

Resolves #2021
spring-cloud · Dec 11, 2024 · 79c60a2 · 79c60a2
1 parent d4ff909
commit 79c60a2
Show file tree

Hide file tree

Showing 29 changed files with 78 additions and 266 deletions.
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -30,6 +30,7 @@ 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';
+import {DevModule} from './dev/dev.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -44,7 +45,7 @@ import {JobService} from './shared/api/job.service';
     FormsModule,
     LayoutModule,
     // DashboardModule,
-    // DevModule,
+    DevModule,
     StreamsModule,
     TasksJobsModule,
     ManageModule,

diff --git a/ui/src/app/apps/add/register/register.component.html b/ui/src/app/apps/add/register/register.component.html
@@ -48,32 +48,6 @@
             </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)"

diff --git a/ui/src/app/apps/add/register/register.component.spec.ts b/ui/src/app/apps/add/register/register.component.spec.ts
@@ -70,17 +70,16 @@ 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: '', bootVersion: '3', force: false},
-      {name: '', type: '', uri: '', metaDataUri: '', bootVersion: '2', force: false},
-      {name: '', type: '', uri: '', metaDataUri: '', bootVersion: '2', force: false}
+      {name: 'foobar1', type: 'source', uri: 'https://foo.bar', metaDataUri: '', force: false},
+      {name: '', type: '', uri: '', metaDataUri: '', force: false},
+      {name: '', type: '', uri: '', metaDataUri: '', 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);
     });
@@ -108,17 +107,16 @@ describe('apps/register/register.component.ts', () => {
   it('should display errors form', () => {
     fixture.detectChanges();
     const tests = [
-      {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}
+      {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}
     ];
     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);
     });
@@ -137,13 +135,11 @@ describe('apps/register/register.component.ts', () => {
       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();

diff --git a/ui/src/app/apps/add/register/register.component.ts b/ui/src/app/apps/add/register/register.component.ts
@@ -59,7 +59,6 @@ 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
             };
           }
@@ -109,8 +108,7 @@ 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('bootVersion').value === this.defaultBoot
+      form.get('type').hasError('required')
     );
   }
 
@@ -121,7 +119,6 @@ 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)
     });
 

diff --git a/ui/src/app/apps/apps.component.html b/ui/src/app/apps/apps.component.html
@@ -83,17 +83,6 @@ <h1 class="page-title-actions">
       <clr-dg-filter style="display: none"></clr-dg-filter>
     </ng-container>
   </clr-dg-column>
-  <clr-dg-column
-    [clrDgField]="'bootVersion'"
-    [clrDgSortOrder]="context.by === 'bootVersion' ? (context.reverse ? -1 : 1) : 0"
-    (clrDgColumnResize)="updateContext('sizeBootVersion', $event)"
-    [style.width.px]="context.sizeBootVersion | datagridcolumn: datagrid:contextName | async"
-  >
-    <ng-container>
-      {{ 'applications.main.bootVersion' | translate }}
-      <clr-dg-filter style="display: none"></clr-dg-filter>
-    </ng-container>
-  </clr-dg-column>
 
   <clr-dg-column
     [clrDgField]="'uri'"
@@ -128,9 +117,6 @@ <h1 class="page-title-actions">
         <span *ngIf="app.versions?.length > 1" class="badge badge-light-blue">{{ app.versions?.length }}</span>
       </span>
     </clr-dg-cell>
-    <clr-dg-cell>
-      {{ 'applications.main.bootVersions.' + app.bootVersion | translate }}
-    </clr-dg-cell>
     <clr-dg-cell
       ><span class="text-truncate">{{ app.uri }}</span></clr-dg-cell
     >

diff --git a/ui/src/app/apps/apps.component.spec.ts b/ui/src/app/apps/apps.component.spec.ts
@@ -80,7 +80,7 @@ describe('apps/apps.component.ts', () => {
     expect(actionBar).toBeTruthy();
     expect(title.textContent).toContain('Applications');
     expect(rows.length === 20).toBeTruthy();
-    expect(cols.length === 6).toBeTruthy();
+    expect(cols.length === 5).toBeTruthy();
     done();
   });
 
@@ -230,13 +230,13 @@ describe('apps/apps.component.ts', () => {
       sort: {by: 'version', reverse: true}
     });
     // URI
-    cols[4].query(By.css('button')).nativeElement.click();
+    cols[3].query(By.css('button')).nativeElement.click();
     fixture.detectChanges();
     expect(refresh).toHaveBeenCalledWith({
       page: {from: 0, to: 19, size: 20, current: 1},
       sort: {by: 'uri', reverse: false}
     });
-    cols[4].query(By.css('button')).nativeElement.click();
+    cols[3].query(By.css('button')).nativeElement.click();
     fixture.detectChanges();
     expect(refresh).toHaveBeenCalledWith({
       page: {from: 0, to: 19, size: 20, current: 1},

diff --git a/ui/src/app/shared/api/app.service.spec.ts b/ui/src/app/shared/api/app.service.spec.ts
@@ -110,7 +110,6 @@ describe('shared/api/app.service.ts', () => {
       uri: 'https://uri.foo.bar',
       metaDataUri: 'https://metaDataUri.foo.bar',
       type: ApplicationType.processor,
-      bootVersion: '3',
       force: true
     });
     const httpUri = mockHttp.post.calls.mostRecent().args[0];
@@ -121,7 +120,6 @@ describe('shared/api/app.service.ts', () => {
     expect(headerArgs.get('Accept')).toEqual('application/json');
     expect(httpParams.get('uri')).toEqual('https://uri.foo.bar');
     expect(httpParams.get('metadata-uri')).toEqual('https://metaDataUri.foo.bar');
-    expect(httpParams.get('bootVersion')).toEqual('3');
     expect(httpParams.get('force')).toEqual('true');
   });
 

diff --git a/ui/src/app/shared/api/app.service.ts b/ui/src/app/shared/api/app.service.ts
@@ -108,10 +108,7 @@ export class AppService {
   }
 
   registerProp(prop: any): Observable<any> {
-    let params = new HttpParams()
-      .append('uri', prop.uri)
-      .append('force', prop.force.toString())
-      .append('bootVersion', prop.bootVersion);
+    let params = new HttpParams().append('uri', prop.uri).append('force', prop.force.toString());
     if (prop.metaDataUri) {
       params = params.append('metadata-uri', prop.metaDataUri);
     }

diff --git a/ui/src/app/shared/api/job.service.ts b/ui/src/app/shared/api/job.service.ts
@@ -33,66 +33,47 @@ export class JobService {
       .pipe(map(JobExecutionPage.parse), catchError(ErrorUtils.catchError));
   }
 
-  getExecution(executionId: string, schemaTarget: string): Observable<JobExecution | unknown> {
+  getExecution(executionId: string): Observable<JobExecution | unknown> {
     const headers = HttpUtils.getDefaultHttpHeaders();
-    const params = new HttpParams({encoder: new DataflowEncoder()}).set('schemaTarget', schemaTarget);
     return this.httpClient
-      .get<any>(UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${executionId}`, {headers, params})
+      .get<any>(UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${executionId}`, {headers})
       .pipe(map(JobExecution.parse), catchError(ErrorUtils.catchError));
   }
 
   restart(execution: JobExecution): Observable<any> {
     const headers = HttpUtils.getDefaultHttpHeaders();
     const initHttpParams = new HttpParams({encoder: new DataflowEncoder()});
-    const params = initHttpParams.append('schemaTarget', execution.schemaTarget);
     return this.httpClient
       .put(
         UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${execution.jobExecutionId}?restart=true`,
         {},
-        {headers, params}
+        {headers}
       )
       .pipe(catchError(ErrorUtils.catchError));
   }
 
   stop(item: JobExecution): Observable<any> {
     const headers = HttpUtils.getDefaultHttpHeaders();
     const initHttpParams = new HttpParams({encoder: new DataflowEncoder()});
-    const params = initHttpParams.append('schemaTarget', item.schemaTarget);
     return this.httpClient
-      .put(
-        UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${item.jobExecutionId}?stop=true`,
-        {},
-        {headers, params}
-      )
+      .put(UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${item.jobExecutionId}?stop=true`, {}, {headers})
       .pipe(catchError(ErrorUtils.catchError));
   }
 
-  getExecutionStep(
-    jobExecutionId: string,
-    stepId: string,
-    schemaTarget: string
-  ): Observable<ExecutionStepResource | unknown> {
+  getExecutionStep(jobExecutionId: string, stepId: string): Observable<ExecutionStepResource | unknown> {
     const headers = HttpUtils.getDefaultHttpHeaders();
-    const params = new HttpParams({encoder: new DataflowEncoder()}).append('schemaTarget', schemaTarget);
     return this.httpClient
       .get<any>(UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${jobExecutionId}/steps/${stepId}`, {
-        headers,
-        params
+        headers
       })
       .pipe(map(ExecutionStepResource.parse), catchError(ErrorUtils.catchError));
   }
 
-  getExecutionStepProgress(
-    jobExecutionId: string,
-    stepId: string,
-    schemaTarget: string
-  ): Observable<ExecutionStepProgress | unknown> {
+  getExecutionStepProgress(jobExecutionId: string, stepId: string): Observable<ExecutionStepProgress | unknown> {
     const headers = HttpUtils.getDefaultHttpHeaders();
-    const params = new HttpParams({encoder: new DataflowEncoder()}).append('schemaTarget', schemaTarget);
     return this.httpClient
       .get<any>(UrlUtilities.calculateBaseApiUrl() + `jobs/executions/${jobExecutionId}/steps/${stepId}/progress`, {
-        headers,
-        params
+        headers
       })
       .pipe(map(ExecutionStepProgress.parse), catchError(ErrorUtils.catchError));
   }

diff --git a/ui/src/app/shared/api/task.service.spec.ts b/ui/src/app/shared/api/task.service.spec.ts
@@ -104,23 +104,21 @@ describe('shared/api/task.service.ts', () => {
   it('executionsClean', async () => {
     mockHttp.delete.and.returnValue(of(jsonData));
     const taskExecutions = [
-      TaskExecution.parse({executionId: 'foo1', schemaTarget: 'boot2'}),
-      TaskExecution.parse({executionId: 'foo2', parentExecutionId: 'foo1', schemaTarget: 'boot2'}),
-      TaskExecution.parse({executionId: 'foo3', parentExecutionId: 'foo1', schemaTarget: 'boot3'}),
-      TaskExecution.parse({executionId: 'bar1', schemaTarget: 'boot3'}),
-      TaskExecution.parse({executionId: 'bar2', parentExecutionId: 'bar1', schemaTarget: 'boot2'}),
-      TaskExecution.parse({executionId: 'bar3', parentExecutionId: 'bar1', schemaTarget: 'boot3'})
+      TaskExecution.parse({executionId: 'foo1'}),
+      TaskExecution.parse({executionId: 'foo2', parentExecutionId: 'foo1'}),
+      TaskExecution.parse({executionId: 'foo3', parentExecutionId: 'foo1'}),
+      TaskExecution.parse({executionId: 'bar1'}),
+      TaskExecution.parse({executionId: 'bar2', parentExecutionId: 'bar1'}),
+      TaskExecution.parse({executionId: 'bar3', parentExecutionId: 'bar1'})
     ];
     await taskService.executionsClean(taskExecutions).toPromise();
     const httpUri = mockHttp.delete.calls.all();
     expect(httpUri).not.toEqual(undefined);
     expect(httpUri).not.toEqual(null);
     expect(httpUri.length).not.toEqual(0);
     expect(httpUri.map(url => url.args[0])).toEqual([
-      '/tasks/executions/foo2,bar2?action=CLEANUP,REMOVE_DATA&schemaTarget=boot2',
-      '/tasks/executions/foo3,bar3?action=CLEANUP,REMOVE_DATA&schemaTarget=boot3',
-      '/tasks/executions/foo1?action=CLEANUP,REMOVE_DATA&schemaTarget=boot2',
-      '/tasks/executions/bar1?action=CLEANUP,REMOVE_DATA&schemaTarget=boot3'
+      '/tasks/executions/foo2,foo3,bar2,bar3?action=CLEANUP,REMOVE_DATA',
+      '/tasks/executions/foo1,bar1?action=CLEANUP,REMOVE_DATA'
     ]);
   });
 
@@ -152,13 +150,12 @@ describe('shared/api/task.service.ts', () => {
     taskService.getExecutionLogs(
       TaskExecution.parse({
         externalExecutionId: 'foo',
-        schemaTarget: 'boot3',
         arguments: ['--spring.cloud.data.flow.platformname=bar']
       })
     );
     const httpUri = mockHttp.get.calls.mostRecent().args[0];
     const headerArgs = mockHttp.get.calls.mostRecent().args[1].headers;
-    expect(httpUri).toEqual('/tasks/logs/foo?platformName=bar&schemaTarget=boot3');
+    expect(httpUri).toEqual('/tasks/logs/foo?platformName=bar');
     expect(headerArgs.get('Content-Type')).toEqual('application/json');
     expect(headerArgs.get('Accept')).toEqual('application/json');
   });