fix: fix component definition of trove

1. Change the component definition to get better extension functionality
2. Add Copyright info to some components
3. Format some codes by prettier plugin

Change-Id: I64f7eb665c85caddcd6cf8b3084e259504c9dee6

src/client/trove/index.js

@@ -46,7 +46,7 @@ class TroveClient extends Base {
           {
             key: 'log',
             responseKey: 'log',
-          }
+          },
         ],
       },
       {

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

@@ -12,53 +12,51 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject("rootStore")
+export class BaseDetail extends Base {
-@observer
-export default class BaseDetail extends Base {
-
   get leftCards() {
-    return [this.baseInfoCard]
+    return [this.baseInfoCard];
   }
 
   get baseInfoCard() {
     const options = [
       {
-        label: t("Datastore"),
+        label: t('Datastore'),
-        dataIndex: "datastore.type"
+        dataIndex: 'datastore.type',
       },
       {
-        label: t("Datastore Version"),
+        label: t('Datastore Version'),
-        dataIndex: "datastore.version"
+        dataIndex: 'datastore.version',
       },
       {
-        label: t("Backup File Location"),
+        label: t('Backup File Location'),
-        dataIndex: "locationRef",
+        dataIndex: 'locationRef',
       },
       {
-        label: t("Initial Volume Size"),
+        label: t('Initial Volume Size'),
-        dataIndex: "size",
+        dataIndex: 'size',
       },
       {
-        label: t("Created"),
+        label: t('Created'),
-        dataIndex: "created",
+        dataIndex: 'created',
       },
       {
-        label: t("Updated"),
+        label: t('Updated'),
-        dataIndex: "updated",
+        dataIndex: 'updated',
-      }
-      ,
-      {
-        label: t("Status"),
-        dataIndex: "status"
       },
-    ]
+      {
+        label: t('Status'),
+        dataIndex: 'status',
+      },
+    ];
 
     return {
-      title: t("Base Info"),
+      title: t('Base Info'),
-      options
+      options,
-    }
+    };
   }
-}
+}
+
+export default inject('rootStore')(observer(BaseDetail));

src/pages/database/containers/Backups/Detail/index.jsx

@@ -17,9 +17,7 @@ import Base from 'containers/TabDetail';
 import { BackupsStore } from 'stores/trove/backups';
 import BaseDetail from './BaseDetail';
 
-@inject('rootStore')
+export class BackupsDetail extends Base {
-@observer
-export default class BackupsDetail extends Base {
   init() {
     this.store = new BackupsStore();
   }
@@ -59,3 +57,5 @@ export default class BackupsDetail extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(BackupsDetail));

src/pages/database/containers/Backups/actions/Create.jsx

@@ -17,9 +17,7 @@ import { inject, observer } from 'mobx-react';
 import globalInstancesStore from 'stores/trove/instances';
 import globalBackupsStore from 'stores/trove/backups';
 
-@inject('rootStore')
+export class Create extends ModalAction {
-@observer
-export default class Create extends ModalAction {
   init() {
     this.store = globalBackupsStore;
     this.getDatabaseInstance();
@@ -91,3 +89,5 @@ export default class Create extends ModalAction {
     });
   };
 }
+
+export default inject('rootStore')(observer(Create));

src/pages/database/containers/Backups/actions/index.jsx

@@ -1,3 +1,16 @@
+// 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 Create from './Create';
 import Delete from './Delete';

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

@@ -15,12 +15,10 @@
 import Base from 'containers/List';
 
 import { inject, observer } from 'mobx-react';
-import actions from './actions';
 import globalBackupsStore from 'stores/trove/backups';
+import actions from './actions';
 
-@inject('rootStore')
+export class Backups extends Base {
-@observer
-export default class Backups extends Base {
   init() {
     this.store = globalBackupsStore;
   }
@@ -50,7 +48,7 @@ export default class Backups extends Base {
     {
       title: t('Backup Name'),
       dataIndex: 'name',
-      routeName: this.getRouteName("databaseBackupDetail")
+      routeName: this.getRouteName('databaseBackupDetail'),
     },
     {
       title: t('Description'),
@@ -58,4 +56,6 @@ export default class Backups extends Base {
       dataIndex: 'description',
     },
   ];
-}
+}
+
+export default inject('rootStore')(observer(Backups));

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

@@ -12,13 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject("rootStore")
+export class BaseDetail extends Base {
-@observer
-export default class BaseDetail extends Base {
-
   get leftCards() {
     return [this.baseInfoCard];
   }
@@ -26,37 +23,36 @@ export default class BaseDetail extends Base {
   get baseInfoCard() {
     const options = [
       {
-        label: t("Name"),
+        label: t('Name'),
-        dataIndex: "name"
+        dataIndex: 'name',
       },
       {
-        label: t("Description"),
+        label: t('Description'),
-        dataIndex: "description"
+        dataIndex: 'description',
       },
       {
-        label: t("Datastore"),
+        label: t('Datastore'),
-        dataIndex: "datastore_name"
+        dataIndex: 'datastore_name',
-      }
+      },
-      ,
       {
-        label: t("Datastore Version"),
+        label: t('Datastore Version'),
-        dataIndex: "datastore_version_name"
+        dataIndex: 'datastore_version_name',
-      }
+      },
-      ,
       {
-        label: t("Created"),
+        label: t('Created'),
-        dataIndex: "created"
+        dataIndex: 'created',
-      }
+      },
-      ,
       {
-        label: t("Updated"),
+        label: t('Updated'),
-        dataIndex: "updated"
+        dataIndex: 'updated',
-      }
+      },
     ];
 
     return {
-      title: t("Base Info"),
+      title: t('Base Info'),
-      options
+      options,
-    }
+    };
   }
