From 194ac88d24f8ba2a3fa9a37471279bad8ae9e9d7 Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Tue, 15 Mar 2022 17:17:47 +0800
Subject: [PATCH] feat: add floating ip tab in qos policy detail page

Add floating ip tab in network qos policy detail page

Change-Id: I07e30d08b27d51dca7facc12397aab7a72be3669
---
 .../containers/FloatingIp/actions/index.jsx   | 48 ++++++++++++-------
 .../network/containers/FloatingIp/index.jsx   | 47 ++++++++++++++----
 .../containers/QoSPolicy/Detail/index.jsx     |  6 +++
 src/stores/neutron/floatingIp.js              |  8 ++++
 4 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/src/pages/network/containers/FloatingIp/actions/index.jsx b/src/pages/network/containers/FloatingIp/actions/index.jsx
index 62e225e1..97d9af17 100644
--- a/src/pages/network/containers/FloatingIp/actions/index.jsx
+++ b/src/pages/network/containers/FloatingIp/actions/index.jsx
@@ -20,24 +20,26 @@ import Disassociate from './Disassociate';
 import Edit from './Edit';
 import CreateDNAT from './CreateDNAT';
 
+const rowActions = {
+  firstAction: Edit,
+  moreActions: [
+    {
+      action: Associate,
+    },
+    {
+      action: Disassociate,
+    },
+    {
+      action: CreateDNAT,
+    },
+    {
+      action: Release,
+    },
+  ],
+};
+
 const actionConfigs = {
-  rowActions: {
-    firstAction: Edit,
-    moreActions: [
-      {
-        action: Associate,
-      },
-      {
-        action: Disassociate,
-      },
-      {
-        action: CreateDNAT,
-      },
-      {
-        action: Release,
-      },
-    ],
-  },
+  rowActions,
   batchActions: [Release],
   primaryActions: [Allocate],
 };
@@ -58,9 +60,21 @@ const instanceDetailConfigs = {
 
 const instanceDetailAdminConfigs = emptyActionConfig;
 
+const qosDetailConfigs = {
+  rowActions,
+};
+
+const qosDetailAdminConfigs = {
+  rowActions: {
+    firstAction: Release,
+  },
+};
+
 export default {
   actionConfigs,
   adminConfigs,
   instanceDetailConfigs,
   instanceDetailAdminConfigs,
+  qosDetailConfigs,
+  qosDetailAdminConfigs,
 };
diff --git a/src/pages/network/containers/FloatingIp/index.jsx b/src/pages/network/containers/FloatingIp/index.jsx
index 920fdfa6..32cb1a54 100644
--- a/src/pages/network/containers/FloatingIp/index.jsx
+++ b/src/pages/network/containers/FloatingIp/index.jsx
@@ -37,19 +37,34 @@ export class FloatingIps extends Base {
   }
 
   get isFilterByBackend() {
-    return true;
+    return !this.inQosDetail;
   }
 
   get isSortByBackend() {
-    return true;
+    return !this.inQosDetail;
   }
 
   get defaultSortKey() {
     return 'status';
   }
 
+  get inQosDetail() {
+    const { pathname } = this.props.location;
+    return this.inDetailPage && pathname.includes('qos');
+  }
+
+  get isRecycleBinDetail() {
+    const { pathname } = this.props.location;
+    return this.inDetailPage && pathname.includes('recycle-bin');
+  }
+
+  get inInstanceDetail() {
+    const { pathname } = this.props.location;
+    return this.inDetailPage && pathname.includes('instance');
+  }
+
   async getData({ silent, ...params } = {}) {
-    if (this.inDetailPage) {
+    if (this.inDetailPage && !this.inQosDetail) {
       silent && (this.list.silent = true);
       const { detail: { addresses = [] } = {} } = this.props;
       const ips = [];
@@ -78,6 +93,18 @@ export class FloatingIps extends Base {
     return true;
   }
 
+  updateFetchParams = (params) => {
+    if (this.inQosDetail) {
+      console.log('params', params);
+      const { id, ...rest } = params;
+      return {
+        qos_policy_id: id,
+        ...rest,
+      };
+    }
+    return params;
+  };
+
   fetchDataByPage = async (params) => {
     await this.store.fetchListWithResourceName(params);
     this.list.silent = false;
@@ -91,20 +118,20 @@ export class FloatingIps extends Base {
     return t('floating ips');
   }
 
-  get isRecycleBinDetail() {
-    const { pathname } = this.props.location;
-    return pathname.indexOf('recycle-bin') >= 0;
-  }
-
   get actionConfigs() {
     if (this.isRecycleBinDetail) {
       return emptyActionConfig;
     }
-    if (this.inDetailPage) {
+    if (this.inInstanceDetail) {
       return this.isAdminPage
         ? actionConfigs.instanceDetailAdminConfigs
         : actionConfigs.instanceDetailConfigs;
     }
+    if (this.inQosDetail) {
+      return this.isAdminPage
+        ? actionConfigs.qosDetailAdminConfigs
+        : actionConfigs.qosDetailConfigs;
+    }
     return this.isAdminPage
       ? actionConfigs.adminConfigs
       : actionConfigs.actionConfigs;
@@ -132,7 +159,7 @@ export class FloatingIps extends Base {
         isLink: true,
         routeName: this.getRouteName('networkQosDetail'),
         idKey: 'qos_policy_id',
-        hidden: !this.qosEndpoint,
+        hidden: !this.qosEndpoint || this.inQosDetail,
       },
       {
         title: t('Project ID/Name'),
diff --git a/src/pages/network/containers/QoSPolicy/Detail/index.jsx b/src/pages/network/containers/QoSPolicy/Detail/index.jsx
index 03652cbc..d8f4e854 100644
--- a/src/pages/network/containers/QoSPolicy/Detail/index.jsx
+++ b/src/pages/network/containers/QoSPolicy/Detail/index.jsx
@@ -15,6 +15,7 @@
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/TabDetail';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
+import FloatingIp from 'pages/network/containers/FloatingIp';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
@@ -87,6 +88,11 @@ export default class QoSPolicyDetail extends Base {
         key: 'BaseDetail',
         component: BaseDetail,
       },
+      {
+        title: t('Floating IP'),
+        key: 'fip',
+        component: FloatingIp,
+      },
     ];
     return tabs;
   }
diff --git a/src/stores/neutron/floatingIp.js b/src/stores/neutron/floatingIp.js
index 75961b4c..8a47edea 100644
--- a/src/stores/neutron/floatingIp.js
+++ b/src/stores/neutron/floatingIp.js
@@ -51,6 +51,14 @@ export class FloatingIpStore extends Base {
     externalNetworkName: '-',
   };
 
+  async listDidFetch(items, allProjects, filters) {
+    const { qos_policy_id } = filters;
+    if (!qos_policy_id) {
+      return items;
+    }
+    return items.filter((it) => it.qos_policy_id === qos_policy_id);
+  }
+
   @action
   async fetchListWithResourceName({
     limit,