optimize - use monaco to edit config-data/instance-metadata (Dashboar…

…d-UI) optimize - use monaco to show diff-config-data (Current Data - VS - History Version)
Ahoo-Wang · May 16, 2021 · c53880d · c53880d
1 parent 8bb1c22
commit c53880d
Show file tree

Hide file tree

Showing 22 changed files with 177 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ consistency between process cache and Redis.
 > Kotlin DSL
 
 ``` kotlin
-    val governVersion = "0.9.12";
+    val governVersion = "0.9.13";
     implementation("me.ahoo.govern:spring-cloud-starter-config:${governVersion}")
     implementation("me.ahoo.govern:spring-cloud-starter-discovery:${governVersion}")
 ```
@@ -33,7 +33,7 @@ consistency between process cache and Redis.
   <modelVersion>4.0.0</modelVersion>
   <artifactId>demo</artifactId>
   <properties>
-    <govern.version>0.9.12</govern.version>
+    <govern.version>0.9.13</govern.version>
   </properties>
 
   <dependencies>
@@ -74,31 +74,31 @@ spring:
 
 #### Option 1：Download the executable file
 
-> Download [rest-api-server](https://github.com/Ahoo-Wang/govern-service/releases/download/0.9.12/rest-api-0.9.12.tar)
+> Download [rest-api-server](https://github.com/Ahoo-Wang/govern-service/releases/download/0.9.13/rest-api-0.9.13.tar)
 
-> tar *rest-api-0.9.12.tar*
+> tar *rest-api-0.9.13.tar*
 
 ```shell
-cd rest-api-0.9.12
-# Working directory: rest-api-0.9.12
+cd rest-api-0.9.13
+# Working directory: rest-api-0.9.13
 bin/rest-api --server.port=8080 --govern.redis.uri=redis://localhost:6379
 ```
 
 #### Option 2：Docker run
 
 ```shell
-docker pull ahoowang/govern-service:0.9.12
-docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.12
+docker pull ahoowang/govern-service:0.9.13
+docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.13
 ```
 
 ---
 > MacBook Pro (M1)
 >
-> Please use *ahoowang/govern-service:0.9.12-armv7*
+> Please use *ahoowang/govern-service:0.9.13-armv7*
 
 ```shell
-docker pull ahoowang/govern-service:0.9.12-armv7
-docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.12-armv7
+docker pull ahoowang/govern-service:0.9.13-armv7
+docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.13-armv7
 ```
 
 ---

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -11,7 +11,7 @@
 > Kotlin DSL
 
 ``` kotlin
-    val governVersion = "0.9.12";
+    val governVersion = "0.9.13";
     implementation("me.ahoo.govern:spring-cloud-starter-config:${governVersion}")
     implementation("me.ahoo.govern:spring-cloud-starter-discovery:${governVersion}")
 ```
@@ -28,7 +28,7 @@
   <modelVersion>4.0.0</modelVersion>
   <artifactId>demo</artifactId>
   <properties>
-    <govern.version>0.9.12</govern.version>
+    <govern.version>0.9.13</govern.version>
   </properties>
 
   <dependencies>
@@ -73,31 +73,31 @@ logging:
 
 #### 方式一：下载可执行文件
 
-> 下载 [rest-api-server](https://github.com/Ahoo-Wang/govern-service/releases/download/0.9.12/rest-api-0.9.12.tar)
+> 下载 [rest-api-server](https://github.com/Ahoo-Wang/govern-service/releases/download/0.9.13/rest-api-0.9.13.tar)
 
-> 解压 *rest-api-0.9.12.tar*
+> 解压 *rest-api-0.9.13.tar*
 
 ```shell
-cd rest-api-0.9.12
-# 工作目录: rest-api-0.9.12
+cd rest-api-0.9.13
+# 工作目录: rest-api-0.9.13
 bin/rest-api --server.port=8080 --govern.redis.uri=redis://localhost:6379
 ```
 
 #### 方式二：Docker run
 
 ```shell
-docker pull ahoowang/govern-service:0.9.12
-docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.12
+docker pull ahoowang/govern-service:0.9.13
+docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.13
 ```
 
 ---
 > MacBook Pro (M1)
 >
-> 请使用 *ahoowang/govern-service:0.9.12-armv7*
+> 请使用 *ahoowang/govern-service:0.9.13-armv7*
 
 ```shell
-docker pull ahoowang/govern-service:0.9.12-armv7
-docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.12-armv7
+docker pull ahoowang/govern-service:0.9.13-armv7
+docker run --name govern-service -d -p 8080:8080 --link redis -e GOVERN_REDIS_URI=redis://redis:6379  ahoowang/govern-service:0.9.13-armv7
 ```
 
 ---

diff --git a/dashboard/angular.json b/dashboard/angular.json
@@ -36,7 +36,8 @@
                 "glob": "**/*",
                 "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
-              }
+              },
+              { "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
             ],
             "styles": [
               "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -19,7 +19,9 @@
     "@angular/platform-browser": "~11.2.13",
     "@angular/platform-browser-dynamic": "~11.2.13",
     "@angular/router": "~11.2.13",
+    "monaco-editor": "^0.24.0",
     "ng-zorro-antd": "^11.4.1",
+    "ngx-monaco-editor": "^9.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"

diff --git a/dashboard/src/app/api/config/Configs.ts b/dashboard/src/app/api/config/Configs.ts
@@ -23,4 +23,45 @@ export class Configs {
       opTime: 0
     };
   }
+
+  static extAsLang(configExt: string): string {
+    switch (configExt) {
+      case 'yml': {
+        return 'yaml';
+      }
+      default:
+        return configExt;
+    }
+  }
 }
+
+export type ConfigExt = 'text' | 'json' | 'xml' | 'yaml' | 'properties';
+
+export class ConfigName {
+  name: string;
+  ext: string;
+
+  constructor(name: string, ext: string) {
+    this.name = name;
+    this.ext = ext;
+  }
+
+  static of(configId: string): ConfigName {
+    const idx = configId.lastIndexOf('.');
+    if (idx < 0) {
+      return new ConfigName(configId, '');
+    }
+    const name = configId.substring(0, idx);
+    const ext = configId.substring(idx + 1);
+
+    return new ConfigName(name, ext);
+  }
+
+  toId(): string {
+    if (this.ext.length === 0) {
+      return this.name;
+    }
+    return `${this.name}.${this.ext}`;
+  }
+}
+
diff --git a/dashboard/src/app/app.module.ts b/dashboard/src/app/app.module.ts
@@ -27,6 +27,7 @@ import {NzSwitchModule} from 'ng-zorro-antd/switch';
 import {NzDropDownModule} from 'ng-zorro-antd/dropdown';
 import {NzStatisticModule} from 'ng-zorro-antd/statistic';
 import {NzUploadModule} from 'ng-zorro-antd/upload';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
 
 import {NamespaceSelectorComponent} from './components/namespace/namespace-selector/namespace-selector.component';
 import {NamespaceComponent} from './components/namespace/namespace.component';
@@ -82,7 +83,9 @@ registerLocaleData(zh);
     NzSwitchModule,
     NzDropDownModule,
     NzStatisticModule,
-    NzUploadModule
+    NzUploadModule,
+    MonacoEditorModule,
+    MonacoEditorModule.forRoot()
   ],
   providers: [{provide: NZ_I18N, useValue: zh_CN}],
   bootstrap: [AppComponent]