-}
+}
+
+export default inject('rootStore')(observer(BaseDetail));

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

@@ -12,13 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "containers/BaseDetail"
+import Base from 'containers/BaseDetail';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-
-@inject("rootStore")
-@observer
-export default class Instances extends Base {
 
+export class Instances extends Base {
   get leftCards() {
     return [this.baseInfoCard];
   }
@@ -26,14 +23,16 @@ export default class Instances extends Base {
   get baseInfoCard() {
     const options = [
       {
-        label: t("Instances"),
+        label: t('Instances'),
-        dataIndex: "instance_count"
+        dataIndex: 'instance_count',
-      }
+      },
-    ]
+    ];
 
     return {
-      title: t("Defaults"),
+      title: t('Defaults'),
-      options
+      options,
-    }
+    };
   }
-}
+}
+
+export default inject('rootStore')(observer(Instances));

src/pages/database/containers/Configurations/Detail/Values.jsx

@@ -12,13 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "containers/BaseDetail"
+import Base from 'containers/BaseDetail';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-
-@inject("rootStore")
-@observer
-export default class Values extends Base {
 
+export class Values extends Base {
   get leftCards() {
     return [this.baseInfoCard];
   }
@@ -36,4 +33,6 @@ export default class Values extends Base {
       options,
     };
   }
-}
+}
+
+export default inject('rootStore')(observer(Values));

src/pages/database/containers/Configurations/Detail/index.jsx

@@ -19,9 +19,7 @@ import BaseDetail from './BaseDetail';
 import Values from './Values';
 import Instances from './Instances';
 
-@inject('rootStore')
+export class ConfigurationsDetail extends Base {
-@observer
-export default class ConfigurationsDetail extends Base {
   init() {
     this.store = globalConfigurationsStore;
   }
@@ -67,3 +65,5 @@ export default class ConfigurationsDetail extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ConfigurationsDetail));

src/pages/database/containers/Configurations/actions/Create.jsx

@@ -18,9 +18,7 @@ import globalInstancesStore from 'stores/trove/instances';
 import globalConfigurationsStore from 'stores/trove/configurations';
 import { toJS } from 'mobx';
 
-@inject('rootStore')
+export class Create extends ModalAction {
-@observer
-export default class Create extends ModalAction {
   init() {
     this.store = globalConfigurationsStore;
     this.getDatastores();
@@ -129,3 +127,5 @@ export default class Create extends ModalAction {
     });
   };
 }
+
+export default inject('rootStore')(observer(Create));

