[MySQL] Support metadata management, build a database, specify character sets & collation rules #180

qianmoQ · qianmoQ · commit 681b01271953 · 2022-08-04T23:56:22.000+08:00
diff --git a/src/renderer/app/layout/layout.module.ts b/src/renderer/app/layout/layout.module.ts
@@ -21,6 +21,10 @@ import { PluginFactory } from "@renderer/factory/plugin.factory";
 import { PluginToken } from "@renderer/token/plugin.token";
 import { ClickHousePlugin } from "@renderer/plugin/clickhouse.plugin";
 import { ElasticsearchPlugin } from "@renderer/plugin/elasticsearch.plugin";
+import { MysqlPlugin } from "@renderer/plugin/mysql.plugin";
+import { ConfigFactory } from "@renderer/factory/config.factory";
+import { ConfigToken } from "@renderer/token/config.token";
+import { MysqlConfig } from "@renderer/config/mysql.config";
 
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>
   new TranslateHttpLoader(http, './renderer/assets/i18n/', '.json');
@@ -55,7 +59,11 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>
     PostgresqlService,
     PluginFactory,
     {provide: PluginToken, useClass: ClickHousePlugin, multi: true},
-    {provide: PluginToken, useClass: ElasticsearchPlugin, multi: true}
+    {provide: PluginToken, useClass: ElasticsearchPlugin, multi: true},
+    {provide: PluginToken, useClass: MysqlPlugin, multi: true},
+    /* Config */
+    ConfigFactory,
+    {provide: ConfigToken, useClass: MysqlConfig, multi: true}
   ]
 })
 export class LayoutModule {
diff --git a/src/renderer/app/pages/management/metadata/metadata.module.ts b/src/renderer/app/pages/management/metadata/metadata.module.ts
@@ -42,6 +42,7 @@ import { ColumnCreateComponent } from '@renderer/components/column/create/column
 import { CommentColumnComponent } from '@renderer/components/column/comment/column.comment.component';
 import { DatabaseFilterComponent } from '@renderer/components/database/filter/database.filter.component';
 import { TableFilterComponent } from '@renderer/components/table/filter/table.filter.component';
+import { CollationService } from "@renderer/services/management/collation.service";
 
 const MANAGEMENT_METADATA_ROUTES: Routes = [
   {path: '', component: MetadataComponent}
@@ -96,7 +97,8 @@ const MANAGEMENT_METADATA_ROUTES: Routes = [
     EditorService,
     TableService,
     ColumnService,
-    DatabaseService
+    DatabaseService,
+    CollationService
   ]
 })
 export class MetadataModule {
diff --git a/src/renderer/assets/i18n/en.json b/src/renderer/assets/i18n/en.json
@@ -167,7 +167,9 @@
     "failed": "Failed",
     "druid": "Druid",
     "materialized_postgresql": "MaterializePostgreSQL",
-    "elasticsearch": "ElasticSearch"
+    "elasticsearch": "ElasticSearch",
+    "character": "Character",
+    "collation": "Collation"
   },
   "language": {
     "english": "English",
diff --git a/src/renderer/assets/i18n/zh.json b/src/renderer/assets/i18n/zh.json
@@ -166,7 +166,9 @@
     "failed": "失败",
     "druid": "Druid",
     "materialized_postgresql": "MaterializePostgreSQL",
-    "elasticsearch": "ElasticSearch"
+    "elasticsearch": "ElasticSearch",
+    "character": "字符集",
+    "collation": "排序规则"
   },
   "language": {
     "english": "英语",
diff --git a/src/renderer/components/database/basic/database.basic.component.html b/src/renderer/components/database/basic/database.basic.component.html
@@ -41,27 +41,65 @@
         </div>
         <div [nzSpan]="24" class="gutter-row" nz-col>
           <form nz-form>
-            <nz-divider nzOrientation="left" nzPlain nzText="{{'common.basic'|translate}}"></nz-divider>
-            <nz-form-item>
-              <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.engine'|translate}}</nz-form-label>
-              <nz-form-control [nzSm]="14" [nzXs]="24">
-                <nz-tag [nzColor]="'#2db7f5'">{{configure.type}}</nz-tag>
-              </nz-form-control>
-            </nz-form-item>
-            <nz-form-item>
-              <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.name'|translate}}</nz-form-label>
-              <nz-form-control [nzSm]="14" [nzXs]="24">
-                <input (change)="handlerValidate()" [(ngModel)]="configure.name" name="name" nz-input type="text"/>
-              </nz-form-control>
-            </nz-form-item>
-            <nz-divider nzOrientation="left" nzPlain nzText="{{'common.property'|translate}}"></nz-divider>
-            <app-component-database-engine-lazy *ngIf="configure.type === databaseType.lazy"
-                                                (emitter)="handlerComponentEmitter($event)">
-            </app-component-database-engine-lazy>
-            <app-component-property [properties]="properties"
-                                    [experimental]="configure.experimental"
-                                    (emitter)="handlerComponentEmitter($event)">
-            </app-component-property>
+            <nz-tabset nzAnimated="false">
+              <!-- Basic Settings -->
+              <nz-tab [nzTitle]="basicSettingTemplate">
+                <ng-template #basicSettingTemplate>
+                  <i nz-icon nzType="build"></i>
+                  {{'common.basic'|translate}}
+                </ng-template>
+                <nz-form-item>
+                  <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.engine'|translate}}</nz-form-label>
+                  <nz-form-control [nzSm]="14" [nzXs]="24">
+                    <nz-tag [nzColor]="'#2db7f5'">{{configure.type}}</nz-tag>
+                  </nz-form-control>
+                </nz-form-item>
+                <nz-form-item>
+                  <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.name'|translate}}</nz-form-label>
+                  <nz-form-control [nzSm]="14" [nzXs]="24">
+                    <input (change)="handlerValidate()" [(ngModel)]="configure.name" name="name" nz-input type="text"/>
+                  </nz-form-control>
+                </nz-form-item>
+                <nz-divider nzOrientation="left" nzPlain nzText="{{'common.property'|translate}}"></nz-divider>
+                <app-component-database-engine-lazy *ngIf="configure.type === databaseType.lazy"
+                                                    (emitter)="handlerComponentEmitter($event)">
+                </app-component-database-engine-lazy>
+                <app-component-property [properties]="properties"
+                                        [experimental]="configure.experimental"
+                                        (emitter)="handlerComponentEmitter($event)">
+                </app-component-property>
+              </nz-tab>
+              <!-- CharacterSet and Collation Settings -->
+              <nz-tab *ngIf="configure.characterAndCollationConfigure.enable"
+                      [nzTitle]="characterSetAndCollationSettingTemplate"
+                      (nzClick)="handlerLoadCharacterAndCollation()">
+                <ng-template #characterSetAndCollationSettingTemplate>
+                  <i nz-icon nzType="block"></i>
+                  {{'common.character'|translate}} & {{'common.collation'|translate}}
+                </ng-template>
+                <nz-form-item *ngIf="configure.characterAndCollationConfigure.characterSetConfigure.enable">
+                  <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.character'|translate}}</nz-form-label>
+                  <nz-form-control [nzSm]="14" [nzXs]="24">
+                    <nz-select name="characterValue" nzShowSearch
+                               [(ngModel)]="configure.characterAndCollationConfigure.characterSetConfigure.value"
+                               (ngModelChange)="handlerChangeCharacter($event)">
+                      <nz-option *ngFor="let character of collationConfigure.characters" [nzValue]="character"
+                                 [nzLabel]="character"></nz-option>
+                    </nz-select>
+                  </nz-form-control>
+                </nz-form-item>
+                <nz-form-item *ngIf="configure.characterAndCollationConfigure.collationConfigure.enable">
+                  <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.collation'|translate}}</nz-form-label>
+                  <nz-form-control [nzSm]="14" [nzXs]="24">
+                    <nz-select name="collationValue" nzShowSearch
+                               [(ngModel)]="configure.characterAndCollationConfigure.collationConfigure.value">
+                      <nz-option *ngFor="let collation of collationConfigure.collations" [nzValue]="collation"
+                                 [nzLabel]="collation"></nz-option>
+                    </nz-select>
+                  </nz-form-control>
+                </nz-form-item>
+              </nz-tab>
+            </nz-tabset>
           </form>
         </div>
       </div>
diff --git a/src/renderer/components/database/basic/database.basic.component.ts b/src/renderer/components/database/basic/database.basic.component.ts
@@ -13,6 +13,7 @@ import * as cloneDeep from 'lodash/cloneDeep';
 import { PropertyModel } from '@renderer/model/property.model';
 import { NzTreeNode } from 'ng-zorro-antd/core/tree/nz-tree-base-node';
 import { MenuModel } from '@renderer/model/menu.model';
+import { CollationService } from "@renderer/services/management/collation.service";
 
 @Component({
   selector: 'app-component-database',
@@ -35,9 +36,15 @@ export class DatabaseBasicComponent extends BaseComponent implements AfterViewIn
   configure: DatabaseModel;
   databaseType = DatabaseEnum;
   properties: PropertyModel[];
+  collationConfigure = {
+    elements: [],
+    characters: [],
+    collations: []
+  };
 
   constructor(private dataSourceService: DatasourceService,
               private metadataService: MetadataService,
+              private collationService: CollationService,
               private messageService: NzMessageService) {
     super();
     this.configure = new DatabaseModel();
@@ -97,19 +104,53 @@ export class DatabaseBasicComponent extends BaseComponent implements AfterViewIn
     this.handlerValidate();
   }
 
-  async handlerComplete() {
-    const request = new RequestModel();
-    request.config = await this.dataSourceService.getByAliasAsync(this.config.value);
-    this.metadataService.createDatabase(request, this.configure).then(response => {
-      if (response.status) {
-        this.messageService.success(response.message);
-        this.config.status = true;
-        this.config.menu = this.menu;
-        this.config.currentNode = this.node;
-        this.emitter.emit(this.config);
-      } else {
-        this.messageService.error(response.message);
-      }
-    });
+  handlerComplete() {
+    this.dataSourceService.getByAliasAsync(this.config.value)
+      .then(dataSource => {
+        const request = new RequestModel();
+        request.config = dataSource;
+        this.metadataService.createDatabase(request, this.configure)
+          .then(response => {
+            if (response.status) {
+              this.messageService.success(response.message);
+              this.config.status = true;
+              this.config.menu = this.menu;
+              this.config.currentNode = this.node;
+              this.emitter.emit(this.config);
+            } else {
+              this.messageService.error(response.message);
+            }
+          });
+      });
+
+  }
+
+  handlerLoadCharacterAndCollation() {
+    if (this.collationConfigure.characters.length <= 0) {
+      this.dataSourceService.getByAliasAsync(this.config.value)
+        .then(dataSource => {
+          const request = new RequestModel();
+          request.config = dataSource;
+          this.collationService.getCharacterAndCollation(request)
+            .then(response => {
+              response.data.columns.forEach(v => {
+                const collation = {
+                  name: v['name'],
+                  values: v['values'].split(',')
+                };
+                this.collationConfigure.characters.push(v['name']);
+                this.collationConfigure.elements.push(collation);
+              });
+            })
+        });
+    }
+  }
+
+  handlerChangeCharacter(value: string) {
+    this.configure.characterAndCollationConfigure.collationConfigure.value = null;
+    if (this.configure.characterAndCollationConfigure.collationConfigure.enable) {
+      this.collationConfigure.collations = this.collationConfigure.elements
+        .filter(item => item.name === value)[0].values;
+    }
   }
 }
diff --git a/src/renderer/config/base.config.ts b/src/renderer/config/base.config.ts
@@ -25,4 +25,5 @@ export interface BaseConfig {
   stopProcessor: string;
   showCreateDatabase: string;
   showTableWithSize: string;
+  getCharacterAndCollation: string;
 }
diff --git a/src/renderer/config/database.config.ts b/src/renderer/config/database.config.ts
@@ -4,6 +4,7 @@ import { DatabaseModel } from '@renderer/model/database.model';
 import { StringUtils } from '@renderer/utils/string.utils';
 import { TranslateUtils } from '@renderer/utils/translate.utils';
 import { PropertyModel } from '@renderer/model/property.model';
+import { DefaultEngine } from "@renderer/config/engine/database/mysql/engine.database.mysql.default.config";
 
 @Injectable()
 export class DatabaseConfig {
@@ -21,8 +22,12 @@ export class DatabaseConfig {
       TranslateUtils.getValue('tooltip.database.default'),
       DatabaseEnum.none,
       null);
-    defaultEngine.supportedSource.push(DatabaseEnum.presto, DatabaseEnum.trino, DatabaseEnum.mysql, DatabaseEnum.postgresql);
+    defaultEngine.supportedSource.push(DatabaseEnum.presto, DatabaseEnum.trino, DatabaseEnum.postgresql);
     defaultEngines.push(defaultEngine);
+
+    // MySQL
+    defaultEngines.push(DefaultEngine);
+
     defaultEngines.push(DatabaseModel.builder(TranslateUtils.getValue('common.atomic'),
       TranslateUtils.getValue('tooltip.database.atomic'),
       DatabaseEnum.atomic,
diff --git a/src/renderer/config/engine/database/mysql/engine.database.mysql.default.config.ts b/src/renderer/config/engine/database/mysql/engine.database.mysql.default.config.ts
@@ -0,0 +1,17 @@
+import { DatabaseModel } from "@renderer/model/database.model";
+import { TranslateUtils } from "@renderer/utils/translate.utils";
+import { DatabaseEnum } from "@renderer/enum/database.enum";
+
+const DefaultEngine = DatabaseModel.builder(TranslateUtils.getValue('common.default'),
+  TranslateUtils.getValue('tooltip.database.default'),
+  DatabaseEnum.none,
+  null);
+DefaultEngine.supportedSource = [DatabaseEnum.mysql];
+
+DefaultEngine.characterAndCollationConfigure.enable = true;
+DefaultEngine.characterAndCollationConfigure.characterSetConfigure.enable = true;
+DefaultEngine.characterAndCollationConfigure.collationConfigure.enable = true;
+
+export {
+  DefaultEngine
+}
diff --git a/src/renderer/config/mysql.config.ts b/src/renderer/config/mysql.config.ts
@@ -0,0 +1,22 @@
+import { ConfigInterface } from "@renderer/interfaces/config.interface";
+import { DatabaseEnum } from "@renderer/enum/database.enum";
+import { Injectable } from "@angular/core";
+import { Factory } from "@renderer/factory";
+import { MySQLConfig } from "@renderer/config/plugin/mysql.config";
+
+@Injectable()
+export class MysqlConfig implements ConfigInterface {
+  private readonly config: MySQLConfig;
+
+  constructor() {
+    this.config = Factory.create(MySQLConfig);
+  }
+
+  getName(): DatabaseEnum {
+    return DatabaseEnum.mysql;
+  }
+
+  getStatement(key: string): string {
+    return this.config[key];
+  }
+}
diff --git a/src/renderer/config/plugin/clickhouse.config.ts b/src/renderer/config/plugin/clickhouse.config.ts
@@ -171,4 +171,5 @@ ALTER TABLE {0} RENAME COLUMN {1} TO {2}
   columnAddComment = `
 ALTER TABLE {0} COMMENT COLUMN {1} '{2}'
   `;
+  getCharacterAndCollation: string;
 }
diff --git a/src/renderer/config/plugin/druid.config.ts b/src/renderer/config/plugin/druid.config.ts
@@ -34,4 +34,5 @@ export class DruidConfig implements BaseConfig {
   tableItemsFilterPrecise: string;
   tableSchemaFetchAll: string;
   version = `SELECT '-' AS version`;
+  getCharacterAndCollation: string;
 }
diff --git a/src/renderer/config/plugin/elasticsearch.config.ts b/src/renderer/config/plugin/elasticsearch.config.ts
@@ -27,4 +27,5 @@ export class ElasticsearchConfig implements BaseConfig {
   tableItemsFilterPrecise: string;
   tableSchemaFetchAll: string;
   version = `SELECT 1 AS version`;
+  getCharacterAndCollation: string;
 }
diff --git a/src/renderer/config/plugin/mysql.config.ts b/src/renderer/config/plugin/mysql.config.ts
@@ -122,4 +122,12 @@ ALTER TABLE {0} CHANGE COLUMN {1} {2} {3}
   columnAddComment = `
 ALTER TABLE {0} CHANGE COLUMN {1} {2} {3} COMMENT '{4}'
   `;
+  getCharacterAndCollation = `
+    SELECT
+      CHARACTER_SET_NAME AS 'name',
+      GROUP_CONCAT(COLLATION_NAME ORDER BY COLLATION_NAME ASC) AS 'values'
+    FROM information_schema.COLLATIONS
+    GROUP BY CHARACTER_SET_NAME
+    ORDER BY CHARACTER_SET_NAME ASC
+  `;
 }
diff --git a/src/renderer/config/plugin/postgresql.config.ts b/src/renderer/config/plugin/postgresql.config.ts
@@ -95,4 +95,5 @@ export class PostgresqlConfig implements BaseConfig {
   `;
   columnRename: string;
   columnAddComment: string;
+  getCharacterAndCollation: string;
 }
diff --git a/src/renderer/config/plugin/presto.config.ts b/src/renderer/config/plugin/presto.config.ts
@@ -1,6 +1,7 @@
 import { BaseConfig } from "@renderer/config/base.config";
 
 export class PrestoConfig implements BaseConfig {
+  getCharacterAndCollation: string;
   version = `
     SELECT node_version AS version
     FROM system.runtime.nodes LIMIT 1
diff --git a/src/renderer/factory/config.factory.ts b/src/renderer/factory/config.factory.ts
@@ -0,0 +1,14 @@
+import { DatabaseEnum } from "@renderer/enum/database.enum";
+import { Inject, Injectable } from "@angular/core";
+import { ConfigToken } from "@renderer/token/config.token";
+import { ConfigInterface } from "@renderer/interfaces/config.interface";
+
+@Injectable()
+export class ConfigFactory {
+  constructor(@Inject(ConfigToken) private configs: ConfigInterface[]) {
+  }
+
+  createConfig(name: DatabaseEnum) {
+    return this.configs.filter(item => item.getName() === name)[0];
+  }
+}
diff --git a/src/renderer/interfaces/config.interface.ts b/src/renderer/interfaces/config.interface.ts
@@ -0,0 +1,11 @@
+import { DatabaseEnum } from "@renderer/enum/database.enum";
+
+export interface ConfigInterface {
+  getName(): DatabaseEnum;
+
+  /**
+   * Get SQL statement
+   * @param key statement key
+   */
+  getStatement(key: string): string;
+}
diff --git a/src/renderer/model/database.model.ts b/src/renderer/model/database.model.ts
diff --git a/src/renderer/plugin/mysql.plugin.ts b/src/renderer/plugin/mysql.plugin.ts
diff --git a/src/renderer/services/management/collation.service.ts b/src/renderer/services/management/collation.service.ts
diff --git a/src/renderer/services/management/metadata.service.ts b/src/renderer/services/management/metadata.service.ts
diff --git a/src/renderer/token/config.token.ts b/src/renderer/token/config.token.ts

Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,5 @@ export interface BaseConfig {`
`25`	`25`	`stopProcessor: string;`
`26`	`26`	`showCreateDatabase: string;`
`27`	`27`	`showTableWithSize: string;`
	`28`	`+ getCharacterAndCollation: string;`
`28`	`29`	`}`