mxGraph Layout

mxGraphLayout.html

<main id="main">

	<!-- Placeholder for sidebar contents (Stencils) -->
	<aside id="geSidebarStencils" v-on:click.ctrl.alt="doGraphAction('showjsonsource')" v-on:click.ctrl.shift="doGraphAction('showxmlsource')"></aside>

	<!-- Placeholder for diagram -->
	<section id="geDiagramContainer"></section>

	<!-- Placeholder for sidebar contents (Properties) -->
	<aside id="geSidebarProperties"
				 v-bind:class="[
				 	isObjectSelected ? 'props-visible' : 'props-invisible',
				 	isSidebarExpanded ? 'sidebar-expanded' : 'sidebar-collapsed']">
		<h2 class="panelTitle" v-text="activeNodeLabel"></h2>

		<div id="panelProperties">

			<form v-on:submit.prevent>
				<fieldset v-bind:disabled="!getClusterStatus('unprovisioned')">

					<!-- Render topology status if available -->
					<div id="topologyStatus" v-if="filteredTopologyStatus" v-cloak>

						<div class="access-properties">
							<h4 class="form-parent">Access Properties</h4>
						</div>

						<div class="form-group form-inline form-text">
							<label class="prop-label">public ip address</label>
							<input class="form-control" type="text" v-model="filteredTopologyStatus.public_url"/>
						</div>

						<div class="form-group form-inline form-text">
							<label class="prop-label">public port</label>
							<input class="form-control" type="text" v-model="filteredTopologyStatus.ssh_port"/>
						</div>

						<div class="form-group form-inline form-text">
							<label class="prop-label">status of vm</label>
							<input class="form-control" type="text" v-model="filteredTopologyStatus.status"/>
						</div>

						<div class="form-group form-inline form-btn-group">
							<a v-bind:href="filteredTopologyStatus.ssh_url" rel="external" target="_blank" class="btn btn-primary btn-hollow">In Browser SSH URL</a>
							<a v-bind:href="filteredTopologyStatus.http_url" rel="external" target="_blank" class="btn btn-primary btn-hollow">HTTP Access</a>
						</div>

					</div>

					<!-- Render each VueJS Component dynamically from [properties] array object -->
					<component
						v-for="(property, idx) in properties[selectedNodeId]"
						v-bind:property="property"
						v-bind:is="property.name"
						v-bind:key="property.key + idx"
						v-bind:id="getDomID(property, idx)">
					</component>
				</fieldset>
			</form>

		</div>

	</aside>

</main>