src/pages/database/containers/Configurations/actions/Delete.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { ConfirmAction } from 'containers/Action';
-import globalConfigurationsStore from "stores/trove/configurations";
+import globalConfigurationsStore from 'stores/trove/configurations';
 
 export default class Delete extends ConfirmAction {
   get id() {

src/pages/database/containers/Configurations/actions/index.jsx

@@ -1,3 +1,16 @@
+// 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 Create from './Create';
 import Delete from './Delete';
@@ -7,7 +20,7 @@ const actionConfigs = {
     firstAction: Delete,
   },
   batchActions: [Delete],
-  primaryActions: [Create]
+  primaryActions: [Create],
 };
 
 export default { actionConfigs };

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

@@ -15,13 +15,10 @@
 import Base from 'containers/List';
 
 import { inject, observer } from 'mobx-react';
-import actions from './actions';
 import globalConfigurationsStore from 'stores/trove/configurations';
+import actions from './actions';
 
-@inject('rootStore')
+export class Configurations extends Base {
-@observer
-export default class Configurations extends Base {
-
   init() {
     this.store = globalConfigurationsStore;
   }
@@ -51,7 +48,7 @@ export default class Configurations extends Base {
     {
       title: t('Configuration Group Name'),
       dataIndex: 'name',
-      routeName: this.getRouteName("configurationsDetail")
+      routeName: this.getRouteName('configurationsDetail'),
     },
     {
       title: t('Description'),
@@ -67,4 +64,6 @@ export default class Configurations extends Base {
       dataIndex: 'datastoreVersion',
     },
   ];
-}
+}
+
+export default inject('rootStore')(observer(Configurations));

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

@@ -12,48 +12,47 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "containers/List"
+import Base from 'containers/List';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import { InstanceBackupsStore } from "stores/trove/instanceBackups";
+import { InstanceBackupsStore } from 'stores/trove/instanceBackups';
-
-@inject("rootStore")
-@observer
-export default class Backups extends Base {
 
+export class Backups extends Base {
   init() {
-    this.store = new InstanceBackupsStore()
+    this.store = new InstanceBackupsStore();
   }
 
   get name() {
-    return t("Backups")
+    return t('Backups');
   }
 
   get policy() {
-    return "trove:instance:backups";
+    return 'trove:instance:backups';
   }
 
   getColumns = () => {
     return [
       {
-        title: t("Name"),
+        title: t('Name'),
-        dataIndex: "name"
+        dataIndex: 'name',
       },
       {
-        title: t("Created"),
+        title: t('Created'),
-        dataIndex: "created"
+        dataIndex: 'created',
       },
       {
-        title: t("Backup File"),
+        title: t('Backup File'),
-        dataIndex: "locationRef"
+        dataIndex: 'locationRef',
       },
       {
-        title: t("Incremental"),
+        title: t('Incremental'),
-        dataIndex: "incremental"
+        dataIndex: 'incremental',
       },
       {
-        title: t("Status"),
+        title: t('Status'),
-        dataIndex: "status"
+        dataIndex: 'status',
-      }
+      },
-    ]
+    ];
-  }
+  };
-}
+}
+
+export default inject('rootStore')(observer(Backups));

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

