mgr/dashboard: add create functionality to the frontend

Add the missing functionality to create config options and related
tests to the frontend.

Fixes: http://tracker.ceph.com/issues/24455
Signed-off-by: Tatjana Dehler <tdehler@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
index 84af029ac4c0d6a19a6d19a3d04c2d01a7731595..8347dfae390229c4d542c4e2f6b29353e5de9d28 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
@@ -78,7 +78,7 @@ const routes: Routes = [
   },
   {
     path: 'configuration',
-    data: { breadcrumbs: 'Cluster/Configuration Documentation' },
+    data: { breadcrumbs: 'Cluster/Configuration' },
     children: [
       { path: '', component: ConfigurationComponent },
       {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form-create-request.model.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form-create-request.model.ts
new file mode 100644 (file)
index 0000000..bca65a8
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form-create-request.model.ts
@@ -0,0 +1,4 @@
+export class ConfigFormCreateRequestModel {
+  name: string;
+  value: Array<any> = [];
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
index 74edf15e8d680daf311e70c1070cd4ab1ecb3bf9..ea467161a3089b319ccd42357a64868132aa455f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
@@ -154,6 +154,11 @@
       <!-- Footer -->
       <div class="panel-footer">
         <div class="button-group text-right">
+          <cd-submit-button [form]="formDir"
+                            type="button"
+                            (submitAction)="submit()">
+            <span i18n>Save</span>
+          </cd-submit-button>
           <button type="button"
                   class="btn btn-sm btn-default"
                   routerLink="/configuration"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.spec.ts
index 4b98d7f51483ec1eada84f6c1d63e46195b4f60c..cbc89885248a1cda41941b62dc6025e4504c683e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.spec.ts
@@ -4,6 +4,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { ToastModule } from 'ng2-toastr';
+
 import { configureTestBed } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
 import { ConfigurationFormComponent } from './configuration-form.component';
@@ -15,7 +17,13 @@ describe('ConfigurationFormComponent', () => {
   let activatedRoute: ActivatedRoute;
 
   configureTestBed({
-    imports: [HttpClientTestingModule, ReactiveFormsModule, RouterTestingModule, SharedModule],
+    imports: [
+      HttpClientTestingModule,
+      ReactiveFormsModule,
+      RouterTestingModule,
+      ToastModule.forRoot(),
+      SharedModule
+    ],
     declarations: [ConfigurationFormComponent],
     providers: [
       {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
index 2e654db5993f115b117ef7e21690fbfc3cae0367..53e059ffbe0c4a5a528202afbfa912b65c51bab3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
@@ -2,9 +2,14 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
+import * as _ from 'lodash';
+
 import { ConfigurationService } from '../../../../shared/api/configuration.service';
+import { NotificationType } from '../../../../shared/enum/notification-type.enum';
 import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
 import { CdValidators } from '../../../../shared/forms/cd-validators';
+import { NotificationService } from '../../../../shared/services/notification.service';
+import { ConfigFormCreateRequestModel } from './configuration-form-create-request.model';
 import { ConfigFormModel } from './configuration-form.model';
 
 @Component({
@@ -26,7 +31,8 @@ export class ConfigurationFormComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private configService: ConfigurationService
+    private configService: ConfigurationService,
+    private notificationService: NotificationService
   ) {
     this.createForm();
   }
@@ -239,4 +245,46 @@ export class ConfigurationFormComponent implements OnInit {
     this.inputType = currentType.inputType;
     this.humanReadableType = currentType.humanReadable;
   }
+
+  createRequest(): ConfigFormCreateRequestModel | null {
+    const values = [];
+
+    this.availSections.forEach((section) => {
+      const sectionValue = this.configForm.getValue(section);
+      if (sectionValue) {
+        values.push({ section: section, value: sectionValue });
+      }
+    });
+
+    if (!_.isEqual(this.response.value, values)) {
+      const request = new ConfigFormCreateRequestModel();
+      request.name = this.configForm.getValue('name');
+      request.value = values;
+      return request;
+    }
+
+    return null;
+  }
+
+  submit() {
+    const request = this.createRequest();
+
+    if (request) {
+      this.configService.create(request).subscribe(
+        () => {
+          this.notificationService.show(
+            NotificationType.success,
+            'Config option ' + request.name + ' has been updated.',
+            'Update config option'
+          );
+          this.router.navigate(['/configuration']);
+        },
+        () => {
+          this.configForm.setErrors({ cdSubmitButton: true });
+        }
+      );
+    }
+
+    this.router.navigate(['/configuration']);
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index b1786224ea01ff06cba67960bc25068845199606..34893e321f43242813cd1fb664168c3c440b4b48 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -79,7 +79,7 @@
               *ngIf="permissions.configOpt.read">
             <a i18n
                class="dropdown-item"
-               routerLink="/configuration">Configuration Doc.
+               routerLink="/configuration">Configuration
             </a>
           </li>
         </ul>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.spec.ts
index 1cafe25f70b7052c9a79ac41d79f881847d65b29..0b4133e5a409a26f2ff079436aa57afdae73dc43 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.spec.ts
@@ -2,6 +2,7 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { TestBed } from '@angular/core/testing';
 
 import { configureTestBed } from '../../../testing/unit-test-helper';
+import { ConfigFormCreateRequestModel } from '../../ceph/cluster/configuration/configuration-form/configuration-form-create-request.model';
 import { ConfigurationService } from './configuration.service';
 
 describe('ConfigurationService', () => {
@@ -37,4 +38,17 @@ describe('ConfigurationService', () => {
     const req = httpTesting.expectOne('api/cluster_conf/configOption');
     expect(req.request.method).toBe('GET');
   });
+
+  it('should call create', () => {
+    const configOption = new ConfigFormCreateRequestModel();
+    configOption.name = 'Test option';
+    configOption.value = [
+      { section: 'section1', value: 'value1' },
+      { section: 'section2', value: 'value2' }
+    ];
+    service.create(configOption).subscribe();
+    const req = httpTesting.expectOne('api/cluster_conf/');
+    expect(req.request.method).toBe('POST');
+    expect(req.request.body).toEqual(configOption);
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.ts
index eda79334e5427683c5836960e746fcf165b70104..6e7a98d8f31ab803ab053d2d80d7fcd30c25f6f2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/configuration.service.ts
@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
+import { ConfigFormCreateRequestModel } from '../../ceph/cluster/configuration/configuration-form/configuration-form-create-request.model';
 import { ApiModule } from './api.module';
 
 @Injectable({
@@ -16,4 +17,8 @@ export class ConfigurationService {
   get(configOption: string) {
     return this.http.get(`api/cluster_conf/${configOption}`);
   }
+
+  create(configOption: ConfigFormCreateRequestModel) {
+    return this.http.post('api/cluster_conf/', configOption);
+  }
 }