From 4702bd1d65f7252d4d2b49bca285653da20a361e Mon Sep 17 00:00:00 2001 From: thanicz Date: Wed, 7 Jan 2026 09:36:26 +0100 Subject: [PATCH] KNOX-3234: Upgrade Admin UI Angular to 21+, bootstrap to 5+ --- gateway-admin-ui/.eslintrc.json | 98 -- .../admin-ui/app/app.component.spec.ts | 53 - .../admin-ui/app/app.component.ts | 14 +- gateway-admin-ui/admin-ui/app/app.module.ts | 97 -- .../app/descriptor/descriptor.component.css | 0 .../app/descriptor/descriptor.component.html | 3 - .../descriptor/descriptor.component.spec.ts | 41 - .../app/descriptor/descriptor.component.ts | 29 - .../gateway-version.component.ts | 37 +- gateway-admin-ui/admin-ui/app/index.ts | 18 - gateway-admin-ui/admin-ui/app/main.ts | 21 - .../{resource-detail => model}/descriptor.ts | 2 +- .../app/{ => model}/gateway-version.ts | 0 .../provider-config.ts | 0 .../app/{resource => model}/resource.ts | 2 - .../app/{resource => model}/service.ts | 0 .../servicedefinition.ts | 4 - .../session-information.ts} | 3 - .../admin-ui/app/{ => model}/topology.ts | 0 .../new-desc-wizard.component.css | 23 + .../new-desc-wizard.component.html | 244 ++--- .../new-desc-wizard.component.spec.ts | 41 - .../new-desc-wizard.component.ts | 24 +- .../provider-config-selector.component.html | 39 +- ...provider-config-selector.component.spec.ts | 41 - .../provider-config-selector.component.ts | 25 +- .../AnonymousProviderConfig.ts | 2 +- .../authentication-wizard.ts | 3 +- .../authorization-wizard.ts | 3 +- .../provider-config-wizard/category-wizard.ts | 2 +- .../csrf-provider-config.ts | 3 +- .../display-binding-provider-config.ts | 6 +- .../app/provider-config-wizard/ha-wizard.ts | 2 +- .../hostmap-provider-wizard.ts | 2 +- .../identity-assertion-wizard.ts | 5 +- .../provider-config-wizard.component.html | 249 ++--- .../provider-config-wizard.component.spec.ts | 41 - .../provider-config-wizard.component.ts | 24 +- .../provider-contributor-wizard.ts | 2 +- .../webappsec-provider-config.ts | 2 +- .../webappsec-wizard.ts | 5 +- .../resource-detail.component.css | 14 +- .../resource-detail.component.html | 956 ++++++++++-------- .../resource-detail.component.spec.ts | 41 - .../resource-detail.component.ts | 79 +- .../app/resource/resource.component.css | 58 ++ .../app/resource/resource.component.html | 88 +- .../app/resource/resource.component.spec.ts | 41 - .../app/resource/resource.component.ts | 52 +- .../resourcetypes/resourcetypes.component.css | 45 + .../resourcetypes.component.html | 28 +- .../resourcetypes.component.spec.ts | 41 - .../resourcetypes/resourcetypes.component.ts | 4 +- .../new-service-definition.component.css | 24 +- .../new-service-definition.component.html | 40 +- .../new-service-definition.component.ts | 44 +- .../app/service-definition/rewrite.rules.ts | 21 - .../servicedefinition-detail.component.ts | 210 ++-- .../{ => service}/gateway-version.service.ts | 19 +- .../{resource => service}/resource.service.ts | 100 +- .../resourcetypes.service.ts | 4 +- .../servicedefinition.service.ts | 95 +- .../session.information.service.ts | 19 +- .../app/{ => service}/topology.service.ts | 68 +- .../session.information.component.html | 0 .../session.information.component.ts | 11 +- .../admin-ui/app/topology-detail.component.ts | 209 ---- .../topology-detail.component.ts | 269 +++++ .../app/{ => topology}/topology.component.ts | 24 +- .../admin-ui/app/utils/json-pretty.pipe.ts | 4 +- .../admin-ui/app/utils/modal.component.ts | 55 + .../admin-ui/app/utils/tabs.component.ts | 15 +- .../admin-ui/app/utils/validation-utils.ts | 2 +- .../admin-ui/app/utils/xml.pipe.ts | 4 +- .../admin-ui/assets/sticky-footer.css | 24 - gateway-admin-ui/admin-ui/index.html | 50 +- gateway-admin-ui/admin-ui/main.ts | 28 +- .../rewrite.rule.ts => material-theme.scss} | 11 +- gateway-admin-ui/admin-ui/polyfills.ts | 20 +- gateway-admin-ui/admin-ui/styles.css | 9 - gateway-admin-ui/admin-ui/styles.scss | 354 +++++++ gateway-admin-ui/admin-ui/tsconfig.json | 11 +- gateway-admin-ui/admin-ui/typings.d.ts | 18 - gateway-admin-ui/angular.json | 45 +- gateway-admin-ui/eslint.config.js | 76 ++ gateway-admin-ui/package.json | 75 +- gateway-admin-ui/pom.xml | 8 +- .../session.information.component.html | 1 - .../session.information.component.html | 1 - 89 files changed, 2313 insertions(+), 2312 deletions(-) delete mode 100644 gateway-admin-ui/.eslintrc.json delete mode 100644 gateway-admin-ui/admin-ui/app/app.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/app.module.ts delete mode 100644 gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.css delete mode 100644 gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.html delete mode 100644 gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.ts rename gateway-admin-ui/admin-ui/app/{ => gateway-version}/gateway-version.component.ts (62%) delete mode 100644 gateway-admin-ui/admin-ui/app/index.ts delete mode 100644 gateway-admin-ui/admin-ui/app/main.ts rename gateway-admin-ui/admin-ui/app/{resource-detail => model}/descriptor.ts (98%) rename gateway-admin-ui/admin-ui/app/{ => model}/gateway-version.ts (100%) rename gateway-admin-ui/admin-ui/app/{resource-detail => model}/provider-config.ts (100%) rename gateway-admin-ui/admin-ui/app/{resource => model}/resource.ts (95%) rename gateway-admin-ui/admin-ui/app/{resource => model}/service.ts (100%) rename gateway-admin-ui/admin-ui/app/{service-definition => model}/servicedefinition.ts (89%) rename gateway-admin-ui/admin-ui/app/{sessionInformation/session.information.ts => model/session-information.ts} (91%) rename gateway-admin-ui/admin-ui/app/{ => model}/topology.ts (100%) delete mode 100644 gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/resource/resource.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.spec.ts delete mode 100644 gateway-admin-ui/admin-ui/app/service-definition/rewrite.rules.ts rename gateway-admin-ui/admin-ui/app/{ => service}/gateway-version.service.ts (77%) rename gateway-admin-ui/admin-ui/app/{resource => service}/resource.service.ts (80%) rename gateway-admin-ui/admin-ui/app/{resourcetypes => service}/resourcetypes.service.ts (95%) rename gateway-admin-ui/admin-ui/app/{service-definition => service}/servicedefinition.service.ts (53%) rename gateway-admin-ui/admin-ui/app/{sessionInformation => service}/session.information.service.ts (83%) rename gateway-admin-ui/admin-ui/app/{ => service}/topology.service.ts (67%) rename gateway-admin-ui/admin-ui/app/{sessionInformation => session-information}/session.information.component.html (100%) rename gateway-admin-ui/admin-ui/app/{sessionInformation => session-information}/session.information.component.ts (91%) delete mode 100644 gateway-admin-ui/admin-ui/app/topology-detail.component.ts create mode 100644 gateway-admin-ui/admin-ui/app/topology-detail/topology-detail.component.ts rename gateway-admin-ui/admin-ui/app/{ => topology}/topology.component.ts (74%) create mode 100644 gateway-admin-ui/admin-ui/app/utils/modal.component.ts delete mode 100644 gateway-admin-ui/admin-ui/assets/sticky-footer.css rename gateway-admin-ui/admin-ui/{app/service-definition/rewrite.rule.ts => material-theme.scss} (86%) delete mode 100644 gateway-admin-ui/admin-ui/styles.css create mode 100644 gateway-admin-ui/admin-ui/styles.scss delete mode 100644 gateway-admin-ui/admin-ui/typings.d.ts create mode 100644 gateway-admin-ui/eslint.config.js diff --git a/gateway-admin-ui/.eslintrc.json b/gateway-admin-ui/.eslintrc.json deleted file mode 100644 index 71378a09f6..0000000000 --- a/gateway-admin-ui/.eslintrc.json +++ /dev/null @@ -1,98 +0,0 @@ -{ - "root": true, - "overrides": [ - { - "files": [ - "*.ts" - ], - "parserOptions": { - "project": [ - "admin-ui/tsconfig.json" - ], - "createDefaultProgram": true - }, - "extends": [ - "plugin:@angular-eslint/recommended", - "plugin:@angular-eslint/template/process-inline-templates" - ], - "rules": { - "@typescript-eslint/naming-convention": [ - "error", - { - "selector": ["class"], - "format": ["PascalCase"] - } - ], - "spaced-comment": "error", - "curly": "error", - "eol-last": "error", - "guard-for-in": "error", - "no-unused-labels": "error", - "max-len": [ - "error", - { "code": 140 } - ], - "@typescript-eslint/explicit-member-accessibility": [ - "off", - {"accessibility": "no-public"} - ], - "@typescript-eslint/member-ordering": [ - "error", - { "default": ["static-field", "instance-field", "field", "method"] } - ], - "no-caller": "error", - "no-bitwise": "error", - "no-console": "off", - "no-new-wrappers": "error", - "no-debugger": "error", - "no-redeclare": "off", - "no-empty": "error", - "no-eval": "error", - "@typescript-eslint/no-inferrable-types": "error", - "no-shadow": "error", - "dot-notation": "off", - "no-fallthrough": "error", - "no-trailing-spaces": "error", - "no-unused-expressions": "error", - "no-var": "error", - "sort-keys": "off", - "brace-style": ["error","1tbs", { "allowSingleLine": true }], - "quotes": ["error", "single"], - "radix": "error", - "@typescript-eslint/semi": "error", - "eqeqeq": ["error", "always", {"null": "ignore"}], - "@typescript-eslint/type-annotation-spacing": "error", - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "app", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "app", - "style": "kebab-case" - } - ], - "@angular-eslint/no-input-rename": "off", - "@angular-eslint/no-output-rename": "error", - "@angular-eslint/use-pipe-transform-interface": "error", - "@angular-eslint/component-class-suffix": "error", - "@angular-eslint/directive-class-suffix": "error" - } - }, - { - "files": [ - "*.html" - ], - "extends": [ - "plugin:@angular-eslint/template/recommended" - ], - "rules": {} - } - ] -} diff --git a/gateway-admin-ui/admin-ui/app/app.component.spec.ts b/gateway-admin-ui/admin-ui/app/app.component.spec.ts deleted file mode 100644 index f341605862..0000000000 --- a/gateway-admin-ui/admin-ui/app/app.component.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/* tslint:disable:no-unused-variable */ -import {AppComponent} from './app.component'; - -import {TestBed} from '@angular/core/testing'; - -import {By} from '@angular/platform-browser'; - -// SPECS - -// Delete this -describe('Smoke test', () => { - it('should run a passing test', () => { - expect(true).toEqual(true, 'should pass'); - }); -}); - -describe('AppComponent with TCB', function () { - beforeEach(() => { - TestBed.configureTestingModule({declarations: [AppComponent]}); - }); - - it('should instantiate component', () => { - let fixture = TestBed.createComponent(AppComponent); - expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); - }); - - it('should have expected

text', () => { - let fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - - let h1 = fixture.debugElement.query(el => el.name === 'h1').nativeElement; // it works - - h1 = fixture.debugElement.query(By.css('h1')).nativeElement; // preferred - - expect(h1.innerText).toMatch(/angular 2 app/i, '