@@ -12,49 +12,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject("rootStore")
+export class BaseDetail extends Base {
-@observer
-export default class BaseDetail extends Base {
-
   get leftCards() {
     return [this.baseInfoCard, this.specsCard, this.connectionInfoCard];
   }
 
   get rightCards() {
-    return [this.faultCard]
+    return [this.faultCard];
   }
 
   get baseInfoCard() {
     const options = [
       {
-        label: t("Name"),
+        label: t('Name'),
-        dataIndex: "name"
+        dataIndex: 'name',
       },
       {
-        label: t("Datastore"),
+        label: t('Datastore'),
-        dataIndex: "datastore.type"
+        dataIndex: 'datastore.type',
       },
       {
-        label: t("Datastore Version"),
+        label: t('Datastore Version'),
-        dataIndex: "datastore.version"
+        dataIndex: 'datastore.version',
       },
       {
-        label: t("Status"),
+        label: t('Status'),
-        dataIndex: "status"
+        dataIndex: 'status',
       },
       {
-        label: t("Locality"),
+        label: t('Locality'),
-        dataIndex: "locality"
+        dataIndex: 'locality',
-      }
+      },
     ];
 
     return {
-      title: t("Base Info"),
+      title: t('Base Info'),
-      options
+      options,
-    }
+    };
   }
 
   get specsCard() {
@@ -63,47 +60,52 @@ export default class BaseDetail extends Base {
         label: t('Flavor'),
         dataIndex: 'flavor.id',
         render: (value) => {
-          return this.getLinkRender('flavorDetail', value, {
+          return this.getLinkRender(
-            id: value,
+            'flavorDetail',
-          }, null)
+            value,
+            {
+              id: value,
+            },
+            null
+          );
         },
       },
       {
-        label: t("Volume Size"),
+        label: t('Volume Size'),
-        dataIndex: "volume.size"
+        dataIndex: 'volume.size',
       },
       {
-        label: t("Created"),
+        label: t('Created'),
-        dataIndex: "created",
+        dataIndex: 'created',
-        valueRender: "toLocalTime"
+        valueRender: 'toLocalTime',
       },
       {
-        label: t("Updated"),
+        label: t('Updated'),
-        dataIndex: "updated",
+        dataIndex: 'updated',
-        valueRender: "toLocalTime"
+        valueRender: 'toLocalTime',
       },
       {
-        label: t("Service Status Updated"),
+        label: t('Service Status Updated'),
-        dataIndex: "service_status_update"
+        dataIndex: 'service_status_update',
-      }
+      },
     ];
 
     return {
-      title: t("Specs"),
+      title: t('Specs'),
-      options
+      options,
-    }
+    };
   }
 
   get connectionInfoCard() {
     const options = [
       {
-        label: t("Host"),
+        label: t('Host'),
-        dataIndex: "ip",
+        dataIndex: 'ip',
-        render: (value) => value ? value.map(it => it) : "-",
+        render: (value) => (value ? value.map((it) => it) : '-'),
       },
       {
-        label: t("Database Port"),
+        label: t('Database Port'),
-        dataIndex: "datastore.type",
+        dataIndex: 'datastore.type',
         render: (value) => {
           switch (value) {
             case 'mysql':
@@ -115,41 +117,43 @@ export default class BaseDetail extends Base {
             default:
               break;
           }
-        }
+        },
       },
       {
-        label: t("Connection Examples"),
+        label: t('Connection Examples'),
-        dataIndex: "connection_examples"
+        dataIndex: 'connection_examples',
-      }
+      },
     ];
 
     return {
-      title: t("Connection Information"),
+      title: t('Connection Information'),
-      options
+      options,
-    }
+    };
   }
 
   get faultCard() {
     const options = [
       {
-        label: t("Created"),
+        label: t('Created'),
-        dataIndex: "created",
+        dataIndex: 'created',
-        valueRender: "toLocalTime"
+        valueRender: 'toLocalTime',
       },
       {
-        label: t("Message"),
+        label: t('Message'),
-        dataIndex: "fault.message"
+        dataIndex: 'fault.message',
       },
       {
-        label: t("Message Details"),
+        label: t('Message Details'),
-        dataIndex: "fault.details"
+        dataIndex: 'fault.details',
-      }
+      },
     ];
 
     return {
-      title: t("Fault"),
+      title: t('Fault'),
       labelCol: 2,
-      options
+      options,
-    }
+    };
   }
-}
+}
+
+export default inject('rootStore')(observer(BaseDetail));

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

@@ -1,3 +1,17 @@
+// 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 DeleteDatabase from './DatabaseDelete';
 
 const actionConfigs = {
@@ -5,7 +19,7 @@ const actionConfigs = {
     firstAction: DeleteDatabase,
   },
   batchActions: [DeleteDatabase],
-  primaryActions: []
+  primaryActions: [],
 };
 
 export default actionConfigs;

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

@@ -1,3 +1,17 @@
+// 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 { ConfirmAction } from 'containers/Action';
 import globalInstancesDatabases from 'stores/trove/instances-database';
 
@@ -20,11 +34,11 @@ export default class DatabaseDelete extends ConfirmAction {
 
   allowedCheckFunction = () => true;
 
-  policy = "trove:instance:extension:database:delete";
+  policy = 'trove:instance:extension:database:delete';
 
   onSubmit = (item) => {
-    const id = this.containerProps.detail.id;
+    const { id } = this.containerProps.detail;
     const name = item.name || this.item.name;
     return globalInstancesDatabases.deleteDatabase({ id, name });
   };
-}
+}

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

