@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/middle/staging/middle-staging-toolbar.jsx

@@ -0,0 +1,267 @@
+
+'use strict';
+
+import MiddleStagingModalInterfaceCreate from './middle-staging-modal-interface-create';
+import MiddleStagingModalInterfaceDelete from './middle-staging-modal-interface-delete';
+import LoginStore from '../../../stores/login-store';
+import ActorDefault from '../../../actor-default';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import { ActionLoginUpdate, ActionLoginPing, ActionLoginCreateInterfaces, ActionLoginDeleteInterfaces, ActionLoginButtonsUpdate  } from '../../../actions/action-login/action-login';
+import ToolVersionsStore from 'z-abs-complayer-toolversions-client/client/stores/tool-versions-store';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ButtonText from 'z-abs-complayer-bootstrap-client/client/button-text';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import React from 'react';
+
+
+export default class MiddleStagingToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [LoginStore, ToolVersionsStore, SystemUnderTestStore], {
+      labId: '',
+      userId: '',
+      systemUnderTest: '',
+      systemUnderTestInstance: '',
+      systemUnderTestInstances: [],
+      showModalInterfaceCreate: false,
+      showModalInterfaceDelete: false,
+      loggedIn: false
+    });
+    this.state.labId = this.state.LoginStore.login.labId;
+    this.state.userId = this.state.LoginStore.login.userId;
+    this.state.systemUnderTest = this.state.LoginStore.login.systemUnderTest;
+    this.state.systemUnderTestInstance = this.state.LoginStore.login.systemUnderTestInstance;
+    const foundSut = this._getSut(this.state.systemUnderTest);
+    this.state.systemUnderTestInstances = foundSut ? foundSut.instances : [];
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.LoginStore.login, nextState.LoginStore.login)
+      || !this.shallowCompare(this.state.LoginStore.buttons, nextState.LoginStore.buttons)
+      || !this.shallowCompare(this.state.ToolVersionsStore.devEnvironment, nextState.ToolVersionsStore.devEnvironment)
+      || !this.shallowCompareArrayValues(this.state.LoginStore.osNetworks, nextState.LoginStore.osNetworks)
+      || !this.shallowCompare(this.state.LoginStore.loggedIn, nextState.LoginStore.loggedIn)
+      || !this.shallowCompare(this.state.LoginStore.working, nextState.LoginStore.working)
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests)
+      || !this.deepCompare(this.state.SystemUnderTestStore.instances, nextState.SystemUnderTestStore.instances)
+      || !this.shallowCompare(this.state.labId, nextState.labId)
+      || !this.shallowCompare(this.state.userId, nextState.userId)
+      || !this.shallowCompare(this.state.systemUnderTest, nextState.systemUnderTest)
+      || !this.shallowCompare(this.state.systemUnderTestInstance, nextState.systemUnderTestInstance)
+      || !this.shallowCompare(this.state.systemUnderTestInstances, nextState.systemUnderTestInstances)
+      || !this.shallowCompare(this.state.showModalInterfaceCreate, nextState.showModalInterfaceCreate)
+      || !this.shallowCompare(this.state.showModalInterfaceDelete, nextState.showModalInterfaceDelete)
+      || !this.shallowCompare(this.state.loggedIn, nextState.loggedIn);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    if(this.state.LoginStore.login.labId !== prevState.LoginStore.login.labId || this.state.LoginStore.login.userId !== prevState.LoginStore.login.userId || this.state.LoginStore.login.systemUnderTest !== prevState.LoginStore.login.systemUnderTest || this.state.LoginStore.login.systemUnderTestInstance !== prevState.LoginStore.login.systemUnderTestInstance || this.state.SystemUnderTestStore.systemUnderTests !== prevState.SystemUnderTestStore.systemUnderTests || this.state.SystemUnderTestStore.instances !== prevState.SystemUnderTestStore.instances) {
+      this.updateState({labId: {$set: this.state.LoginStore.login.labId}});
+      this.updateState({userId: {$set: this.state.LoginStore.login.userId}});
+      this.updateState({systemUnderTest: {$set: this.state.LoginStore.login.systemUnderTest}});
+      this.updateState({systemUnderTestInstance: {$set: this.state.LoginStore.login.systemUnderTestInstance}});
+      const foundSut = this._getSut(this.state.LoginStore.login.systemUnderTest);
+      this.updateState({systemUnderTestInstances: {$set: foundSut ? foundSut.instances : []}});
+    }
+  }
+  
+  getSystemUnderTestOptions() {
+    let key = 0;
+    return this.state.SystemUnderTestStore.systemUnderTests.map((systemUnderTest) => {
+      if(SystemUnderTestStore.VISIBLE() === systemUnderTest.status || SystemUnderTestStore.STATIC() === systemUnderTest.status) {
+        return (<option value={systemUnderTest.name} key={key++}>{systemUnderTest.name}</option>);
+      }
+    });
+  }
+  
+  renderForceLocalHostButton() {
+    return (
+      <ButtonNew id="login_force_local" icon="icon-stage-host" size="aj_btn_sm" colorMark="markup_color" active={this.state.LoginStore.buttons.toolbar.forceLocalhost} placement="bottom" heading="Generated addresses as" content={this.state.LoginStore.buttons.toolbar.forceLocalhost ? 'localhost' : 'remotehost'}
+        onClick={(e) => {
+          this.dispatch(LoginStore, new ActionLoginButtonsUpdate('toolbar', 'forceLocalhost', !this.state.LoginStore.buttons.toolbar.forceLocalhost));
+        }}
+      />
+    );
+  }
+  
+  renderPingButton() {
+    const disabled = this.state.LoginStore.working || !this.state.LoginStore.loggedIn || this.state.LoginStore.loginDataChanged;
+    return (
+      <ButtonNew id="login_ping" icon="icon-stage-ping" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Ping" content="Interfaces" disabled={disabled}
+        onClick={(e) => {
+          this.dispatch(LoginStore, new ActionLoginPing());
+        }}
+      />
+    );
+  }
+  
+  renderCreateVirtualNetworksButton() {
+    const disabled = this.state.LoginStore.working || !this.state.LoginStore.loggedIn || this.state.LoginStore.loginDataChanged;
+    return (
+      <ButtonNew id="login_create_network" icon="icon-stage-create-static-ip-address" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Create" content="Static Ip-addresses" disabled={disabled}
+        onClick={(e) => {
+          this.updateState({showModalInterfaceCreate: {$set: true}});
+        }}
+      />
+    );
+  }
+  
+  renderDeleteVirtualNetworksButton() {
+    const disabled = this.state.LoginStore.working || !this.state.LoginStore.loggedIn || this.state.LoginStore.loginDataChanged;
+    return (
+      <ButtonNew id="login_delete_network" icon="icon-stage-delete-static-ip-address" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Delete" content="Static Ip-addresses" disabled={disabled}
+        onClick={(e) => {
+          this.updateState({showModalInterfaceDelete: {$set: true}});
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogInterfaceCreate() {
+    return (
+      <MiddleStagingModalInterfaceCreate heading="Create Virtual Interfaces" result={'result'} show={this.state.showModalInterfaceCreate} chosenAddresses={this.state.LoginStore.chosenAddresses} osNetworks={this.state.LoginStore.osNetworks} platform={this.state.ToolVersionsStore.devEnvironment.platform}
+        onCreateInterfaces={(interfaceParameters, password) => {
+          this.dispatch(LoginStore, new ActionLoginCreateInterfaces(interfaceParameters, password));
+          this.updateState({showModalInterfaceCreate: {$set: false}});
+          this.updateState({loggedIn: {$set: false}});
+        }}
+        onClose={() => {
+          this.updateState({showModalInterfaceCreate: {$set: false}});
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogInterfaceDelete() {
+    return (
+      <MiddleStagingModalInterfaceDelete heading="Delete Virtual Interfaces" result={'result'} show={this.state.showModalInterfaceDelete} chosenAddresses={this.state.LoginStore.chosenAddresses} osNetworks={this.state.LoginStore.osNetworks} platform={this.state.ToolVersionsStore.devEnvironment.platform}
+        onDeleteInterfaces={(interfaceParameters, password) => {
+          this.dispatch(LoginStore, new ActionLoginDeleteInterfaces(interfaceParameters, password));
+          this.updateState({showModalInterfaceDelete: {$set: false}});
+          this.updateState({loggedIn: {$set: false}});
+        }}
+        onClose={() => {
+          this.updateState({showModalInterfaceDelete: {$set: false}});
+        }}
+      />
+    );
+  }
+  
+  getSystemUnderInstanceTestOptions() {
+    let key = 0;
+    return this.state.systemUnderTestInstances.map((systemUnderTestInstance) => {
+      return (<option value={systemUnderTestInstance.name} key={key++}>{systemUnderTestInstance.name}</option>);
+    });
+  }
+  
+  renderInstances() {
+    if(0 !== this.state.systemUnderTestInstances.length) {
+      return (
+        <div className="form-group form-group-sm middle_login_toolbar_component">
+          <label htmlFor="login_system_under_test_instance" className="middle_login_toolbar_component">Instance:</label>
+          <select id="login_system_under_test_instance" className="form-control input-sm" value={this.state.systemUnderTestInstance}
+            onChange={(e) => {
+              this.updateState({systemUnderTestInstance: {$set: e.target.value}});
+            }}
+          >
+            {this.getSystemUnderInstanceTestOptions()}
+          </select>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  _getSut(systemUnderTest) {
+    return this.state.SystemUnderTestStore.systemUnderTests.find((sut) => {
+      return sut.name === systemUnderTest;
+    });
+  }
+  
+  render() {
+    return (
+      <div className="middle_login_toolbar middle_toolbar">
+        {this.renderModalDialogInterfaceCreate()}
+        {this.renderModalDialogInterfaceDelete()}
+        <form id="login_form" className="form-inline"
+          onSubmit={(e) => {
+            e.preventDefault();
+            const foundSut = this._getSut(this.state.systemUnderTest);
+            if(foundSut) {
+              this.dispatch(LoginStore, new ActionLoginUpdate(this.state.labId, this.state.userId, foundSut.repo, this.state.systemUnderTest, this.state.systemUnderTestInstance, foundSut.nodes, this.state.LoginStore.buttons.toolbar.forceLocalhost));
+              this.updateState({loggedIn: {$set: true}});
+            }
+          }}
+        >
+          <div className="form-group form-group-sm middle_login_toolbar_component">
+            <label className="middle_login_toolbar_component" htmlFor="login_user_id">User Id:</label>
+            <input type="text" id="login_user_id" className="form-control input-sm" style={{width:'100px'}} placeholder="UserId" value={this.state.userId}
+              onChange={(e) => {
+                this.updateState({userId: {$set: e.target.value}});
+              }}
+            />
+          </div>
+          <div className="form-group form-group-sm middle_login_toolbar_component">
+            <label className="middle_login_toolbar_component" htmlFor="login_lab_id">Lab Id:</label>
+            <input type="text" id="login_lab_id" className="form-control input-sm" style={{width:'100px'}} placeholder="LabId" value={this.state.labId}
+              onChange={(e) => {
+                this.updateState({labId: {$set: e.target.value}});
+              }}
+            />
+          </div>
+          <div className="form-group form-group-sm middle_login_toolbar_component">
+            <label className="middle_login_toolbar_component" htmlFor="login_system_under_test_sut">System Under Test:</label>
+            <select id="login_system_under_test_sut" className="form-control input-sm" value={this.state.systemUnderTest}
+              onChange={(e) => {
+                const value = e.target.value;
+                this.updateState({systemUnderTest: {$set: value}});
+                const foundSut = this._getSut(value);
+                if(foundSut) {
+                  this.updateState({systemUnderTestInstances: {$set: foundSut.instances}});
+                  if(0 !== foundSut.instances.length) {
+                    if(value === this.state.LoginStore.login.systemUnderTest) {
+                      this.updateState({systemUnderTestInstance: {$set: this.state.LoginStore.login.systemUnderTestInstance}});
+                    }
+                    else {
+                      this.updateState({systemUnderTestInstance: {$set: foundSut.instances[0].name}});
+                    }
+                  }
+                  else {
+                    this.updateState({systemUnderTestInstance: {$set: ''}});
+                    this.updateState({systemUnderTestInstances: {$set: []}});
+                  }
+                }
+              }}
+            >
+              {this.getSystemUnderTestOptions()}
+            </select>
+          </div>
+          {this.renderInstances()}
+          <div className="aj_btn_group middle_login_toolbar_component" role="group" aria-label="...">
+            <ButtonText id="login_login" colorMark="markup_color" icon="icon-stage" size="aj_btn_sm" text="Stage" disabled={this.state.LoginStore.working} placement="bottom" heading="Stage" content={this.state.LoginStore.buttons.toolbar.forceLocalhost ? 'localhost' : 'remotehost'} aria-label="Stage"
+              onClick={(e) => {
+                const foundSut = this._getSut(this.state.systemUnderTest);
+                if(foundSut) {
+                  this.dispatch(LoginStore, new ActionLoginUpdate(this.state.labId, this.state.userId, foundSut.repo, this.state.systemUnderTest, this.state.systemUnderTestInstance, foundSut.nodes, this.state.LoginStore.buttons.toolbar.forceLocalhost));
+                  this.updateState({loggedIn: {$set: true}});
+                }
+              }}
+            />
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderForceLocalHostButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderPingButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {/*this.renderCreateVirtualNetworksButton()*/}
+            {/*this.renderDeleteVirtualNetworksButton()*/}
+          </div>
+        </form>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/staging/middle-staging-view.jsx

@@ -0,0 +1,67 @@
+
+'use strict';
+
+import MiddleStagingTabLogical from './tabs/middle-staging-tab-logical';
+import MiddleStagingTabReport from './tabs/middle-staging-tab-report';
+import MiddleStagingTabSetup from './tabs/middle-staging-tab-setup';
+import Tabs from 'z-abs-complayer-bootstrap-client/client/tabs';
+import Tab from 'z-abs-complayer-bootstrap-client/client/tab';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import HelperTab from 'z-abs-corelayer-client/client/components/helper-tab';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleStagingView extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      activeKey: 0
+    });
+    this.helperTab = new HelperTab(['Logical', 'Setup', 'Report']);
+    this.state.activeKey = this.helperTab.getIndex(props.tab);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.tab, nextProps.tab)
+      || !this.shallowCompare(this.state.activeKey, nextState.activeKey);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    const key = this.helperTab.getIndex(this.props.tab);
+    if(this.state.activeKey !== key) {
+      this.updateState({activeKey: {$set: key}});
+    }
+  }
+  
+  getTabPath(index) {
+    return `${this.props.tab ? '' : 'login/'}${this.helperTab.getRoute(index)}`;
+  }
+  
+  render() {
+    let index = 0;
+    return (
+      <div className="middle_view_full">
+        <Tabs id="login_tabs" className="same_size_as_parent" activeKey={this.state.activeKey}
+          onSelect={(key) => {
+            if(undefined !== key) {
+              this.context.history(`${this.helperTab.getRoute(key)}`, {replace: true});
+            }
+          }}
+        >
+          <Tab id="stage_logical_tab" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+            <MiddleStagingTabLogical />
+          </Tab>
+          <Tab id="stage_setup_tab" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+            <MiddleStagingTabSetup />
+          </Tab>
+          <Tab id="stage_report_tab" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+            <MiddleStagingTabReport />
+          </Tab>
+        </Tabs>
+      </div>
+    );
+  }
+}
+
+
+MiddleStagingView.contextType = RouterContext;

package/project/client/components/middle/staging/middle-staging.jsx

@@ -0,0 +1,40 @@
+
+'use strict';
+
+import LoginStore from '../../../stores/login-store';
+import { ActionLoginMounted, } from '../../../actions/action-login/action-login';
+import MiddleStagingToolbar from './middle-staging-toolbar';
+import MiddleStagingView from './middle-staging-view';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStaging extends ReactComponentStore {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: false,
+        text: 'ActorJs - Staging'
+      };
+    });
+  }
+  
+  didMount() {
+    this.dispatch(LoginStore, new ActionLoginMounted());
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_login">
+        <MiddleStagingToolbar />
+        <Route switch={["/:tab", ""]} handler={MiddleStagingView} />
+      </div>
+    );
+  }
+}

package/project/client/components/middle/staging/tabs/middle-staging-tab-logical.jsx

@@ -0,0 +1,27 @@
+
+'use strict';
+
+import LoginStore from '../../../../stores/login-store';
+import ComponentImageLab from 'z-abs-complayer-markup-client/client/react-components/markup/component-image-lab';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStagingTabLogical extends ReactComponentStore {
+  constructor(props) {
+    super(props, [LoginStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.LoginStore.virtualNetworks, nextState.LoginStore.virtualNetworks)
+      || !this.shallowCompare(this.state.LoginStore.pingResults, nextState.LoginStore.pingResults);
+  }
+    
+  render() {
+    return (
+      <>
+        <ComponentImageLab width="100%" height="100%" virtualNetworks={this.state.LoginStore.virtualNetworks} pingResults={this.state.LoginStore.pingResults} />
+      </>
+    );
+  }
+}

package/project/client/components/middle/staging/tabs/middle-staging-tab-report.jsx

@@ -0,0 +1,62 @@
+
+'use strict';
+
+import LoginStore from '../../../../stores/login-store';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStagingTabReport extends ReactComponentStore {
+  constructor(props) {
+    super(props, [LoginStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.LoginStore.loginReport, nextState.LoginStore.loginReport);
+  }
+  
+  renderLog(log, index) {
+    return (
+      <tr key={index}>
+        <td>{index + 1}</td>
+        <td>{log.reportType}</td>
+        <td>{log.action}</td>
+        <td>{log.status}</td>
+        <td>{log.log}</td>
+      </tr>
+    );
+  }
+  
+  renderLogs() {
+    const loginReport = this.state.LoginStore.loginReport;
+    const rows = loginReport.map((log, index) => {
+      return this.renderLog(log, index);
+    });
+    return (
+      <>
+        {rows}
+      </>
+    );
+  }
+  
+  render() {
+    return (
+      <>
+        <table className="table table-bordered table-striped table-condensed table-hover">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>type</th>
+              <th>action</th>
+              <th>status</th>
+              <th>log</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.renderLogs()}
+          </tbody>
+        </table>
+      </>
+    );
+  }
+}

package/project/client/components/middle/staging/tabs/middle-staging-tab-repos.jsx

@@ -0,0 +1,96 @@
+
+'use strict';
+
+import LoginStore from '../../../../stores/login-store';
+import { ActionLoginReposUpdate, ActionLoginReposClear} from '../../../../actions/action-login/action-login';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStagingTabRepos extends ReactComponentStore {
+  constructor(props) {
+    super(props, [LoginStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  renderReposButton() {
+    return (
+      <ButtonNew colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" placement="bottom" heading="Repos" content="Run"
+        onClick={(e) => {
+          this.dispatch(LoginStore, new ActionLoginReposUpdate());
+        }}
+      />
+    );
+  }
+  
+  renderReposClearButton() {
+    return (
+      <ButtonNew colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" placement="bottom" heading="Repos" content="Clear"
+        onClick={(e) => {
+          this.dispatch(LoginStore, new ActionLoginReposClear());
+        }}
+      />
+    )
+  }
+  
+  renderReposTable() {
+    const repoRows = [];//this.state.LoginStore.repo.repos;
+ //   const dependencyRows = dependencies.map((dependency, index) => {
+ //     return this.renderDependenciesRows(dependency, index);
+ //   });
+    return (
+      <table className="test_case_table">
+        <thead className="">
+          <tr>
+            <th className="login_dependecies_column">#</th>
+            <th className="login_dependecies_column">Name</th>
+            <th className="login_dependecies_column">Type</th>
+            <th className="login_dependecies_column">Changed</th>
+            <th className="login_dependecies_column">New</th>
+          </tr>
+        </thead>  
+        <tbody className="">
+          {repoRows}
+        </tbody>
+      </table>
+    );
+  }
+  
+  renderRepos() {
+    return (
+      <div>
+        <h3>ActorJs - Repos</h3>
+        {this.renderReposTable()}
+      </div>
+    );
+  }
+  
+  render() {
+    return (
+      <div>
+        <div className="analyze_panel">
+          <div className="btn-toolbar" role="toolbar" aria-label="...">
+            <div className="btn-group btn-group-xs" role="group" aria-label="...">
+              {this.renderReposButton()}
+              {this.renderReposClearButton()}
+            </div>
+            <div className="btn-group btn-group-xs" role="group" aria-label="...">
+              {/*this.renderFilterParentButton()*/}
+              {/*this.renderFilterDependenciesButton()*/}
+            </div>
+            <div className="btn-group btn-group-xs" role="group" aria-label="...">
+              {/*this.renderDependenciesTime()*/}
+            </div>
+          </div>
+        </div>
+        <div className="test_case_tab_view_with_toolbar">
+          {this.renderRepos()}
+        </div>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/staging/tabs/middle-staging-tab-setup.jsx

@@ -0,0 +1,73 @@
+
+'use strict';
+
+import LoginStore from '../../../../stores/login-store';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import React from 'react';
+
+
+export default class MiddleStagingTabSetup extends ReactComponentStore {
+  constructor(props) {
+    super(props, [LoginStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.LoginStore.osNetworks, nextState.LoginStore.osNetworks)
+      || !this.shallowCompare(this.state.LoginStore.cpus, nextState.LoginStore.cpus);
+  }
+ 
+  
+  renderOs() {
+    return this.state.LoginStore.cpus.map((cpu, index) => {
+      return (
+        <div key={index} className="test_machine_os_network_interface">
+          {`${cpu.model}`}
+        </div>
+      );
+    });
+  }
+  
+  renderInterfaces(addresses) {
+    return addresses.map((interface_, connectionIndex) => {
+      return (
+        <div key={interface_.address} className="test_machine_os_network_interface">
+          {`${interface_.family} - ${interface_.internal ? 'internal' : 'global'} - ${interface_.address}`}
+        </div>
+      );
+    });
+  }
+  
+  renderNetwork(osNetwork) {
+    return (
+      <React.Fragment key={osNetwork.name}>
+        <div className="test_machine_os_network_name">
+          {osNetwork.name}
+        </div>
+        {this.renderInterfaces(osNetwork.addresses)}
+      </React.Fragment>
+    );
+  }
+  
+  renderNetworks() {
+    const networks = [];
+    this.state.LoginStore.osNetworks.forEach((osNetwork) => {
+      networks.push(this.renderNetwork(osNetwork));
+    });
+    return networks;
+  }
+  
+  render() {
+    return (
+      <>
+        <div className="test_machine_os_networks">
+          {this.renderNetworks()}
+        </div>
+        <div className="test_machine_cpus">
+          {this.renderOs()}
+        </div>
+      </>
+    );
+  }
+}
+