fix: fix key pair used count in console overview page

1. Fix key pair used count in console overview page: use the key pair count of current user
2. Add tip to key pair quota title
3. Optimize tooltip when hover progress bar instead of title

Change-Id: I66aed4a6a10685be41fb3d7ef282ca02b4b2f831

src/locales/en.json

@@ -2241,6 +2241,7 @@
   "The name should start with upper letter, lower letter, and be a string of 3 to 63, characters can only contain \"0-9, a-z, A-Z, -\".": "The name should start with upper letter, lower letter, and be a string of 3 to 63, characters can only contain \"0-9, a-z, A-Z, -\".",
   "The new password cannot be identical to the current password.": "The new password cannot be identical to the current password.",
   "The no_proxy address to use for nodes in cluster": "The no_proxy address to use for nodes in cluster",
+  "The number of allowed key pairs for each user.": "The number of allowed key pairs for each user.",
   "The number of vCPU cores should not exceed the maximum number of CPU cores of the physical node. Otherwise it will cause fail to schedule to any physical node when creating instance.": "The number of vCPU cores should not exceed the maximum number of CPU cores of the physical node. Otherwise it will cause fail to schedule to any physical node when creating instance.",
   "The number of virtual cpu for this container": "The number of virtual cpu for this container",
   "The password must not be the same as the previous": "The password must not be the same as the previous",

src/locales/zh.json

@@ -2241,6 +2241,7 @@
   "The name should start with upper letter, lower letter, and be a string of 3 to 63, characters can only contain \"0-9, a-z, A-Z, -\".": "名称应以大写字母，小写字母开头，长度为3-63字符，且只包含“0-9, a-z, A-Z, -”。",
   "The new password cannot be identical to the current password.": "用户新密码不能与原密码相同。",
   "The no_proxy address to use for nodes in cluster": "用于集群中节点的 no_proxy 地址",
+  "The number of allowed key pairs for each user.": "每个用户允许创建的配额数量",
   "The number of vCPU cores should not exceed the maximum number of CPU cores of the physical node. Otherwise it will cause fail to schedule to any physical node when creating instance.": "vCPU核数不应该超过物理节点的最大CPU核数，否则会导致云主机创建时无法调度到任何物理节点。",
   "The number of virtual cpu for this container": "容器的虚拟 CPU 数量",
   "The password must not be the same as the previous": "新密码不能与以前的密码相同",

src/pages/base/containers/Overview/components/QuotaOverview.jsx

@@ -14,6 +14,7 @@
 
 import React, { Component } from 'react';
 import { Badge, Card, Col, List, Progress, Row, Spin, Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { inject, observer } from 'mobx-react';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 import globalProjectStore from 'stores/keystone/project';
@@ -27,6 +28,18 @@ const colors = {
   full: { color: '#E8684A', text: t('Full') },
 };
 
+const keyPairTitle = (
+  <span>
+    {t('Key Pair')}
+    <Tooltip
+      title={t('The number of allowed key pairs for each user.')}
+      getPopupContainer={(node) => node.parentNode}
+    >
+      <QuestionCircleOutlined style={{ marginLeft: 4 }} />
+    </Tooltip>
+  </span>
+);
+
 export const quotaCardList = [
   {
     text: t('Compute'),
@@ -35,7 +48,7 @@ export const quotaCardList = [
       { text: t('Instances'), key: 'instances' },
       { text: t('vCPUs'), key: 'cores' },
       { text: t('Memory (GiB)'), key: 'ram' },
-      { text: t('Key Pair'), key: 'key_pairs' },
+      { text: keyPairTitle, key: 'key_pairs' },
       { text: t('Server Group'), key: 'server_groups' },
     ],
   },
@@ -144,7 +157,10 @@ export class QuotaOverview extends Component {
       const { user } = this.props.rootStore;
       const { project: { id: projectId = '' } = {} } = user;
       const promiseArr = [
-        this.projectStore.fetchProjectQuota({ project_id: projectId }),
+        this.projectStore.fetchProjectQuota({
+          project_id: projectId,
+          withKeyPair: true,
+        }),
       ];
       if (this.enableCinder) {
         promiseArr.push(this.volumeTypeStore.fetchList());
@@ -207,26 +223,38 @@ export class QuotaOverview extends Component {
       (percent >= 90 && colors.full.color) ||
       (percent >= 80 && colors.danger.color) ||
       colors.normal.color;
-    let title = `${i.text} : ${used}`;
+    let title = (
+      <span>
+        {i.text} : {used}
+      </span>
+    );
     const { server_group_members } = data;
     if (i.key === 'server_groups' && server_group_members) {
-      title = `${title}   (${t('Member in group')} : ${
-        server_group_members.limit === -1
-          ? t('Unlimit')
-          : server_group_members.limit
-      })`;
+      title = (
+        <span>
+          {title} ({t('Member in group')} :
+          {server_group_members.limit === -1
+            ? t('Unlimit')
+            : server_group_members.limit}
+          )
+        </span>
+      );
     }
     return (
       <>
-        <Tooltip title={title}>
-          <div className={styles['progress-title']}>{title}</div>
+        <div className={styles['progress-title']}>{title}</div>
+        <Tooltip
+          title={title}
+          placement="top"
+          getPopupContainer={(node) => node.parentNode}
+        >
+          <Progress
+            style={{ marginTop: 13, marginBottom: 13 }}
+            percent={percent}
+            showInfo={false}
+            strokeColor={strokeColor}
+          />
         </Tooltip>
-        <Progress
-          style={{ marginTop: 13, marginBottom: 13 }}
-          percent={percent}
-          showInfo={false}
-          strokeColor={strokeColor}
-        />
       </>
     );
   };

src/stores/keystone/project.js

@@ -18,6 +18,7 @@ import { isNil, isEmpty, isObject } from 'lodash';
 import client from 'client';
 import Base from 'stores/base';
 import globalRootStore from 'stores/root';
+import globalKeypairStore from 'stores/nova/keypair';
 
 export class ProjectStore extends Base {
   @observable
@@ -228,7 +229,7 @@ export class ProjectStore extends Base {
   }
 
   @action
-  async fetchProjectQuota({ project_id }) {
+  async fetchProjectQuota({ project_id, withKeyPair = false }) {
     const promiseArr = [
       this.novaQuotaClient.detail(project_id),
       this.neutronQuotaClient.details(project_id),
@@ -241,8 +242,14 @@ export class ProjectStore extends Base {
     promiseArr.push(
       this.enableShare ? this.shareQuotaClient.showDetail(project_id) : null
     );
-    const [novaResult, neutronResult, cinderResult, shareResult] =
-      await Promise.all(promiseArr);
+    promiseArr.push(withKeyPair ? globalKeypairStore.fetchList() : null);
+    const [
+      novaResult,
+      neutronResult,
+      cinderResult,
+      shareResult,
+      keyPairResult,
+    ] = await Promise.all(promiseArr);
     this.isSubmitting = false;
     const { quota_set: novaQuota } = novaResult;
     const { ram } = novaQuota;
@@ -267,6 +274,11 @@ export class ProjectStore extends Base {
       ...neutronQuota,
       ...renameShareQuota,
     };
+    if (withKeyPair) {
+      const keyPairCount = (keyPairResult || []).length;
+      const keyPairItem = quota.key_pairs || {};
+      keyPairItem.in_use = keyPairCount;
+    }
     const newQuota = this.updateQuotaData(quota);
     this.quota = newQuota;
     return newQuota;