fix: fix ip showing and users database access

1. Fix the ip showing in databse instance
2. Support grant database access in databse users

Change-Id: I96f2c9685f9a2c9890005779ff0e8585ad4dfbfb

docs/en/develop/3-6-FormAction-introduction.md

@@ -101,7 +101,7 @@ English | [Chinese](../../zh/develop/3-6-FormAction-introduction.md)
     ```
 
 - `allowed`
-  - Static functions 
+  - Static functions
   - Determine whether the operation needs to be disabled
   - Return `Promise`
   - Write directly without using disabled buttons

src/client/trove/index.js

@@ -48,6 +48,20 @@ export class TroveClient extends Base {
             responseKey: 'log',
           },
         ],
+        extendOperations: [
+          {
+            name: 'grantDatabase',
+            generate: (id, subId, body) => {
+              return this.request.put(
+                `${this.getDetailUrl(
+                  'instances',
+                  id
+                )}/users/${subId}/databases`,
+                body
+              );
+            },
+          },
+        ],
       },
       {
         name: 'datastores',

src/locales/en.json

@@ -176,7 +176,6 @@
   "Auto Scaling": "Auto Scaling",
   "Auto allocate mac address": "Auto allocate mac address",
   "Auto scaling feature will be enabled": "Auto scaling feature will be enabled",
-  "Automatic backup": "Automatic backup",
   "Automatically Assigned Address": "Automatically Assigned Address",
   "Automatically repair unhealhty nodes": "Automatically repair unhealhty nodes",
   "Availability Zone": "Availability Zone",
@@ -989,6 +988,7 @@
   "Glance": "Glance",
   "Global Setting": "Global Setting",
   "GlusterFS": "GlusterFS",
+  "Grant Databases Access": "Grant Databases Access",
   "Greece": "Greece",
   "Greenland": "Greenland",
   "Grenada": "Grenada",
@@ -1366,7 +1366,6 @@
   "Management": "Management",
   "Management Reason": "Management Reason",
   "Manu": "Manu",
-  "Manual backup": "Manual backup",
   "Manual input": "Manual input",
   "Manually Assigned Address": "Manually Assigned Address",
   "Manually Specify": "Manually Specify",
@@ -2662,6 +2661,7 @@
   "flavor": "flavor",
   "floating ip": "floating ip",
   "floating ips": "floating ips",
+  "gigabytes": "gigabytes",
   "heat services": "heat services",
   "host aggregates": "host aggregates",
   "hosts": "hosts",

src/locales/zh.json

@@ -176,7 +176,6 @@
   "Auto Scaling": "自动缩放",
   "Auto allocate mac address": "自动分配MAC地址",
   "Auto scaling feature will be enabled": "将启用自动缩放功能",
-  "Automatic backup": "自动备份",
   "Automatically Assigned Address": "自动分配地址",
   "Automatically repair unhealhty nodes": "自动修复不健康的节点",
   "Availability Zone": "可用域",
@@ -989,6 +988,7 @@
   "Glance": "",
   "Global Setting": "平台配置",
   "GlusterFS": "",
+  "Grant Databases Access": "设置数据库访问",
   "Greece": "希腊",
   "Greenland": "格陵兰",
   "Grenada": "格林纳达",
@@ -1366,7 +1366,6 @@
   "Management": "维护",
   "Management Reason": "维护原因",
   "Manu": "手动",
-  "Manual backup": "手动备份",
   "Manual input": "手动输入",
   "Manually Assigned Address": "手动分配地址",
   "Manually Specify": "手动指定",
@@ -2662,6 +2661,7 @@
   "flavor": "云主机类型",
   "floating ip": "浮动IP",
   "floating ips": "浮动IP",
+  "gigabytes": "容量",
   "heat services": "编排服务",
   "host aggregates": "主机集合",
   "hosts": "主机",

src/pages/database/containers/Instances/Detail/BaseDetail.jsx

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 import { InstanceStatus, policyType } from 'resources/trove/database';
@@ -104,7 +105,17 @@ export class BaseDetail extends Base {
       {
         label: t('Host'),
         dataIndex: 'ip',
-        render: (value) => (value ? value.map((it) => it) : '-'),
+        render: (value) => {
+          return value && value.length ? (
+            <span>
+              {value.map((it) => (
+                <div key={it}>{it}</div>
+              ))}
+            </span>
+          ) : (
+            '-'
+          );
+        },
       },
       {
         label: t('Database Port'),

src/pages/database/containers/Instances/Detail/UserAction.jsx

@@ -14,10 +14,16 @@
 
 import DeleteUser from './UserDelete';
 import CreateUser from './UserCreate';
+import UserDatabase from './UserDatabase';
 
 const actionConfigs = {
   rowActions: {
     firstAction: DeleteUser,
+    moreActions: [
+      {
+        action: UserDatabase,
+      },
+    ],
   },
   batchActions: [DeleteUser],
   primaryActions: [CreateUser],

src/pages/database/containers/Instances/Detail/UserDatabase.jsx

@@ -0,0 +1,94 @@
+// Copyright 2021 99cloud
+//
+// Licensed 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 { inject, observer } from 'mobx-react';
+import ModalAction from 'containers/Action/ModalAction';
+import globalInstancesUsersStore from 'stores/trove/instances-user';
+import { InstancesDatabasesStore } from 'stores/trove/instances-database';
+
+export class UserDatabase extends ModalAction {
+  init() {
+    this.store = globalInstancesUsersStore;
+    this.databaseStore = new InstancesDatabasesStore();
+    this.fetchDatabase();
+  }
+
+  static id = 'grant-databases-access';
+
+  static title = t('Grant Databases Access');
+
+  get name() {
+    return t('Grant Databases Access');
+  }
+
+  static policy = 'instance:extension:user_access:update';
+
+  static allowed() {
+    return Promise.resolve(true);
+  }
+
+  async fetchDatabase() {
+    const { containerProps: { detail: { id } = {} } = {} } = this.props;
+    await this.databaseStore.fetchList({ id });
+    this.updateDefaultValue();
+  }
+
+  get database() {
+    return (this.databaseStore.list.data || []).map((it) => ({
+      label: it.name,
+      value: it.name,
+      key: it.name,
+    }));
+  }
+
+  get defaultValue() {
+    const { name, databases } = this.item;
+    return {
+      name,
+      database: databases,
+    };
+  }
+
+  get formItems() {
+    return [
+      {
+        name: 'name',
+        label: t('Name'),
+        type: 'input-name',
+        required: true,
+        disabled: true,
+      },
+      {
+        name: 'database',
+        label: t('Database'),
+        type: 'select',
+        options: this.database,
+        mode: 'multiple',
+        required: true,
+        loading: this.databaseStore.list.isLoading,
+        disabled: this.databaseStore.list.isLoading,
+      },
+    ];
+  }
+
+  onSubmit = (values, containerProps) => {
+    const { detail: { id } = {} } = containerProps;
+    const data = {
+      databases: values.database.map((it) => ({ name: it })),
+    };
+    return this.store.grantDatabaseAccess({ id, name: values.name, data });
+  };
+}
+
+export default inject('rootStore')(observer(UserDatabase));

src/pages/database/containers/Instances/Detail/Users.jsx

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import Base from 'containers/List';
 import { inject, observer } from 'mobx-react';
 import { InstancesUsersStore } from 'stores/trove/instances-user';
@@ -58,6 +59,17 @@ export class Users extends Base {
       {
         title: t('Databases'),
         dataIndex: 'databases',
+        render: (value) => {
+          return value.length ? (
+            <span>
+              {value.map((it) => (
+                <div key={it}>{it}</div>
+              ))}
+            </span>
+          ) : (
+            '-'
+          );
+        },
       },
     ];
   };

src/pages/database/containers/Instances/index.jsx

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import globalInstancesStore from 'stores/trove/instances';
@@ -65,6 +66,17 @@ export class Instances extends Base {
     {
       title: t('Host'),
       dataIndex: 'ip',
+      render: (value) => {
+        return value && value.length ? (
+          <>
+            {value.map((it) => (
+              <div key={it}>{it}</div>
+            ))}
+          </>
+        ) : (
+          '-'
+        );
+      },
       isHideable: true,
     },
     {

src/stores/trove/instances-user.js

@@ -25,6 +25,10 @@ export class InstancesUsersStore extends Base {
     return client.trove.instances.databases;
   }
 
+  get instanceClient() {
+    return client.trove.instances;
+  }
+
   get isSubResource() {
     return true;
   }
@@ -46,11 +50,9 @@ export class InstancesUsersStore extends Base {
     const { databases = [] } = await this.databaseClient.list(id);
     return items.map((it) => ({
       ...it,
-      databases:
-        (it.databases || [])
-          .filter((l1) => databases.find((l2) => l2.name === l1.name))
-          .map((db) => db.name)
-          .join(' , ') || '-',
+      databases: (it.databases || [])
+        .filter((l1) => databases.find((l2) => l2.name === l1.name))
+        .map((db) => db.name),
     }));
   }
 
@@ -63,6 +65,11 @@ export class InstancesUsersStore extends Base {
   async deleteUser({ id, name }) {
     return this.submitting(this.client.delete(id, name));
   }
+
+  @action
+  async grantDatabaseAccess({ id, name, data }) {
+    return this.submitting(this.instanceClient.grantDatabase(id, name, data));
+  }
 }
 
 const globalInstancesUsersStore = new InstancesUsersStore();