static.console-fe.src.components.RegionGroup.RegionGroup.js Maven / Gradle / Ivy

Go to download
/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 *
 * 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 PropTypes from 'prop-types';
import $ from 'jquery';
import { Button } from '@alifd/next';
import NameSpaceList from '../NameSpaceList';
import { setParams, request } from '../../globalLib';

import './index.scss';

class RegionGroup extends React.Component {
  static propTypes = {
    url: PropTypes.string,
    left: PropTypes.any,
    right: PropTypes.any,
    namespaceCallBack: PropTypes.func,
    setNowNameSpace: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      instanceData: [],
      currRegionId: '',
      url: props.url || '/diamond-ops/env/domain',
      left: props.left,
      right: props.right,
      regionWidth: 700,
      hideRegionList: false,
    };
    this.currRegionId = '';
    this.styles = {
      title: {
        // marginTop: '8px',
        // marginBottom: '8px',
        margin: 0,
        lineHeight: '32px',
        display: 'inline-block',
        textIndent: '8px',
        marginRight: '8px',
        borderLeft: '2px solid #88b7E0',
        fontSize: '16px',
      },
    };
    this.nameSpaceList = React.createRef();
    this.mainRef = null;
    this.titleRef = null;
    this.regionRef = null;
    this.extraRef = null;
    this.resizer = null;
    this.timer = null;
    this.handleResize = this.handleResize.bind(this);
    this.handleAliyunNav = this.handleAliyunNav.bind(this);
    !window.viewframeSetting && (window.viewframeSetting = {});
  }

  componentDidMount() {
    // this.setRegionWidth();
    // window.postMessage({ type: 'CONSOLE_HAS_REGION' }, window.location)
    // $(".aliyun-console-regionbar").show();
    // $(window).bind("resize", this.handleResize);
    // window.addEventListener("message", this.handleAliyunNav);
    // this.getRegionList();
    // setTimeout(() => {
    //     this.setRegionWidth();
    //     this.handleRegionListStatus();
    // });
    const nameSpaceList = this.nameSpaceList.current;
    if (nameSpaceList) {
      nameSpaceList.getInstance().getNameSpaces();
    }
  }

  componentWillUnmount() {
    $(window).unbind('resize', this.handleResize);
    window.postMessage({ type: 'CONSOLE_HIDE_REGION' }, window.location);
    $('.aliyun-console-regionbar').hide();
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      url: nextProps.url,
      left: nextProps.left,
      right: nextProps.right,
    });
  }

  handleAliyunNav(event = {}) {
    const { type, payload } = (event && event.data) || {};

    switch (type) {
      case 'TOPBAR_SIDEBAR_DID_MOUNT':
        // this.getRegionList();
        this.handleRegionListStatus();
        this.changeRegionBarRegionId(this.currRegionId);
        setTimeout(() => {
          this.changeRegionBarRegionId(this.currRegionId);
        }, 1000);
        break;
      case 'CONSOLE_REGION_CHANGE':
        this.changeTableData(payload.toRegionId);
        break;
      default:
        break;
    }
  }

  handleRegionListStatus() {
    const isPrivateClound = window.globalConfig && window.globalConfig.isParentEdas();
    this.setState(
      {
        hideRegionList: isPrivateClound
          ? false
          : window.location.search.indexOf('hideTopbar=') === -1,
      },
      () => this.setRegionWidth()
    );
  }

  handleResize() {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.setRegionWidth();
    }, 100);
  }

  setRegionWidth() {
    try {
      const mainWidth = $(this.mainRef).width();
      const titleWidth = $(this.titleRef).width();
      const extraWidth = $(this.extraRef).width();
      const regionWidth = mainWidth - extraWidth - titleWidth - 50;
      this.setState({
        regionWidth: regionWidth > 100 ? regionWidth : 100,
      });
    } catch (error) {}
  }

  getRegionList() {
    if (window._regionList) {
      this.handleRegionList(window._regionList);
    } else {
      // TODO
      const nameSpaceList = this.nameSpaceList.current;
      if (nameSpaceList) {
        nameSpaceList.getInstance().getNameSpaces();
      }

      request({
        url: this.state.url,
        data: {},
        success: res => {
          if (res && res.data) {
            window._regionList = res.data;
            this.handleRegionList(res.data);
          }
        },
      });
    }
  }

  handleRegionList(data = {}) {
    let envcontent = '';
    const { envGroups } = data;
    let instanceData = [];
    for (let i = 0; i < envGroups.length; i++) {
      const obj = envGroups[i].envs || [];
      instanceData = obj;
      for (let j = 0; j < obj.length; j++) {
        if (obj[j].active) {
          envcontent = obj[j].serverId;
        }
      }
    }

    this.currRegionId = envcontent || (instanceData[0] && instanceData[0].serverId);
    setParams('serverId', this.currRegionId);

    this.setRegionBarRegionList(instanceData, this.currRegionId);
    this.changeRegionBarRegionId(this.currRegionId);
    setTimeout(() => {
      this.changeRegionBarRegionId(this.currRegionId);
    }, 1000);
    const nameSpaceList = this.nameSpaceList.current;
    if (nameSpaceList) {
      nameSpaceList.getInstance().getNameSpaces();
    }
    this.setState({
      currRegionId: envcontent,
      instanceData,
    });
  }

  changeTableData(serverId) {
    setParams('serverId', serverId);
    if (this.state.currRegionId === serverId) {
      return;
    }
    this.currRegionId = serverId;
    const { instanceData } = this.state;

    let inEdas = false;
    if (window.globalConfig.isParentEdas()) {
      inEdas = true;
    }

    instanceData.forEach(obj => {
      if (obj.serverId === serverId) {
        const lastHash = window.location.hash.split('?')[0];
        if (inEdas) {
          setParams('serverId', obj.serverId);
          const url = window.location.href;
          window.location.href = url;
        } else {
          let url = obj.domain + window.location.search + lastHash;
          if (lastHash.indexOf('serverId') === -1) {
            if (lastHash.indexOf('?') === -1) {
              url += `?serverId=${serverId}`;
            } else {
              url += `&serverId=${serverId}`;
            }
          }
          window.location.href = `${window.location.protocol}//${url}`;
        }
      }
    });
  }

  setRegionBarRegionList(regionList, regionId) {
    if (window.viewframeSetting) {
      window.viewframeSetting.regionList = regionList;
      window.postMessage(
        { type: 'TOGGLE_REGIONBAR_STATUS', payload: { regionList, defaultRegionId: regionId } },
        window.location
      );
    }
  }

  changeRegionBarRegionId(regionId) {
    window.viewframeSetting && (window.viewframeSetting.defaultRegionId = regionId);
    window.postMessage(
      { type: 'SET_ACTIVE_REGION_ID', payload: { defaultRegionId: regionId } },
      window.location
    );
  }

  render() {
    return (
      
         (this.mainRef = ref)} className="clearfix">
          
            
               (this.titleRef = ref)}
                style={{ display: 'inline-block', verticalAlign: 'top' }}
              >
                {typeof this.state.left === 'string' ? (
                  {this.state.left}
                ) : (
                  this.state.left
                )}
              
              {this.state.hideRegionList ? null : (
                 (this.regionRef = ref)}
                  style={{
                    width: this.state.regionWidth,
                    display: 'inline-block',
                    lineHeight: '40px',
                    marginLeft: 20,
                  }}
                >
                  {this.state.instanceData.map((val, key) => (
                    
                  ))}
                
              )}
            
             (this.extraRef = ref)}
              style={{ float: 'right', display: 'inline-block', paddingTop: 6 }}
            >
              {Object.prototype.toString.call(this.state.right) === '[object Function]'
                ? this.state.right()
                : this.state.right}
            
          
          {this.props.namespaceCallBack && (
            
              
            
          )}
        
      
    );
  }
}

export default RegionGroup;