fix: rainbond cluster (goodrain#1346)

* fix: install cluster init * fix: etcd file * perf: Installing a cluster Signed-off-by: songyg <[email protected]> * perf: install implementation scheme Signed-off-by: songyg <[email protected]> * fix: Connect with cluster English culture Signed-off-by: songyg <[email protected]> * fix: The host is installed in the interconnection cluster Signed-off-by: songyg <[email protected]> * fix: Docking cluster optimization Signed-off-by: songyg <[email protected]> * fix: Docking group English cultural translation Signed-off-by: songyg <[email protected]> * fix: Interconnecting cluster Description Signed-off-by: songyg <[email protected]> * fix: Add tip to the host installation cluster * feat: add cluster tip and translate (goodrain#1332) * feat: add cluster tip and translate Signed-off-by: Qi Zhang <[email protected]> * feat: add cluster init tip and translate Signed-off-by: Qi Zhang <[email protected]> --------- Signed-off-by: Qi Zhang <[email protected]> * fix: yaml preview beyond scroll * fix: Number type of the port connected to the cluster * fix: modify input password Signed-off-by: Qi Zhang <[email protected]> * fix: The cluster progress query window is removed * fix: The progress of adding cluster nodes is displayed * fix: View the initialization progress * fix: The host installation cluster is faulty * fix: java maven cmd * fix: rainbond install --------- Signed-off-by: songyg <[email protected]> Signed-off-by: Qi Zhang <[email protected]> Co-authored-by: songyg <[email protected]> Co-authored-by: Qi Zhang <[email protected]>
RainBondsongyg · Mar 15, 2024 · f5611ef · f5611ef
1 parent 26a95ab
commit f5611ef
Show file tree

Hide file tree

Showing 45 changed files with 3,644 additions and 1,906 deletions.
diff --git a/config/config.js b/config/config.js
@@ -49,11 +49,11 @@ export default {
  routes: routerConfig,
  proxy: {
  '/console': {
- target: 'http://127.0.0.1:8000',
+ target: 'http://127.0.0.1:7070',
  changeOrigin: true
  },
  '/data': {
- target: 'http://127.0.0.1:8000',
+ target: 'http://127.0.0.1:7070',
  changeOrigin: true
  }
  }

diff --git a/config/router.config.js b/config/router.config.js
@@ -239,6 +239,13 @@ export default [
  name: 'RainbondInit',
  authority: ['admin', 'user']
  },
+ {
+ path:
+ '/enterprise/:eid/provider/:provider/kclusters/:clusterID/check',
+ component: './AddCluster/RainbondComponentCheck',
+ name: 'RainbondComponentCheck',
+ authority: ['admin', 'user']
+ },
  {
  path:
  '/enterprise/:eid/provider/:provider/kclusters/:clusterID/link',

diff --git a/src/components/Cluster/ClusterComponents/index.js b/src/components/Cluster/ClusterComponents/index.js
@@ -1,10 +1,10 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-underscore-dangle */
-import { Button, Col, Collapse, Icon, Modal, Row, Spin } from 'antd';
+import { Button, Col, Collapse, Icon, Modal, Row, Spin, Card } from 'antd';
 import { connect } from 'dva';
 import moment from 'moment';
 import React, { PureComponent } from 'react';
-import { formatMessage, FormattedMessage  } from 'umi-plugin-locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-locale';
 import { getPodEvent, getRainbondComponents } from '../../../services/cloud';
 import handleAPIError from '../../../utils/error';
 import styles from '../../CreateTeam/index.less';
@@ -28,8 +28,12 @@ class ClusterComponents extends PureComponent {
  };
  }
  componentDidMount() {
+ this.refresh = true;
  this.fetchRainbondComponents();
  }
+ componentWillUnmount() {
+ this.refresh = false;
+ }
  fetchRainbondComponents = () => {
  const { eid, clusterID, providerName } = this.props;
  const { componentInfo } = this.state;
@@ -40,18 +44,20 @@ class ClusterComponents extends PureComponent {
  })
  .then(res => {
  const list = (res && res.response_data) || [];
- if (componentInfo) {
- let info = false;
- list.map(item => {
- if (
- componentInfo.app === item.app &&
- item.pods &&
- item.pods.length
- ) {
- info = Object.assign({}, item.pods[0], { app: item.app });
- }
- });
- this.handleComponentDetails(info);
+ let info = false;
+ list.map(item => {
+ if (
+ componentInfo.app === item.app &&
+ item.pods &&
+ item.pods.length
+ ) {
+ info = Object.assign({}, item.pods[0], { app: item.app });
+ }
+ });
+ this.handleComponentDetails(info);
+
+ if (this.refresh) {
+ setTimeout(() => this.fetchRainbondComponents(), 4000);
  }
  this.setState({
  list
@@ -68,6 +74,7 @@ class ClusterComponents extends PureComponent {
  if (code && code !== 7002) {
  handleAPIError(err);
  }
+ this.fetchRainbondComponents()
  })
  .finally(() => {
  this.setState({
@@ -136,7 +143,7 @@ class ClusterComponents extends PureComponent {
  );
  };
  render() {
- const { onCancel } = this.props;
+ const { onCancel, openInitInfo } = this.props;
  const {
  list,
  evens,
@@ -173,27 +180,12 @@ class ClusterComponents extends PureComponent {
  </Button>
  );
  return (
- <Modal
- visible
- title={
- componentInfo
- ? `${formatMessage({id:'enterpriseColony.ClusterComponents.details'})}`
- : `${formatMessage({id:'enterpriseColony.ClusterComponents.Rainbond'})}` + `(${runningApp.length}/${toatlApp})`
- }
- className={styles.TelescopicModal}
- width={1100}
- onCancel={onCancel}
- footer={
- <Button
- style={{ marginTop: '20px' }}
- onClick={() => {
- onCancel();
- }}
- >
- {formatMessage({id:'button.close'})}
- </Button>
- }
- >
+ <div>
+ <div className={styless.componentTitle}>
+ {componentInfo
+ ? `${formatMessage({ id: 'enterpriseColony.ClusterComponents.details' })}`
+ : `${formatMessage({ id: 'enterpriseColony.ClusterComponents.Rainbond' })}` + `(${runningApp.length}/${toatlApp})`}
+ </div>
  <Spin
  spinning={
  componentInfo
@@ -202,7 +194,7 @@ class ClusterComponents extends PureComponent {
  }
  >
  {componentInfo ? (
- <div>
+ <div className={styless.copmonentDetail}>
  <div style={{ marginBottom: '20px' }}>
  <Icon
  type="arrow-left"
@@ -211,9 +203,7 @@ class ClusterComponents extends PureComponent {
  this.handleComponentDetails(false);
  }}
  />
- {reloadBtn}
  </div>
-
  <div className={styless.componentHeader}>
  <div>
  Pod:
@@ -230,15 +220,15 @@ class ClusterComponents extends PureComponent {
  <div className={styless.componentBox}>
  <div>
  <div>
- <span><FormattedMessage id='enterpriseColony.ClusterComponents.Name'/></span>
+ <span><FormattedMessage id='enterpriseColony.ClusterComponents.Name' /></span>
  <span>
  {componentInfo.metadata &&
  componentInfo.metadata.namespace}
  </span>
  </div>
  <div style={{ width: '66.66%', border: 'none' }}>
  <div className={styless.componentBoxs}>
- <div><FormattedMessage id='enterpriseColony.ClusterComponents.Image'/></div>
+ <div><FormattedMessage id='enterpriseColony.ClusterComponents.Image' /></div>
  <div>
  {componentInfo.spec &&
  componentInfo.spec.containers &&
@@ -267,15 +257,15 @@ class ClusterComponents extends PureComponent {
  </div>
  <div>
  <p>
- <span><FormattedMessage id='enterpriseColony.ClusterComponents.Time'/></span>
+ <span><FormattedMessage id='enterpriseColony.ClusterComponents.Time' /></span>
  {componentInfo.metadata &&
  componentInfo.metadata.creationTimestamp &&
  moment(componentInfo.metadata.creationTimestamp).format(
  'YYYY-MM-DD HH:mm:ss'
  )}
  </p>
  <p>
- <span><FormattedMessage id='enterpriseColony.ClusterComponents.Number'/></span>
+ <span><FormattedMessage id='enterpriseColony.ClusterComponents.Number' /></span>
  {componentInfo.status &&
  componentInfo.status.containerStatuses &&
  componentInfo.status.containerStatuses.length &&
@@ -292,19 +282,19 @@ class ClusterComponents extends PureComponent {
  <Panel
  header={
  <div className={styless.panelBox}>
- <div><FormattedMessage id='enterpriseColony.ClusterComponents.container'/></div>
- <div><FormattedMessage id='enterpriseColony.ClusterComponents.Container_pod'/></div>
+ <div><FormattedMessage id='enterpriseColony.ClusterComponents.container' /></div>
+ <div><FormattedMessage id='enterpriseColony.ClusterComponents.Container_pod' /></div>
  </div>
  }
  key="1"
  >
  <div className={styless.customTables}>
  <Row className={styless.customTablesTit}>
- <Col span={4}><FormattedMessage id='enterpriseColony.ClusterComponents.state'/></Col>
- <Col span={6}><FormattedMessage id='enterpriseColony.ClusterComponents.name'/></Col>
- <Col span={10}><FormattedMessage id='enterpriseColony.ClusterComponents.image'/></Col>
+ <Col span={4}><FormattedMessage id='enterpriseColony.ClusterComponents.state' /></Col>
+ <Col span={6}><FormattedMessage id='enterpriseColony.ClusterComponents.name' /></Col>
+ <Col span={10}><FormattedMessage id='enterpriseColony.ClusterComponents.image' /></Col>
  <Col span={4} style={{ textAlign: 'center' }}>
- <FormattedMessage id='enterpriseColony.ClusterComponents.number'/>
+ <FormattedMessage id='enterpriseColony.ClusterComponents.number' />
  </Col>
  </Row>
  {componentInfo.status &&
@@ -340,18 +330,18 @@ class ClusterComponents extends PureComponent {
  <Panel
  header={
  <div className={styless.panelBox}>
- <div><FormattedMessage id='enterpriseColony.ClusterComponents.event'/></div>
- <div><FormattedMessage id='enterpriseColony.ClusterComponents.pod'/></div>
+ <div><FormattedMessage id='enterpriseColony.ClusterComponents.event' /></div>
+ <div><FormattedMessage id='enterpriseColony.ClusterComponents.pod' /></div>
  </div>
  }
  key="2"
  >
  <div className={styless.customTables}>
  <Row className={styless.customTablesTit}>
- <Col span={4}><FormattedMessage id='enterpriseColony.ClusterComponents.type'/></Col>
- <Col span={6}><FormattedMessage id='enterpriseColony.ClusterComponents.Cause'/></Col>
- <Col span={10}><FormattedMessage id='enterpriseColony.ClusterComponents.information'/></Col>
- <Col span={4}><FormattedMessage id='enterpriseColony.ClusterComponents.last'/></Col>
+ <Col span={4}><FormattedMessage id='enterpriseColony.ClusterComponents.type' /></Col>
+ <Col span={6}><FormattedMessage id='enterpriseColony.ClusterComponents.Cause' /></Col>
+ <Col span={10}><FormattedMessage id='enterpriseColony.ClusterComponents.information' /></Col>
+ <Col span={4}><FormattedMessage id='enterpriseColony.ClusterComponents.last' /></Col>
  </Row>
  {evens && evens.length ? (
  evens.map(item => {
@@ -384,7 +374,7 @@ class ClusterComponents extends PureComponent {
  marginTop: '15px'
  }}
  >
- <FormattedMessage id='enterpriseColony.ClusterComponents.null'/>
+ <FormattedMessage id='enterpriseColony.ClusterComponents.null' />
  </div>
  )}
  </div>
@@ -394,9 +384,9 @@ class ClusterComponents extends PureComponent {
  ) : (
  <div className={styless.customTables}>
  <Row className={styless.customTablesTit}>
- <Col span={3}><FormattedMessage id='enterpriseColony.ClusterComponents.state'/></Col>
- <Col span={7}><FormattedMessage id='enterpriseColony.ClusterComponents.name'/></Col>
- <Col span={14}><FormattedMessage id='enterpriseColony.ClusterComponents.image'/>{reloadBtn}</Col>
+ <Col span={3}><FormattedMessage id='enterpriseColony.ClusterComponents.state' /></Col>
+ <Col span={7}><FormattedMessage id='enterpriseColony.ClusterComponents.name' /></Col>
+ <Col span={14}><FormattedMessage id='enterpriseColony.ClusterComponents.image' /></Col>
  </Row>
  <div className={styless.boxs}>
  {list && list.length ? (
@@ -450,7 +440,7 @@ class ClusterComponents extends PureComponent {
  <span
  style={{ color: 'rgba(0, 0, 0, 0.35)' }}
  >
- <FormattedMessage id='enterpriseColony.ClusterComponents.Time'/>
+ <FormattedMessage id='enterpriseColony.ClusterComponents.Time' />
  {metadata &&
  metadata.creationTimestamp &&
  moment(
@@ -460,7 +450,7 @@ class ClusterComponents extends PureComponent {
  <span
  style={{ color: 'rgba(0, 0, 0, 0.35)' }}
  >
- &nbsp;/&nbsp; <FormattedMessage id='enterpriseColony.ClusterComponents.number'/>
+ &nbsp;/&nbsp; <FormattedMessage id='enterpriseColony.ClusterComponents.number' />
  {status &&
  status.containerStatuses &&
  status.containerStatuses.length &&
@@ -476,7 +466,7 @@ class ClusterComponents extends PureComponent {
  <div
  style={{ marginTop: '12px', textAlign: 'center ' }}
  >
- <FormattedMessage id='enterpriseColony.ClusterComponents.Pods'/>
+ <FormattedMessage id='enterpriseColony.ClusterComponents.Pods' />
  </div>
  )}
  </Row>
@@ -490,14 +480,14 @@ class ClusterComponents extends PureComponent {
  marginTop: '15px'
  }}
  >
- <FormattedMessage id='enterpriseColony.ClusterComponents.created'/>
+ <FormattedMessage id='enterpriseColony.ClusterComponents.created' />
  </div>
  )}
  </div>
  </div>
  )}
  </Spin>
- </Modal>
+ </div>
  );
  }
 }

diff --git a/src/components/Cluster/ClusterComponents/index.less b/src/components/Cluster/ClusterComponents/index.less
@@ -3,6 +3,7 @@
 
 .customTables {
  margin-bottom: 0 !important;
+ padding: 0px 16px;
  .customTableCon:last-child {
  border-bottom: none !important;
  }
@@ -25,16 +26,16 @@
 .failedState,
 .warningState {
  font-size: 13px;
- color: #5b9b69;
- background-color: #ddefe3;
+ color: #fff;
+ background-color: #00D777;
 }
 .failedState {
- color: #ffa39e;
- background-color: #fff1f0;
+ color: #fff;
+ background-color: #CD0200;
 }
 .warningState {
- color: #faad14;
- background-color: #fffbe6;
+ color: #fff;
+ background-color: #F69D4A;
 }
 .customTableCon {
  display: flex;
@@ -69,13 +70,13 @@
 }
 .componentBox {
  & > div {
- background-color: #e6f4f5;
- border: 1px solid #9accd1;
+ background-color: #e2e9fd;
+ border: 1px solid #e3e9fd;
  margin: 10px 0;
  display: flex;
  & > div {
  width: 33.33%;
- border-right: 3px solid #9accd1;
+ border-right: 3px solid #4d73b1;
  margin: 10px 0;
  text-align: center;
  display: flex;
@@ -131,6 +132,18 @@
  }
 }
 .boxs {
- height: 410px;
- overflow: auto;
+ // height: 65vh;
+ // overflow: auto;
 }
+.componentTitle{
+ height: 56px;
+ line-height: 56px;
+ font-size: 16px;
+ font-weight: 600;
+ padding: 0px 16px;
+ margin-bottom: 12px;
+ border-bottom: 1px solid #E9EAEC;
+}
+.copmonentDetail{
+ padding: 0px 16px;
+}