1dc5e57597
Change installation deployment sequence: move installing deps to first step. Fix typos in the readme and frontend's html. Change-Id: Ic37f2aa9e5a291eaff127762d7095799bdad1ad4 Closes-Bug: #1259447 Closes-Bug: #1259451
242 lines
10 KiB
HTML
242 lines
10 KiB
HTML
<div>
|
|
|
|
<div>
|
|
<div class="ui large steps">
|
|
<div class="ui step"
|
|
ng-class="{'active': currentStep == 'cluster'}"
|
|
ng-click="setStep('cluster')">Select Cluster</div>
|
|
<div class="ui step"
|
|
ng-class="{'active': currentStep == 'rules', 'disabled': !selectedCluster}"
|
|
ng-disabled="!selectedCluster"
|
|
ng-click="setStep('rules')">Select Rules</div>
|
|
<div class="ui step"
|
|
ng-class="{'active': currentStep == 'validate', 'disabled': !selectedCluster}"
|
|
ng-disabled="!selectedCluster"
|
|
ng-click="setStep('validate')">Validate</div>
|
|
</div>
|
|
|
|
<div class="ui pointing left red label" ng-show="selectedCluster">
|
|
Selected Cluster:
|
|
<div class="detail">{{selectedCluster.name}}</div>
|
|
<i class="delete icon" ng-click="unselectCluster()"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui modal" id="remove-cluster-confirm-modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">
|
|
Delete Cluster
|
|
</div>
|
|
<div class="content">
|
|
Are you sure you want to delete <strong>{{clusterToDelete}}</strong>?
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui red button">No</div>
|
|
<div class="ui green button" ng-click="removeConfirm()">Yes</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div ng-show="currentStep == 'cluster'" style="margin-top: 40px;">
|
|
|
|
<div class="ui blue button" ng-click="showAddClusterModal()"><i class="add icon"></i>Add Cluster</div>
|
|
|
|
|
|
<div class="ui items">
|
|
<div class="item" ng-repeat="cluster in clusters">
|
|
<div class="content">
|
|
<a class="remove ui corner label"
|
|
ng-disabled="runningValidation"
|
|
ng-click="removeCluster(cluster.id)">
|
|
<i class="remove icon"></i>
|
|
</a>
|
|
<div class="meta">
|
|
<a href="" class="mini orange ui button"
|
|
ng-show="!selectedCluster"
|
|
ng-click="selectCluster(cluster.id)">Select Cluster</a>
|
|
<span class="mini ui label"
|
|
ng-show="selectedCluster"
|
|
>Select Cluster</a>
|
|
</div>
|
|
<div class="name">{{cluster.name}}</div>
|
|
<p class="description"> {{cluster.description}} </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui modal" id="add-cluster-modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">
|
|
New Cluster
|
|
</div>
|
|
<form name="addClusterForm" id="addClusterForm">
|
|
<div class="content">
|
|
<div class="ui error message"
|
|
ng-show="addClusterForm.$invalid && addClusterForm.$dirty">
|
|
<div class="header">Oops, there are some errors in the form:</div>
|
|
<ul>
|
|
<li ng-repeat="error in getAddClusterFormErrors()">{{error}}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ui form segment">
|
|
<div class="field" ng-class="{'error': getErrorClass('name', addCluster.$error.required)}">
|
|
<label>Cluster Name</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="text"
|
|
placeholder="My Cluster"
|
|
required
|
|
name="name"
|
|
ng-model="newCluster.name">
|
|
<div class="ui corner label">
|
|
<i class="icon asterisk"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Description</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="text" placeholder="Private multinode Grizzly-based cloud with Neutron + oVS" ng-model="newCluster.description">
|
|
</div>
|
|
</div>
|
|
<div class="field" ng-class="{'error': getErrorClass('nodes', addCluster.$error.pattern)}">
|
|
<label>IP Address (of any node in management network)</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="text"
|
|
placeholder="172.168.10.5"
|
|
name="nodes"
|
|
id="nodes"
|
|
required
|
|
ng-pattern="/(?:(\w+)@)?([^:]+)(?::(\d+))?/"
|
|
ng-model="newCluster.nodes">
|
|
<i class="terminal icon"></i>
|
|
<div class="ui corner label">
|
|
<i class="icon asterisk"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field" ng-class="{'error': getErrorClass('private_key', addCluster.$error.required)}">
|
|
<label>SSH Key (for root user)</label>
|
|
<div class="ui left labeled icon input">
|
|
<textarea ng-model="newCluster.private_key"
|
|
required name="private_key"></textarea>
|
|
<div class="ui corner label">
|
|
<i class="icon asterisk"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui error message">
|
|
<div class="header">We noticed some issues</div>
|
|
</div>
|
|
<!--<div class="ui blue submit button">Test Connection</div>-->
|
|
</div>
|
|
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui button">Cancel</div>
|
|
<div class="ui button"
|
|
ng-class="{'disabled': addClusterForm.$pristine || !addClusterForm.$valid}"
|
|
ng-click="addCluster()"
|
|
ng-disabled="addClusterForm.$pristine || !addClusterForm.$valid">Create</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div ng-show="currentStep == 'rules' && selectedCluster" style="margin-top: 40px;">
|
|
|
|
<div class="ui pointing menu">
|
|
<a class="item"
|
|
ng-click="setRuleGroup('valid')"
|
|
ng-class="{'active' : ruleGroup == 'valid'}">
|
|
|
|
<i class="cloud icon"></i> Validity
|
|
<div class="ui label">{{rules.length}}</div>
|
|
</a>
|
|
<a class="item"
|
|
ng-click="setRuleGroup('ha')"
|
|
ng-class="{'active' : ruleGroup == 'ha'}">
|
|
<i class="legal icon"></i> High Availability
|
|
<div class="ui label">0</div>
|
|
</a>
|
|
<a class="item"
|
|
ng-click="setRuleGroup('best')"
|
|
ng-class="{'active' : ruleGroup == 'best'}">
|
|
<i class="certificate icon"></i> Best Practices
|
|
<div class="ui label">0</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="ui accordion" ng-show="ruleGroup == 'valid'" ng-repeat="rule in rules">
|
|
<div class="title">
|
|
<i class="dropdown icon"></i>
|
|
{{rule.name}}
|
|
</div>
|
|
<div class="content">
|
|
{{rule.description}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-show="currentStep == 'validate' && selectedCluster" style="margin-top: 40px;">
|
|
<div class="ui segment">
|
|
<div class="ui list">
|
|
<div><strong>Cluster Name: </strong>{{selectedCluster.name}}</div>
|
|
<div><strong>Rules selected: </strong>{{rules.length}}</div>
|
|
<div style="margin-top: 15px;">
|
|
<a class="ui blue button"
|
|
ng-click="runValidation()"
|
|
ng-class="{'loading': runningValidation}"
|
|
ng-disabled="runningValidation">Run Validation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Diagnostics Results</h2>
|
|
|
|
<div class="ui feed segment" ng-show="diagnosticsFinished" ng-repeat="host in results.hosts">
|
|
<h4 class="ui header">
|
|
{{host.name}}
|
|
</h4>
|
|
|
|
<div>
|
|
<small>Show only components with issues:</small> <input type="checkbox" ng-model="componentFilter">
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="event" ng-repeat="component in host.components" ng-show="toggleEmptyComponents(component)">
|
|
<div class="label">
|
|
<i class="circular icon"
|
|
ng-class="{'ok sign': !component.issues , 'attention': component.issues.length > 0}"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
Number of issues: {{component.issues.length || 0}}
|
|
</div>
|
|
<div class="summary">
|
|
{{component.name}}
|
|
<div class="extra text" ng-show="component.issues">
|
|
|
|
<div class="ui divided selection list">
|
|
<a class="item" ng-repeat="issue in component.issues">
|
|
{{issue}}
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|