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

package/project/client/components/middle/actor-editor/middle-actor-editor-view.jsx

@@ -0,0 +1,157 @@
+
+'use strict';
+ 
+import ActorEditorStore from '../../../stores/actor-editor-store';
+import { ActionActorEditorFileGet, ActionActorEditorFileSet, ActionActorEditorFileEdit, ActionActorEditorFileClose, ActionActorEditorFileMove } from '../../../actions/action-actor-editor/action-actor-editor-file';
+import Tabs from 'z-abs-complayer-bootstrap-client/client/tabs';
+import Tab from 'z-abs-complayer-bootstrap-client/client/tab';
+import CodeMirrorEditor from 'z-abs-complayer-codemirror-client/client/code-mirror-editor';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import LogType from 'z-abs-funclayer-engine-cs/clientServer/log/log-type';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleActorEditorView extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ActorEditorStore]);
+    this.close = false;
+  }
+  
+  didMount() {
+    if(this.props._uriPath && 0 < this.props._uriPath.length) {
+      this.dispatch(ActorEditorStore, new ActionActorEditorFileSet(`.${this.props._uriPath}`, this.props.location.search));
+    }
+    else {
+      this.dispatch(ActorEditorStore, new ActionActorEditorFileSet());
+    }
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath)
+      || !this.shallowCompare(this.props.location.search, nextProps.location.search)
+      || !this.shallowCompareMapValues(this.state.ActorEditorStore.files, nextState.ActorEditorStore.files)
+      || !this.shallowCompare(this.state.ActorEditorStore.current, nextState.ActorEditorStore.current)
+      || !this.shallowCompare(this.state.ActorEditorStore.persistentData, nextState.ActorEditorStore.persistentData)
+      || !this.shallowCompare(this.state.ActorEditorStore.build, nextState.ActorEditorStore.build);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    if(this.props._uriPath !== prevProps._uriPath) {
+      this.dispatch(ActorEditorStore, new ActionActorEditorFileSet(`.${this.props._uriPath}`, this.props.location.search));
+    }
+  }
+  
+  renderTab(options) {
+    const result = [];
+    const queryState = this.state.ActorEditorStore.current.query;  
+    const query = !queryState ? undefined : {
+      url: queryState.url,
+      line: queryState.line,
+      typeCss: LogType.csses[Number.parseInt(this.state.ActorEditorStore.current.query.type)]
+    };
+    this.state.ActorEditorStore.files.forEach((file, key) => {
+      if(null !== file.content) {
+        const currentType = 'file_inline' === this.state.ActorEditorStore.current.type ? 'file' : this.state.ActorEditorStore.current.type;
+        result.push(
+          <Tab eventKey={key} key={key} id={key} 
+            title={
+              <div>
+                {file.title}
+                <button type="button" className={this.theme(this.state.ActorEditorStore.persistentData.darkMode, 'middle_code_editor_close')} aria-label="Close"
+                  onClick={(e, a) => {
+                    this.close = true;
+                    this.dispatch(ActorEditorStore, new ActionActorEditorFileClose(key));
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            }
+            onMove={(fromKey, toKey) => {
+              this.dispatch(ActorEditorStore, new ActionActorEditorFileMove(fromKey, toKey));
+            }}
+          >
+            <CodeMirrorEditor id={`actor_editor_view_${key}`} projectId={file.projectId} docKey={key} code={file.content} build={this.state.ActorEditorStore.build} options={this.getOptions(file.type, key)} currentType={currentType} currentFile={this.state.ActorEditorStore.current.file} currentQuery={query} darkMode={this.state.ActorEditorStore.persistentData.darkMode}
+              onChanged={(projectId, docKey, code) => {
+                this.dispatch(ActorEditorStore, new ActionActorEditorFileEdit(projectId, docKey, code));
+              }}
+              onFocusChange={(focused, docKey) => {
+                if(focused) {
+                  const file = this.state.ActorEditorStore.files.get(docKey);
+                  if(file) {
+                    this.dispatch(ActorEditorStore, new ActionActorEditorFileGet(file.projectId, file.key, file.title, file.path, file.type));
+                  }
+                }
+              }}
+            />
+          </Tab>
+        );
+      }
+    });
+    return result;
+  }
+
+  renderTabs(options) {
+    if(0 !== this.state.ActorEditorStore.files.size) {
+      return (
+        <Tabs id="actor_editor_tabs" draggable="true" activeKey={null !== this.state.ActorEditorStore.current.file ? this.state.ActorEditorStore.current.file.key : null} darkMode={this.state.ActorEditorStore.persistentData.darkMode}
+          onSelect={(selectedKey) => {
+            if(!this.close) {
+              const file = this.state.ActorEditorStore.files.get(selectedKey);
+              this.dispatch(ActorEditorStore, new ActionActorEditorFileGet(file.projectId, file.key, file.title, file.path, file.type));
+            }
+            else {
+              this.close = false;
+            }
+          }}
+        >
+          {this.renderTab(options)}
+        </Tabs>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+
+  getOptions(type, key) {
+    return {
+      lineNumbers: true,
+      highlightActiveLineGutter: true,
+      highlightActiveLine: true,
+      closeBrackets: true,
+      bracketMatching: true,
+      drawSelection: true,
+      history: true,
+      autocompletion: true,
+
+      tabKeyAction: 'indent', 
+      tabSize: 2,
+      indentType: 'spaces',
+      indentUnit: 2,
+
+      darkMode: true,
+      breakpointGutter: false,
+      foldGutter: true,
+      emptyLine: true,
+
+      buildGutter: true,
+      
+      type
+    };
+  }
+  
+  render() {
+    const darkMode = this.state.ActorEditorStore.persistentData.darkMode;
+    return (
+      <div className={this.theme(darkMode, "view")}>
+        {this.renderTabs()}
+      </div>
+    );
+  }
+}
+
+
+MiddleActorEditorView.contextType = RouterContext;
+MiddleActorEditorView.REMOVE_KEY_LENGTH = 'actor_editor_tabs-tab-'.length;

package/project/client/components/middle/actor-editor/middle-actor-editor.jsx

@@ -0,0 +1,38 @@
+
+'use strict';
+
+import ActorEditorStore from '../../../stores/actor-editor-store';
+import MiddleActorEditorToolbar from './middle-actor-editor-toolbar';
+import MiddleActorEditorSidebar from './middle-actor-editor-sidebar';
+import MiddleActorEditorView from './middle-actor-editor-view';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleActorEditor extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: this.props._uriPath,
+        text: this.props._uriPath ? this.props._uriPath : 'Actors',
+        prefix: 'AE: '
+      };
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath);
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_code_editor">
+        <Route switch="*" handler={MiddleActorEditorToolbar} />
+        <Route switch="*" handler={MiddleActorEditorSidebar} />
+        <Route switch="*" handler={MiddleActorEditorView} />
+      </div>
+    );
+  }
+}

