fix: Fix for security groups

1. fix for security groups page in port detail
2. add loading for security groups in port detail

Change-Id: I825050097ec763fa6ef6db2bbd9a2955e62f7a13

jsconfig.json

@@ -5,6 +5,7 @@
     "experimentalDecorators": true,
     "paths": {
       "@/*": ["./src/*"],
+      "client/*": ["./src/client/*"],
       "src/*": ["./src/*"],
       "asset/*": ["./src/asset/*"],
       "image/*": ["./src/asset/image/*"],

src/components/TableButton/RuleButton.jsx

@@ -17,6 +17,10 @@ import TableButton from 'components/TableButton';
 import { getSelfColumns } from 'resources/security-group-rule';
 
 export default class RuleButton extends Component {
+  getUrl(path, adminStr) {
+    return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
+  }
+
   render() {
     const { item: { security_group_rules: datas = [] } = {} } = this.props;
     const configs = {

src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.jsx

@@ -124,7 +124,6 @@ export default class SecurityGroup extends React.Component {
 
   render() {
     const { security_groups } = this.store;
-
     return (
       <div className={classnames(styles.wrapper, this.className)}>
         {this.isAdminPage ? null : (
@@ -136,8 +135,8 @@ export default class SecurityGroup extends React.Component {
             />
           </div>
         )}
-        {security_groups.data && security_groups.data.length !== 0 ? (
-          <Spin spinning={security_groups.isLoading}>
+        <Spin spinning={security_groups.isLoading}>
+          {security_groups.data && security_groups.data.length !== 0 ? (
             <Collapse
               className={styles.collapse}
               accordion
@@ -150,13 +149,13 @@ export default class SecurityGroup extends React.Component {
                 this.renderPanel(item, index)
               )}
             </Collapse>
-          </Spin>
-        ) : (
-          <Empty
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
-            style={{ backgroundColor: 'white', padding: '32px 0' }}
-          />
-        )}
+          ) : (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              style={{ backgroundColor: 'white', padding: '32px 0' }}
+            />
+          )}
+        </Spin>
       </div>
     );
   }