@@ -12,24 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "containers/List"
+import Base from 'containers/List';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import { InstancesDatabasesStore } from "stores/trove/instances-database";
+import { InstancesDatabasesStore } from 'stores/trove/instances-database';
-import actions from "./DatabaseAction";
+import actions from './DatabaseAction';
-
-@inject("rootStore")
-@observer
-export default class Databases extends Base {
 
+export class Databases extends Base {
   init() {
-    this.store = new InstancesDatabasesStore()
+    this.store = new InstancesDatabasesStore();
   }
+
   get name() {
-    return "Databases"
+    return 'Databases';
   }
 
   get policy() {
-    return "trove:instance:detail"
+    return 'trove:instance:detail';
   }
 
   get actionConfigs() {
@@ -43,9 +41,11 @@ export default class Databases extends Base {
   getColumns = () => {
     return [
       {
-        title: t("Database Name"),
+        title: t('Database Name'),
-        dataIndex: "name"
+        dataIndex: 'name',
-      }
+      },
-    ]
+    ];
-  }
+  };
-}
+}
+
+export default inject('rootStore')(observer(Databases));

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

@@ -12,28 +12,29 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "containers/BaseDetail"
+import Base from 'containers/BaseDetail';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-
+import { get as _get } from 'lodash';
-@inject("rootStore")
-@observer
-export default class Defaults extends Base {
 
+export class Defaults extends Base {
   get leftCards() {
-    return [this.baseInfoCard]
+    return [this.baseInfoCard];
   }
 
   get baseInfoCard() {
     const options = [
       {
-        label: t("Number of Nodes"),
+        label: t('Number of Nodes'),
-        dataIndex: "node_groups[0].count"
+        dataIndex: 'node_groups',
-      }
+        render: (value) => _get(value, ['0', 'count'], '-'),
+      },
     ];
 
     return {
-      title: t("Defaults"),
+      title: t('Defaults'),
-      options
+      options,
     };
   }
-}
+}
+
+export default inject('rootStore')(observer(Defaults));

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

@@ -12,32 +12,31 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "containers/List"
+import Base from 'containers/List';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import { InstancesLogStore } from "stores/trove/instancesLogs";
+import { InstancesLogStore } from 'stores/trove/instancesLogs';
-
-@inject("rootStore")
-@observer
-export default class Logs extends Base {
 
+export class Logs extends Base {
   init() {
-    this.store = new InstancesLogStore()
+    this.store = new InstancesLogStore();
   }
 
   get name() {
-    return t("Log")
+    return t('Log');
   }
 
   get policy() {
-    return "trove:instance:guest_log_list";
+    return 'trove:instance:guest_log_list';
   }
 
   getColumns = () => {
     return [
       {
-        title: t("Name"),
+        title: t('Name'),
-        dataIndex: "name"
+        dataIndex: 'name',
-      }
+      },
-    ]
+    ];
-  }
+  };
-}
+}
+
+export default inject('rootStore')(observer(Logs));

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

@@ -1,3 +1,17 @@
+// 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 DeleteUser from './UserDelete';
 
 const actionConfigs = {
@@ -5,7 +19,7 @@ const actionConfigs = {
     firstAction: DeleteUser,
   },
   batchActions: [DeleteUser],
-  primaryActions: []
+  primaryActions: [],
 };
 
 export default actionConfigs;

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

@@ -1,3 +1,17 @@
+// 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 { ConfirmAction } from 'containers/Action';
 import globalInstancesUsersStore from 'stores/trove/instances-user';
 
@@ -23,8 +37,8 @@ export default class UserDelete extends ConfirmAction {
   policy = 'trove:instance:extension:user:delete';
 
   onSubmit = (item) => {
-    const id = this.containerProps.detail.id;
+    const { id } = this.containerProps.detail;
     const name = item.name || this.item.name;
-    return globalInstancesUsersStore.deleteUser({id, name});
+    return globalInstancesUsersStore.deleteUser({ id, name });
   };
-}
+}

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

@@ -15,11 +15,10 @@
 import Base from 'containers/List';
 import { inject, observer } from 'mobx-react';
 import { InstancesUsersStore } from 'stores/trove/instances-user';
+import { get as _get } from 'lodash';
 import actions from './UserAction';
 