should say something about "Angular 2 App"'); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/app.component.ts b/gateway-admin-ui/admin-ui/app/app.component.ts index 63fd7e777b..d2bed8c8a3 100644 --- a/gateway-admin-ui/admin-ui/app/app.component.ts +++ b/gateway-admin-ui/admin-ui/app/app.component.ts @@ -15,14 +15,14 @@ * limitations under the License. */ import {Component} from '@angular/core'; -import {TopologyService} from './topology.service'; -import {ServiceDefinitionService} from './service-definition/servicedefinition.service'; -import {ResourceTypesService} from './resourcetypes/resourcetypes.service'; +import {ResourcetypesComponent} from './resourcetypes/resourcetypes.component'; +import {ResourceComponent} from './resource/resource.component'; +import {ResourceDetailComponent} from './resource-detail/resource-detail.component'; @Component({ selector: 'app-resource-management', template: ` -
+
@@ -36,12 +36,8 @@ import {ResourceTypesService} from './resourcetypes/resourcetypes.service';
`, - providers: [TopologyService, ServiceDefinitionService, ResourceTypesService] + imports: [ResourcetypesComponent, ResourceComponent, ResourceDetailComponent] }) export class AppComponent { - constructor(private topologyService: TopologyService, - private serviceDefinitionService: ServiceDefinitionService, - private resourcetypesService: ResourceTypesService) { - } } diff --git a/gateway-admin-ui/admin-ui/app/app.module.ts b/gateway-admin-ui/admin-ui/app/app.module.ts deleted file mode 100644 index bc51ea9e94..0000000000 --- a/gateway-admin-ui/admin-ui/app/app.module.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {NgModule} from '@angular/core'; -import {DataTableModule} from 'angular2-datatable'; -import {BrowserModule} from '@angular/platform-browser'; -import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http'; -import {FormsModule} from '@angular/forms'; -import {CustomFormsModule} from 'ng2-validation'; -import {APP_BASE_HREF} from '@angular/common'; - -import {AppComponent} from './app.component'; -import {TopologyService} from './topology.service'; -import {ServiceDefinitionService} from './service-definition/servicedefinition.service'; -import {ServiceDefinitionDetailComponent} from './service-definition/servicedefinition-detail.component'; -import {NewServiceDefinitionComponent} from './service-definition/new-service-definition.component'; -import {GatewayVersionService} from './gateway-version.service'; -import {GatewayVersionComponent} from './gateway-version.component'; -import {TopologyComponent} from './topology.component'; -import {TopologyDetailComponent} from './topology-detail.component'; -import {XmlPipe} from './utils/xml.pipe'; -import {JsonPrettyPipe} from './utils/json-pretty.pipe'; -import {TabComponent} from './utils/tab.component'; -import {TabsComponent} from './utils/tabs.component'; - -import {AceEditorModule} from 'ng2-ace-editor'; -import {BsModalModule} from 'ng2-bs3-modal'; -import {ResourcetypesComponent} from './resourcetypes/resourcetypes.component'; -import {ResourceTypesService} from './resourcetypes/resourcetypes.service'; -import {ResourceComponent} from './resource/resource.component'; -import {ResourceService} from './resource/resource.service'; -import {DescriptorComponent} from './descriptor/descriptor.component'; -import {ResourceDetailComponent} from './resource-detail/resource-detail.component'; -import {ProviderConfigSelectorComponent} from './provider-config-selector/provider-config-selector.component'; -import {NewDescWizardComponent} from './new-desc-wizard/new-desc-wizard.component'; -import {ProviderConfigWizardComponent} from './provider-config-wizard/provider-config-wizard.component'; -import {SessionInformationComponent} from './sessionInformation/session.information.component'; -import {SafeHtmlPipe} from './sessionInformation/session.information.component'; - -@NgModule({ - imports: [BrowserModule, - HttpClientModule, - HttpClientXsrfModule, - FormsModule, - CustomFormsModule, - BsModalModule, - AceEditorModule, - DataTableModule - ], - declarations: [AppComponent, - TopologyComponent, - TopologyDetailComponent, - ServiceDefinitionDetailComponent, - NewServiceDefinitionComponent, - GatewayVersionComponent, - XmlPipe, - JsonPrettyPipe, - TabsComponent, - TabComponent, - ResourcetypesComponent, - ResourceComponent, - DescriptorComponent, - ResourceDetailComponent, - ProviderConfigSelectorComponent, - NewDescWizardComponent, - ProviderConfigWizardComponent, - SessionInformationComponent, - SafeHtmlPipe - ], - providers: [TopologyService, - ServiceDefinitionService, - GatewayVersionService, - ResourceComponent, - ResourceTypesService, - ResourceService, - {provide: APP_BASE_HREF, useValue: '/'} - ], - bootstrap: [AppComponent, - GatewayVersionComponent, - SessionInformationComponent - ] -}) -export class AppModule { -} diff --git a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.css b/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.html b/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.html deleted file mode 100644 index c4e7fc1ef8..0000000000 --- a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

- descriptor works! -

diff --git a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.spec.ts b/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.spec.ts deleted file mode 100644 index 850d7064b9..0000000000 --- a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {DescriptorComponent} from './descriptor.component'; - -describe('DescriptorComponent', () => { - let component: DescriptorComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [DescriptorComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DescriptorComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.ts b/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.ts deleted file mode 100644 index c0a4471641..0000000000 --- a/gateway-admin-ui/admin-ui/app/descriptor/descriptor.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {Component, OnInit} from '@angular/core'; - -@Component({ - selector: 'app-descriptor', - templateUrl: './descriptor.component.html', - styleUrls: ['./descriptor.component.css'] -}) -export class DescriptorComponent { - - constructor() { - } - -} diff --git a/gateway-admin-ui/admin-ui/app/gateway-version.component.ts b/gateway-admin-ui/admin-ui/app/gateway-version/gateway-version.component.ts similarity index 62% rename from gateway-admin-ui/admin-ui/app/gateway-version.component.ts rename to gateway-admin-ui/admin-ui/app/gateway-version/gateway-version.component.ts index 602e889e6e..4f315a488d 100644 --- a/gateway-admin-ui/admin-ui/app/gateway-version.component.ts +++ b/gateway-admin-ui/admin-ui/app/gateway-version/gateway-version.component.ts @@ -15,17 +15,39 @@ * limitations under the License. */ import {Component, OnInit} from '@angular/core'; -import {GatewayVersion} from './gateway-version'; -import {GatewayVersionService} from './gateway-version.service'; +import {GatewayVersion} from '../model/gateway-version'; +import {GatewayVersionService} from '../service/gateway-version.service'; + @Component({ selector: 'app-gateway-version', template: ` -
- Version {{this.gatewayVersion.version}} - Hash {{this.gatewayVersion.hash}} -
`, - providers: [GatewayVersionService] + @if (gatewayVersion) { + Version {{gatewayVersion.version}} + | + Hash {{gatewayVersion.hash}} + } + `, + styles: [` + :host { + display: inline; + } + + .version-item { + font-size: 12px; + color: #888; + } + + .version-item strong { + color: #555; + margin-right: 3px; + } + + .version-divider { + margin: 0 8px; + color: #ccc; + } + `] }) export class GatewayVersionComponent implements OnInit { @@ -42,4 +64,3 @@ export class GatewayVersionComponent implements OnInit { this.getVersion(); } } - diff --git a/gateway-admin-ui/admin-ui/app/index.ts b/gateway-admin-ui/admin-ui/app/index.ts deleted file mode 100644 index d7b550ca9e..0000000000 --- a/gateway-admin-ui/admin-ui/app/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export * from './app.component'; -export * from './app.module'; diff --git a/gateway-admin-ui/admin-ui/app/main.ts b/gateway-admin-ui/admin-ui/app/main.ts deleted file mode 100644 index 03ea8874ff..0000000000 --- a/gateway-admin-ui/admin-ui/app/main.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {AppModule} from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/gateway-admin-ui/admin-ui/app/resource-detail/descriptor.ts b/gateway-admin-ui/admin-ui/app/model/descriptor.ts similarity index 98% rename from gateway-admin-ui/admin-ui/app/resource-detail/descriptor.ts rename to gateway-admin-ui/admin-ui/app/model/descriptor.ts index 85d90ae022..e9ee90cadb 100644 --- a/gateway-admin-ui/admin-ui/app/resource-detail/descriptor.ts +++ b/gateway-admin-ui/admin-ui/app/model/descriptor.ts @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Service} from '../resource/service'; +import {Service} from './service'; export class Descriptor { discoveryType: string; diff --git a/gateway-admin-ui/admin-ui/app/gateway-version.ts b/gateway-admin-ui/admin-ui/app/model/gateway-version.ts similarity index 100% rename from gateway-admin-ui/admin-ui/app/gateway-version.ts rename to gateway-admin-ui/admin-ui/app/model/gateway-version.ts diff --git a/gateway-admin-ui/admin-ui/app/resource-detail/provider-config.ts b/gateway-admin-ui/admin-ui/app/model/provider-config.ts similarity index 100% rename from gateway-admin-ui/admin-ui/app/resource-detail/provider-config.ts rename to gateway-admin-ui/admin-ui/app/model/provider-config.ts diff --git a/gateway-admin-ui/admin-ui/app/resource/resource.ts b/gateway-admin-ui/admin-ui/app/model/resource.ts similarity index 95% rename from gateway-admin-ui/admin-ui/app/resource/resource.ts rename to gateway-admin-ui/admin-ui/app/model/resource.ts index 1cdc2e8ba0..b8774ce198 100644 --- a/gateway-admin-ui/admin-ui/app/resource/resource.ts +++ b/gateway-admin-ui/admin-ui/app/model/resource.ts @@ -18,8 +18,6 @@ export class Resource { timestamp: number; name: string; - uri: string; href: string; - content: string; service: string; } diff --git a/gateway-admin-ui/admin-ui/app/resource/service.ts b/gateway-admin-ui/admin-ui/app/model/service.ts similarity index 100% rename from gateway-admin-ui/admin-ui/app/resource/service.ts rename to gateway-admin-ui/admin-ui/app/model/service.ts diff --git a/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition.ts b/gateway-admin-ui/admin-ui/app/model/servicedefinition.ts similarity index 89% rename from gateway-admin-ui/admin-ui/app/service-definition/servicedefinition.ts rename to gateway-admin-ui/admin-ui/app/model/servicedefinition.ts index 8a71e6a49c..456914855a 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition.ts +++ b/gateway-admin-ui/admin-ui/app/model/servicedefinition.ts @@ -14,11 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {RewriteRules} from './rewrite.rules'; -import {Service} from './service'; - export class ServiceDefinition { - name: string; service: string; role: string; version: string; diff --git a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.ts b/gateway-admin-ui/admin-ui/app/model/session-information.ts similarity index 91% rename from gateway-admin-ui/admin-ui/app/sessionInformation/session.information.ts rename to gateway-admin-ui/admin-ui/app/model/session-information.ts index 8bdefe3d75..98a8dbcfbc 100644 --- a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.ts +++ b/gateway-admin-ui/admin-ui/app/model/session-information.ts @@ -17,8 +17,5 @@ export class SessionInformation { user: string; - logoutUrl: string; - logoutPageUrl: string; - globalLgoutPageUrl: string; bannerText: string; } diff --git a/gateway-admin-ui/admin-ui/app/topology.ts b/gateway-admin-ui/admin-ui/app/model/topology.ts similarity index 100% rename from gateway-admin-ui/admin-ui/app/topology.ts rename to gateway-admin-ui/admin-ui/app/model/topology.ts diff --git a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.css b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.css index 0cc494ab8c..1bd97a818f 100644 --- a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.css +++ b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.css @@ -2,4 +2,27 @@ td { border-collapse: collapse; padding: 8px; vertical-align: top; +} + +.services-table { + table-layout: fixed; + width: 100%; +} + +.service-checkbox { + display: flex; + align-items: baseline; + gap: 6px; + margin: 4px 0; + cursor: pointer; + font-weight: normal; +} + +.service-checkbox input[type="checkbox"] { + flex-shrink: 0; +} + +.service-checkbox span { + overflow: hidden; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.html b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.html index 1c9a9770af..4872dcf6e3 100644 --- a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.html +++ b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.html @@ -1,149 +1,157 @@ - - + +
- - + +
+
- Name + Name * - required - invalid - Cannot overwrite existing read-only topology + @if (!isMissingDescriptorName() && !isValidDescriptorName()) { + Invalid name + } + @if (isExistingReadOnlyTopology()) { + Cannot overwrite existing read-only topology + }

- Provider Configuration  - {{descriptor.providerConfig}} - - - - - + Provider Configuration *  + @if (!editModePC) { + {{descriptor.providerConfig}} + } + @if (editModePC) { + + + + + + }   - + + edit + - required - invalid + @if (!isMissingProviderConfig() && !isValidProviderConfig()) { + Invalid provider configuration + }

- + {{this['showServices'] ? 'expand_more' : 'chevron_right'}} Services
-
- - - - -
-
- - {{ supportedService }} -
-
-
+ @if (this['showServices']) { +
+ + + @for (col of getServiceDisplayColumns(); track $index) { + + } + +
+ @for (supportedService of col; track supportedService) { + + } +
+
+ }
- + {{this['showDiscovery'] ? 'expand_more' : 'chevron_right'}} Discovery
-
-
- - - - - - - - - - - - - - - - - - - - - -
Type - - - -
Address - - - - invalid -
Cluster - - - -
Username - - - -
Password Alias - - - -
-
-
+ @if (this['showDiscovery']) { +
+
+ + + + + + + + + + + + + + + + + + + + + +
Type + + + +
Address + + + + @if (!isValidDiscoveryAddress()) { + Invalid address + } +
Cluster + + + +
Username + + + +
Password Alias + + + +
+
+
+ }
- - - - + - - + (click)="save()">Ok +
+ diff --git a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.spec.ts b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.spec.ts deleted file mode 100644 index 5222c23a7e..0000000000 --- a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {NewDescWizardComponent} from './new-desc-wizard.component'; - -describe('NewDescWizardComponent', () => { - let component: NewDescWizardComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [NewDescWizardComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NewDescWizardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.ts b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.ts index 4794b26a37..022122ea14 100644 --- a/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.ts +++ b/gateway-admin-ui/admin-ui/app/new-desc-wizard/new-desc-wizard.component.ts @@ -15,20 +15,22 @@ * limitations under the License. */ import {Component, OnInit, ViewChild} from '@angular/core'; -import {BsModalComponent} from 'ng2-bs3-modal'; +import {FormsModule} from '@angular/forms'; import {ProviderConfigSelectorComponent} from '../provider-config-selector/provider-config-selector.component'; -import {Descriptor} from '../resource-detail/descriptor'; -import {ResourceService} from '../resource/resource.service'; -import {Resource} from '../resource/resource'; -import {ResourceTypesService} from '../resourcetypes/resourcetypes.service'; +import {Descriptor} from '../model/descriptor'; +import {ResourceService} from '../service/resource.service'; +import {Resource} from '../model/resource'; +import {ResourceTypesService} from '../service/resourcetypes.service'; import {ValidationUtils} from '../utils/validation-utils'; -import {HttpErrorResponse} from '@angular/common/http'; +import {ModalComponent} from '../utils/modal.component'; +import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-new-desc-wizard', templateUrl: './new-desc-wizard.component.html', - styleUrls: ['./new-desc-wizard.component.css'] + styleUrls: ['./new-desc-wizard.component.css'], + imports: [FormsModule, ProviderConfigSelectorComponent, ModalComponent] }) export class NewDescWizardComponent implements OnInit { @@ -80,7 +82,7 @@ export class NewDescWizardComponent implements OnInit { 'ZEPPELINWS']; @ViewChild('newDescriptorModal') - childModal: BsModalComponent; + childModal: ModalComponent; @ViewChild('choosePC') chooseProviderConfigModal: ProviderConfigSelectorComponent; @@ -102,9 +104,9 @@ export class NewDescWizardComponent implements OnInit { this.descriptor = new Descriptor(); } - open(size?: string) { + open() { this.reset(); - this.childModal.open(size ? size : 'lg'); + this.childModal.open('lg'); } reset() { @@ -157,7 +159,7 @@ export class NewDescWizardComponent implements OnInit { } } }); - this.childModal.close(); // close the dialog if there was no error + this.childModal.dismiss(); }).catch((err: HttpErrorResponse) => { this.existingReadOnlyTopology = (err.status === 409); console.error('Error creating ' + this.descriptorName + ' : ' + err.message); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.html b/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.html index 71dd9fea30..2179ac8613 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.html +++ b/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.html @@ -1,28 +1,25 @@ - - + +
- - + +
+
- - - - + - - + (click)="chooseProviderConfigModal.close()">Ok +
+ diff --git a/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.spec.ts b/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.spec.ts deleted file mode 100644 index 1ea1a46485..0000000000 --- a/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {ProviderConfigSelectorComponent} from './provider-config-selector.component'; - -describe('ProviderConfigSelectorComponent', () => { - let component: ProviderConfigSelectorComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ProviderConfigSelectorComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ProviderConfigSelectorComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.ts b/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.ts index ab5a3f0165..67894f3824 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-selector/provider-config-selector.component.ts @@ -14,23 +14,25 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {ResourceService} from '../resource/resource.service'; -import {Resource} from '../resource/resource'; -import {BsModalComponent} from 'ng2-bs3-modal'; -import {Descriptor} from '../resource-detail/descriptor'; -import {HttpErrorResponse} from '@angular/common/http'; +import {Component, ViewChild} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {ResourceService} from '../service/resource.service'; +import {Resource} from '../model/resource'; +import {Descriptor} from '../model/descriptor'; +import {ModalComponent} from '../utils/modal.component'; +import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-provider-config-selector', templateUrl: './provider-config-selector.component.html', - styleUrls: ['./provider-config-selector.component.css'] + styleUrls: ['./provider-config-selector.component.css'], + imports: [FormsModule, ModalComponent] }) export class ProviderConfigSelectorComponent { @ViewChild('chooseProviderConfigModal') - private childModal: BsModalComponent; + private childModal: ModalComponent; private providerConfigs: Resource[]; @@ -42,16 +44,15 @@ export class ProviderConfigSelectorComponent { constructor(private resourceService: ResourceService) { } - open(desc: Descriptor, size?: string) { + open(desc: Descriptor) { this.descriptor = desc; - this.selectedName = desc.providerConfig; // Set the default selection based on the current ref in the descriptor + this.selectedName = desc.providerConfig; - // Load the available provider configs every time this modal is open this.resourceService.getResources('Provider Configurations') .then(result => this.providerConfigs = result) .catch((err: HttpErrorResponse) => console.debug('Error access provider configurations: ' + err)); - this.childModal.open(size); + this.childModal.open('sm'); } onClose() { diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/AnonymousProviderConfig.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/AnonymousProviderConfig.ts index b34ec60e58..c0cc1a2428 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/AnonymousProviderConfig.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/AnonymousProviderConfig.ts @@ -30,7 +30,7 @@ export class AnonymousProviderConfig extends AuthenticationProviderConfig { return this.displayBindingPropertyNames; } - getDisplayNamePropertyBinding(name: string): string { + getDisplayNamePropertyBinding(_name: string): string { return null; } diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/authentication-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/authentication-wizard.ts index 3b1ee4da57..1ccf0f8d25 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/authentication-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/authentication-wizard.ts @@ -82,8 +82,7 @@ export class AuthenticationWizard extends CategoryWizard { onChange() { let configType = AuthenticationWizard.typeConfigMap.get(this.selectedType); if (configType) { - this.providerConfig = Object.create(configType.prototype) as AuthenticationProviderConfig; - this.providerConfig = this.providerConfig.constructor.apply(this.providerConfig); + this.providerConfig = new (configType as any)(); (this.providerConfig as AuthenticationProviderConfig).setType(this.selectedType); } else { console.debug('AuthenticationWizard --> No provider configuration type mapped for ' + this.selectedType); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/authorization-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/authorization-wizard.ts index 5d64810d33..845d4f888c 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/authorization-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/authorization-wizard.ts @@ -42,8 +42,7 @@ export class AuthorizationWizard extends CategoryWizard { onChange() { let configType = AuthorizationWizard.typeConfigMap.get(this.selectedType); if (configType) { - this.providerConfig = Object.create(configType.prototype) as DisplayBindingProviderConfig; - this.providerConfig = this.providerConfig.constructor.apply(this.providerConfig); + this.providerConfig = new (configType as any)(); (this.providerConfig as DisplayBindingProviderConfig).setType(this.selectedType); } else { console.debug('AuthorizationWizard --> No provider configuration type mapped for ' + this.selectedType); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/category-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/category-wizard.ts index a28e15fefd..17c514289a 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/category-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/category-wizard.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; export abstract class CategoryWizard { diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/csrf-provider-config.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/csrf-provider-config.ts index 10044e2167..a3e56d29a4 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/csrf-provider-config.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/csrf-provider-config.ts @@ -57,12 +57,13 @@ export class CSRFProviderConfig extends WebAppSecurityContributor { case CSRFProviderConfig.CUSTOM_HEADER: isValid = ValidationUtils.isValidString(value); break; - case CSRFProviderConfig.METHODS_TO_IGNORE: + case CSRFProviderConfig.METHODS_TO_IGNORE: { let methodList: string[] = value.split(','); for (let method of methodList) { isValid = isValid && ValidationUtils.isValidHTTPMethod(method.trim().toUpperCase()); } break; + } default: } } diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/display-binding-provider-config.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/display-binding-provider-config.ts index 7d864cf275..4d89ae47ff 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/display-binding-provider-config.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/display-binding-provider-config.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; export abstract class DisplayBindingProviderConfig extends ProviderConfig { @@ -59,11 +59,11 @@ export abstract class DisplayBindingProviderConfig extends ProviderConfig { return this.params[name]; } - isPasswordParam(name: string): boolean { + isPasswordParam(_name: string): boolean { return false; } - isValidParamValue(paramName: string) { + isValidParamValue(_paramName: string) { return true; } diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/ha-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/ha-wizard.ts index 84f489b2f3..7078cea8a2 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/ha-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/ha-wizard.ts @@ -16,7 +16,7 @@ */ import {CategoryWizard} from './category-wizard'; -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; import {ProviderContributorWizard} from './provider-contributor-wizard'; import {HaProviderConfig} from './ha-provider-config'; import {DisplayBindingProviderConfig} from './display-binding-provider-config'; diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/hostmap-provider-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/hostmap-provider-wizard.ts index 8fedb3e986..1ab1cee131 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/hostmap-provider-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/hostmap-provider-wizard.ts @@ -15,7 +15,7 @@ * limitations under the License. */ import {CategoryWizard} from './category-wizard'; -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; export class HostMapProviderWizard extends CategoryWizard { private stepCount = 2; diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/identity-assertion-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/identity-assertion-wizard.ts index 126c8a9552..8c9e4007f3 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/identity-assertion-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/identity-assertion-wizard.ts @@ -16,7 +16,7 @@ */ import {CategoryWizard} from './category-wizard'; -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; import {IdentityAssertionProviderConfig} from './identity-assertion-provider-config'; import {DefaultIdAssertionProviderConfig} from './default-idassertion-provider-config'; import {ConcatAssertionProviderConfig} from './concat-idassertion-provider-config'; @@ -59,8 +59,7 @@ export class IdentityAssertionWizard extends CategoryWizard { onChange() { let configType = IdentityAssertionWizard.typeConfigMap.get(this.selectedType); if (configType) { - this.providerConfig = Object.create(configType.prototype) as IdentityAssertionProviderConfig; - this.providerConfig = this.providerConfig.constructor.apply(this.providerConfig); + this.providerConfig = new (configType as any)(); (this.providerConfig as IdentityAssertionProviderConfig).setType(this.selectedType); } else { console.debug('IdentityAssertionWizard --> No provider configuration type mapped for ' + this.selectedType); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.html b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.html index 46cd5dc21e..3c93852e0e 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.html +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.html @@ -1,133 +1,150 @@ - - + +
- - + +
+
-
- + @if (isRootStep()) {
- - - - - -
Name - -  required - - Cannot overwrite existing read-only topology - -  invalid - -
-
+ +
+ + + + + +
Name * + @if (isExistingReadOnlyProvider()) { + Cannot overwrite existing read-only topology + } + @if (!field.errors?.required && !isValidProviderConfigName()) { + Invalid name + } +
+
-
+
- -
- Providers
-
- {{ pDisplay }} -
-
+ +
+ Providers
+ @for (pDisplay of getConfiguredProviderDisplayNames(); track pDisplay) { +
{{ pDisplay }}
+ } +
-
+
- -
- -
-
+ +
+ +
+
+ } -
- Choose a Provider Category

-
- -
-
+ @if (isProviderCategoryStep()) { +
+ Choose a Provider Category

+ @for (pc of getProviderCategories(); track pc) { +
+ +
+ } +
+ } -
- Choose a {{ selectedCategory }} Provider Type

-
- -
-
+ @if (isProviderTypeStep()) { +
+ Choose a {{ selectedCategory }} Provider Type

+ @for (pt of getProviderTypes(); track pt) { +
+ +
+ } +
+ } -
- Specify {{ getCategoryWizard().getSelectedType() }} Provider Parameters

- - - - - -
{{pt}} - - - - - show - - invalid -
-
- + @if (isProviderParamsStep()) { +
+ Specify {{ getCategoryWizard().getSelectedType() }} Provider Parameters

+ + @for (pt of getProviderParams(); track pt) { + + + + + } +
{{pt}} + + + + @if (isPasswordParam(pt)) { + + show + + } + @if (!isValidParamValue(pt)) { + Invalid value + } +
+
+ } - - +
+
+ Required field - - - - - + @if (!isRootStep()) { + + } + @if (isRootStep() || !hasMoreSteps()) { + + } + @if (!isRootStep() && hasMoreSteps()) { + + } +
+ diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.spec.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.spec.ts deleted file mode 100644 index 2897ef0f62..0000000000 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {ProviderConfigWizardComponent} from './provider-config-wizard.component'; - -describe('ProviderConfigWizardComponent', () => { - let component: ProviderConfigWizardComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ProviderConfigWizardComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ProviderConfigWizardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.ts index a4b03a7e80..4ed21c631a 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-config-wizard.component.ts @@ -16,28 +16,30 @@ */ import {Component, OnInit, ViewChild} from '@angular/core'; -import {ResourceTypesService} from '../resourcetypes/resourcetypes.service'; -import {ResourceService} from '../resource/resource.service'; -import {BsModalComponent} from 'ng2-bs3-modal'; -import {ProviderConfig} from '../resource-detail/provider-config'; +import {FormsModule} from '@angular/forms'; +import {ResourceTypesService} from '../service/resourcetypes.service'; +import {ResourceService} from '../service/resource.service'; +import {ProviderConfig} from '../model/provider-config'; import {AuthenticationWizard} from './authentication-wizard'; import {CategoryWizard} from './category-wizard'; import {AuthorizationWizard} from './authorization-wizard'; import {IdentityAssertionWizard} from './identity-assertion-wizard'; import {HaWizard} from './ha-wizard'; -import {Resource} from '../resource/resource'; +import {Resource} from '../model/resource'; import {DisplayBindingProviderConfig} from './display-binding-provider-config'; import {OrderedParamContainer} from './ordered-param-container'; import {HostMapProviderWizard} from './hostmap-provider-wizard'; import {ProviderContributorWizard} from './provider-contributor-wizard'; import {WebAppSecurityWizard} from './webappsec-wizard'; import {ValidationUtils} from '../utils/validation-utils'; -import {HttpErrorResponse} from '@angular/common/http'; +import {ModalComponent} from '../utils/modal.component'; +import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-provider-config-wizard', templateUrl: './provider-config-wizard.component.html', - styleUrls: ['./provider-config-wizard.component.css'] + styleUrls: ['./provider-config-wizard.component.css'], + imports: [FormsModule, ModalComponent] }) export class ProviderConfigWizardComponent implements OnInit { private static CATEGORY_STEP = 1; @@ -70,7 +72,7 @@ export class ProviderConfigWizardComponent implements OnInit { ]); @ViewChild('newProviderConfigModal') - childModal: BsModalComponent; + childModal: ModalComponent; private step = 0; @@ -105,9 +107,9 @@ export class ProviderConfigWizardComponent implements OnInit { this.selectedCategory = ProviderConfigWizardComponent.CATEGORY_AUTHENTICATION; // Default to authentication } - open(size?: string) { + open() { this.reset(); - this.childModal.open(size ? size : 'lg'); + this.childModal.open('lg'); } reset() { @@ -226,7 +228,7 @@ export class ProviderConfigWizardComponent implements OnInit { } } }); - this.childModal.close(); // close the dialog if there was no error + this.childModal.dismiss(); }).catch((err: HttpErrorResponse) => { this.existingReadOnlyProvider = (err.status === 409); console.error('Error creating ' + newResource + ' : ' + err.message); diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-contributor-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-contributor-wizard.ts index 59062bd8b6..ae32cbda7d 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-contributor-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/provider-contributor-wizard.ts @@ -16,7 +16,7 @@ */ -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; export interface ProviderContributorWizard { diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-provider-config.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-provider-config.ts index 1825034d41..cb78133d45 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-provider-config.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-provider-config.ts @@ -33,7 +33,7 @@ export class WebAppSecurityProviderConfig extends DisplayBindingProviderConfig { return []; } - getDisplayNamePropertyBinding(name: string): string { + getDisplayNamePropertyBinding(_name: string): string { return null; } } diff --git a/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-wizard.ts b/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-wizard.ts index 1f097ce57a..f712ec6652 100644 --- a/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-wizard.ts +++ b/gateway-admin-ui/admin-ui/app/provider-config-wizard/webappsec-wizard.ts @@ -16,7 +16,7 @@ */ import {CategoryWizard} from './category-wizard'; -import {ProviderConfig} from '../resource-detail/provider-config'; +import {ProviderConfig} from '../model/provider-config'; import {ProviderContributorWizard} from './provider-contributor-wizard'; import {DisplayBindingProviderConfig} from './display-binding-provider-config'; import {WebAppSecurityProviderConfig} from './webappsec-provider-config'; @@ -68,8 +68,7 @@ export class WebAppSecurityWizard extends CategoryWizard implements ProviderCont onChange() { let configType = WebAppSecurityWizard.typeConfigMap.get(this.selectedType); if (configType) { - this.providerConfig = Object.create(configType.prototype) as WebAppSecurityContributor; - this.providerConfig = this.providerConfig.constructor.apply(this.providerConfig); + this.providerConfig = new (configType as any)(); (this.providerConfig as WebAppSecurityContributor).setType(this.selectedType); } else { console.debug('WebAppSecurityWizard --> No provider configuration type mapped for ' + this.selectedType); diff --git a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.css b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.css index c1343e95c9..c9380855fe 100644 --- a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.css +++ b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.css @@ -16,10 +16,12 @@ } .inline-editable:hover:after { - font-family: 'Glyphicons Halflings'; - content: "\270f"; + font-family: 'Material Icons'; + content: "\e254"; + font-size: 14px; position: relative; - left: 10px; + left: 6px; + color: #4caf50; } .inline-editable.editable-empty, @@ -42,7 +44,6 @@ .inline-editor.select { width: auto; display: inline; - border-radius: 5px; } .inline-editor.inline-editor-button-group { @@ -63,5 +64,8 @@ } .inline-glyph { - vertical-align: 2%; + display: inline-block; + vertical-align: middle; + line-height: 1; } + diff --git a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.html b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.html index 9b1455e3c0..35cf22c0df 100644 --- a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.html +++ b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.html @@ -1,363 +1,418 @@ -
+@if (resourceType && resourceType !== 'Topologies' && resourceType !== 'Service Definitions') { +

{{ getTitleSubject() }} Detail - Read Only (generated file) - {{resourceService.getResourceDisplayName(resource)}} + @if (showEditOptions() === false) { + Read Only (generated file) + } + @if (hasSelectedResource()) { + {{resourceService.getResourceDisplayName(resource)}} + }

-
- + @if (hasSelectedResource() && resourceType === 'Provider Configurations') { +
+ @if (referencedProviderConfigError) { + + }
Providers - - - - - - - -
-
-
-   - - {{ provider.role }} - -
-
- Name {{ provider.name }}
- Enabled 
-
- - Params - - - - - - - -
- - - - - - -
- - {{ paramName }} - {{provider.params[paramName]}} - - + @if (!isAddingProvider) { + add_circle + } + @if (isAddingProvider) { + + + - - -
-
+ + } +
+ @for (provider of providers; track provider.name) { +
+
+   + {{isShowProvider(provider) ? 'expand_more' : 'chevron_right'}} + {{ provider.role }} + cancel
-
-
+ @if (isShowProvider(provider)) { +
+ Name {{ provider.name }}
+ Enabled 
+
+ {{isShowProviderParams(provider) ? 'expand_more' : 'chevron_right'}} + Params + @if (!isAddingProviderParam(provider)) { + add_circle + } + @if (isAddingProviderParam(provider)) { + + + + + + + } + @if (isShowProviderParams(provider)) { +
+ + @for (paramName of getProviderParamNames(provider); track paramName) { + + + + + + } +
+ cancel + {{ paramName }} + @if (!getProviderParamEditFlag(provider, paramName)) { + {{provider.params[paramName]}} + } + @if (getProviderParamEditFlag(provider, paramName)) { + + + + + + } +
+
+ } +
+
+ } +
+ } -
- - - -   - - +
+ @if (showEditOptions()) { + + + +   + + + }
+ } -
+ @if (hasSelectedResource() && resourceType === 'Descriptors') { +
Provider Configuration  - {{descriptor.providerConfig}} - - - - - + @if (!editModePC) { + {{descriptor.providerConfig}} + } + @if (editModePC) { + + + + + + }   - + + edit +
-

+
- + {{isShowServices() ? 'expand_more' : 'chevron_right'}} Services - - - - - - -
-
- - - - + + } + + @if (isShowServices()) { +
+
-
- {{ service.name }} - ({{service.version}} - ) - - - - - - - -
-
- - Params  - - - - - - - -
-
- - - - - - -
- - {{ paramKey }} - {{descriptor.getServiceParamValue(service, paramKey)}} - - - - - -
-
-
- - URLs  - - - - - - -
-
- - - - - -
- - - {{url}} - - + @if (!isAddingService) { + add_circle + } + @if (isAddingService) { + + - - -
-
-
+ @for (service of descriptor.services; track service.name) { + + + + }
+
+ @if (!getServiceVersionEditFlag(service) && !service.version) { + {{ service.name }} + } @else { + {{ service.name }} + } + @if (!getServiceVersionEditFlag(service) && service.version) { + ({{service.version}}) + } + @if (getServiceVersionEditFlag(service)) { + + + + + + } + + cancel +
+
+ {{isShowServiceParams(service) ? 'expand_more' : 'chevron_right'}} + Params  + @if (!isAddingServiceParam(service)) { + add_circle + } + @if (isAddingServiceParam(service)) { + + + + + + + } +
+ @if (isShowServiceParams(service)) { +
+ @if (descriptor.getServiceParamNames(service).length > 0) { + + @for (paramKey of descriptor.getServiceParamNames(service); track paramKey) { + + + + + + } +
+ cancel + {{ paramKey }} + @if (!getServiceParamEditFlag(service, paramKey)) { + {{descriptor.getServiceParamValue(service, paramKey)}} + } + @if (getServiceParamEditFlag(service, paramKey)) { + + + + + + } +
+ } +
+ } +
+ {{isShowServiceURLs(service) ? 'expand_more' : 'chevron_right'}} + URLs  + @if (!isAddingServiceURL(service)) { + add_circle + } + @if (isAddingServiceURL(service)) { + + + + + + } +
+ @if (isShowServiceURLs(service)) { +
+ @if (service.urls && service.urls.length > 0) { + + @for (url of service.urls; track trackByServiceURLIndex($index, url); let i = $index) { + + + + + } +
+ cancel + + @if (!getServiceURLEditFlag(service, i)) { + {{url}} + } + @if (getServiceURLEditFlag(service, i)) { + + + + + + } +
+ } +
+ } +
+ }
- + {{isShowServiceDiscovery() ? 'expand_more' : 'chevron_right'}} Discovery Details
-
+ @if (isShowServiceDiscovery()) { +
@@ -370,10 +425,11 @@

@@ -385,21 +441,26 @@

(click)="editModeAddress=true"> Address -    + @if (!editModeAddress && !descriptor.discoveryAddress) { +    + }

@@ -409,21 +470,26 @@

(click)="editModeCluster=true"> Cluster -    + @if (!editModeCluster && !descriptor.discoveryCluster) { +    + }

@@ -433,21 +499,26 @@

(click)="editModeUser=true"> Username -    + @if (!editModeUser && !descriptor.discoveryUser) { +    + }

@@ -457,109 +528,112 @@

(click)="editModeAlias=true"> Password Alias -    + @if (!editModeAlias && !descriptor.discoveryPassAlias) { +    + }

- {{ descriptor.discoveryAddress }} - - - - - + @if (!editModeAddress) { + {{ descriptor.discoveryAddress }} + } + @if (editModeAddress) { + + + + + + }
- {{ descriptor.discoveryCluster}} - - - - - + @if (!editModeCluster) { + {{ descriptor.discoveryCluster}} + } + @if (editModeCluster) { + + + + + + }
- {{ descriptor.discoveryUser }} - - - - - + @if (!editModeUser) { + {{ descriptor.discoveryUser }} + } + @if (editModeUser) { + + + + + + }
- {{ descriptor.discoveryPassAlias }} - - - - - + @if (!editModeAlias) { + {{ descriptor.discoveryPassAlias }} + } + @if (editModeAlias) { + + + + + + }
+ }
-
- - - -   - - +
+ @if (showEditOptions()) { + + + +   + + + }
+ } -
- - +
+ +

Deleting {{getTitleSubject()}}

- - Are you sure you want to delete + +
+
Are you sure you want to delete {{resourceService.getResourceDisplayName(resource)}}? - - - - - - +
+
+ + +
+ - - + +

Discard {{getTitleSubject()}} Changes

- - Are you sure you want to discard + +
+
Are you sure you want to discard {{resourceService.getResourceDisplayName(resource)}} changes? - - - - - - +
+
+ + +
+
+} -
+@if (resourceType === 'Topologies') { +
+} -
+@if (resourceType === 'Service Definitions') { +
-
\ No newline at end of file +
+} diff --git a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.spec.ts b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.spec.ts deleted file mode 100644 index a081aee9a6..0000000000 --- a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {ResourceDetailComponent} from './resource-detail.component'; - -describe('ResourceDetailComponent', () => { - let component: ResourceDetailComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ResourceDetailComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ResourceDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.ts b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.ts index bc110064e4..93b09fbdd9 100644 --- a/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.ts +++ b/gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.ts @@ -15,25 +15,27 @@ * limitations under the License. */ import {Component, OnInit, ViewChild} from '@angular/core'; -import {ResourceService} from '../resource/resource.service'; -import {Resource} from '../resource/resource'; -import {ProviderConfig} from './provider-config'; -import {Descriptor} from './descriptor'; -import {Service} from '../resource/service'; -// Commented out in scope of KNOX-2834 (see below) -// import {parseString} from 'xml2js'; - -import 'brace/theme/monokai'; -import 'brace/mode/xml'; +import {FormsModule} from '@angular/forms'; +import {ResourceService} from '../service/resource.service'; +import {Resource} from '../model/resource'; +import {ProviderConfig} from '../model/provider-config'; +import {Descriptor} from '../model/descriptor'; +import {Service} from '../model/service'; import {ProviderConfigSelectorComponent} from '../provider-config-selector/provider-config-selector.component'; -import {ResourceTypesService} from '../resourcetypes/resourcetypes.service'; -import {HttpErrorResponse} from '@angular/common/http'; +import {ResourceTypesService} from '../service/resourcetypes.service'; +import {TopologyDetailComponent} from '../topology-detail/topology-detail.component'; +import {ServiceDefinitionDetailComponent} from '../service-definition/servicedefinition-detail.component'; +import {ModalComponent} from '../utils/modal.component'; +import { HttpErrorResponse } from '@angular/common/http'; +import * as yaml from 'js-yaml'; @Component({ selector: 'app-resource-detail', templateUrl: './resource-detail.component.html', - styleUrls: ['./resource-detail.component.css'] + styleUrls: ['./resource-detail.component.css'], + imports: [FormsModule, ProviderConfigSelectorComponent, + TopologyDetailComponent, ServiceDefinitionDetailComponent, ModalComponent] }) export class ResourceDetailComponent implements OnInit { @@ -43,8 +45,6 @@ export class ResourceDetailComponent implements OnInit { private static emptyDescriptor: Descriptor = new Descriptor(); - title: string; - resourceType: string; resource: Resource; resourceContent: string; @@ -119,48 +119,10 @@ export class ResourceDetailComponent implements OnInit { this.providers = contentObj['providers']; this.readOnlyProviderConfig = contentObj['readOnly']; } else if (res.name.endsWith('yaml') || res.name.endsWith('yml')) { - // Parse the YAML representation - let yaml = require('js-yaml'); - contentObj = yaml.safeLoad(this.resourceContent); + contentObj = yaml.load(this.resourceContent); this.providers = contentObj['providers']; this.readOnlyProviderConfig = contentObj['readOnly']; } - /* Commented out in scope of KNOX-2834, because documentation does not mention supporting - XML shared provider files and xml2js library is not compatible with angular 14. - - else if (res.name.endsWith('xml')) { - // Parse the XML representation - - parseString(this.resourceContent, - (error, result) => { - if (error) { - console.log('Error parsing ' + res.name + ' error: ' + error); - } else { - // Parsing the XML is a bit less straight-forward - let tempProviders = new Array(); - result['gateway'].provider.forEach(entry => { - let providerConfig: ProviderConfig = new ProviderConfig(); - providerConfig.role = entry.role[0]; - providerConfig.name = entry.name[0]; - providerConfig.enabled = entry.enabled[0]; - - // There may not be params - if (entry.param) { - let params = new Map(); - for (let i = 0; i < entry.param.length; i++) { - let param = entry.param[i]; - params[param.name[0]] = param.value[0]; - } - providerConfig.params = params; - } - tempProviders.push(providerConfig); - }); - this.providers = tempProviders; - this.readOnlyProviderConfig = result['gateway'].readOnly; - } - } - ); - } */ } catch (e) { console.error('ResourceDetailComponent --> setProviderConfigContent() --> Error parsing ' + res.name + ' content: ' + e); this.providers = null; // Clear detail display @@ -176,7 +138,6 @@ export class ResourceDetailComponent implements OnInit { if (res.name.endsWith('json')) { contentObj = JSON.parse(this.resourceContent); } else if (res.name.endsWith('yaml') || res.name.endsWith('yml')) { - let yaml = require('js-yaml'); contentObj = yaml.load(this.resourceContent); } let tempDesc = new Descriptor(); @@ -331,7 +292,7 @@ export class ResourceDetailComponent implements OnInit { } onRemoveProviderParam(pc: ProviderConfig, paramName: string) { - if (pc.params.hasOwnProperty(paramName)) { + if (Object.prototype.hasOwnProperty.call(pc.params, paramName)) { delete pc.params[paramName]; } this.changedProviders = this.providers; @@ -352,7 +313,7 @@ export class ResourceDetailComponent implements OnInit { for (let i = 0; i < this.descriptor.services.length; i++) { if (this.descriptor.services[i].name === serviceName) { let service = this.descriptor.services[i]; - if (service.params.hasOwnProperty(paramName)) { + if (Object.prototype.hasOwnProperty.call(service.params, paramName)) { delete service.params[paramName]; this.descriptor.setDirty(); done = true; @@ -548,7 +509,7 @@ export class ResourceDetailComponent implements OnInit { } // This method is required to maintain focus on descriptor service URLs when they're being edited. - trackByServiceURLIndex(index: any, item: any) { + trackByServiceURLIndex(index: any, _item: any) { return index; } @@ -573,7 +534,7 @@ export class ResourceDetailComponent implements OnInit { showEditOptions(): boolean { if (this.resourceType === 'Descriptors' && this.descriptor.readOnly) { - return !Boolean(this.descriptor.readOnly); + return !this.descriptor.readOnly; } if (this.resourceType === 'Provider Configurations' && this.readOnlyProviderConfig) { diff --git a/gateway-admin-ui/admin-ui/app/resource/resource.component.css b/gateway-admin-ui/admin-ui/app/resource/resource.component.css index e69de29bb2..135714db5d 100644 --- a/gateway-admin-ui/admin-ui/app/resource/resource.component.css +++ b/gateway-admin-ui/admin-ui/app/resource/resource.component.css @@ -0,0 +1,58 @@ +.table-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + background-color: #fff; + border-bottom: 2px solid #4caf50; +} + +.table-title { + font-weight: 600; + font-size: 13px; + color: #333; +} + +:host ::ng-deep .mat-mdc-table { + background-color: #fff; +} + +:host ::ng-deep .mat-mdc-header-row { + height: 32px; + background-color: #fafafa; +} + +:host ::ng-deep .mat-mdc-header-cell { + font-size: 12px; + font-weight: 600; + color: #555; + padding: 0 12px; +} + +:host ::ng-deep .mat-mdc-row { + height: 30px; +} + +:host ::ng-deep .mat-mdc-cell { + font-size: 13px; + padding: 0 12px; + border-bottom-color: #eee; +} + +:host ::ng-deep tr.mat-mdc-row:nth-child(even) { + background-color: #f9fdf9; +} + +:host ::ng-deep tr.mat-mdc-row:hover { + background-color: #e8f5e9; +} + +:host ::ng-deep tr.mat-mdc-row.selected, +:host ::ng-deep tr.mat-mdc-row.active { + background-color: #c8e6c9; +} + +:host ::ng-deep .mat-mdc-paginator { + font-size: 12px; + border-top: 1px solid #eee; +} diff --git a/gateway-admin-ui/admin-ui/app/resource/resource.component.html b/gateway-admin-ui/admin-ui/app/resource/resource.component.html index 4845e60393..e7ddab505a 100644 --- a/gateway-admin-ui/admin-ui/app/resource/resource.component.html +++ b/gateway-admin-ui/admin-ui/app/resource/resource.component.html @@ -1,51 +1,47 @@
-
- - - - - - - - - - - - - - - - - - -
- - {{ getResourceTypeSingularDisplayName(resourceType) }} - - - - - Timestamp
{{resourceService.getResourceDisplayName(resource)}}{{resource.timestamp | date:'medium'}}
- -
+
+ {{ getResourceTypeSingularDisplayName(resourceType) }} + @if (resourceType === 'Provider Configurations') { + add_circle + } + @if (resourceType === 'Descriptors') { + add_circle + } + @if (resourceType === 'Service Definitions') { + add_circle + }
+ + + + + + + + + + + + + + +
Name{{resourceService.getResourceDisplayName(resource)}}Timestamp{{resource.timestamp | date:'medium'}}
+ + +
diff --git a/gateway-admin-ui/admin-ui/app/resource/resource.component.spec.ts b/gateway-admin-ui/admin-ui/app/resource/resource.component.spec.ts deleted file mode 100644 index f5f4bc59b4..0000000000 --- a/gateway-admin-ui/admin-ui/app/resource/resource.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {ResourceComponent} from './resource.component'; - -describe('ResourceComponent', () => { - let component: ResourceComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ResourceComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ResourceComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/resource/resource.component.ts b/gateway-admin-ui/admin-ui/app/resource/resource.component.ts index 6ba0b1cff4..0a23830106 100644 --- a/gateway-admin-ui/admin-ui/app/resource/resource.component.ts +++ b/gateway-admin-ui/admin-ui/app/resource/resource.component.ts @@ -14,26 +14,35 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, OnInit} from '@angular/core'; -import {ResourceTypesService} from '../resourcetypes/resourcetypes.service'; -import {ResourceService} from './resource.service'; -import {Resource} from './resource'; -import {TopologyService} from '../topology.service'; -import {Topology} from '../topology'; -import {ServiceDefinitionService} from '../service-definition/servicedefinition.service'; -import {ServiceDefinition} from '../service-definition/servicedefinition'; -import {HttpErrorResponse} from '@angular/common/http'; +import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core'; +import {DatePipe} from '@angular/common'; +import {MatTableModule, MatTableDataSource} from '@angular/material/table'; +import {MatPaginatorModule, MatPaginator} from '@angular/material/paginator'; +import {ResourceTypesService} from '../service/resourcetypes.service'; +import {ResourceService} from '../service/resource.service'; +import {Resource} from '../model/resource'; +import {TopologyService} from '../service/topology.service'; +import {Topology} from '../model/topology'; +import {ServiceDefinitionService} from '../service/servicedefinition.service'; +import {ServiceDefinition} from '../model/servicedefinition'; +import {NewDescWizardComponent} from '../new-desc-wizard/new-desc-wizard.component'; +import {ProviderConfigWizardComponent} from '../provider-config-wizard/provider-config-wizard.component'; +import {NewServiceDefinitionComponent} from '../service-definition/new-service-definition.component'; +import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-resource', templateUrl: './resource.component.html', - styleUrls: ['./resource.component.css'] + styleUrls: ['./resource.component.css'], + imports: [DatePipe, MatTableModule, MatPaginatorModule, + NewDescWizardComponent, ProviderConfigWizardComponent, NewServiceDefinitionComponent] }) -export class ResourceComponent implements OnInit { +export class ResourceComponent implements OnInit, AfterViewInit { resourceType: string; - value: any; - resources: Resource[]; selectedResource: Resource; + dataSource = new MatTableDataSource([]); + + @ViewChild(MatPaginator) paginator: MatPaginator; constructor(private resourceTypesService: ResourceTypesService, private resourceService: ResourceService, @@ -45,15 +54,25 @@ export class ResourceComponent implements OnInit { this.resourceTypesService.selectedResourceType$.subscribe(resourceType => this.setResourceType(resourceType)); } + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + } + + getDisplayedColumns(): string[] { + if (this.resourceType === 'Topologies') { + return ['name', 'timestamp']; + } + return ['name']; + } + setResourceType(resType: string) { - // Clear the selected resource, so it can be removed from the list on refresh if necessary this.selectedResource = null; this.resourceType = resType; this.resourceService.selectedResourceType(this.resourceType); this.resourceService.getResources(resType) .then(resources => { - this.resources = resources; + this.dataSource.data = resources; let debugMsg = 'ResourceComponent --> Found ' + resources.length + ' ' + resType + ' resources\n'; for (let res of resources) { @@ -73,7 +92,6 @@ export class ResourceComponent implements OnInit { onSelect(resource: Resource) { this.selectedResource = resource; - // If it's a topology resource, notify the topology service if (this.resourceType === 'Topologies') { let topology = new Topology(); topology.name = resource.name; @@ -81,13 +99,11 @@ export class ResourceComponent implements OnInit { this.topologyService.selectedTopology(topology); } else if (this.resourceType === 'Service Definitions') { let serviceDefinition = new ServiceDefinition(); - serviceDefinition.name = resource.name; serviceDefinition.service = resource.service['name']; serviceDefinition.role = resource.service['role']; serviceDefinition.version = resource.service['version']; this.serviceDefinitionService.selectedServiceDefinition(serviceDefinition); } else { - // Otherwise, notify the resource service this.resourceService.selectedResource(resource); } } diff --git a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.css b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.css index e69de29bb2..ba98cb320e 100644 --- a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.css +++ b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.css @@ -0,0 +1,45 @@ +.resource-types-panel { + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; +} + +.resource-types-header { + padding: 8px 12px; + font-weight: 600; + font-size: 13px; + color: #333; + background-color: #fff; + border-bottom: 2px solid #4caf50; +} + +.resource-types-list { + list-style: none; + margin: 0; + padding: 0; +} + +.resource-type-item { + padding: 8px 12px; + font-size: 13px; + border-bottom: 1px solid #eee; + transition: background-color 0.1s; +} + +.resource-type-item:last-child { + border-bottom: none; +} + +.resource-type-item:hover { + background-color: #e8f5e9; +} + +.resource-type-item.selected { + background-color: #4caf50; + color: #fff; + font-weight: 500; +} + +.resource-type-item.selected:hover { + background-color: #388e3c; +} diff --git a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.html b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.html index e845392620..c22963ad99 100644 --- a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.html +++ b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.html @@ -1,18 +1,12 @@ -
- - - - - - - - - - - -
Resource Types
{{type}}
+
+
Resource Types
+
    + @for (type of resourceTypes; track type) { +
  • + {{type}} +
    • + } +
diff --git a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.spec.ts b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.spec.ts deleted file mode 100644 index 2790701ba8..0000000000 --- a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; - -import {ResourcetypesComponent} from './resourcetypes.component'; - -describe('ResourcetypesComponent', () => { - let component: ResourcetypesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ResourcetypesComponent] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ResourcetypesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.ts b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.ts index f278e838ef..5a62a935c0 100644 --- a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.ts +++ b/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.component.ts @@ -14,8 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, Injectable, OnInit} from '@angular/core'; -import {ResourceTypesService} from './resourcetypes.service'; +import {Component, OnInit} from '@angular/core'; +import {ResourceTypesService} from '../service/resourcetypes.service'; @Component({ selector: 'app-resourcetypes', diff --git a/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.css b/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.css index 0cc494ab8c..52e0fee937 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.css +++ b/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.css @@ -2,4 +2,26 @@ td { border-collapse: collapse; padding: 8px; vertical-align: top; -} \ No newline at end of file +} + +.code-editor-modal { + min-height: 430px; + width: 100%; + padding: 12px; + background-color: #272822; + color: #f8f8f2; + border: 1px solid #3e3d32; + border-radius: 4px; + outline: none; + resize: vertical; + font-family: 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 12px; + line-height: 18px; + tab-size: 4; + white-space: pre; + overflow: auto; +} + +.code-editor-modal::selection { + background-color: #49483e; +} diff --git a/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.html b/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.html index 89a2716f31..a18816a76c 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.html +++ b/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.html @@ -1,27 +1,21 @@ - - + +
- - -
-
- At a minimum you must modify the service's name and role attributes! -
-
-
- - -
+ +
+
+
+ At a minimum you must modify the service's name and role attributes.
- - + +
+
- - - +
+ diff --git a/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.ts b/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.ts index cb99ccde8f..912bb1f07b 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.ts +++ b/gateway-admin-ui/admin-ui/app/service-definition/new-service-definition.component.ts @@ -14,34 +14,30 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {HttpClient} from '@angular/common/http'; -import {BsModalComponent} from 'ng2-bs3-modal'; -import Swal from 'sweetalert2'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import { HttpClient } from '@angular/common/http'; +import Swal from 'sweetalert2/dist/sweetalert2.esm.all.js'; -import {ServiceDefinitionService} from './servicedefinition.service'; -import {ResourceTypesService} from '../resourcetypes/resourcetypes.service'; -import * as ace from 'ace-builds'; +import {ServiceDefinitionService} from '../service/servicedefinition.service'; +import {ResourceTypesService} from '../service/resourcetypes.service'; +import {ModalComponent} from '../utils/modal.component'; @Component({ selector: 'app-service-definition-wizard', templateUrl: './new-service-definition.component.html', - styleUrls: ['./new-service-definition.component.css'] + styleUrls: ['./new-service-definition.component.css'], + imports: [FormsModule, ModalComponent] }) export class NewServiceDefinitionComponent implements OnInit { + @ViewChild('newServiceDefinitionModal') + childModal: ModalComponent; + serviceDefinitionXmlTemplate = 'assets/new-service-definition-template.xml'; defaultServiceDefinitionContent: string; serviceDefinitionContent: string; - theme: String = 'monokai'; - options: any = {useWorker: false, printMargin: false}; - - @ViewChild('newServiceDefinitionModal') - childModal: BsModalComponent; - - @ViewChild('editor') - editor: ElementRef; constructor(private http: HttpClient, private serviceDefinitionService: ServiceDefinitionService, @@ -53,18 +49,9 @@ export class NewServiceDefinitionComponent implements OnInit { .subscribe(data => this.defaultServiceDefinitionContent = data); } - ngAfterViewInit(): void { - ace.config.set( - 'basePath', - 'https://unpkg.com/ace-builds@1.4.12/src-noconflict' - ); - const aceEditor = ace.edit(this.editor.nativeElement); - aceEditor.session.setMode('xml'); - } - - open(size?: string) { + open() { this.reset(); - this.childModal.open(size ? size : 'lg'); + this.childModal.open('lg'); } reset() { @@ -73,7 +60,8 @@ export class NewServiceDefinitionComponent implements OnInit { onClose() { this.serviceDefinitionService.saveNewServiceDefinition(this.serviceDefinitionContent) - .then(response => { + .then(() => { + this.childModal.dismiss(); Swal.fire({ text: 'Saved successfully!', confirmButtonColor: '#7cd1f9' diff --git a/gateway-admin-ui/admin-ui/app/service-definition/rewrite.rules.ts b/gateway-admin-ui/admin-ui/app/service-definition/rewrite.rules.ts deleted file mode 100644 index d6629811c8..0000000000 --- a/gateway-admin-ui/admin-ui/app/service-definition/rewrite.rules.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {RewriteRule} from './rewrite.rule'; - -export class RewriteRules { - rules: RewriteRule[]; -} diff --git a/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition-detail.component.ts b/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition-detail.component.ts index 8d17fa34ac..e2f1fdcc63 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition-detail.component.ts +++ b/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition-detail.component.ts @@ -14,74 +14,155 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {BsModalComponent} from 'ng2-bs3-modal'; -import Swal from 'sweetalert2'; +import {Component, OnInit} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import Swal from 'sweetalert2/dist/sweetalert2.esm.all.js'; -import {ServiceDefinition} from './servicedefinition'; -import {ServiceDefinitionService} from './servicedefinition.service'; -import {ResourceTypesService} from '../resourcetypes/resourcetypes.service'; - -import 'brace/theme/monokai'; -import 'brace/mode/xml'; +import {ServiceDefinition} from '../model/servicedefinition'; +import {ServiceDefinitionService} from '../service/servicedefinition.service'; +import {ResourceTypesService} from '../service/resourcetypes.service'; +import {ModalComponent} from '../utils/modal.component'; @Component({ selector: 'app-servicedefinition-detail', template: ` -
+

{{title}} {{titleSuffix}}

-
- - -
- - -
-
+ @if (serviceDefinitionContent) { +
+
+
+ @for (line of getLineNumbers(); track line) { +
{{line}}
+ } +
+ +
+
+ + +
+
+ }
- - + +

Updating Service Definition {{titleSuffix}}

- - + +
+
Are you sure you want to update this service definition? - - - - - - - - +
+
+ + +
+ + +

Deleting Service Definition {{titleSuffix}}

- - + +
+
Are you sure you want to delete this service definition? - - - - - - - ` +
+
+ + +
+ + `, + styles: [` + .code-editor-wrapper { + display: flex; + min-height: 450px; + background-color: #272822; + border-radius: 4px 4px 0 0; + overflow: hidden; + } + + .code-editor-gutter { + min-width: 40px; + padding: 10px 8px 10px 0; + background-color: #1e1f1c; + text-align: right; + user-select: none; + border-right: 1px solid #3e3d32; + } + + .line-number { + font-family: 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 12px; + line-height: 18px; + color: #75715e; + } + + .code-editor { + flex: 1; + min-height: 450px; + padding: 10px 12px; + background-color: #272822; + color: #f8f8f2; + border: none; + outline: none; + resize: none; + font-family: 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 12px; + line-height: 18px; + tab-size: 4; + white-space: pre; + overflow: auto; + } + + .code-editor::selection { + background-color: #49483e; + } + + .editor-toolbar { + padding: 8px 12px; + background-color: #1e1f1c; + border-top: 1px solid #3e3d32; + border-radius: 0 0 4px 4px; + } + + .editor-toolbar .btn { + background-color: #3e3d32; + border-color: #555; + color: #f8f8f2; + } + + .editor-toolbar .btn:hover:not(:disabled) { + background-color: #555; + border-color: #75715e; + } + + .editor-toolbar .btn:disabled { + opacity: 0.4; + } + + .editor-toolbar .material-icons { + color: #f8f8f2; + font-size: 16px; + } + `], + imports: [FormsModule, ModalComponent] }) export class ServiceDefinitionDetailComponent implements OnInit { @@ -90,13 +171,6 @@ export class ServiceDefinitionDetailComponent implements OnInit { titleSuffix: string; serviceDefinitionContent: string; changedServiceDefinitionContent: string; - theme: String = 'monokai'; - options: any = {useWorker: false, printMargin: false}; - - @ViewChild('editor') editor; - - @ViewChild('deleteServiceDefConfirmModal') - deleteServiceDefConfirmModal: BsModalComponent; constructor(private serviceDefinitionService: ServiceDefinitionService, private resourceTypesService: ResourceTypesService) { } @@ -105,6 +179,14 @@ export class ServiceDefinitionDetailComponent implements OnInit { this.serviceDefinitionService.selectedServiceDefinition$.subscribe(value => this.populateContent(value)); } + getLineNumbers(): number[] { + if (!this.serviceDefinitionContent) { + return []; + } + const count = this.serviceDefinitionContent.split('\n').length; + return Array.from({length: count}, (_, i) => i + 1); + } + setTitleSuffix(value: string) { this.titleSuffix = value; } @@ -125,7 +207,7 @@ export class ServiceDefinitionDetailComponent implements OnInit { updateServiceDefinition() { this.serviceDefinitionService.updateServiceDefinition(this.changedServiceDefinitionContent ? this.changedServiceDefinitionContent : this.serviceDefinitionContent) - .then(response => { + .then(() => { Swal.fire({ text: 'Updated successfully!', confirmButtonColor: '#7cd1f9' @@ -137,7 +219,7 @@ export class ServiceDefinitionDetailComponent implements OnInit { deleteServiceDefinition() { this.serviceDefinitionService.deleteServiceDefinition(this.serviceDefinition) - .then(response => { + .then(() => { Swal.fire({ text: 'Deleted successfully!', confirmButtonColor: '#7cd1f9' diff --git a/gateway-admin-ui/admin-ui/app/gateway-version.service.ts b/gateway-admin-ui/admin-ui/app/service/gateway-version.service.ts similarity index 77% rename from gateway-admin-ui/admin-ui/app/gateway-version.service.ts rename to gateway-admin-ui/admin-ui/app/service/gateway-version.service.ts index 895db02f87..490d9a5a4e 100644 --- a/gateway-admin-ui/admin-ui/app/gateway-version.service.ts +++ b/gateway-admin-ui/admin-ui/app/service/gateway-version.service.ts @@ -15,13 +15,12 @@ * limitations under the License. */ import {Injectable} from '@angular/core'; -import {HttpClient, HttpHeaders} from '@angular/common/http'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import {firstValueFrom} from 'rxjs'; -import 'rxjs/add/operator/toPromise'; +import {GatewayVersion} from '../model/gateway-version'; -import {GatewayVersion} from './gateway-version'; - -@Injectable() +@Injectable({providedIn: 'root'}) export class GatewayVersionService { private apiUrl = window.location.pathname.replace(new RegExp('admin-ui/.*'), 'api/v1/'); private versionUrl = this.apiUrl + 'version'; @@ -29,15 +28,11 @@ export class GatewayVersionService { constructor(private http: HttpClient) { } - getVersion(): Promise { + async getVersion(): Promise { let headers = new HttpHeaders(); headers = this.addHeaders(headers); - return this.http.get(this.versionUrl, {headers: headers}) - .toPromise() - .then(response => { - return response['ServerVersion'] as GatewayVersion; - }) - .catch(this.handleError); + const response = await firstValueFrom(this.http.get(this.versionUrl, {headers: headers})); + return response['ServerVersion'] as GatewayVersion; } addHeaders(headers: HttpHeaders) { diff --git a/gateway-admin-ui/admin-ui/app/resource/resource.service.ts b/gateway-admin-ui/admin-ui/app/service/resource.service.ts similarity index 80% rename from gateway-admin-ui/admin-ui/app/resource/resource.service.ts rename to gateway-admin-ui/admin-ui/app/service/resource.service.ts index 0b1bbdd653..ce4cfbda79 100644 --- a/gateway-admin-ui/admin-ui/app/resource/resource.service.ts +++ b/gateway-admin-ui/admin-ui/app/service/resource.service.ts @@ -15,14 +15,14 @@ * limitations under the License. */ import {Injectable} from '@angular/core'; -import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; -import 'rxjs/add/operator/toPromise'; -import {Subject} from 'rxjs/Subject'; -import {Resource} from './resource'; -import {ProviderConfig} from '../resource-detail/provider-config'; -import {Descriptor} from '../resource-detail/descriptor'; - -@Injectable() +import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; +import { Subject, firstValueFrom } from 'rxjs'; +import {Resource} from '../model/resource'; +import {ProviderConfig} from '../model/provider-config'; +import {Descriptor} from '../model/descriptor'; +import * as yaml from 'js-yaml'; + +@Injectable({providedIn: 'root'}) export class ResourceService { discoveryTypes: Array; @@ -39,11 +39,6 @@ export class ResourceService { selectedResourceSource = new Subject(); selectedResource$ = this.selectedResourceSource.asObservable(); - changedResourceSource = new Subject(); - changedResource$ = this.changedResourceSource.asObservable(); - - changedProviderConfigurationSource = new Subject>(); - changedProviderConfiguration$ = this.changedProviderConfigurationSource.asObservable(); constructor(private http: HttpClient) { this.initSupportedDiscoveryTypes(); @@ -51,7 +46,6 @@ export class ResourceService { initSupportedDiscoveryTypes(): void { if (this.discoveryTypes == null || this.discoveryTypes.length === 0) { - let headers = this.addJsonHeaders(new HttpHeaders()); this.getServiceDiscoveryResources() .then(response => this.discoveryTypes = response.knoxServiceDiscoveries.knoxServiceDiscovery.map(sd => sd.type)) .catch((err: HttpErrorResponse) => { @@ -67,7 +61,7 @@ export class ResourceService { getServiceDiscoveryResources(): Promise { let headers = this.addJsonHeaders(new HttpHeaders()); - return this.http.get(this.serviceDiscoveriesUrl, {headers: headers}).toPromise(); + return firstValueFrom(this.http.get(this.serviceDiscoveriesUrl, {headers: headers})); } getResources(resType: string): Promise { @@ -89,61 +83,53 @@ export class ResourceService { getProviderConfigResources(): Promise { let headers = this.addJsonHeaders(new HttpHeaders()); - return this.http.get(this.providersUrl, {headers: headers}) - .toPromise() + return firstValueFrom(this.http.get(this.providersUrl, {headers: headers})) .then(response => response['items'] as Resource[]) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> getProviderConfigResources() --> error: HTTP ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } getDescriptorResources(): Promise { let headers = this.addJsonHeaders(new HttpHeaders()); - return this.http.get(this.descriptorsUrl, {headers: headers}) - .toPromise() + return firstValueFrom(this.http.get(this.descriptorsUrl, {headers: headers})) .then(response => response['items'] as Resource[]) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> getDescriptorResources() --> error: HTTP ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } getTopologyResources(): Promise { let headers = this.addJsonHeaders(new HttpHeaders()); - return this.http.get(this.topologiesUrl, {headers: headers}) - .toPromise() + return firstValueFrom(this.http.get(this.topologiesUrl, {headers: headers})) .then(response => response['topologies'].topology as Resource[]) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> getTopologyResources() --> error: HTTP ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } getServiceDefinitionResources(): Promise { let headers = this.addJsonHeaders(new HttpHeaders()); - return this.http.get(this.serviceDefinitionsUrl + '?serviceOnly=true', {headers: headers}) - .toPromise() + return firstValueFrom(this.http.get(this.serviceDefinitionsUrl + '?serviceOnly=true', {headers: headers})) .then(response => response['serviceDefinitions'].serviceDefinition as Resource[]) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> getServiceDefinitionResources() --> error: HTTP ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } @@ -154,11 +140,9 @@ export class ResourceService { href = this.serviceDefinitionsUrl + '/' + res.service['name'] + '/' + res.service['role'] + '/' + res.service['version'] + '?serviceOnly=true'; } - let headers = new HttpHeaders(); - headers = (resType === 'Topologies' || resType === 'Service Definitions') ? this.addXmlHeaders(headers) - : this.addHeaders(headers, res.name); - return this.http.get(href, {headers: headers, responseType: 'text'}) - .toPromise() + let headers = (resType === 'Topologies' || resType === 'Service Definitions') ? this.addXmlHeaders(new HttpHeaders()) + : this.addHeaders(new HttpHeaders(), res.name); + return firstValueFrom(this.http.get(href, {headers: headers, responseType: 'text'})) .then(response => { console.debug('ResourceService --> Loading resource ' + res.name + ' :\n' + response); return response; @@ -167,9 +151,8 @@ export class ResourceService { console.debug('ResourceService --> getResource() ' + res.name + '\n error: ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } else { return Promise.resolve(null); @@ -178,52 +161,41 @@ export class ResourceService { saveResource(resource: Resource, content: string): Promise { let headers = this.addHeaders(new HttpHeaders(), resource.name); - console.debug('ResourceService --> Persisting ' + resource.name + '\n' + content); - - return this.http.put(resource.href, content, {headers: headers}) - .toPromise() + return firstValueFrom(this.http.put(resource.href, content, {headers: headers, responseType: 'text'})) .then(() => content) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> saveResource() ' + resource.name + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } createResource(resType: string, resource: Resource, content: string): Promise { let headers = this.addHeaders(new HttpHeaders(), resource.name); - let url = ((resType === 'Descriptors') ? this.descriptorsUrl : this.providersUrl) + '/' + resource.name; - return this.http.put(url, content, {headers: headers}) - .toPromise() + return firstValueFrom(this.http.put(url, content, {headers: headers, responseType: 'text'})) .then(() => content) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> createResource() --> ' + resource.name + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } deleteResource(href: string): Promise { let headers = this.addJsonHeaders(new HttpHeaders()); - - return this.http.delete(href, {headers: headers}) - .toPromise() - .then(response => response) + return firstValueFrom(this.http.delete(href, {headers: headers, responseType: 'text'})) .catch((err: HttpErrorResponse) => { console.debug('ResourceService --> deleteResource() --> ' + href + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } @@ -278,8 +250,7 @@ export class ResourceService { break; } case 'yaml': { - let yaml = require('js-yaml'); - serialized = '---\n' + yaml.safeDump(tmp); + serialized = '---\n' + yaml.dump(tmp); break; } } @@ -300,7 +271,6 @@ export class ResourceService { break; } case 'yaml': { - let yaml = require('js-yaml'); serialized = '---\n' + yaml.dump(tmp); break; } @@ -361,13 +331,6 @@ export class ResourceService { this.selectedResourceSource.next(value); } - resourceChanged(value: string) { - this.changedResourceSource.next(value); - } - - providerConfigurationChanged(pc: Array) { - this.changedProviderConfigurationSource.next(pc); - } public getResourceDisplayName(res: Resource): string { if (res) { @@ -385,13 +348,6 @@ export class ResourceService { return Promise.reject(error); } - private logHeaders(headers: HttpHeaders) { - let debugMsg = 'ResourceService --> Request headers:\n'; - headers.keys().forEach(key => { - debugMsg += ' ' + key + '=' + headers.get(key) + '\n'; - }); - console.debug(debugMsg); - } } diff --git a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.service.ts b/gateway-admin-ui/admin-ui/app/service/resourcetypes.service.ts similarity index 95% rename from gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.service.ts rename to gateway-admin-ui/admin-ui/app/service/resourcetypes.service.ts index cc2dc4f0ab..dd3785eec6 100644 --- a/gateway-admin-ui/admin-ui/app/resourcetypes/resourcetypes.service.ts +++ b/gateway-admin-ui/admin-ui/app/service/resourcetypes.service.ts @@ -15,9 +15,9 @@ * limitations under the License. */ import {Injectable} from '@angular/core'; -import {Subject} from 'rxjs/Subject'; +import { Subject } from 'rxjs'; -@Injectable() +@Injectable({providedIn: 'root'}) export class ResourceTypesService { resourceTypes = ['Provider Configurations', 'Descriptors', 'Topologies', 'Service Definitions']; diff --git a/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition.service.ts b/gateway-admin-ui/admin-ui/app/service/servicedefinition.service.ts similarity index 53% rename from gateway-admin-ui/admin-ui/app/service-definition/servicedefinition.service.ts rename to gateway-admin-ui/admin-ui/app/service/servicedefinition.service.ts index 5202d35155..5e8898d7f7 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/servicedefinition.service.ts +++ b/gateway-admin-ui/admin-ui/app/service/servicedefinition.service.ts @@ -15,119 +15,79 @@ * limitations under the License. */ import {Injectable} from '@angular/core'; -import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; -import {RestURLBuilder} from 'rest-url-builder'; -import Swal from 'sweetalert2'; +import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; +import Swal from 'sweetalert2/dist/sweetalert2.esm.all.js'; -import 'rxjs/add/operator/toPromise'; -import {Subject} from 'rxjs/Subject'; +import { Subject, firstValueFrom } from 'rxjs'; -import {ServiceDefinition} from './servicedefinition'; +import {ServiceDefinition} from '../model/servicedefinition'; - @Injectable() + @Injectable({providedIn: 'root'}) export class ServiceDefinitionService { apiUrl = window.location.pathname.replace(new RegExp('admin-ui/.*'), 'api/v1/'); serviceDefinitionsBaseUrl = this.apiUrl + 'servicedefinitions'; - serviceDefinitionUrlTemplate = this.serviceDefinitionsBaseUrl + '/:service/:role/:version'; selectedServiceDefinitionSource = new Subject(); selectedServiceDefinition$ = this.selectedServiceDefinitionSource.asObservable(); - urlBuilder = new RestURLBuilder(); constructor(private http: HttpClient) { } - getServiceDefinitions(): Promise { - let headers = new HttpHeaders(); - headers = this.addXmlHeaders(headers); - return this.http.get(this.serviceDefinitionsBaseUrl, { headers: headers}) - .toPromise() - .then(response => response['serviceDefinitions'].serviceDefinition as ServiceDefinition[]) +getServiceDefinitionXml(serviceDefinition: ServiceDefinition): Promise { + let headers = this.addXmlHeaders(new HttpHeaders()); + let url = this.serviceDefinitionsBaseUrl + '/' + serviceDefinition.service + + '/' + serviceDefinition.role + '/' + serviceDefinition.version; + return firstValueFrom(this.http.get(url, {headers: headers, responseType: 'text'})) .catch((err: HttpErrorResponse) => { - console.debug('ServiceDefinitionService --> getServiceDefinitions() --> ' + this.serviceDefinitionsBaseUrl + console.debug('ServiceDefinitionService --> getServiceDefinitionXml() --> ' + url + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); - } - }); - } - - getServiceDefinitionXml(serviceDefinition: ServiceDefinition) { - let headers = new HttpHeaders(); - headers = this.addXmlHeaders(headers); - let urlBuilder = this.urlBuilder.buildRestURL(this.serviceDefinitionUrlTemplate); - urlBuilder.setNamedParameter('service', serviceDefinition.service); - urlBuilder.setNamedParameter('role', serviceDefinition.role); - urlBuilder.setNamedParameter('version', serviceDefinition.version); - return this.http.get(urlBuilder.get(), {headers: headers, responseType: 'text'}) - .toPromise() - .then(response => response) - .catch((err: HttpErrorResponse) => { - console.debug('ServiceDefinitionService --> getServiceDefinitionXml() --> ' + urlBuilder.get() - + '\n error: ' + err.message); - if (err.status === 401) { - window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } saveNewServiceDefinition(xml: string): Promise { - let xheaders = new HttpHeaders(); - xheaders = this.addXmlHeaders(xheaders); + let xheaders = this.addXmlHeaders(new HttpHeaders()); let serviceDefintionXml = xml.replace('', '').replace('', ''); - return this.http.post(this.serviceDefinitionsBaseUrl, serviceDefintionXml, {headers: xheaders, responseType: 'text'}) - .toPromise() - .then(response => response) + return firstValueFrom( + this.http.post(this.serviceDefinitionsBaseUrl, serviceDefintionXml, {headers: xheaders, responseType: 'text'})) .catch((err: HttpErrorResponse) => { console.debug('ServiceDefinitionService --> saveNewServiceDefinition() --> ' + this.serviceDefinitionsBaseUrl + '\n error: ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } updateServiceDefinition(xml: string): Promise { - let xheaders = new HttpHeaders(); - xheaders = this.addXmlHeaders(xheaders); + let xheaders = this.addXmlHeaders(new HttpHeaders()); let serviceDefintionXml = xml.replace('', '').replace('', ''); - return this.http.put(this.serviceDefinitionsBaseUrl, serviceDefintionXml, {headers: xheaders, responseType: 'text'}) - .toPromise() - .then(response => response) + return firstValueFrom(this.http.put(this.serviceDefinitionsBaseUrl, serviceDefintionXml, {headers: xheaders, responseType: 'text'})) .catch((err: HttpErrorResponse) => { console.debug('ServiceDefinitionService --> updateServiceDefinition() --> ' + this.serviceDefinitionsBaseUrl + '\n error: ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } deleteServiceDefinition(serviceDefinition: ServiceDefinition): Promise { - let xheaders = new HttpHeaders(); - xheaders = this.addXmlHeaders(xheaders); - let urlBuilder = this.urlBuilder.buildRestURL(this.serviceDefinitionUrlTemplate); - urlBuilder.setNamedParameter('service', serviceDefinition.service); - urlBuilder.setNamedParameter('role', serviceDefinition.role); - urlBuilder.setNamedParameter('version', serviceDefinition.version); - return this.http.delete(urlBuilder.get(), {headers: xheaders, responseType: 'text'}) - .toPromise() - .then(response => response) + let xheaders = this.addXmlHeaders(new HttpHeaders()); + let url = this.serviceDefinitionsBaseUrl + '/' + serviceDefinition.service + + '/' + serviceDefinition.role + '/' + serviceDefinition.version; + return firstValueFrom(this.http.delete(url, {headers: xheaders, responseType: 'text'})) .catch((err: HttpErrorResponse) => { - console.debug('ServiceDefinitionService --> deleteServiceDefinition() --> ' + urlBuilder.get() + console.debug('ServiceDefinitionService --> deleteServiceDefinition() --> ' + url + '\n error: ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } @@ -135,11 +95,6 @@ export class ServiceDefinitionService { this.selectedServiceDefinitionSource.next(value); } - addJsonHeaders(headers: HttpHeaders): HttpHeaders { - return this.addCsrfHeaders(headers.append('Accept', 'application/json') - .append('Content-Type', 'application/json')); - } - addXmlHeaders(headers: HttpHeaders): HttpHeaders { return this.addCsrfHeaders(headers.append('Accept', 'application/xml') .append('Content-Type', 'application/xml')); diff --git a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.service.ts b/gateway-admin-ui/admin-ui/app/service/session.information.service.ts similarity index 83% rename from gateway-admin-ui/admin-ui/app/sessionInformation/session.information.service.ts rename to gateway-admin-ui/admin-ui/app/service/session.information.service.ts index 95a3cdc8ff..50d4af3a30 100644 --- a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.service.ts +++ b/gateway-admin-ui/admin-ui/app/service/session.information.service.ts @@ -15,13 +15,13 @@ * limitations under the License. */ import {Injectable} from '@angular/core'; -import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; -import Swal from 'sweetalert2'; +import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; +import {firstValueFrom} from 'rxjs'; +import Swal from 'sweetalert2/dist/sweetalert2.esm.all.js'; -import 'rxjs/add/operator/toPromise'; -import {SessionInformation} from './session.information'; +import {SessionInformation} from '../model/session-information'; -@Injectable() +@Injectable({providedIn: 'root'}) export class SessionInformationService { pathParts = window.location.pathname.split('/'); topologyContext = '/' + this.pathParts[1] + '/' + this.pathParts[2] + '/'; @@ -30,18 +30,15 @@ export class SessionInformationService { constructor(private http: HttpClient) {} getSessionInformation(): Promise { - let headers = new HttpHeaders(); - headers = this.addJsonHeaders(headers); - return this.http.get(this.sessionUrl, { headers: headers}) - .toPromise() + let headers = this.addJsonHeaders(new HttpHeaders()); + return firstValueFrom(this.http.get(this.sessionUrl, {headers: headers})) .then(response => response['sessioninfo'] as SessionInformation) .catch((err: HttpErrorResponse) => { console.debug('HomepageService --> getSessionInformation() --> ' + this.sessionUrl + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } diff --git a/gateway-admin-ui/admin-ui/app/topology.service.ts b/gateway-admin-ui/admin-ui/app/service/topology.service.ts similarity index 67% rename from gateway-admin-ui/admin-ui/app/topology.service.ts rename to gateway-admin-ui/admin-ui/app/service/topology.service.ts index a4831a63d8..0c0fc12118 100644 --- a/gateway-admin-ui/admin-ui/app/topology.service.ts +++ b/gateway-admin-ui/admin-ui/app/service/topology.service.ts @@ -15,13 +15,12 @@ * limitations under the License. */ import {Injectable} from '@angular/core'; -import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; +import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; -import 'rxjs/add/operator/toPromise'; -import {Subject} from 'rxjs/Subject'; -import {Topology} from './topology'; +import { Subject, firstValueFrom } from 'rxjs'; +import {Topology} from '../model/topology'; -@Injectable() +@Injectable({providedIn: 'root'}) export class TopologyService { apiUrl = window.location.pathname.replace(new RegExp('admin-ui/.*'), 'api/v1/'); topologiesUrl = this.apiUrl + 'topologies'; @@ -34,89 +33,66 @@ export class TopologyService { } getTopologies(): Promise { - let headers = new HttpHeaders(); - headers = this.addJsonHeaders(headers); - return this.http.get(this.topologiesUrl, { - headers: headers - }) - .toPromise() + let headers = this.addJsonHeaders(new HttpHeaders()); + return firstValueFrom(this.http.get(this.topologiesUrl, {headers: headers})) .then(response => response['topologies'].topology as Topology[]) .catch((err: HttpErrorResponse) => { - console.debug('TopologyService --> getTopologies() --> ' + '\n error: ' + err.message); + console.debug('TopologyService --> getTopologies() --> \n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } getTopology(href: string): Promise { - let headers = new HttpHeaders(); - headers = this.addXmlHeaders(headers); - return this.http.get(href, { - headers: headers, responseType: 'text' - }) - .toPromise() - .then(response => response) + let headers = this.addXmlHeaders(new HttpHeaders()); + return firstValueFrom(this.http.get(href, {headers: headers, responseType: 'text'})) .catch((err: HttpErrorResponse) => { console.debug('TopologyService --> getTopology() --> ' + href + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } saveTopology(url: string, xml: string): Promise { - let xheaders = new HttpHeaders(); - xheaders = this.addXmlHeaders(xheaders); - return this.http.put(url, xml, {headers: xheaders, responseType: 'text'}) - .toPromise() + let xheaders = this.addXmlHeaders(new HttpHeaders()); + return firstValueFrom(this.http.put(url, xml, {headers: xheaders, responseType: 'text'})) .then(() => xml) .catch((err: HttpErrorResponse) => { - console.debug('TopologyService --> getTopology() --> \n error: ' + err.status + ' ' + err.message); + console.debug('TopologyService --> saveTopology() --> \n error: ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } createTopology(name: string, xml: string): Promise { - let xheaders = new HttpHeaders(); - xheaders = this.addXmlHeaders(xheaders); + let xheaders = this.addXmlHeaders(new HttpHeaders()); let url = this.topologiesUrl + '/' + name; - return this.http.put(url, xml, {headers: xheaders, responseType: 'text'}) - .toPromise() + return firstValueFrom(this.http.put(url, xml, {headers: xheaders, responseType: 'text'})) .then(() => xml) .catch((err: HttpErrorResponse) => { console.debug('TopologyService --> createTopology() --> \n error: ' + err.status + ' ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } deleteTopology(href: string): Promise { - let headers = new HttpHeaders(); - headers = this.addJsonHeaders(headers); - return this.http.delete(href, { - headers: headers, responseType: 'text' - }) - .toPromise() - .then(response => response) + let headers = this.addJsonHeaders(new HttpHeaders()); + return firstValueFrom(this.http.delete(href, {headers: headers, responseType: 'text'})) .catch((err: HttpErrorResponse) => { - console.debug('TopologyService --> getTopology() --> ' + href + '\n error: ' + err.message); + console.debug('TopologyService --> deleteTopology() --> ' + href + '\n error: ' + err.message); if (err.status === 401) { window.location.assign(document.location.pathname); - } else { - return this.handleError(err); } + return this.handleError(err); }); } diff --git a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.component.html b/gateway-admin-ui/admin-ui/app/session-information/session.information.component.html similarity index 100% rename from gateway-admin-ui/admin-ui/app/sessionInformation/session.information.component.html rename to gateway-admin-ui/admin-ui/app/session-information/session.information.component.html diff --git a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.component.ts b/gateway-admin-ui/admin-ui/app/session-information/session.information.component.ts similarity index 91% rename from gateway-admin-ui/admin-ui/app/sessionInformation/session.information.component.ts rename to gateway-admin-ui/admin-ui/app/session-information/session.information.component.ts index e21e612647..9f7bd7bb06 100644 --- a/gateway-admin-ui/admin-ui/app/sessionInformation/session.information.component.ts +++ b/gateway-admin-ui/admin-ui/app/session-information/session.information.component.ts @@ -16,10 +16,12 @@ */ import {Component, OnInit, Pipe, PipeTransform} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; -import {SessionInformationService} from './session.information.service'; -import {SessionInformation} from './session.information'; +import {SessionInformationService} from '../service/session.information.service'; +import {SessionInformation} from '../model/session-information'; -@Pipe({ name: 'safeHtml' }) +@Pipe({ + name: 'safeHtml' +}) export class SafeHtmlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} @@ -31,13 +33,12 @@ export class SafeHtmlPipe implements PipeTransform { @Component({ selector: 'app-session-information', templateUrl: './session.information.component.html', - providers: [SessionInformationService] + imports: [SafeHtmlPipe] }) export class SessionInformationComponent implements OnInit { sessionInformation: SessionInformation; - logoutSupported = true; constructor(private sessionInformationService: SessionInformationService) { this['showSessionInformation'] = true; diff --git a/gateway-admin-ui/admin-ui/app/topology-detail.component.ts b/gateway-admin-ui/admin-ui/app/topology-detail.component.ts deleted file mode 100644 index f1e4f98bec..0000000000 --- a/gateway-admin-ui/admin-ui/app/topology-detail.component.ts +++ /dev/null @@ -1,209 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {Topology} from './topology'; -import {TopologyService} from './topology.service'; -import {ResourceTypesService} from './resourcetypes/resourcetypes.service'; -import {BsModalComponent} from 'ng2-bs3-modal'; -import {ValidationUtils} from './utils/validation-utils'; -import * as ace from 'ace-builds'; - -@Component({ - selector: 'app-topology-detail', - template: ` -
-
-

{{title}} Read Only (generated file) {{titleSuffix}}

-
-
- - -
- - - -
-
- - -

Create a copy

- - -
- - -
- - - - - - - - -

Deleting Topology {{titleSuffix}}

- - - Are you sure you want to delete the topology? - - - - - - -
- ` -}) -export class TopologyDetailComponent implements OnInit, AfterViewInit { - title = 'Topology Detail'; - titleSuffix: string; - topology: Topology; - topologyContent: string; - changedTopology: string; - newTopologyName: string; - showEditOptions = true; - theme: String = 'monokai'; - options: any = {useWorker: false, printMargin: false}; - - @ViewChild('duplicateModal') - duplicateModal: BsModalComponent; - - @ViewChild('deleteConfirmModal') - deleteConfirmModal: BsModalComponent; - - @ViewChild('editor') - editor: ElementRef; - - constructor(private topologyService: TopologyService, private resourceTypesService: ResourceTypesService) { - } - - ngOnInit(): void { - this.topologyService.selectedTopology$.subscribe(value => this.populateContent(value)); - } - - ngAfterViewInit(): void { - ace.config.set( - 'basePath', - 'https://unpkg.com/ace-builds@1.4.12/src-noconflict' - ); - const aceEditor = ace.edit(this.editor.nativeElement); - aceEditor.session.setMode('xml'); - } - - getEditorVisibility(): string { - return this.topologyContent ? 'block' : 'none'; - } - - setTitle(value: string) { - this.titleSuffix = value; - } - - onChange(code: any) { - this.changedTopology = code; - } - - saveTopology() { - this.topologyService.saveTopology(this.topology.href, this.changedTopology) - .then(value => this.topologyService.changedTopology(this.topology.name)); - } - - createTopology() { - this.topologyService.createTopology(this.newTopologyName, - (this.changedTopology ? this.changedTopology : this.topologyContent)) - .then(() => { - this.topologyService.changedTopology(this.newTopologyName); - // This refreshes the list of topologies - this.resourceTypesService.selectResourceType('Topologies'); - }); - } - - deleteTopology() { - this.topologyService.deleteTopology(this.topology.href) - .then(() => { - this.topologyService.changedTopology(this.topology.name); - // This refreshes the list of topologies - this.resourceTypesService.selectResourceType('Topologies'); - // This refreshes the topology content panel to the first one in the list - this.topologyService.getTopologies() - .then(topologies => { - this.topologyService.selectedTopology(topologies[0]); - }); - }); - } - - populateContent(topology: Topology) { - this.topology = topology; - this.setTitle(topology.name); - if (this.topology) { - if (this.topology.href) { - this.topologyService.getTopology(this.topology.href) - .then(content => this.topologyContent = content) - .then(() => this.makeReadOnly(this.topologyContent, 'generated')); - } - } - } - - isValidNewTopologyName(): boolean { - return ValidationUtils.isValidResourceName(this.newTopologyName); - } - - /* - * Parse the XML and depending on the - * provided tag value make the editor read only - */ - makeReadOnly(text, tag) { - let parser = new DOMParser(); - let parsed = parser.parseFromString(text, 'text/xml'); - - let tagValue = parsed.getElementsByTagName(tag); - let result = tagValue[0].childNodes[0].nodeValue; - - if (result === 'true') { - this.showEditOptions = false; - this.options = {readOnly: true, useWorker: false, printMargin: false, highlightActiveLine: false, highlightGutterLine: false}; - } else { - this.showEditOptions = true; - this.options = {readOnly: false, useWorker: false, printMargin: false}; - } - - } - - -} diff --git a/gateway-admin-ui/admin-ui/app/topology-detail/topology-detail.component.ts b/gateway-admin-ui/admin-ui/app/topology-detail/topology-detail.component.ts new file mode 100644 index 0000000000..96b133370b --- /dev/null +++ b/gateway-admin-ui/admin-ui/app/topology-detail/topology-detail.component.ts @@ -0,0 +1,269 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {Component, OnInit} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {Topology} from '../model/topology'; +import {TopologyService} from '../service/topology.service'; +import {ResourceTypesService} from '../service/resourcetypes.service'; +import {ValidationUtils} from '../utils/validation-utils'; +import {ModalComponent} from '../utils/modal.component'; + +@Component({ + selector: 'app-topology-detail', + template: ` +
+
+

{{title}} + @if (showEditOptions === false) { + Read Only (generated file) + } + {{titleSuffix}} +

+
+
+
+
+ @for (line of getLineNumbers(); track line) { +
{{line}}
+ } +
+ +
+
+ + @if (showEditOptions) { + + } + @if (showEditOptions) { + + } +
+
+ +
+

Create a copy

+ +
+
+
+ + +
+
+
+ + +
+ + +
+

Deleting Topology {{titleSuffix}}

+ +
+
+ Are you sure you want to delete the topology? +
+
+ + +
+ +
+ `, + styles: [` + .code-editor-wrapper { + display: flex; + min-height: 450px; + background-color: #272822; + border-radius: 4px 4px 0 0; + overflow: hidden; + } + + .code-editor-gutter { + min-width: 40px; + padding: 10px 8px 10px 0; + background-color: #1e1f1c; + text-align: right; + user-select: none; + border-right: 1px solid #3e3d32; + } + + .line-number { + font-family: 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 12px; + line-height: 18px; + color: #75715e; + } + + .code-editor { + flex: 1; + min-height: 450px; + padding: 10px 12px; + background-color: #272822; + color: #f8f8f2; + border: none; + outline: none; + resize: none; + font-family: 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 12px; + line-height: 18px; + tab-size: 4; + white-space: pre; + overflow: auto; + } + + .code-editor:read-only { + opacity: 0.85; + } + + .code-editor::selection { + background-color: #49483e; + } + + .editor-toolbar { + padding: 8px 12px; + background-color: #1e1f1c; + border-top: 1px solid #3e3d32; + border-radius: 0 0 4px 4px; + } + + .editor-toolbar .btn { + background-color: #3e3d32; + border-color: #555; + color: #f8f8f2; + } + + .editor-toolbar .btn:hover:not(:disabled) { + background-color: #555; + border-color: #75715e; + } + + .editor-toolbar .btn:disabled { + opacity: 0.4; + } + + .editor-toolbar .material-icons { + color: #f8f8f2; + font-size: 16px; + } + `], + imports: [FormsModule, ModalComponent] +}) +export class TopologyDetailComponent implements OnInit { + title = 'Topology Detail'; + titleSuffix: string; + topology: Topology; + topologyContent: string; + changedTopology: string; + newTopologyName: string; + showEditOptions = true; + + constructor(private topologyService: TopologyService, private resourceTypesService: ResourceTypesService) { + } + + ngOnInit(): void { + this.topologyService.selectedTopology$.subscribe(value => this.populateContent(value)); + } + + getEditorVisibility(): string { + return this.topologyContent ? 'block' : 'none'; + } + + getLineNumbers(): number[] { + if (!this.topologyContent) { + return []; + } + const count = this.topologyContent.split('\n').length; + return Array.from({length: count}, (_, i) => i + 1); + } + + setTitle(value: string) { + this.titleSuffix = value; + } + + onChange(code: any) { + this.changedTopology = code; + } + + saveTopology() { + this.topologyService.saveTopology(this.topology.href, this.changedTopology) + .then(() => this.topologyService.changedTopology(this.topology.name)); + } + + createTopology() { + this.topologyService.createTopology(this.newTopologyName, + (this.changedTopology ? this.changedTopology : this.topologyContent)) + .then(() => { + this.topologyService.changedTopology(this.newTopologyName); + this.resourceTypesService.selectResourceType('Topologies'); + }); + } + + deleteTopology() { + this.topologyService.deleteTopology(this.topology.href) + .then(() => { + this.topologyService.changedTopology(this.topology.name); + this.resourceTypesService.selectResourceType('Topologies'); + this.topologyService.getTopologies() + .then(topologies => { + this.topologyService.selectedTopology(topologies[0]); + }); + }); + } + + populateContent(topology: Topology) { + this.topology = topology; + this.setTitle(topology.name); + if (this.topology) { + if (this.topology.href) { + this.topologyService.getTopology(this.topology.href) + .then(content => this.topologyContent = content) + .then(() => this.makeReadOnly(this.topologyContent, 'generated')); + } + } + } + + isValidNewTopologyName(): boolean { + return ValidationUtils.isValidResourceName(this.newTopologyName); + } + + makeReadOnly(text, tag) { + let parser = new DOMParser(); + let parsed = parser.parseFromString(text, 'text/xml'); + + let tagValue = parsed.getElementsByTagName(tag); + let result = tagValue[0].childNodes[0].nodeValue; + + this.showEditOptions = result !== 'true'; + } +} diff --git a/gateway-admin-ui/admin-ui/app/topology.component.ts b/gateway-admin-ui/admin-ui/app/topology/topology.component.ts similarity index 74% rename from gateway-admin-ui/admin-ui/app/topology.component.ts rename to gateway-admin-ui/admin-ui/app/topology/topology.component.ts index bb279df213..b784cb5e89 100644 --- a/gateway-admin-ui/admin-ui/app/topology.component.ts +++ b/gateway-admin-ui/admin-ui/app/topology/topology.component.ts @@ -15,8 +15,9 @@ * limitations under the License. */ import {Component, OnInit} from '@angular/core'; -import {Topology} from './topology'; -import {TopologyService} from './topology.service'; +import {DatePipe} from '@angular/common'; +import {Topology} from '../model/topology'; +import {TopologyService} from '../service/topology.service'; @Component({ @@ -31,16 +32,18 @@ import {TopologyService} from './topology.service'; - - {{topology.name}} - {{topology.timestamp | date:'medium'}} - + @for (topology of topologies; track topology.name) { + + {{topology.name}} + {{topology.timestamp | date:'medium'}} + + }
- ` + `, + imports: [DatePipe] }) export class TopologyComponent implements OnInit { @@ -58,7 +61,7 @@ export class TopologyComponent implements OnInit { ngOnInit(): void { this.getTopologies(); - this.topologyService.changedTopology$.subscribe(value => this.getTopologies()); + this.topologyService.changedTopology$.subscribe(() => this.getTopologies()); } onSelect(topology: Topology): void { @@ -66,4 +69,3 @@ export class TopologyComponent implements OnInit { this.topologyService.selectedTopology(topology); } } - diff --git a/gateway-admin-ui/admin-ui/app/utils/json-pretty.pipe.ts b/gateway-admin-ui/admin-ui/app/utils/json-pretty.pipe.ts index 8d531225e5..f1f5b4d6b3 100644 --- a/gateway-admin-ui/admin-ui/app/utils/json-pretty.pipe.ts +++ b/gateway-admin-ui/admin-ui/app/utils/json-pretty.pipe.ts @@ -18,7 +18,9 @@ import {Pipe, PipeTransform} from '@angular/core'; declare let vkbeautify: any; -@Pipe({name: 'jsonpretty'}) +@Pipe({ + name: 'jsonpretty' +}) export class JsonPrettyPipe implements PipeTransform { transform(value: string): string { diff --git a/gateway-admin-ui/admin-ui/app/utils/modal.component.ts b/gateway-admin-ui/admin-ui/app/utils/modal.component.ts new file mode 100644 index 0000000000..1760ed014c --- /dev/null +++ b/gateway-admin-ui/admin-ui/app/utils/modal.component.ts @@ -0,0 +1,55 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {Component, EventEmitter, Input, Output} from '@angular/core'; + +@Component({ + selector: 'app-modal', + template: ` +
+
+
+ +
+
+
+ @if (visible) { +
+ } + ` +}) +export class ModalComponent { + @Input() size: string = 'md'; + @Output() onClose = new EventEmitter(); + + visible = false; + + open(size?: string) { + if (size) { + this.size = size; + } + this.visible = true; + } + + close() { + this.visible = false; + this.onClose.emit(); + } + + dismiss() { + this.visible = false; + } +} diff --git a/gateway-admin-ui/admin-ui/app/utils/tabs.component.ts b/gateway-admin-ui/admin-ui/app/utils/tabs.component.ts index fbfb44728f..73de682812 100644 --- a/gateway-admin-ui/admin-ui/app/utils/tabs.component.ts +++ b/gateway-admin-ui/admin-ui/app/utils/tabs.component.ts @@ -21,33 +21,28 @@ import {TabComponent} from './tab.component'; selector: 'app-tabs', template: ` - ` }) export class TabsComponent implements AfterContentInit { @ContentChildren(TabComponent) tabs: QueryList; - // contentChildren are set ngAfterContentInit() { - // get all active tabs let activeTabs = this.tabs.filter((tab) => tab.active); - // if there is no active tab set, activate the first if (activeTabs.length === 0) { this.selectTab(this.tabs.first); } } selectTab(tab: TabComponent) { - // deactivate all tabs this.tabs.toArray().forEach(t => t.active = false); - - // activate the tab the user has clicked on. tab.active = true; } diff --git a/gateway-admin-ui/admin-ui/app/utils/validation-utils.ts b/gateway-admin-ui/admin-ui/app/utils/validation-utils.ts index a471a9cfd5..59ba3daf2f 100644 --- a/gateway-admin-ui/admin-ui/app/utils/validation-utils.ts +++ b/gateway-admin-ui/admin-ui/app/utils/validation-utils.ts @@ -72,7 +72,7 @@ export class ValidationUtils { if (value) { try { parsed = JSON.parse(value); - } catch (e) { + } catch (_e) { // just return undefined } } diff --git a/gateway-admin-ui/admin-ui/app/utils/xml.pipe.ts b/gateway-admin-ui/admin-ui/app/utils/xml.pipe.ts index 5a82b2ce61..977c3a9e16 100644 --- a/gateway-admin-ui/admin-ui/app/utils/xml.pipe.ts +++ b/gateway-admin-ui/admin-ui/app/utils/xml.pipe.ts @@ -18,7 +18,9 @@ import {Pipe, PipeTransform} from '@angular/core'; declare let vkbeautify: any; -@Pipe({name: 'xml'}) +@Pipe({ + name: 'xml' +}) export class XmlPipe implements PipeTransform { transform(value: string): string { diff --git a/gateway-admin-ui/admin-ui/assets/sticky-footer.css b/gateway-admin-ui/admin-ui/assets/sticky-footer.css deleted file mode 100644 index 01eb6d4036..0000000000 --- a/gateway-admin-ui/admin-ui/assets/sticky-footer.css +++ /dev/null @@ -1,24 +0,0 @@ -/* Sticky footer styles --------------------------------------------------- */ -html { - position: relative; - min-height: 100%; -} - -body { - /* Margin bottom by footer height */ - margin-bottom: 60px; -} - -.footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; - background-color: #f5f5f5; -} - -.jumbotron { - padding: 0.5em 0.6em; -} diff --git a/gateway-admin-ui/admin-ui/index.html b/gateway-admin-ui/admin-ui/index.html index ab2d882cf3..ca83a15fbb 100644 --- a/gateway-admin-ui/admin-ui/index.html +++ b/gateway-admin-ui/admin-ui/index.html @@ -19,46 +19,38 @@ Apache Knox Manager - - - - + + + + -
-
+
+ -
-
-
-
Knox Manager - -
+ Knox Manager +
diff --git a/gateway-admin-ui/admin-ui/main.ts b/gateway-admin-ui/admin-ui/main.ts index 3ed873ee48..e00dad4c25 100644 --- a/gateway-admin-ui/admin-ui/main.ts +++ b/gateway-admin-ui/admin-ui/main.ts @@ -16,13 +16,29 @@ */ import './polyfills.ts'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import {enableProdMode} from '@angular/core'; -import {environment} from './environments/environment'; -import {AppModule} from './app/'; +import { enableProdMode, provideZoneChangeDetection } from '@angular/core'; +import { environment } from './environments/environment'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { provideHttpClient } from '@angular/common/http'; +import { SessionInformationComponent } from './app/session-information/session.information.component'; +import { GatewayVersionComponent } from './app/gateway-version/gateway-version.component'; +import { AppComponent } from './app/app.component'; if (environment.production) { - enableProdMode(); + enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule); +const bootstrapComponents = [ + SessionInformationComponent, + GatewayVersionComponent, + AppComponent +]; + +bootstrapComponents.forEach(component => { + bootstrapApplication(component, { + providers: [ + provideZoneChangeDetection(), + provideHttpClient() + ] + }).catch(err => console.error(err)); +}); diff --git a/gateway-admin-ui/admin-ui/app/service-definition/rewrite.rule.ts b/gateway-admin-ui/admin-ui/material-theme.scss similarity index 86% rename from gateway-admin-ui/admin-ui/app/service-definition/rewrite.rule.ts rename to gateway-admin-ui/admin-ui/material-theme.scss index 2f1e7014bc..382c0c98ac 100644 --- a/gateway-admin-ui/admin-ui/app/service-definition/rewrite.rule.ts +++ b/gateway-admin-ui/admin-ui/material-theme.scss @@ -14,9 +14,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use '@angular/material' as mat; -export class RewriteRule { - dir: string; - name: string; - pattern: string; +:root { + @include mat.theme(( + color: ( + primary: mat.$green-palette + ) + )); } diff --git a/gateway-admin-ui/admin-ui/polyfills.ts b/gateway-admin-ui/admin-ui/polyfills.ts index 78cba47477..aebd58c4ed 100644 --- a/gateway-admin-ui/admin-ui/polyfills.ts +++ b/gateway-admin-ui/admin-ui/polyfills.ts @@ -14,22 +14,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -// This file includes polyfills needed by Angular 2 and is loaded before -// the app. You can add your own extra polyfills to this file. -import 'core-js/es6/symbol'; -import 'core-js/es6/object'; -import 'core-js/es6/function'; -import 'core-js/es6/parse-int'; -import 'core-js/es6/parse-float'; -import 'core-js/es6/number'; -import 'core-js/es6/math'; -import 'core-js/es6/string'; -import 'core-js/es6/date'; -import 'core-js/es6/array'; -import 'core-js/es6/regexp'; -import 'core-js/es6/map'; -import 'core-js/es6/set'; -import 'core-js/es6/reflect'; - -import 'core-js/es7/reflect'; -import 'zone.js/dist/zone'; +import 'zone.js'; diff --git a/gateway-admin-ui/admin-ui/styles.css b/gateway-admin-ui/admin-ui/styles.css deleted file mode 100644 index a7ad3e612f..0000000000 --- a/gateway-admin-ui/admin-ui/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ - -.navbar-static-top { - min-height: 110px; -} - -.clickable { - cursor: pointer; -} diff --git a/gateway-admin-ui/admin-ui/styles.scss b/gateway-admin-ui/admin-ui/styles.scss new file mode 100644 index 0000000000..e48e1dea27 --- /dev/null +++ b/gateway-admin-ui/admin-ui/styles.scss @@ -0,0 +1,354 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Global styles */ + +// Green theme palette +$primary: #4caf50; +$primary-dark: #388e3c; +$primary-light: #c8e6c9; +$primary-lighter: #e8f5e9; +$primary-lightest: #f1f8e9; + +$accent: #ff9800; +$warn: #f44336; + +$text-primary: #333; +$text-secondary: #555; +$text-muted: #999; +$border-color: #ddd; +$border-light: #eee; + +.top-navbar { + min-height: 5vw; +} + +.clickable { + cursor: pointer; +} + +body { + margin: 0; + padding-bottom: 40px; + font-size: 14px; +} + +// Form input styling +input[type="text"], +input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) { + padding: 3px 8px; + border: 1px solid $border-color; + border-radius: 4px; + font-size: 13px; + color: $text-primary; + background-color: #fff; + transition: border-color 0.15s, box-shadow 0.15s; + margin-right: 6px; + + &:focus { + outline: none; + border-color: $primary; + box-shadow: 0 0 0 2px rgba($primary, 0.15); + } + + &::placeholder { + color: $text-muted; + } +} + +input[type="checkbox"] { + accent-color: $primary; + cursor: pointer; +} + +.footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 40px; + line-height: 40px; + background-color: #f5f5f5; + border-top: 1px solid #e0e0e0; + z-index: 1000; +} + +.footer .container-fluid { + display: flex; + align-items: center; + gap: 12px; + height: 100%; +} + +.footer-title { + font-size: 12px; + font-weight: 600; + color: $text-primary; +} + + +a { + color: $primary-dark; + text-decoration: none; +} + +// Bootstrap 5 compatibility for BS3 classes +.btn-default { + color: $text-primary; + background-color: #fff; + border-color: #ccc; +} + +.btn-default:hover { + color: $text-primary; + background-color: #e6e6e6; + border-color: #adadad; +} + +.btn-primary { + color: #fff; + background-color: $primary; + border-color: $primary; +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active { + color: #fff; + background-color: $primary-dark; + border-color: $primary-dark; +} + +.btn-primary:disabled { + background-color: $primary-light; + border-color: $primary-light; +} + +// Select / form-control styling +select.form-control { + padding: 3px 8px; + border: 1px solid $border-color; + border-radius: 4px; + font-size: 13px; + color: $text-primary; + background-color: #fff; + + &:focus { + outline: none; + border-color: $primary; + box-shadow: 0 0 0 2px rgba($primary, 0.15); + } +} + +.pull-left { + float: left !important; +} + +.pull-right { + float: right !important; +} + +// Panel styling (BS3 compat) +.panel { + border: 1px solid $border-color; + border-radius: 4px; + margin-bottom: 15px; + background-color: #fff; + box-shadow: 0 1px 1px rgba(0, 0, 0, .05); +} + +.panel-default > .panel-heading { + color: $text-primary; + background-color: #f5f5f5; + border-bottom: 1px solid $border-color; + padding: 10px 15px; +} + +.panel-body { + padding: 15px; +} + +.panel-title { + margin: 0; + font-size: 15px; + font-weight: 500; +} + +// Modal styling +.modal { + z-index: 1050; +} + +.modal-backdrop { + z-index: 1040; +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + border-bottom: 1px solid #dee2e6; + background-color: #f8f9fa; +} + +.modal-title { + font-weight: 500; + color: $text-primary; +} + +.modal-footer { + padding: 12px 16px; + border-top: 1px solid #dee2e6; + background-color: #f8f9fa; +} + +// Icon button alignment +.btn-xs { + padding: 2px 5px; + line-height: 1; + vertical-align: middle; + display: inline-block; +} + +.btn-xs .material-icons { + vertical-align: middle; + line-height: 1; + display: inline-block; +} + +.inline-glyph { + display: inline-block; + vertical-align: middle; + line-height: 1; +} + +// Material Icons base +.material-icons { + font-size: 16px; + vertical-align: middle; + line-height: 1; + color: $text-secondary; + transition: color 0.15s; +} + +// Expand/collapse toggle icons +span.clickable.material-icons, +span.clickable.inline-glyph.material-icons { + font-size: 18px; + color: #666; +} + +span.clickable.material-icons:hover, +span.clickable.inline-glyph.material-icons:hover { + color: $primary; +} + +// Icons inside buttons +.btn .material-icons { + font-size: 14px; + color: inherit; +} + +// Inline action icon buttons +.inline-glyph .material-icons { + color: #666; +} + +.inline-glyph:hover .material-icons { + color: $primary; +} + +// Add action +[title*="Add"] .material-icons, +[title*="Create"] .material-icons { + color: $primary; +} + +[title*="Add"]:hover .material-icons, +[title*="Create"]:hover .material-icons { + color: $primary-dark; +} + +// Remove/delete action +[title*="Remove"] .material-icons, +[title*="Delete"] .material-icons { + color: $text-muted; +} + +[title*="Remove"]:hover .material-icons, +[title*="Delete"]:hover .material-icons { + color: $warn; +} + +// Discard/refresh +button[title*="Discard"] .material-icons { + color: $accent; +} + +button[title*="Discard"]:hover .material-icons { + color: #e68900; +} + +// Save/update +button[title*="Update"] .material-icons, +button[title*="Save"] .material-icons { + color: $primary; +} + +button[title*="Update"]:hover .material-icons, +button[title*="Save"]:hover .material-icons { + color: $primary-dark; +} + +// Validation error messages +.validation-error { + display: inline-block; + margin-top: 2px; + margin-left: 4px; + padding: 2px 8px; + font-size: 12px; + color: $warn; + background-color: #fff5f5; + border: 1px solid rgba($warn, 0.3); + border-radius: 3px; +} + +.required-marker { + color: $warn; + margin-left: 2px; +} + +.required-footnote { + font-size: 12px; + color: $text-muted; + font-style: italic; +} + +.required-footnote::before { + content: "* "; + color: $warn; +} + +// Material table/paginator overrides +.mat-mdc-table { + background-color: white !important; +} + +.mat-mdc-paginator { + background-color: white !important; +} diff --git a/gateway-admin-ui/admin-ui/tsconfig.json b/gateway-admin-ui/admin-ui/tsconfig.json index c56d60198c..268b333454 100644 --- a/gateway-admin-ui/admin-ui/tsconfig.json +++ b/gateway-admin-ui/admin-ui/tsconfig.json @@ -4,16 +4,11 @@ "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "lib": [ - "es2017", - "dom" - ], - "mapRoot": "./", - "module": "es6", - "moduleResolution": "node", + "module": "ES2022", + "moduleResolution": "bundler", "outDir": "../dist/out-tsc", "sourceMap": true, - "target": "es5", + "target": "ES2022", "typeRoots": [ "../node_modules/@types" ] diff --git a/gateway-admin-ui/admin-ui/typings.d.ts b/gateway-admin-ui/admin-ui/typings.d.ts deleted file mode 100644 index 32bf19d41c..0000000000 --- a/gateway-admin-ui/admin-ui/typings.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -// Typings reference file, you can add your own global typings here -// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html diff --git a/gateway-admin-ui/angular.json b/gateway-admin-ui/angular.json index 72f6510b7c..c2cdfd1aaf 100644 --- a/gateway-admin-ui/angular.json +++ b/gateway-admin-ui/angular.json @@ -36,12 +36,14 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular/build:application", "options": { - "outputPath": "target/classes/admin-ui/app", + "outputPath": { + "base": "target/classes/admin-ui/app", + "browser": "" + }, "index": "admin-ui/index.html", - "main": "admin-ui/main.ts", - "polyfills": "admin-ui/polyfills.ts", + "polyfills": ["admin-ui/polyfills.ts"], "tsConfig": "admin-ui/tsconfig.json", "assets": [ "admin-ui/favicon.ico", @@ -49,18 +51,16 @@ ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", - "admin-ui/styles.css" + "admin-ui/material-theme.scss", + "admin-ui/styles.scss" ], "scripts": [ - "node_modules/jquery/dist/jquery.min.js", - "node_modules/bootstrap/dist/js/bootstrap.js", - "node_modules/ace-builds/src-min/ace.js", - "node_modules/ace-builds/src-min/theme-monokai.js" - ] + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ], + "browser": "admin-ui/main.ts" }, "configurations": { "production": { - "buildOptimizer": false, "aot": false, "fileReplacements": [ { @@ -71,10 +71,8 @@ "outputHashing": "all" }, "development": { - "buildOptimizer": false, "aot": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true @@ -83,25 +81,21 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { - "browserTarget": "admin-ui:build:production" + "buildTarget": "admin-ui:build:production" }, "development": { - "browserTarget": "admin-ui:build:development" + "buildTarget": "admin-ui:build:development" } }, - "options": { - "browserTarget": "admin-ui:build", - "proxyConfig": "proxy.conf.json" - }, "defaultConfiguration": "development" }, "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", + "builder": "@angular/build:extract-i18n", "options": { - "browserTarget": "admin-ui:build" + "buildTarget": "admin-ui:build" } }, "lint": { @@ -115,12 +109,5 @@ } } } - }, - "defaultProject": "admin-ui", - "cli": { - "schematicCollections": [ - "@angular-eslint/schematics", - "@angular-eslint/schematics" - ] } } diff --git a/gateway-admin-ui/eslint.config.js b/gateway-admin-ui/eslint.config.js new file mode 100644 index 0000000000..12b8d3c08d --- /dev/null +++ b/gateway-admin-ui/eslint.config.js @@ -0,0 +1,76 @@ +import js from "@eslint/js"; +import tseslint from "typescript-eslint"; +import angular from "@angular-eslint/eslint-plugin"; +import tsParser from "@typescript-eslint/parser"; + +export default [ + { + ignores: ["**/dist/**", "**/node_modules/**"], + }, + + js.configs.recommended, + + { + files: ["**/*.ts"], + languageOptions: { + parser: tsParser, + parserOptions: { + project: ["./admin-ui/tsconfig.json"], + tsconfigRootDir: import.meta.dirname, + }, + globals: { + console: "readonly", + window: "readonly", + document: "readonly", + setTimeout: "readonly", + atob: "readonly", + require: "readonly" + }, + }, + plugins: { + "@typescript-eslint": tseslint.plugin, + "@angular-eslint": angular, + }, + rules: { + "@typescript-eslint/naming-convention": [ + "error", + {selector: "class", format: ["PascalCase"]}, + ], + + curly: "error", + eqeqeq: ["error", "always", {null: "ignore"}], + "guard-for-in": "error", + "max-len": ["error", {code: 140}], + "no-bitwise": "error", + "no-caller": "error", + "no-console": "off", + "no-debugger": "error", + "no-empty": "error", + "no-eval": "error", + "no-fallthrough": "error", + "no-trailing-spaces": "error", + "no-unused-vars": ["error", {argsIgnorePattern: "^_", varsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_"}], + "no-unused-expressions": "error", + "no-unused-labels": "error", + "no-var": "error", + quotes: ["error", "single"], + radix: "error", + semi: ["error", "always"], + "spaced-comment": "error", + "brace-style": ["error", "1tbs", {allowSingleLine: true}], + + "@angular-eslint/directive-selector": [ + "error", + {type: "attribute", prefix: "app", style: "camelCase"}, + ], + "@angular-eslint/component-selector": [ + "error", + {type: "element", prefix: "app", style: "kebab-case"}, + ], + "@angular-eslint/no-output-rename": "error", + "@angular-eslint/use-pipe-transform-interface": "error", + "@angular-eslint/component-class-suffix": "error", + "@angular-eslint/directive-class-suffix": "error", + }, + }, +]; \ No newline at end of file diff --git a/gateway-admin-ui/package.json b/gateway-admin-ui/package.json index 5f74ec23e1..08f86584b8 100644 --- a/gateway-admin-ui/package.json +++ b/gateway-admin-ui/package.json @@ -2,57 +2,44 @@ "name": "ng-knox-ui", "version": "1.0.0", "license": "Apache-2.0", + "type": "module", "scripts": { - "start": "ng serve", + "start": "ng serve --verbose=true", "build": "ng build", "build-prod": "ng build --configuration production", "lint": "eslint admin-ui" }, "private": true, "dependencies": { - "@angular/common": "^13.0.1", - "@angular/compiler": "^13.0.1", - "@angular/core": "^13.0.1", - "@angular/forms": "^13.0.1", - "@angular/platform-browser": "^13.0.1", - "@angular/platform-browser-dynamic": "^13.0.1", - "@angular/router": "^13.0.1", - "angular2-datatable": "^0.6.0", - "bootstrap": "^3.4.1", - "core-js": "^2.6.4", - "jquery": "^3.5.1", - "js-yaml": "^3.13.1", - "ng2-ace-editor": "0.3.7", - "ace-builds": "^1.4.12", - "ng2-bs3-modal": "^0.15.0", - "ng2-validation": "^4.2.0", - "popper.js": "^1.14.7", - "rest-url-builder": "^1.0.6", - "rxjs": "^6.6.7", - "rxjs-compat": "^6.6.7", - "sweetalert2": "^11.6.5", - "ts-helpers": "^1.1.1", - "vkbeautify": "^0.99.3", - "zone.js": "~0.11.4" + "@angular/cdk": "^21.2.14", + "@angular/common": "^21.0.5", + "@angular/compiler": "^21.0.5", + "@angular/core": "^21.0.5", + "@angular/forms": "^21.0.5", + "@angular/material": "^21.2.14", + "@angular/platform-browser": "^21.0.5", + "@angular/platform-browser-dynamic": "^21.0.5", + "@angular/router": "^21.0.5", + "bootstrap": "^5.3.8", + "core-js": "^3.46.0", + "sweetalert2": "^11.26.3", + "zone.js": "^0.15.1" }, "devDependencies": { - "@angular-devkit/build-angular": "^13.3.11", - "@angular-eslint/builder": "14.1.2", - "@angular-eslint/eslint-plugin": "14.1.2", - "@angular-eslint/eslint-plugin-template": "14.1.2", - "@angular-eslint/schematics": "14.1.2", - "@angular-eslint/template-parser": "14.1.2", - "@angular/cli": "^14.2.9", - "@angular/compiler-cli": "^13.0.1", - "@angular/language-service": "^5.2.0", - "@types/jasmine": "~2.5.53", - "@types/jasminewd2": "~2.0.2", - "@types/node": "16.18.11", - "@typescript-eslint/eslint-plugin": "5.37.0", - "@typescript-eslint/parser": "5.37.0", - "eslint": "^8.23.1", - "ts-node": "~3.2.0", - "typescript": "~4.4.4", - "webdriver-manager": "10.2.5" + "@angular-eslint/builder": "21.1.0", + "@angular-eslint/eslint-plugin": "21.1.0", + "@angular-eslint/eslint-plugin-template": "21.1.0", + "@angular-eslint/schematics": "21.1.0", + "@angular-eslint/template-parser": "21.1.0", + "@angular/build": "^21.0.3", + "@angular/cli": "^21.0.3", + "@angular/compiler-cli": "^21.0.5", + "@angular/language-service": "^21.0.5", + "@eslint/js": "^9.39.0", + "@types/node": "^24.5.2", + "eslint": "^9.39.0", + "ts-node": "~10.9.0", + "typescript": "~5.9.3", + "typescript-eslint": "^8.46.2" } -} +} \ No newline at end of file diff --git a/gateway-admin-ui/pom.xml b/gateway-admin-ui/pom.xml index ff41c08dee..6a435c4581 100644 --- a/gateway-admin-ui/pom.xml +++ b/gateway-admin-ui/pom.xml @@ -37,7 +37,11 @@ - node_modules + ${project.basedir} + + package-lock.json + node_modules/** + @@ -65,7 +69,7 @@ npm - install --legacy-peer-deps + install diff --git a/knox-token-generation-ui/token-generation/app/sessionInformation/session.information.component.html b/knox-token-generation-ui/token-generation/app/sessionInformation/session.information.component.html index 7250e01665..719af147b1 100644 --- a/knox-token-generation-ui/token-generation/app/sessionInformation/session.information.component.html +++ b/knox-token-generation-ui/token-generation/app/sessionInformation/session.information.component.html @@ -12,6 +12,5 @@ See the License for the specific language governing permissions and limitations under the License. --> -
Logged in as {{ getUser() }}
diff --git a/knox-token-management-ui/token-management/app/sessioninformation/session.information.component.html b/knox-token-management-ui/token-management/app/sessioninformation/session.information.component.html index 30a7de2848..9dd131f11f 100644 --- a/knox-token-management-ui/token-management/app/sessioninformation/session.information.component.html +++ b/knox-token-management-ui/token-management/app/sessioninformation/session.information.component.html @@ -12,7 +12,6 @@ See the License for the specific language governing permissions and limitations under the License. --> -
Logged in as {{ getUser() }}