feat: Add cluster nodes pages

src/components/Cards/Annotations/index.jsx

@@ -0,0 +1,46 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react'
+import { Panel } from 'components/Base'
+import { isEmpty } from 'lodash'
+
+import styles from './index.scss'
+
+export default class Annotations extends Component {
+  render() {
+    const { annotations } = this.props
+
+    if (isEmpty(annotations)) {
+      return null
+    }
+
+    return (
+      <Panel title={t('Annotations')}>
+        <ul className={styles.values}>
+          {Object.entries(annotations).map(([key, value]) => (
+            <li key={key}>
+              <span className={styles.title}>{key}</span>
+              <span>{String(value)}</span>
+            </li>
+          ))}
+        </ul>
+      </Panel>
+    )
+  }
+}

src/components/Cards/Annotations/index.scss

@@ -0,0 +1,29 @@
+@import '~scss/variables';
+
+.values {
+  & > li {
+    padding: 12px 32px;
+    border-radius: 60px;
+    background-color: $bg-color;
+    border: solid 1px $border-color;
+    font-family: $font-family-id;
+
+    & + li {
+      margin-top: 8px;
+    }
+  }
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+
+    & + span {
+      margin-left: 75px;
+    }
+  }
+
+  .title {
+    width: 317px;
+    color: $dark-color01;
+  }
+}

src/components/Cards/Labels/index.jsx

@@ -0,0 +1,41 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react'
+import { Panel, Label } from 'components/Base'
+import { isEmpty } from 'lodash'
+
+export default class Labels extends Component {
+  render() {
+    const { labels } = this.props
+
+    if (isEmpty(labels)) {
+      return null
+    }
+
+    return (
+      <Panel title={t('Labels')}>
+        <div>
+          {Object.entries(labels).map(([key, value]) => (
+            <Label key={key} name={key} value={value} />
+          ))}
+        </div>
+      </Panel>
+    )
+  }
+}

src/components/Cards/Monitoring/MonitorTab/index.jsx

@@ -0,0 +1,119 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { get, isEmpty } from 'lodash'
+
+import { getAreaChartOps, getValueByUnit } from 'utils/monitoring'
+
+import { Text } from 'components/Base'
+
+import { SimpleArea } from 'components/Charts'
+
+import styles from './index.scss'
+
+export default class MonitorTab extends React.Component {
+  static propTypes = {
+    tabs: PropTypes.array,
+  }
+
+  static defaultProps = {
+    tabs: [],
+  }
+
+  state = {
+    activeTab: get(this, 'props.tabs[0].key', ''),
+  }
+
+  getLastValue = (data, unit) => {
+    const values = get(data, `[0].values`, [])
+    return getValueByUnit(values[values.length - 1][1], unit)
+  }
+
+  handleTabClick = e =>
+    this.setState({ activeTab: e.currentTarget.dataset.key })
+
+  renderTabList() {
+    const { tabs } = this.props
+    const { activeTab } = this.state
+
+    if (isEmpty(tabs)) return null
+
+    return (
+      <div className={styles.tabHeader}>
+        {tabs.map(tab => (
+          <div
+            key={tab.key}
+            className={classnames(styles.tabHeaderItem, {
+              [styles.active]: tab.key === activeTab,
+            })}
+            data-key={tab.key}
+            onClick={this.handleTabClick}
+          >
+            <Text
+              icon={tab.icon}
+              title={
+                !tab.data ? '-' : `${this.getLastValue(tab.data, tab.unit)}%`
+              }
+              description={tab.title}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  renderTabContent() {
+    const { tabs } = this.props
+    const { activeTab } = this.state
+
+    const tab = tabs.find(_tab => _tab.key === activeTab)
+
+    if (!tab || !tab.data) {
+      return null
+    }
+
+    const config = getAreaChartOps(tab)
+
+    return (
+      <div className={styles.tabContent}>
+        <SimpleArea
+          width="100%"
+          height={200}
+          theme="dark"
+          yAxis={{
+            hide: true,
+            domain: [0, 100],
+          }}
+          {...config}
+        />
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div className={styles.wrapper}>
+        {this.renderTabList()}
+        {this.renderTabContent()}
+      </div>
+    )
+  }
+}

src/components/Cards/Monitoring/MonitorTab/index.scss

@@ -0,0 +1,34 @@
+@import '~scss/variables';
+@import '~scss/mixins';
+
+.wrapper {
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
+.tabHeader {
+  padding: 0 12px;
+  background-color: $light-color01;
+
+  &Item {
+    display: inline-block;
+    width: 207px;
+    padding: 12px;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      background-color: #fff;
+    }
+  }
+}
+
+.tabContent {
+  padding: 12px;
+}
+
+.chartWrapper {
+  position: relative;
+  background-color: $dark-color07;
+  border-radius: $border-radius;
+}