skyquake/plugins/redundancy/src/dashboard/status.jsx

   1 /*
   2  * STANDARD_RIFT_IO_COPYRIGHT
   3  */
   4
   5 import React from 'react';
   6 import ReactDOM from 'react-dom';
   7 import AppHeader from 'widgets/header/header.jsx';
   8 import RedundancyStore from './redundancyStore.js';
   9 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
  10 import SkyquakeRBAC from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
  11 import 'style/layout.scss';
  12 import {Panel, PanelWrapper} from 'widgets/panel/panel';
  13 import {InputCollection, FormSection} from 'widgets/form_controls/formControls.jsx';
  14
  15 import TextInput from 'widgets/form_controls/textInput.jsx';
  16 import Input from 'widgets/form_controls/input.jsx';
  17 import Button, {ButtonGroup} from 'widgets/button/sq-button.jsx';
  18 import SelectOption from 'widgets/form_controls/selectOption.jsx';
  19 import 'widgets/form_controls/formControls.scss';
  20 import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
  21 import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
  22 import _  from 'lodash';
  23 import ROLES from 'utils/roleConstants.js';
  24
  25 import './redundancy.scss';
  26 const PROJECT_ROLES = ROLES.PROJECT;
  27 const PLATFORM = ROLES.PLATFORM;
  28
  29 class StatusDashboard extends React.Component {
  30     constructor(props) {
  31         super(props);
  32         this.Store = this.props.flux.stores.hasOwnProperty('RedundancyStore') ? this.props.flux.stores.RedundancyStore : this.props.flux.createStore(RedundancyStore, 'RedundancyStore');
  33         this.state = this.Store.getState();
  34         this.actions = this.state.actions;
  35     }
  36     componentDidUpdate() {
  37     }
  38     componentWillMount() {
  39         this.state = this.Store.getState();
  40         this.Store.getRedundancy();
  41         this.Store.openRedundancyStateSocket();
  42         this.Store.listen(this.updateState);
  43     }
  44     componentWillUnmount() {
  45         this.Store.unlisten(this.updateState);
  46         this.Store.closeSocket();
  47     }
  48     updateState = (state) => {
  49         this.setState(state);
  50     }
  51     render() {
  52         let self = this;
  53         let html;
  54         let props = this.props;
  55         let state = this.state;
  56         let STATUS = state.status;
  57         /*
  58
  59     {
  60         "active-instance": {
  61             "active-inst-id": "10.64.210.20",
  62             "is-this-instance-active": "true",
  63             "site-name": "site20"
  64         },
  65         "vm-identity": "ebbd6444-d6a7-4eda-ab0d-e23fdbcdeffe",
  66         "health-status": [
  67             {
  68                 "state": "RUNNING_AS_ACTIVE",
  69                 "rwinstance-id": "10.64.210.20",
  70                 "site-name": "site20"
  71             },
  72             {
  73                 "state": "NO_RESPONSE",
  74                 "rwinstance-id": "10.64.210.33",
  75                 "site-name": "site33"
  76             }
  77         ]
  78     }
  79
  80
  81          */
  82
  83         html = (
  84                 <PanelWrapper onKeyUp={this.evaluateSubmit}
  85                     className={`SiteAdmin column`} column>
  86                     <AppHeader nav={[{ name: 'SITES', onClick: this.context.router.push.bind(this, { pathname: '/sites' })  }, { name: 'CONFIG', onClick: this.context.router.push.bind(this, { pathname: '/config' })}, { name: 'STATUS' }]} />
  87                     <PanelWrapper onKeyUp={this.evaluateSubmit}
  88                     className={`SiteAdmin column`} style={{overflow: 'auto'}} column>
  89                     <Panel
  90                         title="Active Instance"
  91                         style={{flex: '0 0 300px'}}
  92                         no-corners>
  93                         <TextInput type="text" label="VM ID" readonly={true} value={STATUS['vm-identity'] } />
  94                         <TextInput type="text" label="active instance ID" readonly={true} value={STATUS['active-instance'] && STATUS['active-instance']['active-inst-id'] } />
  95                         <TextInput type="text" label="Site Name" readonly={true} value={STATUS['active-instance'] && STATUS['active-instance']['site-name'] } />
  96                     </Panel>
  97                     <Panel
  98                         title="CONFIGURATION STATE"
  99                         style={{flex: '0 0 250px'}}
 100                         no-corners>
 101                            <div className="tableRow tableRow--header">
 102                                 <div>
 103                                     SITE NAME
 104                                 </div>
 105                                  <div>
 106                                     INSTANCE IP
 107                                 </div>
 108                                 <div>
 109                                     CURRENT STATE
 110                                 </div>
 111                                 <div>
 112                                     PREVIOUS STATE
 113                                 </div>
 114                                 <div>
 115                                     CONFIG GENERATION #
 116                                 </div>
 117                                 <div>
 118                                     LAST PACKAGE UPDATE
 119                                 </div>
 120                             </div>
 121                             {
 122                                 STATUS['config-state'] && STATUS['config-state'].map((u, k) => {
 123                                     return (
 124                                         <div className={`tableRow tableRow--data`} key={k}>
 125                                             <div>
 126                                                 {u['site-name'] || '--'}
 127                                             </div>
 128                                             <div>
 129                                                 {u['rwinstance-ip'] || '--'}
 130                                             </div>
 131                                             <div>
 132                                                 {u['current-state'] || '--'}
 133                                             </div>
 134                                             <div>
 135                                                 {u['previous-state'] || '--'}
 136                                             </div>
 137                                             <div>
 138                                                 {u['config-generation-number'] || '--'}
 139                                             </div>
 140                                             <div>
 141                                                 {u['last-package-update'] || '--'}
 142                                             </div>
 143
 144
 145                                         </div>
 146                                     )
 147                                 })
 148                             }
 149
 150
 151                     </Panel>
 152                     <Panel
 153                         title="HEALTH STATUS"
 154                         style={{flex: '0 0 250px'}}
 155                         no-corners>
 156                            <div className="tableRow tableRow--header">
 157                                 <div>
 158                                     RW INSTANCE
 159                                 </div>
 160                                 <div>
 161                                     STATUS
 162                                 </div>
 163                             </div>
 164                             {STATUS['health-status'] && STATUS['health-status'].map((u, k) => {
 165                             return (
 166                                 <div className={`tableRow tableRow--data`} key={k}>
 167                                     <div>
 168                                         {u['rwinstance-id'] || '--'}
 169                                     </div>
 170                                     <div>
 171                                         {u['state'] || '--'}
 172                                     </div>
 173
 174
 175                                 </div>
 176                             )
 177                         })}
 178
 179
 180                     </Panel>
 181                 </PanelWrapper>
 182                 </PanelWrapper>
 183         );
 184         return html;
 185     }
 186 }
 187 // onClick={this.Store.update.bind(null, Account)}
 188 StatusDashboard.contextTypes = {
 189     router: React.PropTypes.object,
 190     userProfile: React.PropTypes.object
 191 };
 192
 193 StatusDashboard.defaultProps = {
 194     siteList: [],
 195     selectedSite: {}
 196 }
 197
 198 export default SkyquakeComponent(StatusDashboard);