-@inject('rootStore')
+export class Users extends Base {
-@observer
-export default class Users extends Base {
   init() {
     this.store = new InstancesUsersStore();
   }
@@ -52,8 +51,11 @@ export default class Users extends Base {
       },
       {
         title: t('Databases'),
-        dataIndex: 'databases.name',
+        dataIndex: 'databases',
+        render: (value) => _get(value, 'name', '-'),
       },
     ];
   };
 }
+
+export default inject('rootStore')(observer(Users));

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

@@ -22,9 +22,7 @@ import Backups from './Backups';
 import Logs from './Logs';
 import Defaults from './Defaults';
 
-@inject('rootStore')
+export class InstancesDetail extends Base {
-@observer
-export default class InstancesDetail extends Base {
   init() {
     this.store = globalInstancesStore;
   }
@@ -97,3 +95,5 @@ export default class InstancesDetail extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(InstancesDetail));

src/pages/database/containers/Instances/actions/Delete.jsx

@@ -39,4 +39,4 @@ export default class Delete extends ConfirmAction {
   onSubmit = (item) => {
     return globalInstancesStore.delete({ id: item.id });
   };
-}
+}

src/pages/database/containers/Instances/actions/StepCreate/StepAdvanced/index.jsx

@@ -1,10 +1,22 @@
+// 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 Base from 'components/Form';
 import globalInstancesStore from 'stores/trove/instances';
 
