update from RIFT as of 696b75d2fe9fb046261b08c616f1bcf6c0b54a9b third try

[osm/UI.git] / skyquake / plugins / redundancy / src / dashboard / status.jsx

diff --git a/skyquake/plugins/redundancy/src/dashboard/status.jsx b/skyquake/plugins/redundancy/src/dashboard/status.jsx
new file mode 100644 (file)
index 0000000..fbbd8bd
--- /dev/null
+++ b/skyquake/plugins/redundancy/src/dashboard/status.jsx
@@ -0,0 +1,198 @@
+/*
+ * STANDARD_RIFT_IO_COPYRIGHT
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AppHeader from 'widgets/header/header.jsx';
+import RedundancyStore from './redundancyStore.js';
+import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
+import SkyquakeRBAC from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
+import 'style/layout.scss';
+import {Panel, PanelWrapper} from 'widgets/panel/panel';
+import {InputCollection, FormSection} from 'widgets/form_controls/formControls.jsx';
+
+import TextInput from 'widgets/form_controls/textInput.jsx';
+import Input from 'widgets/form_controls/input.jsx';
+import Button, {ButtonGroup} from 'widgets/button/sq-button.jsx';
+import SelectOption from 'widgets/form_controls/selectOption.jsx';
+import 'widgets/form_controls/formControls.scss';
+import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
+import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
+import _  from 'lodash';
+import ROLES from 'utils/roleConstants.js';
+
+import './redundancy.scss';
+const PROJECT_ROLES = ROLES.PROJECT;
+const PLATFORM = ROLES.PLATFORM;
+
+class StatusDashboard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.Store = this.props.flux.stores.hasOwnProperty('RedundancyStore') ? this.props.flux.stores.RedundancyStore : this.props.flux.createStore(RedundancyStore, 'RedundancyStore');
+        this.state = this.Store.getState();
+        this.actions = this.state.actions;
+    }
+    componentDidUpdate() {
+    }
+    componentWillMount() {
+        this.state = this.Store.getState();
+        this.Store.getRedundancy();
+        this.Store.openRedundancyStateSocket();
+        this.Store.listen(this.updateState);
+    }
+    componentWillUnmount() {
+        this.Store.unlisten(this.updateState);
+        this.Store.closeSocket();
+    }
+    updateState = (state) => {
+        this.setState(state);
+    }
+    render() {
+        let self = this;
+        let html;
+        let props = this.props;
+        let state = this.state;
+        let STATUS = state.status;
+        /*
+
+    {
+        "active-instance": {
+            "active-inst-id": "10.64.210.20",
+            "is-this-instance-active": "true",
+            "site-name": "site20"
+        },
+        "vm-identity": "ebbd6444-d6a7-4eda-ab0d-e23fdbcdeffe",
+        "health-status": [
+            {
+                "state": "RUNNING_AS_ACTIVE",
+                "rwinstance-id": "10.64.210.20",
+                "site-name": "site20"
+            },
+            {
+                "state": "NO_RESPONSE",
+                "rwinstance-id": "10.64.210.33",
+                "site-name": "site33"
+            }
+        ]
+    }
+
+
+         */
+
+        html = (
+                <PanelWrapper onKeyUp={this.evaluateSubmit}
+                    className={`SiteAdmin column`} column>
+                    <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' }]} />
+                    <PanelWrapper onKeyUp={this.evaluateSubmit}
+                    className={`SiteAdmin column`} style={{overflow: 'auto'}} column>
+                    <Panel
+                        title="Active Instance"
+                        style={{flex: '0 0 300px'}}
+                        no-corners>
+                        <TextInput type="text" label="VM ID" readonly={true} value={STATUS['vm-identity'] } />
+                        <TextInput type="text" label="active instance ID" readonly={true} value={STATUS['active-instance'] && STATUS['active-instance']['active-inst-id'] } />
+                        <TextInput type="text" label="Site Name" readonly={true} value={STATUS['active-instance'] && STATUS['active-instance']['site-name'] } />
+                    </Panel>
+                    <Panel
+                        title="CONFIGURATION STATE"
+                        style={{flex: '0 0 250px'}}
+                        no-corners>
+                           <div className="tableRow tableRow--header">
+                                <div>
+                                    SITE NAME
+                                </div>
+                                 <div>
+                                    INSTANCE IP
+                                </div>
+                                <div>
+                                    CURRENT STATE
+                                </div>
+                                <div>
+                                    PREVIOUS STATE
+                                </div>
+                                <div>
+                                    CONFIG GENERATION #
+                                </div>
+                                <div>
+                                    LAST PACKAGE UPDATE
+                                </div>
+                            </div>
+                            {
+                                STATUS['config-state'] && STATUS['config-state'].map((u, k) => {
+                                    return (
+                                        <div className={`tableRow tableRow--data`} key={k}>
+                                            <div>
+                                                {u['site-name'] || '--'}
+                                            </div>
+                                            <div>
+                                                {u['rwinstance-ip'] || '--'}
+                                            </div>
+                                            <div>
+                                                {u['current-state'] || '--'}
+                                            </div>
+                                            <div>
+                                                {u['previous-state'] || '--'}
+                                            </div>
+                                            <div>
+                                                {u['config-generation-number'] || '--'}
+                                            </div>
+                                            <div>
+                                                {u['last-package-update'] || '--'}
+                                            </div>
+
+
+                                        </div>
+                                    )
+                                })
+                            }
+
+
+                    </Panel>
+                    <Panel
+                        title="HEALTH STATUS"
+                        style={{flex: '0 0 250px'}}
+                        no-corners>
+                           <div className="tableRow tableRow--header">
+                                <div>
+                                    RW INSTANCE
+                                </div>
+                                <div>
+                                    STATUS
+                                </div>
+                            </div>
+                            {STATUS['health-status'] && STATUS['health-status'].map((u, k) => {
+                            return (
+                                <div className={`tableRow tableRow--data`} key={k}>
+                                    <div>
+                                        {u['rwinstance-id'] || '--'}
+                                    </div>
+                                    <div>
+                                        {u['state'] || '--'}
+                                    </div>
+
+
+                                </div>
+                            )
+                        })}
+
+
+                    </Panel>
+                </PanelWrapper>
+                </PanelWrapper>
+        );
+        return html;
+    }
+}
+// onClick={this.Store.update.bind(null, Account)}
+StatusDashboard.contextTypes = {
+    router: React.PropTypes.object,
+    userProfile: React.PropTypes.object
+};
+
+StatusDashboard.defaultProps = {
+    siteList: [],
+    selectedSite: {}
+}
+
+export default SkyquakeComponent(StatusDashboard);