feature: Add openstack service monitor page

add openstack service monitor page

Change-Id: Ib3e6501bec43edfedb1333aac3a2404173126e8f

src/layouts/admin-menu.jsx

@@ -617,6 +617,14 @@ const renderMenu = (t) => {
           children: [],
           hasBreadcrumb: true,
         },
+        {
+          path: '/monitor-center/openstack-service-admin',
+          name: t('OpenStack Service'),
+          key: 'monitorOpenstackServiceAdmin',
+          level: 1,
+          children: [],
+          hasBreadcrumb: true,
+        },
       ],
     },
     {

src/pages/monitor/containers/OpenstackService/Services.jsx

@@ -0,0 +1,85 @@
+// 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 React from 'react';
+import { Col, Collapse, List, Tooltip } from 'antd';
+import { CheckCircleTwoTone, InfoCircleTwoTone } from '@ant-design/icons';
+import styles from './index.less';
+
+const { Panel } = Collapse;
+
+const statusToIcon = {
+  up: (
+    <CheckCircleTwoTone
+      style={{ fontSize: 24, marginLeft: 36 }}
+      twoToneColor="#52C41A"
+    />
+  ),
+  // <WarningTwoTone style={{ fontSize: 24, marginLeft: 36 }} twoToneColor="#FAAD14" />,
+  down: (
+    <InfoCircleTwoTone
+      style={{ fontSize: 24, marginLeft: 36 }}
+      twoToneColor="#EB354D"
+    />
+  ),
+};
+
+const Services = (props) => {
+  const { serviceMap } = props;
+  return (
+    <Collapse defaultActiveKey={serviceMap.map((item) => item.key)} ghost>
+      {serviceMap.map((item) => (
+        <Panel
+          header={<span className={styles.header}>{item.title}</span>}
+          key={item.key}
+        >
+          <List
+            bordered
+            dataSource={item.data}
+            className={styles.list}
+            loading={item.isLoading}
+            renderItem={(it) => (
+              <List.Item className={styles.item}>
+                <Col className={styles.title} span={6}>
+                  {it.engine_id ? (
+                    <Tooltip title={it.engine_id}>
+                      <span>{it.serviceName}</span>
+                    </Tooltip>
+                  ) : (
+                    it.serviceName
+                  )}
+                </Col>
+                <Col className={styles.title} span={6}>
+                  {it.hostname}
+                </Col>
+                <Col className={styles.status} span={6}>
+                  <span>{t('Current Status')}</span>
+                  {statusToIcon[it.state]}
+                </Col>
+                <Col className={styles.status} span={6}>
+                  <span>{t('Last 24H Status')} </span>
+                  {it[`${it.serviceName}24`]
+                    ? statusToIcon[it[`${it.serviceName}24`]]
+                    : statusToIcon.up}
+                </Col>
+              </List.Item>
+            )}
+          />
+        </Panel>
+      ))}
+    </Collapse>
+  );
+};
+
+export default Services;

src/pages/monitor/containers/OpenstackService/index.jsx

@@ -0,0 +1,87 @@
+// 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 React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { OpenstackServiceStore } from 'stores/prometheus/openstack-service';
+import { SyncOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import Services from './Services';
+import styles from '../PhysicalNode/index.less';
+
+@observer
+class OpenstackService extends Component {
+  constructor(props) {
+    super(props);
+    this.store = new OpenstackServiceStore();
+  }
+
+  componentDidMount() {
+    this.getData();
+  }
+
+  getData = async () => {
+    // await this.store.getNodes();
+    await this.store.getChartData();
+  };
+
+  handleRefresh = () => {
+    this.getData();
+  };
+
+  render() {
+    const { nova_service, network_service, other_service, cinder_service } =
+      this.store;
+    const serviceMap = [
+      {
+        key: 'nova_service',
+        title: t('Nova Service'),
+        ...nova_service,
+      },
+      {
+        key: 'network_service',
+        title: t('Neutron Service'),
+        ...network_service,
+      },
+      {
+        key: 'cinder_service',
+        title: t('Cinder Service'),
+        ...cinder_service,
+      },
+      {
+        key: 'other_service',
+        title: t('Other Service'),
+        ...other_service,
+      },
+    ];
+
+    return (
+      <div className={styles.outer}>
+        <div className={styles.inner}>
+          <div className={styles.header}>
+            <Button
+              type="default"
+              icon={<SyncOutlined />}
+              onClick={this.handleRefresh}
+            />
+            {/* <NodeSelect style={{ display: 'inline', marginLeft: 20 }} store={this.store} /> */}
+            <Services serviceMap={serviceMap} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default OpenstackService;

src/pages/monitor/containers/OpenstackService/index.less

@@ -0,0 +1,32 @@
+.header {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 22px;
+}
+
+
+.list {
+  background-color: #FFFFFF;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  border: none;
+
+  .item {
+    height: 76px;
+
+    .title {
+      display: flex;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    .status {
+      display: flex;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+

src/pages/monitor/routes/index.js

@@ -16,6 +16,7 @@ import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import PhysicalNode from '../containers/PhysicalNode';
 import StorageCluster from '../containers/StorageCluster';
+import OpenstackService from '../containers/OpenstackService';
 import Overview from '../containers/Overview';
 
 const PATH = '/monitor-center';
@@ -35,6 +36,11 @@ export default [
         component: StorageCluster,
         exact: true,
       },
+      {
+        path: `${PATH}/openstack-service-admin`,
+        component: OpenstackService,
+        exact: true,
+      },
       { path: '*', component: E404 },
     ],
   },

src/stores/prometheus/openstack-service.js

@@ -77,12 +77,15 @@ export class OpenstackServiceStore extends MonitorBase {
       isLoading: true,
       data: [],
     });
+    const tmp = [];
+    try {
       const [currentState, last24State, libvirtdState, libvirtd24State] =
-      await Promise.all(getPromises.call(this, 'openstackService.novaService'));
+        await Promise.all(
+          getPromises.call(this, 'openstackService.novaService')
+        );
       const {
         data: { result: currentStateResult },
       } = currentState;
-    const tmp = [];
       currentStateResult.forEach((service) => {
         const {
           metric: {
@@ -104,7 +107,8 @@ export class OpenstackServiceStore extends MonitorBase {
         const { metric: { service: serviceName = '', hostname = '' } = {} } =
           service;
         const idx = tmp.findIndex(
-        (item) => item.serviceName === serviceName && item.hostname === hostname
+          (item) =>
+            item.serviceName === serviceName && item.hostname === hostname
         );
         tmp[idx][`${serviceName}24`] = 'down';
       });
@@ -131,10 +135,12 @@ export class OpenstackServiceStore extends MonitorBase {
         );
         tmp[idx].nova_libvirt24 = 'down';
       });
+    } finally {
       set(this.nova_service, {
         isLoading: false,
         data: tmp,
       });
+    }
   };
 
   @action
@@ -143,13 +149,14 @@ export class OpenstackServiceStore extends MonitorBase {
       isLoading: true,
       data: [],
     });
+    const tmp = [];
+    try {
       const [currentState, last24State] = await Promise.all(
         getPromises.call(this, 'openstackService.networkService')
       );
       const {
         data: { result: currentStateResult },
       } = currentState;
-    const tmp = [];
       currentStateResult.forEach((service) => {
         const {
           metric: {
@@ -171,14 +178,17 @@ export class OpenstackServiceStore extends MonitorBase {
         const { metric: { service: serviceName = '', hostname = '' } = {} } =
           service;
         const idx = tmp.findIndex(
-        (item) => item.serviceName === serviceName && item.hostname === hostname
+          (item) =>
+            item.serviceName === serviceName && item.hostname === hostname
         );
         tmp[idx][`${serviceName}24`] = 'down';
       });
+    } finally {
       set(this.network_service, {
         isLoading: false,
         data: tmp,
       });
+    }
   };
 
   @action
@@ -187,13 +197,14 @@ export class OpenstackServiceStore extends MonitorBase {
       isLoading: true,
       data: [],
     });
+    const tmp = [];
+    try {
       const [currentState, last24State] = await Promise.all(
         getPromises.call(this, 'openstackService.cinderService')
       );
       const {
         data: { result: currentStateResult },
       } = currentState;
-    const tmp = [];
       currentStateResult.forEach((service) => {
         const {
           metric: {
@@ -215,14 +226,17 @@ export class OpenstackServiceStore extends MonitorBase {
         const { metric: { service: serviceName = '', hostname = '' } = {} } =
           service;
         const idx = tmp.findIndex(
-        (item) => item.serviceName === serviceName && item.hostname === hostname
+          (item) =>
+            item.serviceName === serviceName && item.hostname === hostname
         );
         tmp[idx][`${serviceName}24`] = 'down';
       });
+    } finally {
       set(this.cinder_service, {
         isLoading: false,
         data: tmp,
       });
+    }
   };
 
   @action
@@ -232,6 +246,7 @@ export class OpenstackServiceStore extends MonitorBase {
       data: [],
     });
     const tmp = [];
+    try {
       let results = await Promise.all(
         getPromises.call(this, 'openstackService.otherService')
       );
@@ -301,11 +316,12 @@ export class OpenstackServiceStore extends MonitorBase {
       //   );
       //   tmp[idx][`${binary}24`] = 'down';
       // });
-
+    } finally {
       set(this.other_service, {
         isLoading: false,
         data: tmp,
       });
+    }
   };
 }