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

package/project/client/components/middle/content/middle-content-view-video.jsx

@@ -0,0 +1,60 @@
+
+'use strict';
+
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkupChange } from '../../../actions/action-content/action-content';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataContentVideoGlobal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-video-global';
+import DataContentVideoLocal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-video-local';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewVideo extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.dataContentVideoGlobal = new DataContentVideoGlobal();
+    this.dataContentVideoLocal = new DataContentVideoLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+     return 'video' === nextState.ContentStore.currentView
+      && (
+        !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentVideoLocals, nextState.ContentStore.contentVideoLocals)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentVideoGlobals, nextState.ContentStore.contentVideoGlobals)
+      );
+  }
+
+  renderMarkup() {
+    return (
+      <div className="content_group">
+        <label htmlFor="content_video_markup_textarea">Content - Markup</label>
+        <ComponentMarkedTextarea id="content_video_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.ContentStore.markup.content} results={this.state.ContentStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(ContentStore, new ActionContentMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.ContentStore.markup.definition) {
+      return (
+        <div className="content_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="content_tab_view">
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentVideoLocal} values={this.state.ContentStore.contentVideoLocals}/>
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentVideoGlobal} values={this.state.ContentStore.contentVideoGlobals}/>
+        </div>
+      );
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+
+'use strict';
+
+import MiddleContentViewText from './middle-content-view-text';
+import MiddleContentViewDocuments from './middle-content-view-documents';
+import MiddleContentViewImage from './middle-content-view-image';
+import MiddleContentViewVideo from './middle-content-view-video';
+import MiddleContentViewAudio from './middle-content-view-audio';
+import MiddleContentViewOther from './middle-content-view-other';
+import ContentStore from '../../../stores/content-store';
+import { ActionContentTextGet, ActionContentDocumentsGet, ActionContentImageGet, ActionContentVideoGet, ActionContentAudioGet, ActionContentOtherGet, ActionContentMarkupCancel } from '../../../actions/action-content/action-content';
+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 ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewContent extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore], {
+      activeKey: 0
+    });
+    this.helperTab = new HelperTab(['Text', 'Documents', 'Image', 'Video', 'Audio', 'Other']);
+    this.state.activeKey = this.helperTab.getIndex(props.tab);
+  }
+  
+  didMount() {
+    this._getData(this.state.activeKey);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.tab, nextProps.tab)
+      || !this.shallowCompare(this.state.activeKey, nextState.activeKey)
+      || !this.shallowCompare(this.state.ContentStore.markup.definition, nextState.ContentStore.markup.definition);
+  }
+  
+  didUpdate(prevProps) {
+    const nextKey = this.helperTab.getIndex(this.props.tab);
+    if(this.state.activeKey !== nextKey) {
+      this.updateState({activeKey: {$set: nextKey}});
+      this._getData(nextKey);
+    }
+  }
+  
+  render() {
+    let index = 0;
+    return (
+      <div className="same_size_as_parent">
+        <div className="content_tabs">
+          <Tabs id="content_tabs" className="content_tabs_view" activeKey={this.state.activeKey}
+            onSelect={(key) => {
+              if(undefined !== key && this.state.activeKey !== key) {
+                if(this.state.ContentStore.markup.definition) {
+                  // TODO: Ask if we really want to leve markup.
+                  this.dispatch(ContentStore, new ActionContentMarkupCancel());
+                }
+                this.context.history(`${this.helperTab.getRoute(key)}`, {replace: true});
+              }
+            }}  
+            >
+            <Tab id="content_text_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleContentViewText />
+            </Tab>
+            <Tab id="content_documents_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleContentViewDocuments />
+            </Tab>
+            <Tab id="content_image_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleContentViewImage />
+            </Tab>
+            <Tab id="content_video_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleContentViewVideo />
+            </Tab>
+            <Tab id="content_audio_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleContentViewAudio />
+            </Tab>
+            <Tab id="content_other_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleContentViewOther />
+            </Tab>
+          </Tabs>
+        </div>
+      </div>
+    );
+  }
+  
+  _getData(key) {
+    let tabName = this.helperTab.getTabName(key);
+    if('Text' === tabName) {
+      this.dispatch(ContentStore, new ActionContentTextGet());
+    }
+    else if('Documents' === tabName) {
+      this.dispatch(ContentStore, new ActionContentDocumentsGet());
+    }
+    else if('Image' === tabName) {
+      this.dispatch(ContentStore, new ActionContentImageGet());
+    }
+    else if('Video' === tabName) {
+      this.dispatch(ContentStore, new ActionContentVideoGet());
+    }
+    else if('Audio' === tabName) {
+      this.dispatch(ContentStore, new ActionContentAudioGet());
+    }
+    else if('Other' === tabName) {
+      this.dispatch(ContentStore, new ActionContentOtherGet());
+    }
+  }
+}
+
+
+MiddleContentViewContent.contextType = RouterContext;

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