-@inject('rootStore')
+export class StepAdvanced extends Base {
-@observer
-export default class StepAdvanced extends Base {
   init() {
     this.getConfigurationGroups();
   }
@@ -49,3 +61,5 @@ export default class StepAdvanced extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(StepAdvanced));

src/pages/database/containers/Instances/actions/StepCreate/StepDetails/index.jsx

@@ -20,9 +20,7 @@ import globalInstancesStore from 'stores/trove/instances';
 import globalAvailabilityZoneStore from 'stores/nova/zone';
 import FlavorSelectTable from 'pages/compute/containers/Instance/components/FlavorSelectTable';
 
-@inject('rootStore')
+export class StepDetails extends Base {
-@observer
-export default class StepDetails extends Base {
   init() {
     this.instancesStore = globalInstancesStore;
     this.getDatastores();
@@ -226,3 +224,5 @@ export default class StepDetails extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(StepDetails));

src/pages/database/containers/Instances/actions/StepCreate/StepInitializeDatabases/index.jsx

@@ -1,11 +1,21 @@
+// 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 Base from 'components/Form';
 
-@inject('rootStore')
+export class StepInitializeDatabases extends Base {
-@observer
-export default class StepInitializeDatabases extends Base {
-
   get title() {
     return t('Initialize Databases');
   }
@@ -18,7 +28,7 @@ export default class StepInitializeDatabases extends Base {
 
   get defaultValue() {
     const values = {
-      project: this.currentProjectName
+      project: this.currentProjectName,
     };
     return values;
   }
@@ -54,3 +64,5 @@ export default class StepInitializeDatabases extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(StepInitializeDatabases));

src/pages/database/containers/Instances/actions/StepCreate/StepNetworking/index.jsx

@@ -1,15 +1,27 @@
+// 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 Base from 'components/Form';
 import globalNetworkStore from 'stores/neutron/network';
 
-@inject('rootStore')
+export class StepNetworking extends Base {
-@observer
-export default class StepNetworking extends Base {
-
   init() {
     this.getNetworkStore();
     this.selectedNetwork = [];
   }
+
   get title() {
     return t('Networking *');
   }
@@ -17,10 +29,11 @@ export default class StepNetworking extends Base {
   get name() {
     return 'Networking';
   }
+
   get networking() {
     return (globalNetworkStore.list.data || []).map((it) => ({
       label: it.name,
-      value: it.id
+      value: it.id,
     }));
   }
 
@@ -32,11 +45,11 @@ export default class StepNetworking extends Base {
 
   onChangeNetworkGroup = (checkedValues) => {
     this.selectedNetwork = checkedValues;
-  }
+  };
 
   get defaultValue() {
     const values = {
-      project: this.currentProjectName
+      project: this.currentProjectName,
     };
     return values;
   }
@@ -60,3 +73,5 @@ export default class StepNetworking extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(StepNetworking));

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

@@ -20,9 +20,7 @@ import StepNetworking from './StepNetworking';
 import StepInitializeDatabases from './StepInitializeDatabases';
 import StepAdvanced from './StepAdvanced';
 
-@inject('rootStore')
+export class StepCreate extends StepAction {
-@observer
-export default class StepCreate extends StepAction {
   init() {
     this.store = globalInstancesStore;
   }
@@ -114,3 +112,5 @@ export default class StepCreate extends StepAction {
     });
   };
 }
+
+export default inject('rootStore')(observer(StepCreate));

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

@@ -16,11 +16,10 @@ import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import globalInstancesStore from 'stores/trove/instances';
 import { InstanceStatus } from 'resources/database';
+import { get as _get } from 'lodash';
 import actions from './actions';
 
-@inject('rootStore')
+export class Instances extends Base {
-@observer
-export default class Instances extends Base {
   init() {
     this.store = globalInstancesStore;
   }
@@ -54,11 +53,13 @@ export default class Instances extends Base {
     },
     {
       title: t('Datastore'),
-      dataIndex: 'datastore.type',
+      dataIndex: 'datastore',
+      render: (value) => _get(value, 'type', '-'),
     },
     {
       title: t('Datastore Version'),
-      dataIndex: 'datastore.version',
+      dataIndex: 'datastore',
+      render: (value) => _get(value, 'version', '-'),
       isHideable: true,
     },
     {
@@ -79,3 +80,5 @@ export default class Instances extends Base {
     },
   ];
 }
+
+export default inject('rootStore')(observer(Instances));

src/pages/database/routes/index.jsx

@@ -31,11 +31,27 @@ export default [
       { path: `${PATH}/instances`, component: Instances, exact: true },
       { path: `${PATH}/instances/create`, component: StepCreate, exact: true },
       { path: `${PATH}/backups`, component: Backups, exact: true },
-      { path: `${PATH}/configurations`, component: Configurations, exact: true },
+      {
-      { path: `${PATH}/instances/detail/:id`, component: InstancesDetail, exact: true },
+        path: `${PATH}/configurations`,
-      { path: `${PATH}/backups/detail/:id`, component: BackupsDetail, exact: true },
+        component: Configurations,
-      { path: `${PATH}/configurations/detail/:id`, component: ConfigurationsDetail, exact: true },  
+        exact: true,
+      },
+      {
+        path: `${PATH}/instances/detail/:id`,
+        component: InstancesDetail,
+        exact: true,
+      },
+      {
+        path: `${PATH}/backups/detail/:id`,
+        component: BackupsDetail,
+        exact: true,
+      },
+      {
+        path: `${PATH}/configurations/detail/:id`,
+        component: ConfigurationsDetail,
+        exact: true,
+      },
       { path: '*', component: E404 },
-    ]
+    ],
-  }
+  },
-]
+];

src/stores/trove/configurations.js

@@ -19,4 +19,4 @@ export class ConfigurationsStore extends Base {
 }
 
 const globalConfigurationsStore = new ConfigurationsStore();
-export default globalConfigurationsStore;
+export default globalConfigurationsStore;

src/stores/trove/instanceBackups.js

@@ -29,9 +29,9 @@ export class InstanceBackupsStore extends Base {
   }
 
   get paramsFunc() {
-    return () => { };
+    return () => {};
   }
 }
 
 const globalInstanceBackups = new InstanceBackupsStore();
-export default globalInstanceBackups;
+export default globalInstanceBackups;

src/stores/trove/instances-user.js

@@ -43,4 +43,4 @@ export class InstancesUsersStore extends Base {
 }
 
 const globalInstancesUsersStore = new InstancesUsersStore();
-export default globalInstancesUsersStore;
+export default globalInstancesUsersStore;

src/stores/trove/instances.js

@@ -65,4 +65,4 @@ export class InstancesStore extends Base {
 }
 
 const globalInstancesStore = new InstancesStore();
-export default globalInstancesStore;
+export default globalInstancesStore;

src/stores/trove/instancesLogs.js

@@ -29,9 +29,9 @@ export class InstancesLogStore extends Base {
   }
 
   get paramsFunc() {
-    return () => { };
+    return () => {};
   }
 }
 
 const globalInstancesLog = new InstancesLogStore();
-export default globalInstancesLog;
+export default globalInstancesLog;