modify global cluster select

web/src/components/GlobalHeader/DropdownSelect.js

@@ -73,8 +73,9 @@ class DropdownSelect extends React.Component{
         >
         <List
           grid={{
-            gutter: 8,
+            gutter: 16,
-            column: 4,
+            sm: 4,
+            xs: 3
           }}
           dataSource={this.props.data}
           renderItem={item => (
@@ -100,7 +101,7 @@ class DropdownSelect extends React.Component{
     return(
       this.props.visible ?
           (<Dropdown overlay={menu} placement="bottomLeft">
-            <Button className={styles['btn-ds']}>{this.state.value[labelField]} <Icon style={{float: 'right', marginTop: 3}}
+            <Button className={styles['btn-ds']}>{this.props.value[labelField] || this.state.value[labelField]} <Icon style={{float: 'right', marginTop: 3}}
                                                                           type="caret-down"/></Button>
           </Dropdown>) : ""
     )

web/src/components/GlobalHeader/DropdownSelect.less

@@ -17,6 +17,7 @@
 .dropmenu{
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
   padding: 20px;
+  padding-bottom: 4px;
   width: 500px;
   background: #fff;
   .item{
@@ -39,4 +40,10 @@
   bottom: 40px;
   width: 100%;
   text-align: center;
+}
+
+@media screen and (max-width: 500px) {
+    .dropmenu{
+        width: 100%;
+    }
 }

web/src/components/GlobalHeader/index.js

@@ -24,7 +24,7 @@ export default class GlobalHeader extends PureComponent {
     this.triggerResizeEvent();
   };
   render() {
-    const { collapsed, isMobile, logo, clusterVisible, clusterList } = this.props;
+    const { collapsed, isMobile, logo, clusterVisible, clusterList, selectedCluster } = this.props;
     return (
       <div className={styles.header}>
         {isMobile && (
@@ -37,7 +37,8 @@ export default class GlobalHeader extends PureComponent {
           type={collapsed ? 'menu-unfold' : 'menu-fold'}
           onClick={this.toggle}
         />
-        <DropdownSelect defaultValue={{name:"Select cluster"}}
+        <DropdownSelect defaultValue={selectedCluster}
+          value={selectedCluster}
           labelField="name"
           visible={clusterVisible}
           onChange={(item)=>{

web/src/layouts/Header.js

@@ -182,4 +182,5 @@ export default connect(({ user, global, setting, loading }) => ({
   setting,
   clusterVisible: global.clusterVisible,
   clusterList: global.clusterList,
+  selectedCluster: global.selectedCluster,
 }))(HeaderView);

web/src/models/global.js

@@ -12,7 +12,7 @@ export default {
     notices: [],
     clusterVisible: true,
     clusterList: [],
-    selectedCluster: '',
+    selectedCluster: {name:"Select cluster", id: ""},
   },
 
   effects: {
@@ -46,6 +46,17 @@ export default {
       }
       res = formatESSearchResult(res)
       let clusterList = yield select(state => state.global.clusterList);
+      if(clusterList.length === 0 && res.data.length > 0){
+        yield put({
+          type: 'saveData',
+          payload: {
+            selectedCluster: {
+              name: res.data[0].name,
+              id: res.data[0].id,
+            }
+          }
+        })
+      }
       let data = res.data.map((item)=>{
         return {
           name: item.name,

web/src/pages/Cluster/ClusterItem.less

@@ -1,7 +1,10 @@
 
 .clusterItem {
-  display: inline-block;
-  text-align: center;
   width: 100%;
   height: 400px;
 }
+
+.clusterItemWrapper {
+    display: inline-block;
+    margin: 0 auto;
+}

web/src/pages/Cluster/ClusterList.js

@@ -52,6 +52,9 @@ class ClusterList extends React.Component{
 }
 
 class ClusterItem extends Component {
+  state={
+    wrapperWidth: 235
+  }
   componentDidMount(){
     
     this.root.addEventListener("click", function({offsetX, offsetY}){
@@ -117,7 +120,9 @@ class ClusterItem extends Component {
   }
   render(){
     return (
-      <div className={styles.clusterItem} ref={ref=>this.root=ref}></div>
+      <div className={styles.clusterItemWrapper} style={{width: this.state.wrapperWidth}}>
+        <div className={styles.clusterItem} ref={ref=>this.root=ref}></div>
+      </div>
     )
   }
 }