diff --git a/dashboard/src/app/components/config/config-editor.service.ts b/dashboard/src/app/components/config/config-editor.service.ts
@@ -24,7 +24,7 @@ export class ConfigEditorService {
     }
     const drawerRef = this.drawerService.create<ConfigEditorComponent, { configId?: string }, string>({
       nzTitle: editorTitle,
-      nzWidth: '40%',
+      nzWidth: '880px',
       nzContent: ConfigEditorComponent,
       nzContentParams: {
         configId
@@ -65,7 +65,7 @@ export class ConfigEditorService {
 
     const drawerRef = this.drawerService.create<ConfigVersionComponent, { configId: string, version: number }, string>({
       nzTitle: `Config [${configId}] Version [${version}]`,
-      nzWidth: '40%',
+      nzWidth: '880px',
       nzContent: ConfigVersionComponent,
       nzContentParams: {
         configId,

diff --git a/dashboard/src/app/components/config/config-editor/config-editor.component.html b/dashboard/src/app/components/config/config-editor/config-editor.component.html
@@ -1,16 +1,28 @@
 <form nzLayout="horizontal" nz-form [formGroup]="validateForm" (ngSubmit)="setConfig()">
   <ng-template [ngIf]="isAdd">
     <nz-form-item>
-      <nz-form-label [nzSpan]="4" nzRequired>ConfigId</nz-form-label>
-      <nz-form-control [nzSpan]="20" nzHasFeedback nzErrorTip="Please enter the ConfigId!">
-        <input nz-input type="text" formControlName="configId" [(ngModel)]="config.configId"/>
+      <nz-form-label [nzSpan]="3" nzRequired>ConfigId</nz-form-label>
+      <nz-form-control [nzSpan]="21" nzHasFeedback nzErrorTip="Please enter the ConfigId!">
+        <nz-input-group [nzAddOnAfter]="configExt">
+          <input type="text" formControlName="configName" nz-input [(ngModel)]="configName.name"/>
+        </nz-input-group>
+        <ng-template #configExt>
+          <nz-select style="width: 120px;" [ngModel]="configName.ext" [ngModelOptions]="{standalone: true}"
+                     (ngModelChange)="onExtChanged($event)">
+            <nz-option nzLabel=".text" nzValue="text"></nz-option>
+            <nz-option nzLabel=".json" nzValue="json"></nz-option>
+            <nz-option nzLabel=".xml" nzValue="xml"></nz-option>
+            <nz-option nzLabel=".yaml" nzValue="yaml"></nz-option>
+            <nz-option nzLabel=".properties" nzValue="properties"></nz-option>
+          </nz-select>
+        </ng-template>
       </nz-form-control>
     </nz-form-item>
   </ng-template>
   <ng-template [ngIf]="!isAdd">
     <nz-form-item>
-      <nz-form-label [nzSpan]="4">ConfigId</nz-form-label>
-      <nz-form-control [nzSpan]="20">
+      <nz-form-label [nzSpan]="3">ConfigId</nz-form-label>
+      <nz-form-control [nzSpan]="21">
         <input nz-input type="text"
                [ngModel]="config.configId" disabled
                [ngModelOptions]="{standalone: true}"
@@ -19,40 +31,38 @@
     </nz-form-item>
   </ng-template>
   <nz-form-item *ngIf="!isAdd">
-    <nz-form-label [nzSpan]="4">hash</nz-form-label>
-    <nz-form-control [nzSpan]="20">
+    <nz-form-label [nzSpan]="3">hash</nz-form-label>
+    <nz-form-control [nzSpan]="21">
       <input nz-input type="text"
              [ngModel]="config.hash" disabled
              [ngModelOptions]="{standalone: true}"
       />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item *ngIf="!isAdd">
-    <nz-form-label [nzSpan]="4">version</nz-form-label>
-    <nz-form-control [nzSpan]="20">
+    <nz-form-label [nzSpan]="3">version</nz-form-label>
+    <nz-form-control [nzSpan]="21">
       <input nz-input type="text"
              [ngModel]="config.version" disabled
              [ngModelOptions]="{standalone: true}"
       />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item *ngIf="!isAdd">
-    <nz-form-label [nzSpan]="4">createTime</nz-form-label>
-    <nz-form-control [nzSpan]="20">
+    <nz-form-label [nzSpan]="3">CreateTime</nz-form-label>
+    <nz-form-control [nzSpan]="21">
       <input nz-input type="text"
              [ngModel]="config.createTime" disabled
              [ngModelOptions]="{standalone: true}"
       />
     </nz-form-control>
   </nz-form-item>
-  <nz-divider nzText="Data"></nz-divider>
-  <nz-form-item>
-    <nz-form-label [nzSpan]="4" nzRequired>Data</nz-form-label>
-    <nz-form-control [nzSpan]="20" nzHasFeedback nzErrorTip="Please enter the Data!">
-      <textarea rows="16" formControlName="data" nz-input [(ngModel)]="config.data"
-                placeholder="Please enter the Data!"></textarea>
-    </nz-form-control>
-  </nz-form-item>
+  <nz-divider nzText="Config Data"></nz-divider>
+  <ngx-monaco-editor style="min-height: 600px;"
+                     [options]="editorOptions" [(ngModel)]="config.data"
+                     [ngModelOptions]="{standalone: true}"
+  ></ngx-monaco-editor>
+
   <nz-divider></nz-divider>
   <nz-form-item>
     <button nz-button nzType="primary" [disabled]="!validateForm.valid" nzSize="large" nzBlock>Submit</button>

diff --git a/dashboard/src/app/components/config/config-editor/config-editor.component.scss b/dashboard/src/app/components/config/config-editor/config-editor.component.scss
@@ -0,0 +1,3 @@
+nz-select {
+  width: 220px;
+}
diff --git a/dashboard/src/app/components/config/config-editor/config-editor.component.ts b/dashboard/src/app/components/config/config-editor/config-editor.component.ts
@@ -4,7 +4,8 @@ import {ConfigDto} from '../../../api/config/ConfigDto';
 import {NamespaceContext} from '../../../core/NamespaceContext';
 import {NzMessageService} from 'ng-zorro-antd/message';
 import {ConfigClient} from '../../../api/config/ConfigClient';
-import {Configs} from '../../../api/config/Configs';
+import {ConfigName, Configs} from '../../../api/config/Configs';
+
 
 @Component({
   selector: 'app-config-editor',
@@ -15,40 +16,48 @@ export class ConfigEditorComponent implements OnInit {
   validateForm!: FormGroup;
   @Input() configId?: string;
   @Output() afterSet: EventEmitter<boolean> = new EventEmitter<boolean>();
-  config: ConfigDto;
+  config!: ConfigDto;
   isAdd = true;
+  editorOptions = {theme: 'vs-dark', language: 'yaml'};
+  configName!: ConfigName;
 
   constructor(private namespaceContext: NamespaceContext,
               private configClient: ConfigClient,
               private messageService: NzMessageService,
               private formBuilder: FormBuilder) {
-    this.config = Configs.of();
+
   }
 
   ngOnInit(): void {
+    this.config = Configs.of();
+    this.configName = ConfigName.of('.yaml');
+
     if (this.configId) {
       this.isAdd = false;
       this.configClient.getConfig(this.namespaceContext.ensureCurrentNamespace(), this.configId)
         .subscribe(config => {
           this.config = config;
+          this.configName = ConfigName.of(config.configId);
+          this.onExtChanged(this.configName.ext);
         });
     }
 
     const controlsConfig = {
-      configId: [this.config.configId, [Validators.required]],
+      configName: [this.configName.name, [Validators.required]],
       version: [this.config.version],
       hash: [this.config.hash],
-      data: [this.config.data, [Validators.required]],
+      data: [this.config.data],
       createTime: [this.config.createTime]
     };
     if (!this.isAdd) {
-      controlsConfig.configId = [this.config.configId];
+      controlsConfig.configName = [this.configName.name];
     }
 
     this.validateForm = this.formBuilder.group(controlsConfig);
   }
 
   setConfig(): void {
+    this.config.configId = this.configName.toId();
     this.configClient.setConfig(this.namespaceContext.ensureCurrentNamespace(), this.config.configId, this.config.data)
       .subscribe(result => {
         this.messageService.success(`Config[${this.config.configId}] added successfull!`);
@@ -59,4 +68,9 @@ export class ConfigEditorComponent implements OnInit {
       });
   }
 
+  onExtChanged(configExt: string): void {
+    this.configName.ext = configExt;
+    const language = Configs.extAsLang(configExt);
+    this.editorOptions = Object.assign({}, this.editorOptions, {language});
+  }
 }