package/project/client/components/middle/addresses/helpers/stage-filter.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+
+class StageFilter {
+  static filter(stage, value, filter, sutMandatory= false) {
+    if(!filter) {
+      return true;
+    }
+    if(stage.systemUnderTest !== value.sut && (sutMandatory || '' !== value.sut)) {
+      return false;
+    }
+    else if(stage.labId === value.labId && stage.userId === value.userId) {
+      return true;
+    }
+    else if('' === value.labId && '' === value.userId) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  
+  static sutFilter(stage, value, filter) {
+    if(!filter) {
+      return true;
+    }
+    return stage.systemUnderTest === value.sut;
+  }
+}
+
+module.exports = StageFilter;

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

@@ -0,0 +1,183 @@
+
+'use strict';
+
+import AddressesStore from '../../../stores/addresses-store';
+import LoginStore from '../../../stores/login-store';
+import { ActionAddressesMarkup, ActionAddressesMarkupSave, ActionAddressesMarkupCancel, ActionAddressesLabUserFilter } from '../../../actions/action-addresses/action-addresses';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleAddressesToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [AddressesStore, LoginStore]);
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+  }
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.AddressesStore.markup, nextState.AddressesStore.markup)
+      || !this.shallowCompare(this.state.AddressesStore.labUserFilter, nextState.AddressesStore.labUserFilter)
+      || !this.shallowCompare(this.state.LoginStore.login, nextState.LoginStore.login);
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _markupOpen() {
+    this.dispatch(AddressesStore, new ActionAddressesMarkup());
+  }
+  
+  _markupSave() {
+    this.dispatch(AddressesStore, new ActionAddressesMarkupSave());
+  }
+  
+  _markupHelp() {
+  
+  }
+  
+  _markupCancel() {
+    this.dispatch(AddressesStore, new ActionAddressesMarkupCancel());
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey && 'o' === e.key) {
+      if(!this.markupDisabledOpen) {
+        e.preventDefault();
+        this._markupOpen();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && '?' === e.key) {
+      if(!this.markupDisabledHelp) {
+        e.preventDefault();
+        this._markupHelp();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      if(!this.markupDisabledCancel) {
+        e.preventDefault();
+        this._markupCancel();
+      }
+    }
+    else if(e.ctrlKey && 's' === e.key) {
+      if(!this.markupDisabledSave) {
+        e.preventDefault();
+        this._markupSave();
+      }
+    }
+  }
+  
+  renderMarkupOpenButton() {
+    this.markupDisabledOpen = this.state.AddressesStore.markup.definition;
+    return (
+      <ButtonNew id="addresses_markup_open" icon="icon-markup-open" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.markupDisabledOpen}
+        onClick={(e) => {
+          this._markupOpen();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupSaveButton() {
+    this.markupDisabledSave = this.state.AddressesStore.markup.content === this.state.AddressesStore.markup.contentOriginal;
+    return (
+      <ButtonNew id="addresses_markup_save" icon="icon-markup-save" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.markupDisabledSave}
+        onClick={(e) => {
+          this._markupSave();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupHelpButton() {
+    this.markupDisabledHelp = this.state.AddressesStore.markup.definition;
+    return (
+      <ButtonNew id="addresses_markup_help" icon="icon-markup-help" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+?" disabled={this.markupDisabledHelp}
+        onClick={(e) => {
+          this._markupHelp();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupCancelButton() {
+    this.markupDisabledCancel = !this.state.AddressesStore.markup.definition;
+    return (
+      <ButtonNew id="addresses_markup_cancel" icon="icon-markup-close" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledCancel}
+        onClick={(e) => {
+          this._markupCancel();
+        }}
+      />
+    );
+  }
+  
+  renderLabUserFilterInfo() {
+    if(this.state.AddressesStore.labUserFilter) {
+      return (
+        <div id="addresses_lab_user_filter_info_div" className="btn-group btn-group-sm labuser_filter labuser_filter" role="group" aria-label="...">
+          <h4 id="addresses_lab_user_filter_info_h4" className="labuser_filter">{`Filter - Sut: ${this.state.LoginStore.login.systemUnderTest}`}</h4>
+        </div>
+      );
+    }
+  }
+  
+  renderLabUserFilter() {
+    const filter = this.state.AddressesStore.labUserFilter ? 'show all' : 'show staged sut';
+    return (
+      <>
+        <ButtonNew id="addresses_lab_user_filter" className="labuser_filter" icon="icon-filter" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Filter" content={filter} active={this.state.AddressesStore.labUserFilter}
+          onClick={(e) => {
+            this.dispatch(AddressesStore, new ActionAddressesLabUserFilter(!this.state.AddressesStore.labUserFilter));
+          }}
+        />
+      </>
+    );
+  }
+  
+  renderStageButton() {
+    return (
+      <ButtonNew id="address_stage" colorMark="markup_color" icon="icon-stage" size="aj_btn_sm" placement="bottom" heading="Goto" content="Stage" aria-label="Stage"
+        onClick={(e) => {
+          this.context.history(`/stage`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar">
+        <div className="toolbar" role="toolbar" aria-label="...">
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderMarkupOpenButton()}
+            {this.renderMarkupSaveButton()}
+            {this.renderMarkupHelpButton()}
+            {this.renderMarkupCancelButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderLabUserFilter()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderLabUserFilterInfo()}
+          </div>
+          <div className="aj_btn_group pull-right" role="group" aria-label="...">
+            {this.renderStageButton()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+MiddleAddressesToolbar.contextType = RouterContext;

package/project/client/components/middle/addresses/middle-addresses-view-client-address.jsx

@@ -0,0 +1,67 @@
+
+'use strict';
+
+import StageFilter from './helpers/stage-filter';
+import AddressesStore from '../../../stores/addresses-store';
+import { ActionAddressesMarkupChange } from '../../../actions/action-addresses/action-addresses';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataAddressesClientAddressGlobal from 'z-abs-complayer-markup-client/client/data/addresses/data-addresses-client-address-global';
+import DataAddressesClientAddressLocal from 'z-abs-complayer-markup-client/client/data/addresses/data-addresses-client-address-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 MiddleAddressesViewClientAddress extends ReactComponentStore {
+  constructor(props) {
+    super(props, [AddressesStore]);
+    this.dataAddressesClientAddressGlobal = new DataAddressesClientAddressGlobal();
+    this.dataAddressesClientAddressLocal = new DataAddressesClientAddressLocal();
+  }
+
+  shouldUpdate(nextProps, nextState) {
+    return 'ClientAddress' === nextState.AddressesStore.currentView
+      && (
+        !this.shallowCompare(this.props.stage, nextProps.stage)
+        || !this.shallowCompare(this.state.AddressesStore.markup, nextState.AddressesStore.markup)
+        || !this.shallowCompareArrayValues(this.state.AddressesStore.addressesClientAddressLocals, nextState.AddressesStore.addressesClientAddressLocals)
+        || !this.shallowCompareArrayValues(this.state.AddressesStore.addressesClientAddressGlobals, nextState.AddressesStore.addressesClientAddressGlobals)
+        || !this.shallowCompare(this.state.AddressesStore.labUserFilter, nextState.AddressesStore.labUserFilter)
+      );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="address_group">
+        <label htmlFor="client_address_markup_textarea">Address - Markup</label>
+        <ComponentMarkedTextarea id="client_address_markup_textarea" className="form-control address_definition same_size_as_parent" rows="10" value={this.state.AddressesStore.markup.content} results={this.state.AddressesStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(AddressesStore, new ActionAddressesMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.AddressesStore.markup.definition) {
+      return (
+        <div className="address_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="address_tab_view">
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" dataTable={this.dataAddressesClientAddressLocal} values={this.state.AddressesStore.addressesClientAddressLocals} stage={this.props.stage} filterData={this.state.AddressesStore.labUserFilter} filter={(value, stage, filterData) => {
+            return StageFilter.filter(this.props.stage, value, filterData);
+          }}/>
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" dataTable={this.dataAddressesClientAddressGlobal} values={this.state.AddressesStore.addressesClientAddressGlobals} stage={this.props.stage} filterData={this.state.AddressesStore.labUserFilter} filter={(value, stage, filterData) => {
+            return StageFilter.filter(this.props.stage, value, filterData);
+          }}/>
+        </div>
+      );
+    }
+  }
+}

package/project/client/components/middle/addresses/middle-addresses-view-client-interface.jsx

@@ -0,0 +1,68 @@
+
+'use strict';
+
+import StageFilter from './helpers/stage-filter';
+import AddressesStore from '../../../stores/addresses-store';
+import { ActionAddressesMarkupChange } from '../../../actions/action-addresses/action-addresses';
+import MarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataAddressesClientInterfaceGlobal from 'z-abs-complayer-markup-client/client/data/addresses/data-addresses-client-interface-global';
+import DataAddressesClientInterfaceLocal from 'z-abs-complayer-markup-client/client/data/addresses/data-addresses-client-interface-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 MiddleAddressesViewClientInterface extends ReactComponentStore {
+  constructor(props) {
+    super(props, [AddressesStore]);
+    this.dataAddressesClientInterfaceGlobal = new DataAddressesClientInterfaceGlobal();
+    this.dataAddressesClientInterfaceLocal = new DataAddressesClientInterfaceLocal();
+  }
+
+  shouldUpdate(nextProps, nextState) {
+    return 'ClientInterface' === nextState.AddressesStore.currentView
+      && (
+        !this.shallowCompare(this.props.stage, nextProps.stage)
+        || !this.shallowCompare(this.state.AddressesStore.markup, nextState.AddressesStore.markup)
+        || !this.shallowCompareArrayValues(this.state.AddressesStore.addressesClientInterfaceLocals, nextState.AddressesStore.addressesClientInterfaceLocals)
+        || !this.shallowCompareArrayValues(this.state.AddressesStore.addressesClientInterfaceGlobals, nextState.AddressesStore.addressesClientInterfaceGlobals)
+        || !this.shallowCompare(this.state.AddressesStore.labUserFilter, nextState.AddressesStore.labUserFilter)
+      );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="address_group">
+        <label htmlFor="client_interface_markup_textarea">Address - Markup</label>
+        <MarkedTextarea id="client_interface_markup_textarea" className="form-control address_definition same_size_as_parent" rows="10" value={this.state.AddressesStore.markup.content} results={this.state.AddressesStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(AddressesStore, new ActionAddressesMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+
+  render() {
+    if(this.state.AddressesStore.markup.definition) {
+      return (
+        <div className="address_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="address_tab_view">
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" dataTable={this.dataAddressesClientInterfaceLocal} values={this.state.AddressesStore.addressesClientInterfaceLocals} stage={this.props.stage} filterData={this.state.AddressesStore.labUserFilter} filter={(value, stage, filterData) => {
+            return StageFilter.sutFilter(this.props.stage, value, filterData);
+          }}/>
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" dataTable={this.dataAddressesClientInterfaceGlobal} values={this.state.AddressesStore.addressesClientInterfaceGlobals} stage={this.props.stage} filterData={this.state.AddressesStore.labUserFilter} filter={(value, stage, filterData) => {
+            return StageFilter.sutFilter(this.props.stage, value, filterData);
+          }}/>
+        </div>
+      );
+    }
+  }
+}

package/project/client/components/middle/addresses/middle-addresses-view-dns.jsx

@@ -0,0 +1,67 @@
+
+'use strict';
+
+import StageFilter from './helpers/stage-filter';
+import AddressesStore from '../../../stores/addresses-store';
+import { ActionAddressesMarkupChange } from '../../../actions/action-addresses/action-addresses';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataAddressesDnsGlobal from 'z-abs-complayer-markup-client/client/data/addresses/data-addresses-dns-global';
+import DataAddressesDnsLocal from 'z-abs-complayer-markup-client/client/data/addresses/data-addresses-dns-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 MiddleAddressesViewDns extends ReactComponentStore {
+  constructor(props) {
+    super(props, [AddressesStore]);
+    this.dataAddressesDnsGlobal = new DataAddressesDnsGlobal();
+    this.dataAddressesDnsLocal = new DataAddressesDnsLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return 'Dns' === nextState.AddressesStore.currentView
+      && (
+        !this.shallowCompare(this.props.stage, nextProps.stage)
+        || !this.shallowCompare(this.state.AddressesStore.markup, nextState.AddressesStore.markup)
+        || !this.shallowCompareArrayValues(this.state.AddressesStore.addressesDnsLocals, nextState.AddressesStore.addressesDnsLocals)
+        || !this.shallowCompareArrayValues(this.state.AddressesStore.addressesDnsGlobals, nextState.AddressesStore.addressesDnsGlobals)
+        || !this.shallowCompare(this.state.AddressesStore.labUserFilter, nextState.AddressesStore.labUserFilter)
+      );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="address_group">
+        <label htmlFor="address_dns_markup_textarea">Address - Markup</label>
+        <ComponentMarkedTextarea id="address_dns_markup_textarea" className="form-control address_definition same_size_as_parent" rows="10" value={this.state.AddressesStore.markup.content} results={this.state.AddressesStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(AddressesStore, new ActionAddressesMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+  
+  render() {
+    if(this.state.AddressesStore.markup.definition) {
+      return (
+        <div className="address_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="address_tab_view">, 
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" dataTable={this.dataAddressesDnsLocal} values={this.state.AddressesStore.addressesDnsLocals} stage={this.props.stage} filterData={this.state.AddressesStore.labUserFilter} filter={(value, stage, filterData) => {
+            return StageFilter.filter(this.props.stage, value, filterData);
+          }}/>
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" dataTable={this.dataAddressesDnsGlobal} values={this.state.AddressesStore.addressesDnsGlobals} stage={this.props.stage} filterData={this.state.AddressesStore.labUserFilter} filter={(value, stage, filterData) => {
+            return StageFilter.filter(this.props.stage, value, filterData);
+          }}/>
+        </div>
+      );
+    }
+  }
+}