@@ -0,0 +1,39 @@
+
+'use strict';
+
+import React from 'react';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import MiddleContentToolbar from './middle-content-toolbar';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import MiddleSidebar from '../middle_sidebar';
+import MiddleContentView from './middle-content-view';
+
+
+export default class MiddleContent extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: this.props._uriPath,
+        text: this.props._uriPath ? this.props._uriPath : 'Content',
+        prefix: 'CONT: '
+      };
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath);
+  }
+  
+  render() {
+    return (
+      <div className="middle">
+        <MiddleContentToolbar />
+        <MiddleSidebar />
+        <div className="middle_view middle_view_content">
+          <Route switch="/:tab" handler={MiddleContentView} />
+        </div>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/middle-not-found.jsx

@@ -0,0 +1,24 @@
+
+'use strict';
+
+import React from 'react';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+
+
+export default class MiddleNotFound extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div >
+        NOT FOUND
+      </div>
+    );	
+  }
+}

package/project/client/components/middle/middle-sut-fut-filter.jsx

@@ -0,0 +1,90 @@
+
+'use strict';
+
+import React from 'react';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import FilterStore from '../../stores/filter-store';
+import SystemUnderTestStore from '../../stores/system-under-test-store';
+import { ActionSutFilter } from '../../actions/action-sut-fut-filter';
+
+
+export default class MiddleFilter extends ReactComponentStore {
+  constructor(props) {
+    super(props, [FilterStore, SystemUnderTestStore]);
+  }
+
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompare(this.props.fut, nextProps.fut)
+      || !this.shallowCompare(this.props.disabled, nextProps.disabled)
+      || !this.shallowCompare(this.state.FilterStore, nextState.FilterStore)
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests);
+  }  
+  
+  setSut(sut) {
+    this.dispatch(FilterStore, new ActionSutFilter(sut));
+  }
+  
+  /*renderSutMenuItem() {
+    let systemUnderTestRows = [];
+    systemUnderTestRows = this.state.SystemUnderTestStore.systemUnderTests.map((sut, i) => {
+      if(!this.state.FilterStore.hide || (this.state.FilterStore.hide && sut.status !== 'hidden')) {
+        return (
+          <MenuItem key={i + 1} eventKey={sut.name}
+            onSelect={(key, e) => {
+              this.setSut(key);
+            }}
+          >{sut.name}</MenuItem>
+        );
+      }
+    });
+    return systemUnderTestRows;
+  }*/
+  
+  renderSutDropdownButton() {
+    /*if(this.props.sut) {
+      return (
+        <OverlayTrigger placement="bottom" overlay={this.getTooltip('Filter:', 'System Under Test')}>
+          <SplitButton id="sut-filter" bsStyle="default" bsSize="small" title={`sut: ${this.state.FilterStore.sut}`}>
+            <MenuItem key="0" eventKey="*"
+              onSelect={(key, e) => {
+                this.setSut(key);
+              }}
+            >*</MenuItem>
+            <MenuItem divider />
+            {this.renderSutMenuItem()}
+          </SplitButton>
+        </OverlayTrigger>
+      );
+    }*/
+  }
+  
+  renderFutDropdownButton() {
+    /*if(this.props.fut && this.state.FilterStore.sut !== '*') {
+      return (
+        <OverlayTrigger placement="bottom" overlay={this.getTooltip('Filter:', 'Function Under Test')}>
+          <SplitButton id="fut-filter" bsStyle="default" bsSize="small" title={`fut: ${this.state.FilterStore.fut}`}>
+            <MenuItem eventKey="1">*</MenuItem>
+            <MenuItem divider />
+            <MenuItem eventKey="2">Actor</MenuItem>
+            <MenuItem eventKey="4">Demo</MenuItem>
+          </SplitButton>
+        </OverlayTrigger>
+      );
+    }*/
+  }
+  
+  render() {
+    if(!this.props.disabled) {
+      return (
+        <div className="btn-groupbtn-group-sm" role="group" aria-label="...">
+          {this.renderSutDropdownButton()}
+          {this.renderFutDropdownButton()}
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+
+'use strict';
+
+import PlusServicesStore from '../../stores/plus-services-store';
+import MiddleAbbreviation from './abbreviation/middle-abbreviation';
+import MiddleActorEditor from './actor-editor/middle-actor-editor';
+import MiddleAddresses from './addresses/middle-addresses';
+import MiddleCodeEditor from 'z-abs-complayer-codeeditor-client/client/components/middle-code-editor';
+import MiddleContent from './content/middle-content';
+import MiddleSidebar from './middle_sidebar';
+import MiddleDocumentation from 'z-abs-complayer-documentation-client/client/react-components/documentation/middle-documentation';
+import MiddleStaging from './staging/middle-staging';
+import MiddlePlugins from './plugins/middle-plugins';
+import MiddlePlusServices from './plus-services/middle-plus-services';
+import MiddleRepos from './repos/middle-repos';
+import MiddleStackEditor from './stack-editor/middle-stack-editor';
+import MiddleStart from './start/middle-start';
+import MiddleSystemUnderTest from './system-under-test/middle-system-under-test';
+import MiddleTestCases from './test-cases/middle-test-cases';
+import MiddleTestData from './test-data/middle-test-data';
+import MiddleTestSuites from './test-suites/middle-test-suites';
+import MiddleUser from './user/middle-user';
+import MiddleVideos from './videos/middle-videos';
+import DocumentationStore from '../../stores/documentation-store';
+import EducationStore from '../../stores/education-store';
+import WorkshopStore from '../../stores/workshop-store';
+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 Middle extends ReactComponentStore {
+  constructor(props) {
+    super(props, [PlusServicesStore]);
+    this.docsStore = null;
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.PlusServicesStore, nextState.PlusServicesStore);
+  }
+  
+  renderRouteServiceDocs() {
+    if(PlusServicesStore.isLoaded('docs')) {
+      if(!this.docsStore) {
+        const DocsStore = require('z-abs-plus-services-docs-client/client/stores/docs-store');
+        this.docsStore = new DocsStore();
+      }
+      return (
+        <Route switch="/local-documentation-Local*" documentationStore={this.docsStore} plusServicesStore={PlusServicesStore} hasDocs="true" sidebar={MiddleSidebar} titleText="Docs Local" titlePrefix="DL" handler={MiddleDocumentation} />
+      );
+    }
+  }
+    
+  renderRouteServices() {
+    return (
+      <>
+        {this.renderRouteServiceDocs()}
+      </>
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_outer">
+        <Route switch="/abbreviation*" handler={MiddleAbbreviation} />
+        <Route switch="/actor-editor*" handler={MiddleActorEditor} />
+        <Route switch="/addresses*" handler={MiddleAddresses} />
+        <Route switch="/code-editor*" handler={MiddleCodeEditor} />
+        <Route switch="/content*" handler={MiddleContent} />
+        <Route switch="/documentation*" documentationStore={DocumentationStore} plusServicesStore={PlusServicesStore} hasDocs="false" sidebar={MiddleSidebar} titleText="Documentation" titlePrefix="DOC" handler={MiddleDocumentation} />
+        <Route switch="/education*" documentationStore={EducationStore} plusServicesStore={PlusServicesStore} hasDocs="false" sidebar={MiddleSidebar} titleText="Education" titlePrefix="EDU" handler={MiddleDocumentation} />
+        <Route switch="/stage*" handler={MiddleStaging} />
+        <Route switch="/plugins*" handler={MiddlePlugins} /> 
+        <Route switch="/plus-services*" handler={MiddlePlusServices} />
+        <Route switch="/repos*" handler={MiddleRepos} />
+        <Route switch="/stack-editor*" handler={MiddleStackEditor} />
+        <Route switch="/start*" handler={MiddleStart} />
+        <Route switch="/systems-under-test*" handler={MiddleSystemUnderTest} />
+        <Route switch="/test-cases*" handler={MiddleTestCases} />
+        <Route switch="/test-suites*" handler={MiddleTestSuites} />
+        <Route switch="/test-data*" handler={MiddleTestData} />
+        <Route switch="/user*" handler={MiddleUser} />
+        <Route switch="/videos*" handler={MiddleVideos} />
+        <Route switch="/workshop*" documentationStore={WorkshopStore} plusServicesStore={PlusServicesStore} hasDocs="false" sidebar={MiddleSidebar} titleText="Workshop" titlePrefix="WS" handler={MiddleDocumentation} />
+        {this.renderRouteServices()}
+      </div>
+    );
+  }
+}
+

package/project/client/components/middle/middle_sidebar.jsx

@@ -0,0 +1,256 @@
+
+'use strict';
+
+import PluginsStore from '../../stores/plugins-store';
+import PlusServicesStore from '../../stores/plus-services-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 MiddleSidebar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [PluginsStore, PlusServicesStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.PluginsStore.plugins, nextState.PluginsStore.plugins)
+      || !this.shallowCompare(this.state.PlusServicesStore.plusServices, nextState.PlusServicesStore.plusServices);
+  }
+  
+  renderPluginLeft(path, name, index) {
+    return (
+      <div key={index} style={{float:'left',display:'inline-block'}}>
+        <Link className="middle_sidebar" global href={`/plugins${path}`}>{name}</Link>
+      </div>
+    );
+  }
+  
+  renderPluginRight(path, name, index) {
+    return (
+      <div key={index} style={{marginLeft:'85px'}}>
+        <Link className="middle_sidebar" global href={`/plugins${path}`}>{name}</Link>
+      </div>
+    );
+  }
+  
+  renderPluginClear(index) {
+    return (
+      <div key={index} style={{clear:'both'}} />
+    );
+  }
+  
+  _renderPlugins() {
+    let i = -1;
+    const plugins = [];
+    this.state.PluginsStore.plugins.forEach((plugin) => {
+      if(0 === (++i % 2)) {
+        plugins.push(this.renderPluginLeft(plugin.path, plugin.name, i));
+      }
+      else {
+        plugins.push(this.renderPluginRight(plugin.path, plugin.name, i));
+      }
+    });
+    if(0 !== (++i % 2)) {
+      plugins.push(this.renderPluginClear(i));
+    }
+    return plugins;
+  }
+  
+  renderPlugins() {
+    if(!PluginsStore.isLoaded()) {
+      return null;
+    }
+    else {
+      return (
+        <div>
+          <h4 className="middle_sidebar">Plugins</h4>
+          {this._renderPlugins()}
+        </div>
+      );
+    }
+  }
+  
+  renderPlusServiceLeft(path, name, index) {
+    return (
+      <div key={index} style={{float:'left',display:'inline-block'}}>
+        <Link className="middle_sidebar" global href={`/plus-services${path}`}>{name}</Link>
+      </div>
+    );
+  }
+  
+  renderPlusServiceRight(path, name, index) {
+    return (
+      <div key={index} style={{marginLeft:'85px'}}>
+        <Link className="middle_sidebar" global href={`/plus-services${path}`}>{name}</Link>
+      </div>
+    );
+  }
+  
+  _renderPlusServices() {
+    let i = -1;
+    const plusServices = [];
+    this.state.PlusServicesStore.plusServices.forEach((plusService) => {
+      if(0 === (++i % 2)) {
+        plusServices.push(this.renderPlusServiceLeft(plusService.path, plusService.name, i));
+      }
+      else {
+        plusServices.push(this.renderPlusServiceRight(plusService.path, plusService.name, i));
+      }
+    });
+    if(0 !== (++i % 2)) {
+      plusServices.push(this.renderPluginClear(i));
+    }
+    return plusServices;
+  }
+    
+  renderPlusServices() {
+    if(!PlusServicesStore.isLoaded()) {
+      return null;
+    }
+    else {
+      return (
+        <div>
+          <h4 className="middle_sidebar">Plus Services</h4>
+          {this._renderPlusServices()}
+        </div>
+      );
+    }
+  }
+  
+  render() {
+    return (
+      <div className="middle_sidebar">
+        <div className="panel panel-default middle_sidebar_panel">
+          <div className="panel-body middle_sidebar_panel_body">
+            <div>
+              <h4 className="middle_sidebar">Core tools</h4>
+              <div style={{position:'relative',float:'left'}}>
+                <Link id="middle_repo_link" className="middle_sidebar" href="/repos" replaceStay>Repos</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link id="middle_sut_link" className="middle_sidebar" href="/systems-under-test" replaceStay>SUTs</Link>
+              </div>
+              <div style={{position:'relative',float:'left'}}>
+                <Link id="middle_ts_link" className="middle_sidebar" href="/test-suites" replaceStay>Test Suites</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link id="middle_tc_link" className="middle_sidebar" href="/test-cases" replaceStay>Test Cases</Link>
+              </div>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link id="middle_stacks_link" className="middle_sidebar" href="/stack-editor" replaceStay>Stacks</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link id="middle_actors_link" className="middle_sidebar" href="/actor-editor" replaceStay>Actors</Link>
+              </div>
+            </div>
+            <div>
+              <h4 className="middle_sidebar">Addresses</h4>
+              <table>
+                <tbody>
+                  <tr>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/src" replaceStay>Src</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/dst" replaceStay>Dst</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/srv" replaceStay>Srv</Link>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/client-address" replaceStay>Client</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/sut-address" replaceStay>Sut</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/server-address" replaceStay>Server</Link>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/client-interface" replaceStay>iClient</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/sut-interface" replaceStay>iSut</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/server-interface" replaceStay>iServer</Link>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/network-interface" replaceStay>iNetwork</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/ports" replaceStay>Ports</Link>
+                    </td>
+                    <td className="sidbar_3_col">
+                      <Link className="middle_sidebar" href="/addresses/dns" replaceStay>Dns</Link>
+                    </td>
+                    <td>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div>
+              <h4 className="middle_sidebar">Test Data</h4>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/test-data/general" replaceStay>General</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link className="middle_sidebar" href="/test-data/system" replaceStay>System</Link>
+              </div>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/test-data/output" replaceStay>Output</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link className="middle_sidebar" href="/test-data/environment" replaceStay>Environment</Link>
+              </div>
+            </div>
+            <div>
+              <h4 className="middle_sidebar">Content</h4>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/content/text" replaceStay>Text</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link className="middle_sidebar" href="/content/documents" replaceStay>Documents</Link>
+              </div>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/content/video" replaceStay>Video</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link className="middle_sidebar" href="/content/audio" replaceStay>Audio</Link>
+              </div>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/content/image" replaceStay>Image</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link className="middle_sidebar" href="/content/other" replaceStay>Other</Link>
+              </div>
+            </div>
+            {this.renderPlugins()}
+            {/*this.renderPlusServices()*/}
+            {/*<div>
+              <h4 className="middle_sidebar">Support</h4>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/support/feedback" replaceStay>Feedback</Link>
+              </div>
+              <div style={{marginLeft:'85px'}}>
+                <Link className="middle_sidebar" href="/support/issue" replaceStay>Issue</Link>
+              </div>
+              <div style={{float:'left',display:'inline-block'}}>
+                <Link className="middle_sidebar" href="/support/question" replaceStay>Question</Link>
+              </div>
+              <div style={{clear:'both'}}></div>
+            </div>*/}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}