From dfdcb8234ce6e21731223d53cf70de2ad9418dc9 Mon Sep 17 00:00:00 2001
From: silenceqi <silenceqi@hotmail.com>
Date: Wed, 3 Mar 2021 22:39:17 +0800
Subject: [PATCH] add changeClusterById

---
 .../components/GlobalHeader/DropdownSelect.js | 22 +++++++++++++------
 .../GlobalHeader/DropdownSelect.less          |  4 ++++
 web/src/models/global.js                      | 13 ++++++++++-
 web/src/pages/Cluster/Overview.js             | 13 ++++++++++-
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/web/src/components/GlobalHeader/DropdownSelect.js b/web/src/components/GlobalHeader/DropdownSelect.js
index fa3deb57..11d93254 100644
--- a/web/src/components/GlobalHeader/DropdownSelect.js
+++ b/web/src/components/GlobalHeader/DropdownSelect.js
@@ -2,6 +2,7 @@ import { Button,  Dropdown, List, Spin, message, Icon } from 'antd';
 import React from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
 import styles from './DropdownSelect.less';
+import _ from "lodash";
 
 class DropdownSelect extends React.Component{
   state={
@@ -11,7 +12,7 @@ class DropdownSelect extends React.Component{
   }
 
   handleItemClick = (item)=>{
-    let preValue = this.state.value;
+    let preValue = this.props.value || this.state.value;
     this.setState({
       value: item,
     },()=>{
@@ -63,6 +64,8 @@ class DropdownSelect extends React.Component{
   render(){
     let me = this;
     const {labelField} = this.props;
+    let value = this.props.value || this.state.value;
+
     const menu = (<div className={styles.dropmenu} style={{width: this.props.width}}>
       <div className={styles.infiniteContainer} style={{height: this.props.height}}>
         <InfiniteScroll
@@ -78,11 +81,16 @@ class DropdownSelect extends React.Component{
             xs: 3
           }}
           dataSource={this.props.data}
-          renderItem={item => (
-            <List.Item key={item[labelField]}>
-              <Button onClick={()=>{this.handleItemClick(item)}} className={styles.btnitem}>{item[labelField]}</Button>
-            </List.Item>
-          )}
+          renderItem={item => {
+           return (
+              <List.Item key={item[labelField]}>
+                <Button onClick={() => {
+                  this.handleItemClick(item)
+                }}
+                        className={_.isEqual(item, value) ? styles.btnitem + " " + styles.selected : styles.btnitem}>{item[labelField]}</Button>
+              </List.Item>
+            )
+          }}
         >
               {this.state.loading && this.state.hasMore && (
                 <div className={styles.loadingContainer}>
@@ -101,7 +109,7 @@ class DropdownSelect extends React.Component{
     return(
       this.props.visible ?
           (<Dropdown overlay={menu} placement="bottomLeft">
-            <Button className={styles['btn-ds']}>{this.props.value[labelField] || this.state.value[labelField]} <Icon style={{float: 'right', marginTop: 3}}
+            <Button className={styles['btn-ds']}>{value[labelField]} <Icon style={{float: 'right', marginTop: 3}}
                                                                           type="caret-down"/></Button>
           </Dropdown>) : ""
     )
diff --git a/web/src/components/GlobalHeader/DropdownSelect.less b/web/src/components/GlobalHeader/DropdownSelect.less
index 359532d8..83ef0f97 100644
--- a/web/src/components/GlobalHeader/DropdownSelect.less
+++ b/web/src/components/GlobalHeader/DropdownSelect.less
@@ -28,6 +28,10 @@
     border-radius: 0px;
     width: 100px;
   }
+  .selected{
+    color: #1890FF;
+    border-color: #1890FF;
+  }
 }
 
 .infiniteContainer {
diff --git a/web/src/models/global.js b/web/src/models/global.js
index 498048e2..cc950a67 100644
--- a/web/src/models/global.js
+++ b/web/src/models/global.js
@@ -67,7 +67,7 @@ export default {
       yield put({
         type: 'saveData',
         payload: {
-          clusterList: clusterList.concat(data)
+          clusterList: clusterList.concat(data),
         }
       })
       return data;
@@ -111,6 +111,7 @@ export default {
         ...payload,
       }
     },
+
     removeCluster(state, {payload}){
       return {
         ...state,
@@ -125,6 +126,16 @@ export default {
       let idx = state.clusterList.findIndex(item => item.id === payload.id);
       idx > -1 && (state.clusterList[idx].name = payload.name);
       return state;
+    },
+    changeClusterById(state,{payload}){
+      let idx = state.clusterList.findIndex(item => item.id === payload.id);
+      if(idx > -1){
+        return {
+          ...state,
+          selectedCluster: state.clusterList[idx],
+        }
+      }
+      return state;
     }
   },
 
diff --git a/web/src/pages/Cluster/Overview.js b/web/src/pages/Cluster/Overview.js
index c10969c6..fd6212ec 100644
--- a/web/src/pages/Cluster/Overview.js
+++ b/web/src/pages/Cluster/Overview.js
@@ -1,5 +1,5 @@
 import React, {Fragment} from 'react';
-import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
+import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions, Button} from "antd";
 import {Link} from "umi"
 import moment from "moment";
 import styles from "./Overview.less";
@@ -130,10 +130,21 @@ class Overview extends  React.Component {
     }],
   };
 
+  handleChangeClusterById = () =>{
+    const {dispatch} = this.props;
+    dispatch({
+      type: 'global/changeClusterById',
+      payload: {
+        id: "c0oc4kkgq9s8qss2uk51"
+      }
+    })
+  }
+
   render() {
 
     return (
         <div>
+          <Button type="primary" onClick={this.handleChangeClusterById}>change cluster</Button>
           <Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
             <Row gutter={[16,16]}>
               <Col xs={24} sm={12} md={12} lg={8} >