Deprecate v1 of compass-web
The corresponding web service no longer exists. Remove all v1 files. Change-Id: I80522ea91596c176b9a3a193b716da52c3702366
31
v1/README.md
|
@ -1,31 +0,0 @@
|
|||
Compass-Web V1
|
||||
===========
|
||||
|
||||
`Compass-Web V1` is based on [JavaScriptMVC](http://v32.javascriptmvc.com/) framework. It has five modules: Servers, Security, Networking, Host Configuration and Deployment.
|
||||
|
||||
1. *Servers Module*. Discover available servers with switch information and add a subset of the servers to a cluster.
|
||||
|
||||
2. *Security Module*. Specify credentials for the OpenStack system.
|
||||
|
||||
3. *Networking Module*. Specify network addresses needed to facilitate the OpenStack cluster you want to use for your OpenStack servers.
|
||||
|
||||
4. *Host Configuration Module* Configure host names of the servers in the cluster.
|
||||
|
||||
5. *Deployment Module* Deploy OpenStack onto the servers with the realtime progressbars.
|
||||
|
||||
|
||||
Framework
|
||||
---------
|
||||
[JavaScriptMVC v3.2.4](http://v32.javascriptmvc.com/)
|
||||
JavaScriptMVC is a MIT licensed, client-side, JavaScript framework that builds maintainable, error-free, lightweight applications as quick as possible.
|
||||
|
||||
Third-party Libraries
|
||||
---------------------
|
||||
* [jQueryUI](http://jqueryui.com/)
|
||||
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. It is included for widgets such as accordion, tabs, dialog and progressbar.
|
||||
|
||||
* [d3](http://d3js.org/)
|
||||
D3.js is a JavaScript library for manipulating documents based on data. It is included for the graph-based progress bars in Deployment module to have a collapsible tree layout for switches and servers.
|
||||
|
||||
* [DataTables](http://www.datatables.net/)
|
||||
DataTables is a plug-in for the jQuery Javascript library to add advanced interaction controls to any HTML table. It is included to have advanced interaction controls to HTML table in Servers and Deployment modules.
|
293
v1/css/base.css
|
@ -1,293 +0,0 @@
|
|||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn_continue {
|
||||
/*background gradient*/
|
||||
background: rgba(190,223,189,1);
|
||||
background: -moz-linear-gradient(top, rgba(190,223,189,1) 0%, rgba(0,128,0,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(190,223,189,1)), color-stop(100%, rgba(0,128,0,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(190,223,189,1) 0%, rgba(0,128,0,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(190,223,189,1) 0%, rgba(0,128,0,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(190,223,189,1) 0%, rgba(0,128,0,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(190,223,189,1) 0%, rgba(0,128,0,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bedfbd', endColorstr='#008000', GradientType=0 );
|
||||
|
||||
/*border*/
|
||||
-moz-border-radius:6px;
|
||||
-webkit-border-radius:6px;
|
||||
border-radius:6px;
|
||||
border:1px solid #aaaaaa;
|
||||
|
||||
display:inline-block;
|
||||
color:#ffffff;
|
||||
font-family:arial;
|
||||
font-size:18px;
|
||||
padding: 8px;
|
||||
width: 170px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.btn_continue:hover {
|
||||
/*background gradient*/
|
||||
background: rgba(0,128,0,1);
|
||||
background: -moz-linear-gradient(top, rgba(0,128,0,1) 0%, rgba(190,223,189,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,128,0,1)), color-stop(100%, rgba(190,223,189,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(0,128,0,1) 0%, rgba(190,223,189,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(0,128,0,1) 0%, rgba(190,223,189,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(0,128,0,1) 0%, rgba(190,223,189,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(0,128,0,1) 0%, rgba(190,223,189,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#bedfbd', GradientType=0 );
|
||||
}
|
||||
|
||||
.btn_continue:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
|
||||
.btn_continue_inactive {
|
||||
background: rgba(255,255,255,1);
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(230,230,230,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(230,230,230,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(230,230,230,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(230,230,230,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(230,230,230,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(230,230,230,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0 );
|
||||
|
||||
/*border*/
|
||||
-moz-border-radius:6px;
|
||||
-webkit-border-radius:6px;
|
||||
border-radius:6px;
|
||||
border:1px solid #c0c0c0;
|
||||
|
||||
display:inline-block;
|
||||
color:#969696;
|
||||
font-family:arial;
|
||||
font-size:18px;
|
||||
padding: 8px;
|
||||
width: 170px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.btn_find {
|
||||
/*background gradient*/
|
||||
background: rgba(141,146,251,1);
|
||||
background: -moz-linear-gradient(top, rgba(141,146,251,1) 0%, rgba(50,54,162,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(141,146,251,1)), color-stop(100%, rgba(50,54,162,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(141,146,251,1) 0%, rgba(50,54,162,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(141,146,251,1) 0%, rgba(50,54,162,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(141,146,251,1) 0%, rgba(50,54,162,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(141,146,251,1) 0%, rgba(50,54,162,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d92fb', endColorstr='#3236a2', GradientType=0 );
|
||||
|
||||
/*border*/
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
border-radius:4px;
|
||||
border:1px solid #808080;
|
||||
|
||||
display:inline-block;
|
||||
color:#ffffff;
|
||||
font-family:arial;
|
||||
font-size:12px;
|
||||
padding: 5px 20px;
|
||||
text-decoration:none;
|
||||
width: 120px
|
||||
}
|
||||
.btn_find:hover {
|
||||
background: rgba(50,54,162,1);
|
||||
background: -moz-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(50,54,162,1)), color-stop(100%, rgba(141,146,251,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3236a2', endColorstr='#8d92fb', GradientType=0 );
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn_find[disabled] {
|
||||
background: rgba(50,54,162,1);
|
||||
background: -moz-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(50,54,162,1)), color-stop(100%, rgba(141,146,251,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3236a2', endColorstr='#8d92fb', GradientType=0 );
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn_find_inactive {
|
||||
/*background gradient*/
|
||||
background: rgba(249,249,249,1);
|
||||
background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,249,249,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(227,227,227,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e3e3e3', GradientType=0 );
|
||||
|
||||
/*border*/
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
border-radius:4px;
|
||||
border:1px solid #c0c0c0;
|
||||
|
||||
display:inline-block;
|
||||
color:#3f3f3f;
|
||||
font-family:arial;
|
||||
font-size:12px;
|
||||
padding: 3px 20px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border: 1px solid #aaaaaa;
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 20px;
|
||||
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
color:#3f3f3f;
|
||||
font-family:arial;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
div.gradient {
|
||||
background: rgba(249,249,249,1);
|
||||
background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,249,249,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(227,227,227,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(249,249,249,1) 0%, rgba(246,246,246,1) 47%, rgba(227,227,227,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e3e3e3', GradientType=0 );
|
||||
}
|
||||
|
||||
input.rounded {
|
||||
border: 1px solid #c0c0c0;
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(215,211,207,0.75);
|
||||
-moz-box-shadow: inset 0px 0px 5px 0px rgba(215,211,207,0.75);
|
||||
box-shadow: inset 0px 0px 5px 0px rgba(215,211,207,0.75);
|
||||
|
||||
padding: 4px 7px;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input.rounded:focus {
|
||||
border-color: #3A01DF;
|
||||
}
|
||||
|
||||
.tab_nav {
|
||||
/*background gradient*/
|
||||
background: rgba(249,249,249,1);
|
||||
background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(227,227,227,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,249,249,1)), color-stop(100%, rgba(227,227,227,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(227,227,227,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(227,227,227,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(227,227,227,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(249,249,249,1) 0%, rgba(227,227,227,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e3e3e3', GradientType=0 );
|
||||
|
||||
/*border*/
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
-moz-border-radius: 4px 0px 0px 4px;
|
||||
-webkit-border-radius: 4px 0px 0px 4px;
|
||||
border-left: 1px solid #c0c0c0;
|
||||
border-top: 1px solid #c0c0c0;
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
|
||||
display:inline-block;
|
||||
color:#3f3f3f;
|
||||
font-family:arial;
|
||||
font-size:12px;
|
||||
padding: 1px 5px;
|
||||
text-decoration:none;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.tab_nav:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab_nav_active {
|
||||
/*background gradient*/
|
||||
background: rgba(50,54,162,1) !important;
|
||||
background: -moz-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%) !important;
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(50,54,162,1)), color-stop(100%, rgba(141,146,251,1))) !important;
|
||||
background: -webkit-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%) !important;
|
||||
background: -o-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%) !important;
|
||||
background: -ms-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%) !important;
|
||||
background: linear-gradient(to bottom, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3236a2', endColorstr='#8d92fb', GradientType=0 ) !important;
|
||||
|
||||
/*border*/
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
-moz-border-radius: 4px 0px 0px 4px;
|
||||
-webkit-border-radius: 4px 0px 0px 4px;
|
||||
border-left: 1px solid #c0c0c0;
|
||||
border-top: 1px solid #c0c0c0;
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
|
||||
display:inline-block;
|
||||
color:#ffffff !important;
|
||||
font-family:arial;
|
||||
font-size:12px;
|
||||
padding: 1px 5px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #FFE6E6 !important;
|
||||
border-color: red !important;
|
||||
}
|
||||
|
||||
.errhint {
|
||||
border: 1px solid red;
|
||||
padding: 4px 8px;
|
||||
background-color: white;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
#nav {
|
||||
padding-top: 18px;
|
||||
}
|
221
v1/css/style.css
|
@ -1,221 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 60px;
|
||||
min-width: 1200px;
|
||||
background-color: rgb(248, 248, 248);
|
||||
background-image: url("../img/hw_000469.jpg");
|
||||
border-bottom: 1px solid rgb(255, 255, 255);
|
||||
background-repeat: repeat-x;
|
||||
border-bottom-color: rgb(255, 255, 255);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
#bound {
|
||||
overflow: hidden;
|
||||
margin: 0px auto;
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
height: 46px;
|
||||
min-width: 1200px;
|
||||
overflow: hidden;
|
||||
width: auto !important;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
background: url("../img/hw_s_221828.jpg") repeat-x scroll left bottom rgb(248, 248, 248);
|
||||
border-top: 1px solid rgb(215, 212, 207);
|
||||
border-bottom: 1px solid rgb(196, 198, 195);
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
font-size: 18px;
|
||||
min-width: 1000px;
|
||||
color: #5964a1;
|
||||
}
|
||||
|
||||
#menu li:first-child {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
display: inline;
|
||||
float: left;
|
||||
padding-left: 35px;
|
||||
margin-top: -5px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5964a1;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.passed {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 20px;
|
||||
margin-top: 13px;
|
||||
padding-left: 20px;
|
||||
color: #5964a1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5964a1;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #5964a1;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 520;
|
||||
font-size: 20px;
|
||||
color: #5964a1;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#content {
|
||||
min-width: 1200px;
|
||||
min-height: 200px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
background-color: whitesmoke;
|
||||
|
||||
/* IE10 Consumer Preview */
|
||||
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
|
||||
|
||||
/* Mozilla Firefox */
|
||||
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
|
||||
|
||||
/* Opera */
|
||||
background-image: -o-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
|
||||
|
||||
/* Webkit (Safari/Chrome 10) */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CCCCCC));
|
||||
|
||||
/* Webkit (Chrome 11+) */
|
||||
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
|
||||
|
||||
/* W3C Markup, IE10 Release Preview */
|
||||
background-image: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
|
||||
}
|
||||
|
||||
.main-box {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
padding-right:30px;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
float: left;
|
||||
width: 48%;
|
||||
min-width: 460px;
|
||||
}
|
||||
|
||||
.left-side ul {
|
||||
font-size: 14px;
|
||||
color: #5964a1;
|
||||
}
|
||||
|
||||
.inside {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.inside table {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.inside th {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.right-side table {
|
||||
padding-top: 0px;
|
||||
width: 100%;
|
||||
border-spacing: 0px 0px;
|
||||
}
|
||||
|
||||
.right-side th:first-child {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.right-side th {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.right-side img {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.continue {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding-bottom: 20px;
|
||||
text-align:center;
|
||||
background-color: lightBlue;
|
||||
}
|
||||
|
||||
.unavailable {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loading {
|
||||
vertical-align: middle;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.go-back {
|
||||
font-size: 15px;
|
||||
padding-right: 10px;
|
||||
}
|
Before Width: | Height: | Size: 523 B |
Before Width: | Height: | Size: 19 KiB |
BIN
v1/img/asc.gif
Before Width: | Height: | Size: 54 B |
BIN
v1/img/bg.gif
Before Width: | Height: | Size: 64 B |
Before Width: | Height: | Size: 842 B |
BIN
v1/img/desc.gif
Before Width: | Height: | Size: 54 B |
Before Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 410 B |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 419 B |
Before Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 349 B |
Before Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 665 B |
Before Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 928 B |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 493 B |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 315 B |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 367 B |
Before Width: | Height: | Size: 269 B |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 212 B |
Before Width: | Height: | Size: 208 B |
Before Width: | Height: | Size: 335 B |
Before Width: | Height: | Size: 207 B |
Before Width: | Height: | Size: 262 B |
Before Width: | Height: | Size: 262 B |
Before Width: | Height: | Size: 332 B |
Before Width: | Height: | Size: 280 B |
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 4.4 KiB |
|
@ -1,390 +0,0 @@
|
|||
/**
|
||||
* @author zhixin wen <wenzhixin2010@gmail.com>
|
||||
* @version 1.0.5
|
||||
*
|
||||
* http://wenzhixin.net.cn/p/multiple-select/
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function MultipleSelect($el, options) {
|
||||
var that = this,
|
||||
elWidth = $el.width();
|
||||
|
||||
this.$el = $el.hide();
|
||||
this.options = options;
|
||||
|
||||
this.$parent = $('<div class="ms-parent"></div>');
|
||||
this.$choice = $('<button type="button" class="ms-choice"><span class="placeholder">' +
|
||||
options.placeholder + '</span><div></div></button>');
|
||||
this.$drop = $('<div class="ms-drop"></div>');
|
||||
this.$el.after(this.$parent);
|
||||
this.$parent.append(this.$choice);
|
||||
this.$parent.append(this.$drop);
|
||||
|
||||
if (this.$el.prop('disabled')) {
|
||||
this.$choice.addClass('disabled');
|
||||
}
|
||||
this.$choice.css('width', elWidth + 'px');
|
||||
this.$drop.css({
|
||||
width: (options.width || elWidth) + 'px'
|
||||
});
|
||||
|
||||
$('body').click(function(e) {
|
||||
if ($(e.target)[0] === that.$choice[0] ||
|
||||
$(e.target).parents('.ms-choice')[0] === that.$choice[0]) {
|
||||
return;
|
||||
}
|
||||
if (($(e.target)[0] === that.$drop[0] ||
|
||||
$(e.target).parents('.ms-drop')[0] !== that.$drop[0]) &&
|
||||
that.options.isopen) {
|
||||
that.close();
|
||||
}
|
||||
});
|
||||
|
||||
if (this.options.isopen) {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
MultipleSelect.prototype = {
|
||||
constructor : MultipleSelect,
|
||||
|
||||
init: function() {
|
||||
var that = this,
|
||||
html = [];
|
||||
if (this.options.filter) {
|
||||
html.push(
|
||||
'<div class="ms-search">',
|
||||
'<input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false">',
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
html.push('<ul>');
|
||||
if (this.options.selectAll) {
|
||||
html.push(
|
||||
'<li>',
|
||||
'<label>',
|
||||
'<input type="checkbox" name="selectAll" /> ',
|
||||
'[' + this.options.selectAllText + ']',
|
||||
'</label>',
|
||||
'</li>'
|
||||
);
|
||||
}
|
||||
$.each(this.$el.children(), function(i, elm) {
|
||||
html.push(that.optionToHtml(i, elm));
|
||||
});
|
||||
html.push('</ul>');
|
||||
this.$drop.html(html.join(''));
|
||||
this.$drop.find('ul').css('max-height', this.options.maxHeight + 'px');
|
||||
this.$drop.find('.multiple').css('width', this.options.multipleWidth + 'px');
|
||||
|
||||
this.$searchInput = this.$drop.find('.ms-search input');
|
||||
this.$selectAll = this.$drop.find('input[name="selectAll"]');
|
||||
this.$selectGroups = this.$drop.find('input[name="selectGroup"]');
|
||||
this.$selectItems = this.$drop.find('input[name="selectItem"]:enabled');
|
||||
this.$disableItems = this.$drop.find('input[name="selectItem"]:disabled');
|
||||
this.events();
|
||||
this.update();
|
||||
},
|
||||
|
||||
optionToHtml: function(i, elm, group, groupDisabled) {
|
||||
var that = this,
|
||||
$elm = $(elm),
|
||||
html = [],
|
||||
multiple = this.options.multiple,
|
||||
disabled;
|
||||
|
||||
if ($elm.is('option')) {
|
||||
var value = $elm.val(),
|
||||
text = $elm.text(),
|
||||
selected = $elm.prop('selected');
|
||||
|
||||
disabled = groupDisabled || $elm.prop('disabled');
|
||||
html.push(
|
||||
'<li' + (multiple ? ' class="multiple"' : '') + '>',
|
||||
'<label' + (disabled ? ' class="disabled"' : '') + '>',
|
||||
'<input type="checkbox" name="selectItem" value="' + value + '"' +
|
||||
(selected ? ' checked="checked"' : '') +
|
||||
(disabled ? ' disabled="disabled"' : '') +
|
||||
(group ? ' data-group="' + group + '"' : '') +
|
||||
'/> ',
|
||||
text,
|
||||
'</label>',
|
||||
'</li>'
|
||||
);
|
||||
} else if (!group && $elm.is('optgroup')) {
|
||||
var _group = 'group_' + i,
|
||||
label = $elm.attr('label');
|
||||
|
||||
disabled = $elm.prop('disabled');
|
||||
html.push(
|
||||
'<li class="group">',
|
||||
'<label class="optgroup' + (disabled ? ' disabled' : '') + '" data-group="' + _group + '">',
|
||||
'<input type="checkbox" name="selectGroup"' + (disabled ? ' disabled="disabled"' : '') + ' /> ',
|
||||
label,
|
||||
'</label>',
|
||||
'</li>');
|
||||
$.each($elm.children(), function(i, elm) {
|
||||
html.push(that.optionToHtml(i, elm, _group, disabled));
|
||||
});
|
||||
}
|
||||
return html.join('');
|
||||
},
|
||||
|
||||
events: function() {
|
||||
var that = this;
|
||||
this.$choice.off('click').on('click', function() {
|
||||
that[that.options.isopen ? 'close' : 'open']();
|
||||
});
|
||||
this.$parent.off('keydown').on('keydown', function(e) {
|
||||
switch (e.which) {
|
||||
case 27: // esc key
|
||||
that.close();
|
||||
that.$choice.focus();
|
||||
break;
|
||||
}
|
||||
});
|
||||
this.$searchInput.off('keyup').on('keyup', function() {
|
||||
that.filter();
|
||||
});
|
||||
this.$selectAll.off('click').on('click', function() {
|
||||
var checked = $(this).prop('checked'),
|
||||
$items = that.$selectItems.filter(':visible');
|
||||
if ($items.length === that.$selectItems.length) {
|
||||
that[checked ? 'checkAll' : 'uncheckAll']();
|
||||
} else { // when the filter option is true
|
||||
that.$selectGroups.prop('checked', checked);
|
||||
$items.prop('checked', checked);
|
||||
that.update();
|
||||
}
|
||||
});
|
||||
this.$selectGroups.off('click').on('click', function() {
|
||||
var group = $(this).parent().attr('data-group'),
|
||||
$items = that.$selectItems.filter(':visible'),
|
||||
$children = $items.filter('[data-group="' + group + '"]'),
|
||||
checked = $children.length !== $children.filter(':checked').length;
|
||||
$children.prop('checked', checked);
|
||||
that.updateSelectAll();
|
||||
that.update();
|
||||
that.options.onOptgroupClick({
|
||||
label: $(this).parent().text(),
|
||||
checked: checked,
|
||||
children: $children.get()
|
||||
});
|
||||
});
|
||||
this.$selectItems.off('click').on('click', function() {
|
||||
that.updateSelectAll();
|
||||
that.update();
|
||||
that.updateOptGroupSelect();
|
||||
that.options.onClick({
|
||||
label: $(this).parent().text(),
|
||||
value: $(this).val(),
|
||||
checked: $(this).prop('checked')
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
open: function() {
|
||||
if (this.$choice.hasClass('disabled')) {
|
||||
return;
|
||||
}
|
||||
this.options.isopen = true;
|
||||
this.$choice.find('>div').addClass('open');
|
||||
this.$drop.show();
|
||||
if (this.options.filter) {
|
||||
this.$searchInput.val('');
|
||||
this.filter();
|
||||
}
|
||||
this.options.onOpen();
|
||||
},
|
||||
|
||||
close: function() {
|
||||
this.options.isopen = false;
|
||||
this.$choice.find('>div').removeClass('open');
|
||||
this.$drop.hide();
|
||||
this.options.onClose();
|
||||
},
|
||||
|
||||
update: function() {
|
||||
var selects = this.getSelects('text'),
|
||||
$span = this.$choice.find('>span');
|
||||
if (selects.length) {
|
||||
$span.removeClass('placeholder').html(selects.join(', '));
|
||||
} else {
|
||||
$span.addClass('placeholder').html(this.options.placeholder);
|
||||
}
|
||||
// set selects to select
|
||||
this.$el.val(this.getSelects());
|
||||
},
|
||||
|
||||
updateSelectAll: function() {
|
||||
var $items = this.$selectItems.filter(':visible');
|
||||
this.$selectAll.prop('checked', $items.length &&
|
||||
$items.length === $items.filter(':checked').length);
|
||||
},
|
||||
|
||||
updateOptGroupSelect: function() {
|
||||
var $items = this.$selectItems.filter(':visible');
|
||||
$.each(this.$selectGroups, function(i, val) {
|
||||
var group = $(val).parent().attr('data-group'),
|
||||
$children = $items.filter('[data-group="' + group + '"]');
|
||||
$(val).prop('checked', $children.length &&
|
||||
$children.length === $children.filter(':checked').length);
|
||||
});
|
||||
},
|
||||
|
||||
//value or text, default: 'value'
|
||||
getSelects: function(type) {
|
||||
var that = this,
|
||||
texts = [],
|
||||
values = [];
|
||||
this.$drop.find('input[name="selectItem"]:checked').each(function() {
|
||||
texts.push($(this).parent().text());
|
||||
values.push($(this).val());
|
||||
});
|
||||
|
||||
if (type === 'text' && this.$selectGroups.length) {
|
||||
texts = [];
|
||||
this.$selectGroups.each(function() {
|
||||
var html = [],
|
||||
text = $.trim($(this).parent().text()),
|
||||
group = $(this).parent().data('group'),
|
||||
$children = that.$drop.find('[name="selectItem"][data-group="' + group + '"]'),
|
||||
$selected = $children.filter(':checked');
|
||||
|
||||
if ($selected.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
html.push('[');
|
||||
html.push(text);
|
||||
if ($children.length > $selected.length) {
|
||||
var list = [];
|
||||
$selected.each(function() {
|
||||
list.push($(this).parent().text());
|
||||
});
|
||||
html.push(': ' + list.join(', '));
|
||||
}
|
||||
html.push(']');
|
||||
texts.push(html.join(''));
|
||||
});
|
||||
}
|
||||
return type === 'text' ? texts : values;
|
||||
},
|
||||
|
||||
setSelects: function(values) {
|
||||
var that = this;
|
||||
this.$selectItems.prop('checked', false);
|
||||
$.each(values, function(i, value) {
|
||||
that.$selectItems.filter('[value="' + value + '"]').prop('checked', true);
|
||||
});
|
||||
this.$selectAll.prop('checked', this.$selectItems.length ===
|
||||
this.$selectItems.filter(':checked').length);
|
||||
this.update();
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.$choice.removeClass('disabled');
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.$choice.addClass('disabled');
|
||||
},
|
||||
|
||||
checkAll: function() {
|
||||
this.$selectItems.prop('checked', true);
|
||||
this.$selectGroups.prop('checked', true);
|
||||
this.$selectAll.prop('checked', true);
|
||||
this.update();
|
||||
this.options.onCheckAll();
|
||||
},
|
||||
|
||||
uncheckAll: function() {
|
||||
this.$selectItems.prop('checked', false);
|
||||
this.$selectGroups.prop('checked', false);
|
||||
this.$selectAll.prop('checked', false);
|
||||
this.update();
|
||||
this.options.onUncheckAll();
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
filter: function() {
|
||||
var that = this,
|
||||
text = $.trim(this.$searchInput.val()).toLowerCase();
|
||||
if (text.length === 0) {
|
||||
this.$selectItems.parent().show();
|
||||
this.$disableItems.parent().show();
|
||||
this.$selectGroups.parent().show();
|
||||
} else {
|
||||
this.$selectItems.each(function() {
|
||||
var $parent = $(this).parent();
|
||||
$parent[$parent.text().toLowerCase().indexOf(text) < 0 ? 'hide' : 'show']();
|
||||
});
|
||||
this.$disableItems.parent().hide();
|
||||
this.$selectGroups.each(function() {
|
||||
var $parent = $(this).parent();
|
||||
var group = $parent.attr('data-group'),
|
||||
$items = that.$selectItems.filter(':visible');
|
||||
$parent[$items.filter('[data-group="' + group + '"]').length === 0 ? 'hide' : 'show']();
|
||||
});
|
||||
}
|
||||
this.updateOptGroupSelect();
|
||||
this.updateSelectAll();
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.multipleSelect = function() {
|
||||
var option = arguments[0],
|
||||
args = arguments,
|
||||
|
||||
value,
|
||||
allowedMethods = ['getSelects', 'setSelects', 'enable', 'disable', 'checkAll', 'uncheckAll', 'refresh'];
|
||||
|
||||
this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $this.data('multipleSelect'),
|
||||
options = $.extend({}, $.fn.multipleSelect.defaults, typeof option === 'object' && option);
|
||||
|
||||
if (!data) {
|
||||
data = new MultipleSelect($this, options);
|
||||
$this.data('multipleSelect', data);
|
||||
}
|
||||
|
||||
if (typeof option === 'string') {
|
||||
if ($.inArray(option, allowedMethods) < 0) {
|
||||
throw "Unknown method: " + option;
|
||||
}
|
||||
value = data[option](args[1]);
|
||||
} else {
|
||||
data.init();
|
||||
}
|
||||
});
|
||||
|
||||
return value ? value : this;
|
||||
};
|
||||
|
||||
$.fn.multipleSelect.defaults = {
|
||||
isopen: false,
|
||||
placeholder: '',
|
||||
selectAll: true,
|
||||
selectAllText: 'Select all',
|
||||
multiple: false,
|
||||
multipleWidth: 80,
|
||||
filter: false,
|
||||
width: undefined,
|
||||
maxHeight: 250,
|
||||
|
||||
onOpen: function() {return false;},
|
||||
onClose: function() {return false;},
|
||||
onCheckAll: function() {return false;},
|
||||
onUncheckAll: function() {return false;},
|
||||
onOptgroupClick: function() {return false;},
|
||||
onClick: function() {return false;}
|
||||
};
|
||||
})(jQuery);
|
|
@ -1,291 +0,0 @@
|
|||
/*
|
||||
*
|
||||
* Copyright (c) 2006-2011 Sam Collett (http://www.texotela.co.uk)
|
||||
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||||
*
|
||||
* Version 1.3.1
|
||||
* Demo: http://www.texotela.co.uk/code/jquery/numeric/
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
/*
|
||||
* Allows only valid characters to be entered into input boxes.
|
||||
* Note: fixes value when pasting via Ctrl+V, but not when using the mouse to paste
|
||||
* side-effect: Ctrl+A does not work, though you can still use the mouse to select (or double-click to select all)
|
||||
*
|
||||
* @name numeric
|
||||
* @param config { decimal : "." , negative : true }
|
||||
* @param callback A function that runs if the number is not valid (fires onblur)
|
||||
* @author Sam Collett (http://www.texotela.co.uk)
|
||||
* @example $(".numeric").numeric();
|
||||
* @example $(".numeric").numeric(","); // use , as separator
|
||||
* @example $(".numeric").numeric({ decimal : "," }); // use , as separator
|
||||
* @example $(".numeric").numeric({ negative : false }); // do not allow negative values
|
||||
* @example $(".numeric").numeric(null, callback); // use default values, pass on the 'callback' function
|
||||
*
|
||||
*/
|
||||
$.fn.numeric = function(config, callback)
|
||||
{
|
||||
if(typeof config === 'boolean')
|
||||
{
|
||||
config = { decimal: config };
|
||||
}
|
||||
config = config || {};
|
||||
// if config.negative undefined, set to true (default is to allow negative numbers)
|
||||
if(typeof config.negative == "undefined") { config.negative = true; }
|
||||
// set decimal point
|
||||
var decimal = (config.decimal === false) ? "" : config.decimal || ".";
|
||||
// allow negatives
|
||||
var negative = (config.negative === true) ? true : false;
|
||||
// callback function
|
||||
callback = (typeof(callback) == "function" ? callback : function() {});
|
||||
// set data and methods
|
||||
return this.data("numeric.decimal", decimal).data("numeric.negative", negative).data("numeric.callback", callback).keypress($.fn.numeric.keypress).keyup($.fn.numeric.keyup).blur($.fn.numeric.blur);
|
||||
};
|
||||
|
||||
$.fn.numeric.keypress = function(e)
|
||||
{
|
||||
// get decimal character and determine if negatives are allowed
|
||||
var decimal = $.data(this, "numeric.decimal");
|
||||
var negative = $.data(this, "numeric.negative");
|
||||
// get the key that was pressed
|
||||
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
|
||||
// allow enter/return key (only when in an input box)
|
||||
if(key == 13 && this.nodeName.toLowerCase() == "input")
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else if(key == 13)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
var allow = false;
|
||||
// allow Ctrl+A
|
||||
if((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) /* opera */) { return true; }
|
||||
// allow Ctrl+X (cut)
|
||||
if((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) /* opera */) { return true; }
|
||||
// allow Ctrl+C (copy)
|
||||
if((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) /* opera */) { return true; }
|
||||
// allow Ctrl+Z (undo)
|
||||
if((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) /* opera */) { return true; }
|
||||
// allow or deny Ctrl+V (paste), Shift+Ins
|
||||
if((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) /* opera */ ||
|
||||
(e.shiftKey && key == 45)) { return true; }
|
||||
// if a number was not pressed
|
||||
if(key < 48 || key > 57)
|
||||
{
|
||||
var value = $(this).val();
|
||||
/* '-' only allowed at start and if negative numbers allowed */
|
||||
if(value.indexOf("-") !== 0 && negative && key == 45 && (value.length === 0 || parseInt($.fn.getSelectionStart(this), 10) === 0)) { return true; }
|
||||
/* only one decimal separator allowed */
|
||||
if(decimal && key == decimal.charCodeAt(0) && value.indexOf(decimal) != -1)
|
||||
{
|
||||
allow = false;
|
||||
}
|
||||
// check for other keys that have special purposes
|
||||
if(
|
||||
key != 8 /* backspace */ &&
|
||||
key != 9 /* tab */ &&
|
||||
key != 13 /* enter */ &&
|
||||
key != 35 /* end */ &&
|
||||
key != 36 /* home */ &&
|
||||
key != 37 /* left */ &&
|
||||
key != 39 /* right */ &&
|
||||
key != 46 /* del */
|
||||
)
|
||||
{
|
||||
allow = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
// for detecting special keys (listed above)
|
||||
// IE does not support 'charCode' and ignores them in keypress anyway
|
||||
if(typeof e.charCode != "undefined")
|
||||
{
|
||||
// special keys have 'keyCode' and 'which' the same (e.g. backspace)
|
||||
if(e.keyCode == e.which && e.which !== 0)
|
||||
{
|
||||
allow = true;
|
||||
// . and delete share the same code, don't allow . (will be set to true later if it is the decimal point)
|
||||
if(e.which == 46) { allow = false; }
|
||||
}
|
||||
// or keyCode != 0 and 'charCode'/'which' = 0
|
||||
else if(e.keyCode !== 0 && e.charCode === 0 && e.which === 0)
|
||||
{
|
||||
allow = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
// if key pressed is the decimal and it is not already in the field
|
||||
if(decimal && key == decimal.charCodeAt(0))
|
||||
{
|
||||
if(value.indexOf(decimal) == -1)
|
||||
{
|
||||
allow = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
allow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
allow = true;
|
||||
}
|
||||
return allow;
|
||||
};
|
||||
|
||||
$.fn.numeric.keyup = function(e)
|
||||
{
|
||||
var val = $(this).val();
|
||||
if(val && val.length > 0)
|
||||
{
|
||||
// get carat (cursor) position
|
||||
var carat = $.fn.getSelectionStart(this);
|
||||
var selectionEnd = $.fn.getSelectionEnd(this);
|
||||
// get decimal character and determine if negatives are allowed
|
||||
var decimal = $.data(this, "numeric.decimal");
|
||||
var negative = $.data(this, "numeric.negative");
|
||||
|
||||
// prepend a 0 if necessary
|
||||
if(decimal !== "" && decimal !== null)
|
||||
{
|
||||
// find decimal point
|
||||
var dot = val.indexOf(decimal);
|
||||
// if dot at start, add 0 before
|
||||
if(dot === 0)
|
||||
{
|
||||
this.value = "0" + val;
|
||||
}
|
||||
// if dot at position 1, check if there is a - symbol before it
|
||||
if(dot == 1 && val.charAt(0) == "-")
|
||||
{
|
||||
this.value = "-0" + val.substring(1);
|
||||
}
|
||||
val = this.value;
|
||||
}
|
||||
|
||||
// if pasted in, only allow the following characters
|
||||
var validChars = [0,1,2,3,4,5,6,7,8,9,'-',decimal];
|
||||
// get length of the value (to loop through)
|
||||
var length = val.length;
|
||||
// loop backwards (to prevent going out of bounds)
|
||||
for(var i = length - 1; i >= 0; i--)
|
||||
{
|
||||
var ch = val.charAt(i);
|
||||
// remove '-' if it is in the wrong place
|
||||
if(i !== 0 && ch == "-")
|
||||
{
|
||||
val = val.substring(0, i) + val.substring(i + 1);
|
||||
}
|
||||
// remove character if it is at the start, a '-' and negatives aren't allowed
|
||||
else if(i === 0 && !negative && ch == "-")
|
||||
{
|
||||
val = val.substring(1);
|
||||
}
|
||||
var validChar = false;
|
||||
// loop through validChars
|
||||
for(var j = 0; j < validChars.length; j++)
|
||||
{
|
||||
// if it is valid, break out the loop
|
||||
if(ch == validChars[j])
|
||||
{
|
||||
validChar = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// if not a valid character, or a space, remove
|
||||
if(!validChar || ch == " ")
|
||||
{
|
||||
val = val.substring(0, i) + val.substring(i + 1);
|
||||
}
|
||||
}
|
||||
// remove extra decimal characters
|
||||
var firstDecimal = val.indexOf(decimal);
|
||||
if(firstDecimal > 0)
|
||||
{
|
||||
for(var k = length - 1; k > firstDecimal; k--)
|
||||
{
|
||||
var chch = val.charAt(k);
|
||||
// remove decimal character
|
||||
if(chch == decimal)
|
||||
{
|
||||
val = val.substring(0, k) + val.substring(k + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// set the value and prevent the cursor moving to the end
|
||||
this.value = val;
|
||||
$.fn.setSelection(this, [carat, selectionEnd]);
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.numeric.blur = function()
|
||||
{
|
||||
var decimal = $.data(this, "numeric.decimal");
|
||||
var callback = $.data(this, "numeric.callback");
|
||||
var val = this.value;
|
||||
if(val !== "")
|
||||
{
|
||||
var re = new RegExp("^\\d+$|^\\d*" + decimal + "\\d+$");
|
||||
if(!re.exec(val))
|
||||
{
|
||||
callback.apply(this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.removeNumeric = function()
|
||||
{
|
||||
return this.data("numeric.decimal", null).data("numeric.negative", null).data("numeric.callback", null).unbind("keypress", $.fn.numeric.keypress).unbind("blur", $.fn.numeric.blur);
|
||||
};
|
||||
|
||||
// Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini <dperini@nwbox.com>)
|
||||
$.fn.getSelectionStart = function(o)
|
||||
{
|
||||
if (o.createTextRange)
|
||||
{
|
||||
var r = document.selection.createRange().duplicate();
|
||||
r.moveEnd('character', o.value.length);
|
||||
if (r.text === '') { return o.value.length; }
|
||||
return o.value.lastIndexOf(r.text);
|
||||
} else { return o.selectionStart; }
|
||||
};
|
||||
|
||||
// Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini <dperini@nwbox.com>)
|
||||
$.fn.getSelectionEnd = function(o)
|
||||
{
|
||||
if (o.createTextRange) {
|
||||
var r = document.selection.createRange().duplicate()
|
||||
r.moveStart('character', -o.value.length)
|
||||
return r.text.length
|
||||
} else return o.selectionEnd
|
||||
}
|
||||
|
||||
// set the selection, o is the object (input), p is the position ([start, end] or just start)
|
||||
$.fn.setSelection = function(o, p)
|
||||
{
|
||||
// if p is number, start and end are the same
|
||||
if(typeof p == "number") { p = [p, p]; }
|
||||
// only set if p is an array of length 2
|
||||
if(p && p.constructor == Array && p.length == 2)
|
||||
{
|
||||
if (o.createTextRange)
|
||||
{
|
||||
var r = o.createTextRange();
|
||||
r.collapse(true);
|
||||
r.moveStart('character', p[0]);
|
||||
r.moveEnd('character', p[1]);
|
||||
r.select();
|
||||
}
|
||||
else if(o.setSelectionRange)
|
||||
{
|
||||
o.focus();
|
||||
o.setSelectionRange(p[0], p[1]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
|
@ -1,170 +0,0 @@
|
|||
/**
|
||||
* @author zhixin wen <wenzhixin2010@gmail.com>
|
||||
*/
|
||||
|
||||
.ms-parent {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ms-choice {
|
||||
display: block;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 1px solid #aaa;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 26px;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ms-choice.disabled {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ms-choice > span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.ms-choice > span.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ms-choice > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
background: url('images/multiple-select.png') right top no-repeat;
|
||||
}
|
||||
|
||||
.ms-choice > div.open {
|
||||
background: url('images/multiple-select.png') left top no-repeat;
|
||||
}
|
||||
|
||||
.ms-drop {
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
margin-top: -1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 100%;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #aaa;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
|
||||
.ms-search {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
min-height: 26px;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.ms-search input {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
min-height: 24px;
|
||||
padding: 0 20px 0 5px;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
border: 1px solid #aaa;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: #fff url('multiple-select.png') no-repeat 100% -22px;
|
||||
background: url('multiple-select.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
||||
background: url('multiple-select.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('multiple-select.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('multiple-select.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('multiple-select.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
background: url('multiple-select.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
}
|
||||
|
||||
.ms-search, .ms-search input {
|
||||
-webkit-box-sizing: border-box;
|
||||
-khtml-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ms-drop ul {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.ms-drop ul > li {
|
||||
list-style: none;
|
||||
display: list-item;
|
||||
background-image: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.ms-drop ul > li .disabled {
|
||||
opacity: .35;
|
||||
filter: Alpha(Opacity=35);
|
||||
}
|
||||
|
||||
.ms-drop ul > li.multiple {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ms-drop ul > li.group {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ms-drop ul > li.multiple label {
|
||||
width: 100%;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ms-drop ul > li label.optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ms-drop input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
}
|
153
v1/ods/config.js
|
@ -1,153 +0,0 @@
|
|||
config = {
|
||||
"switches": [{
|
||||
"switch": {
|
||||
"ip": "172.29.8.40",
|
||||
"credential": {
|
||||
"version": "v2c",
|
||||
"community": "public"
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"switch": {
|
||||
"ip": "172.29.8.41",
|
||||
"credential": {
|
||||
"version": "v2c",
|
||||
"community": "public"
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"switch": {
|
||||
"ip": "172.29.8.42",
|
||||
"credential": {
|
||||
"version": "v2c",
|
||||
"community": "public"
|
||||
}
|
||||
}
|
||||
}],
|
||||
"security": {
|
||||
"server_credentials": {
|
||||
"username": "root",
|
||||
"password": "root"
|
||||
},
|
||||
"service_credentials": {
|
||||
"username": "service",
|
||||
"password": "admin"
|
||||
},
|
||||
"console_credentials": {
|
||||
"username": "console",
|
||||
"password": "admin"
|
||||
}
|
||||
},
|
||||
"networking": {
|
||||
"interfaces": {
|
||||
"management": {
|
||||
"ip_start": "10.10.10.100",
|
||||
"ip_end": "10.10.10.255",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "10.10.10.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
},
|
||||
"tenant": {
|
||||
"ip_start": "192.168.100.100",
|
||||
"ip_end": "192.168.100.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "192.168.100.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
},
|
||||
"public": {
|
||||
"ip_start": "172.29.3.100",
|
||||
"ip_end": "172.29.3.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "172.29.3.1",
|
||||
"nic": "eth1",
|
||||
"promisc": 1
|
||||
},
|
||||
"storage": {
|
||||
"ip_start": "172.16.128.10",
|
||||
"ip_end": "172.16.128.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "172.16.128.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
}
|
||||
},
|
||||
"global": {
|
||||
"nameservers": "4.4.4.4,8.8.8.8",
|
||||
"search_path": "ods.com",
|
||||
"gateway": "172.19.100.1",
|
||||
"proxy": "",
|
||||
"ntp_server": ""
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
config_demo = {
|
||||
"switches": [{
|
||||
"switch": {
|
||||
"ip": "127.0.0.1",
|
||||
"credential": {
|
||||
"version": "v2c",
|
||||
"community": "public"
|
||||
}
|
||||
}
|
||||
}],
|
||||
"security": {
|
||||
"server_credentials": {
|
||||
"username": "root",
|
||||
"password": "huawei123"
|
||||
},
|
||||
"service_credentials": {
|
||||
"username": "service",
|
||||
"password": "huawei123"
|
||||
},
|
||||
"console_credentials": {
|
||||
"username": "console",
|
||||
"password": "huawei123"
|
||||
}
|
||||
},
|
||||
"networking": {
|
||||
"interfaces": {
|
||||
"management": {
|
||||
"ip_start": "33.33.33.100",
|
||||
"ip_end": "33.33.33.255",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "33.33.33.10",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
},
|
||||
"tenant": {
|
||||
"ip_start": "192.168.100.100",
|
||||
"ip_end": "192.168.100.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "192.168.100.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
},
|
||||
"public": {
|
||||
"ip_start": "172.29.3.100",
|
||||
"ip_end": "172.29.3.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "172.29.3.1",
|
||||
"nic": "eth1",
|
||||
"promisc": 1
|
||||
},
|
||||
"storage": {
|
||||
"ip_start": "172.16.128.10",
|
||||
"ip_end": "172.16.128.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "172.16.128.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
}
|
||||
},
|
||||
"global": {
|
||||
"nameservers": "33.33.33.10",
|
||||
"search_path": "ods.com",
|
||||
"gateway": "33.33.33.10",
|
||||
"proxy": "http://33.33.33.10:3128",
|
||||
"ntp_server": "33.33.33.10"
|
||||
}
|
||||
}
|
||||
};
|
|
@ -1,505 +0,0 @@
|
|||
// map fixtures for this application
|
||||
|
||||
steal("jquery/dom/fixture", "jquery/lang/json", function(){
|
||||
var self = this;
|
||||
self.switchIdIndex = 1;
|
||||
|
||||
self.servers_data = [];
|
||||
|
||||
self.percentage = 0.0;
|
||||
|
||||
self.port = 0;
|
||||
|
||||
self.num =0;
|
||||
|
||||
|
||||
$.fixture('POST /api/switches', function(original, settings, headers) {
|
||||
var manage_ip = JSON.parse(original.data).switch.ip;
|
||||
var switchId = 1;
|
||||
|
||||
if (manage_ip == "172.29.8.40") {
|
||||
switchId = 1;
|
||||
} else if (manage_ip == "172.29.8.41") {
|
||||
switchId = 2;
|
||||
} else if (manage_ip == "172.29.8.42") {
|
||||
switchId = 3;
|
||||
}
|
||||
|
||||
var returnData = {
|
||||
"status": "accepted",
|
||||
"switch": {
|
||||
"state": "initialized",
|
||||
"link": {
|
||||
"href": "/switches/"+switchId+"/",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": switchId
|
||||
}
|
||||
};
|
||||
|
||||
var duplicateErr = {
|
||||
"status": "duplicate",
|
||||
"message": "duplicate IP address",
|
||||
"failedSwitch": 2
|
||||
};
|
||||
//var xhr = {responseText: JSON.stringify(duplicateErr), status: 409};
|
||||
|
||||
if (switchId == 1) {
|
||||
return [202, "accepted", returnData, {}];
|
||||
//return [202, returnData ];
|
||||
} else if (switchId == 2) {
|
||||
return [409, duplicateErr];
|
||||
//return [202, "accepted", returnData, {} ];
|
||||
} else if (switchId == 3) {
|
||||
//return [409, duplicateErr];
|
||||
return [202, "accepted", returnData, {} ];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$.fixture('PUT /api/switches/{id}', function(original, settings, headers) {
|
||||
var switchId = settings.url.substring(14,15);
|
||||
|
||||
var returnData = {
|
||||
"status": "accepted",
|
||||
"switch": {
|
||||
"state": "repolling",
|
||||
"link": {
|
||||
"href": "/switches/"+switchId+"/",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": switchId
|
||||
}
|
||||
};
|
||||
|
||||
return [202, "accepted", returnData, {} ];
|
||||
|
||||
});
|
||||
|
||||
$.fixture('GET /api/switches/{id}', function(original, settings, headers) {
|
||||
var switchId = settings.url.substring(14,15);
|
||||
self.num ++;
|
||||
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"switch": {
|
||||
"state": switchId == 1 ? (self.num < 5 ? "initialized" : "unreachable") : "under_monitoring",
|
||||
"err_msg": "error message",
|
||||
"link": {
|
||||
"href": settings.url,
|
||||
"rel": "self"
|
||||
},
|
||||
"id": switchId
|
||||
}
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/machines', function(original, settings, headers) {
|
||||
var switchId = settings.url.substring(23);
|
||||
steal.dev.log("get machines switchId", switchId);
|
||||
if(switchId == 1) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"machines": [
|
||||
{
|
||||
"mac": "28:6e:31:47:c8:6c",
|
||||
"vlan": 1,
|
||||
"link": {
|
||||
"href": "/api/machines/10",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 10,
|
||||
"port": 1,
|
||||
"switch_ip": "172.29.8.40"
|
||||
},
|
||||
{
|
||||
"mac": "28:6e:55:47:52:e3",
|
||||
"vlan": 1,
|
||||
"link": {
|
||||
"href": "/api/machines/20",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 20,
|
||||
"port": 2,
|
||||
"switch_ip": "172.29.8.40"
|
||||
},
|
||||
{
|
||||
"mac": "28:6e:d4:47:33:5f",
|
||||
"vlan": 1,
|
||||
"link": {
|
||||
"href": "/api/machines/30",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 30,
|
||||
"port": 3,
|
||||
"switch_ip": "172.29.8.40"
|
||||
},
|
||||
{
|
||||
"mac": "28:6e:9b:47:51:aa",
|
||||
"vlan": 1,
|
||||
"link": {
|
||||
"href": "/api/machines/40",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 40,
|
||||
"port": 4,
|
||||
"switch_ip": "172.29.8.40"
|
||||
}
|
||||
]
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
else if(switchId == 2) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"machines": [
|
||||
{
|
||||
"mac": "28:e5:ee:47:14:92",
|
||||
"vlan": 2,
|
||||
"link": {
|
||||
"href": "/api/machines/50",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 50,
|
||||
"port": 1,
|
||||
"switch_ip": "172.29.8.41"
|
||||
},
|
||||
{
|
||||
"mac": "28:61:15:c2:aa:4a",
|
||||
"vlan": 2,
|
||||
"link": {
|
||||
"href": "/api/machines/60",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 60,
|
||||
"port": 2,
|
||||
"switch_ip": "172.29.8.41"
|
||||
},
|
||||
{
|
||||
"mac": "28:27:f9:c2:51:4a",
|
||||
"vlan": 2,
|
||||
"link": {
|
||||
"href": "/api/machines/70",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 70,
|
||||
"port": 3,
|
||||
"switch_ip": "172.29.8.41"
|
||||
}
|
||||
]
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
else if(switchId == 3) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"machines": [
|
||||
{
|
||||
"mac": "28:e5:ee:23:14:92",
|
||||
"vlan": 3,
|
||||
"link": {
|
||||
"href": "/api/machines/80",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 80,
|
||||
"port": 1,
|
||||
"switch_ip": "172.29.8.42"
|
||||
},
|
||||
{
|
||||
"mac": "28:22:77:c2:46:4a",
|
||||
"vlan": 3,
|
||||
"link": {
|
||||
"href": "/api/machines/90",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 90,
|
||||
"port": 2,
|
||||
"switch_ip": "172.29.8.42"
|
||||
}
|
||||
]
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$.fixture('POST /api/clusters', function(data) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"cluster": {
|
||||
"id": "123",
|
||||
"name": "clustername",
|
||||
"link": {
|
||||
"href": "/api/clusters/123",
|
||||
"rel": "self"
|
||||
}
|
||||
}
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/clusters?state={state}', function(original, settings, headers) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"clusters": [{
|
||||
"id": 1,
|
||||
"clusterName": "cluster_01",
|
||||
"link": {
|
||||
"href": "/clusters/1",
|
||||
"rel": "self"
|
||||
}
|
||||
}, {
|
||||
"id": 2,
|
||||
"clusterName": "cluster_02",
|
||||
"link": {
|
||||
"href": "/clusters/2",
|
||||
"rel": "self"
|
||||
}
|
||||
}, {
|
||||
"id": 3,
|
||||
"clusterName": "cluster_03",
|
||||
"link": {
|
||||
"href": "/clusters/3",
|
||||
"rel": "self"
|
||||
}
|
||||
}]
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
|
||||
$.fixture('POST /api/clusters/{id}/action', function(original, settings, headers) {
|
||||
var hostIds = JSON.parse(original.data).addHosts;
|
||||
if(!hostIds) {
|
||||
hostIds = JSON.parse(original.data).replaceAllHosts;
|
||||
}
|
||||
if(hostIds) { // for addHost and replaceAllHost
|
||||
steal.dev.log("fixture cluster action hostIds : ", hostIds);
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"cluster_hosts": []
|
||||
};
|
||||
|
||||
for(var i = 0; i<hostIds.length; i++) {
|
||||
var tmp = {
|
||||
"machine_id": hostIds[i],
|
||||
"id": hostIds[i]*10
|
||||
}
|
||||
|
||||
returnData.cluster_hosts.push(tmp);
|
||||
}
|
||||
return returnData;
|
||||
}
|
||||
|
||||
else { // for deploy
|
||||
var returnData = {
|
||||
"status": "accepted",
|
||||
"deployment": "/api/progress/cluster/123"
|
||||
}
|
||||
return [202, "accepted", returnData, {} ];
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$.fixture('PUT /api/clusters/{id}/security', function(data) {
|
||||
self.security_data = data.data;
|
||||
var returnData = {
|
||||
"status": "OK"
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
|
||||
$.fixture('PUT /api/clusters/{id}/networking', function(original, settings, headers) {
|
||||
console.log("networking original: ", original);
|
||||
var returnData = {
|
||||
"status": "OK"
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
|
||||
$.fixture('PUT /api/clusterhosts/{id}/config', function(original, settings, headers) {
|
||||
console.log(settings);
|
||||
var returnData = {
|
||||
"status": "OK"
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
|
||||
$.fixture('PUT /api/clusters/{id}/partition', function(data) {
|
||||
self.partition_data = data;
|
||||
console.log("new partition api: ", self.partition_data);
|
||||
var returnData = {
|
||||
"status": "OK"
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/adapters/{id}/roles', function(data) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"roles": [{
|
||||
"name": "role1",
|
||||
"description": "desc1"
|
||||
}, {
|
||||
"name": "role2",
|
||||
"description": "desc2"
|
||||
}, {
|
||||
"name": "role3",
|
||||
"description": "desc3"
|
||||
}, {
|
||||
"name": "role4",
|
||||
"description": "desc4"
|
||||
}, {
|
||||
"name": "role5",
|
||||
"description": "desc5"
|
||||
}]
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
$.fixture('POST /api/triggerinstall/', function(data) {
|
||||
console.log(data);
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"_data": {},
|
||||
"type": "triggerinstall"
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
|
||||
$.fixture('GET /api/clusterhosts/{id}/progress', function(original, settings, headers) {
|
||||
self.percentage += 0.1;
|
||||
if(self.percentage > 1)
|
||||
self.percentage = 1;
|
||||
|
||||
var message = "Configuring Net Management";
|
||||
if(self.percentage < 0.3) {
|
||||
message = "Configuring Net Management";
|
||||
}
|
||||
else if(self.percentage < 0.45){
|
||||
message = "Installing OpenStack";
|
||||
}
|
||||
else if(self.percentage < 0.65) {
|
||||
message = "Configuring Core Virtualization";
|
||||
}
|
||||
else if(self.percentage < 0.80) {
|
||||
message = "Finalizing OpenStack Installation";
|
||||
}
|
||||
else if(self.percentage < 1.0) {
|
||||
message = "Configuring API Database";
|
||||
}
|
||||
else {
|
||||
message = "Completed!";
|
||||
}
|
||||
|
||||
var id = original.url.substring(18, 21);
|
||||
console.log(id);
|
||||
console.log(original);
|
||||
|
||||
var res = {
|
||||
"status": "OK",
|
||||
"progress": {
|
||||
"id": id,
|
||||
"state": "",
|
||||
"hostname": "hostname",
|
||||
"percentage": self.percentage,
|
||||
"message": message,
|
||||
"severity": "INFO" // INFO, WARNING, ERROR
|
||||
},
|
||||
"type": "progress"
|
||||
|
||||
};
|
||||
|
||||
return res;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/clusterhosts?clustername={clustername}', function(original, settings, headers) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"cluster_hosts": [{
|
||||
"hostname": "host_01",
|
||||
"id": 100,
|
||||
"switch_ip": "172.29.8.40",
|
||||
"mutable": true,
|
||||
"link": {
|
||||
"href": "/clusterhosts/1",
|
||||
"rel": "self"
|
||||
}
|
||||
}, {
|
||||
"hostname": "host_02",
|
||||
"id": 200,
|
||||
"switch_ip": "172.29.8.40",
|
||||
"mutable": true,
|
||||
"link": {
|
||||
"href": "/clusterhosts/2",
|
||||
"rel": "self"
|
||||
}
|
||||
}, {
|
||||
"hostname": "host_03",
|
||||
"id": 300,
|
||||
"switch_ip": "172.29.8.41",
|
||||
"mutable": true,
|
||||
"link": {
|
||||
"href": "/clusterhosts/3",
|
||||
"rel": "self"
|
||||
}
|
||||
}]
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/clusters/{id}/progress', function(original, settings, headers) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"progress": {
|
||||
"state": "",
|
||||
"percentage": self.percentage,
|
||||
"messages": [
|
||||
"Configuring Net Management",
|
||||
"Configuring Core Virtualization"
|
||||
],
|
||||
"severity": "INFO" // INFO, WARNING, ERROR
|
||||
}
|
||||
};
|
||||
return returnData;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/dashboardlinks', function(original, settings, headers) {
|
||||
console.log("original: ", original);
|
||||
console.log("settings: ", settings);
|
||||
|
||||
var res = {
|
||||
"status": "OK",
|
||||
"type": "dashboardlinks",
|
||||
"dashboardlinks": {
|
||||
"os-controller": "http://10.145.88.232"
|
||||
}
|
||||
};
|
||||
return res;
|
||||
});
|
||||
|
||||
$.fixture('GET /api/adapters', function(original, settings, headers) {
|
||||
console.log("original: ", original);
|
||||
console.log("settings: ", settings);
|
||||
|
||||
var res = {
|
||||
"status": "OK",
|
||||
"adapters": [{
|
||||
"id": 1,
|
||||
"name": "Centos_openstack"
|
||||
}, {
|
||||
"id": 2,
|
||||
"name": "Centos"
|
||||
}
|
||||
]
|
||||
};
|
||||
return res;
|
||||
});
|
||||
})
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../funcunit/qunit/qunit.css" />
|
||||
<title>ods FuncUnit Test</title>
|
||||
<script type='text/javascript' src='../steal/steal.js?ods/test/funcunit'></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">ods Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
</body>
|
||||
</html>
|
|
@ -1,127 +0,0 @@
|
|||
steal("jquery/model", "jquery/lang/json",
|
||||
function() {
|
||||
$.Model('Ods.Cluster', {
|
||||
create: function(params, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusters',
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: $.toJSON(params),
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
action: function(id, params, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusters/' + id + '/action',
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
data: $.toJSON(params),
|
||||
contentType: "application/json",
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
update: function(id, params, resource, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusters/' + id + '/' + resource,
|
||||
type: 'put',
|
||||
dataType: 'json',
|
||||
data: $.toJSON(params),
|
||||
contentType: "application/json",
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
get: function(state, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusters?state=' + state,
|
||||
type: 'get',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
progress: function(id, success) {
|
||||
$.ajax({
|
||||
url: '/api/clusters/' + id + '/progress',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: success
|
||||
});
|
||||
}
|
||||
}, {});
|
||||
|
||||
$.Model('Ods.ClusterHost', {
|
||||
update: function(id, params, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusterhosts/' + id + '/config',
|
||||
type: 'PUT',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: $.toJSON(params),
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
progress: function(id, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusterhosts/' + id + '/progress',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
get: function(clustername, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/clusterhosts?clustername=' + clustername,
|
||||
type: 'GET',
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
}
|
||||
}, {});
|
||||
|
||||
$.Model('Ods.DashboardLink', {
|
||||
findOne: function(id, success) {
|
||||
$.ajax({
|
||||
url: '/api/dashboardlinks',
|
||||
type: 'get',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
"cluster_id": id
|
||||
},
|
||||
success: success
|
||||
});
|
||||
}
|
||||
}, {});
|
||||
|
||||
$.Model('Ods.Adapter', {
|
||||
getRoles: function(id, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/adapters/' + id + '/roles',
|
||||
type: 'get',
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
get: function(success, error) {
|
||||
$.ajax({
|
||||
url: '/api/adapters',
|
||||
type: 'get',
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
}
|
||||
}, {});
|
||||
|
||||
});
|
|
@ -1,4 +0,0 @@
|
|||
// steal model files
|
||||
steal("jquery/model",
|
||||
"./servers.js",
|
||||
"./cluster.js")
|
|
@ -1,43 +0,0 @@
|
|||
steal("jquery/model", "jquery/lang/json",
|
||||
function() {
|
||||
$.Model('Ods.Switch', {
|
||||
create: function(params, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/switches',
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: $.toJSON(params),
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
findOne: function(id, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/switches/' + id,
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
update: function(id, params, success, error) {
|
||||
$.ajax({
|
||||
url: '/api/switches/' + id,
|
||||
type: 'PUT',
|
||||
data: $.toJSON(params),
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: success,
|
||||
error: error
|
||||
});
|
||||
}
|
||||
}, {});
|
||||
|
||||
$.Model('Ods.Server', {
|
||||
findAll: 'GET /api/machines'
|
||||
}, {});
|
||||
|
||||
});
|
|
@ -1,71 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Huawei - Compass</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css" />
|
||||
|
||||
<script type='text/javascript' src='../lib/d3.min.js'></script>
|
||||
|
||||
<!--[if IE 7]>
|
||||
<link rel="stylesheet" type="text/css" href="/css/style-ie.css">
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="bound">
|
||||
<div id="logo">
|
||||
<img src="../img/hw_000353.jpg" title="Huawei Compass homepage"></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<div id="title" style="float:left">
|
||||
Compass
|
||||
</div>
|
||||
|
||||
<div id="nav" style="float:left">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div class="main-box">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var result = {};
|
||||
if (window.location.search)
|
||||
{
|
||||
// split up the query string and store in an associative array
|
||||
var params = window.location.search.slice(1).split("&");
|
||||
for (var i = 0; i < params.length; i++)
|
||||
{
|
||||
var tmp = params[i].split("=");
|
||||
result[tmp[0]] = unescape(tmp[1]);
|
||||
}
|
||||
}
|
||||
|
||||
if(result.production == "true") {
|
||||
var library = document.createElement("script");
|
||||
library.setAttribute("src", "../steal/steal.production.js?ods");
|
||||
document.body.appendChild(library);
|
||||
}
|
||||
else {
|
||||
var library = document.createElement("script");
|
||||
library.setAttribute("src", "../steal/steal.js?ods");
|
||||
document.body.appendChild(library);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,74 +0,0 @@
|
|||
steal(
|
||||
// './ods.css', // application CSS file
|
||||
'./models/models.js', // steals all your models
|
||||
'./ui/welcome/welcome.js',
|
||||
'./ui/nav/nav.js','jquery/lang/observe/delegate',
|
||||
'./fixtures/fixtures.js', // sets up fixtures for your models
|
||||
'./config.js',
|
||||
function(){ // configure your application
|
||||
var mainBox = $('div.main-box');
|
||||
|
||||
var odsState = {
|
||||
networking: null,
|
||||
servers: [],
|
||||
servers_config: null,
|
||||
cluster_id: null,
|
||||
security: null,
|
||||
partition: null,
|
||||
feature: null,
|
||||
machines: [],
|
||||
switches: [],
|
||||
snmp: true,
|
||||
adapter_id: null,
|
||||
adapters: []
|
||||
};
|
||||
|
||||
var state = new $.Observe(odsState);
|
||||
|
||||
$('#nav').ods_ui_nav({"mainBox" : mainBox, "odsState" : state});
|
||||
|
||||
if (!window.location.host) {
|
||||
$.fixture.on = true;
|
||||
state.switches = config.switches;
|
||||
state.security = config.security;
|
||||
state.networking = config.networking;
|
||||
} else {
|
||||
var result = {};
|
||||
if (window.location.search) {
|
||||
// split up the query string and store in an associative array
|
||||
var params = window.location.search.slice(1).split("&");
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
var tmp = params[i].split("=");
|
||||
result[tmp[0]] = unescape(tmp[1]);
|
||||
}
|
||||
}
|
||||
|
||||
if (result.server == "fixture") {
|
||||
$.fixture.on = true;
|
||||
} else {
|
||||
$.fixture.on = false;
|
||||
}
|
||||
if (result.config == "true") {
|
||||
state.switches = config.switches;
|
||||
state.security = config.security;
|
||||
state.networking = config.networking;
|
||||
} else if (result.config == "demo") {
|
||||
state.switches = config_demo.switches;
|
||||
state.security = config_demo.security;
|
||||
state.networking = config_demo.networking;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.location.hash == "#progress") {
|
||||
mainBox.ods_ui_install_review({
|
||||
nav: $('#nav').controller(),
|
||||
"mainBox": mainBox,
|
||||
"odsState": state,
|
||||
"installStep": "progress"
|
||||
});
|
||||
} else {
|
||||
mainBox.ods_ui_welcome({ nav: $('#nav').controller(), "mainBox" : mainBox, "odsState" : state });
|
||||
}
|
||||
|
||||
|
||||
})
|
|
@ -1,3 +0,0 @@
|
|||
@page index ods
|
||||
|
||||
This is a placeholder for the homepage of your documentation.
|
1021
v1/ods/production.js
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../funcunit/qunit/qunit.css" />
|
||||
<title>ods QUnit Test</title>
|
||||
<script type='text/javascript'>
|
||||
steal = {ignoreControllers: true}
|
||||
</script>
|
||||
<script type='text/javascript' src='../steal/steal.js?ods/test/qunit'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">ods Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<div id="test-content"></div>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-test-area"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>ods Build Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ods Build Page</h1>
|
||||
<p>This is a dummy page that loads your app so steal can
|
||||
get all the files.
|
||||
</p>
|
||||
<p>If you built your app
|
||||
to depend on HTML in the page before DOMContent loaded or
|
||||
onload, you can add the HTML here, or you can change the
|
||||
build.js script to point to a better html file.
|
||||
</p>
|
||||
<script type='text/javascript'
|
||||
src='../../steal/steal.js?ods'>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,6 +0,0 @@
|
|||
//js ods/scripts/build.js
|
||||
|
||||
load("steal/rhino/rhino.js");
|
||||
steal('steal/build').then('steal/build/scripts','steal/build/styles',function(){
|
||||
steal.build('ods/scripts/build.html',{to: 'ods'});
|
||||
});
|
|
@ -1,17 +0,0 @@
|
|||
//steal/js ods/scripts/compress.js
|
||||
|
||||
load("steal/rhino/rhino.js");
|
||||
steal('steal/clean',function(){
|
||||
steal.clean('ods/ods.html',{
|
||||
indent_size: 1,
|
||||
indent_char: '\t',
|
||||
jslint : false,
|
||||
ignore: /jquery\/jquery.js/,
|
||||
predefined: {
|
||||
steal: true,
|
||||
jQuery: true,
|
||||
$ : true,
|
||||
window : true
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,7 +0,0 @@
|
|||
// load('ods/scripts/crawl.js')
|
||||
|
||||
load('steal/rhino/rhino.js')
|
||||
|
||||
steal('steal/html/crawl', function(){
|
||||
steal.html.crawl("ods/ods.html","ods/out")
|
||||
});
|
|
@ -1,8 +0,0 @@
|
|||
//js ods/scripts/doc.js
|
||||
|
||||
load('steal/rhino/rhino.js');
|
||||
steal("documentjs").then(function(){
|
||||
DocumentJS('ods/ods.html', {
|
||||
markdown : ['ods']
|
||||
});
|
||||
});
|
|
@ -1,43 +0,0 @@
|
|||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view'
|
||||
).then(
|
||||
'./views/init.ejs',
|
||||
'./views/before_begin.ejs'
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.features', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init'));
|
||||
},
|
||||
|
||||
'a.btn_continue click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
if (el.data('step') === 'before_begin') {
|
||||
this.options.nav.gotoStep("2");
|
||||
} else {
|
||||
var live_migration = 0;
|
||||
var high_availability = 0;
|
||||
if ($('#lm').is(':checked')) {
|
||||
live_migration = 1;
|
||||
}
|
||||
if ($('#ha').is(':checked')) {
|
||||
high_availability = 1;
|
||||
}
|
||||
this.options.odsState.feature = {
|
||||
"live_migration": live_migration,
|
||||
"high_availability": high_availability
|
||||
};
|
||||
this.element.html(this.view('before_begin'));
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.element.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.element.hide();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>features Widget Unit Test</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div id="features-test"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='../../../steal/steal.js'></script>
|
||||
<script type='text/javascript'>
|
||||
steal('jquery/dom/route', 'ods/ui/features').then(function($) {
|
||||
|
||||
$('#features-test').ods_ui_features();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<h2>Welcome to Compass</h2>
|
||||
|
||||
<div class="left-side">
|
||||
<p>
|
||||
Before you begin the deployment of the OpenStack software, you need to make sure that the servers and networking are deployed properly. Compass requires the following configuration:
|
||||
</p>
|
||||
<ul>
|
||||
<li>All servers must have at least <span class="bold underline">two</span> 1 Gbps network ports</li>
|
||||
<li>One server must have <span class="bold underline">three</span> 1 Gbps network ports</li>
|
||||
<li>Server NICs must be connected to the same subnet</li>
|
||||
</ul>
|
||||
<p>
|
||||
When you have configured the servers as described above, and shown in the picture to the right, you can begin the OpenStack Deployment by clicking the Continue button. At the next screen you will be asked to identify the switch to which the servers are connected to begin the process.
|
||||
</p>
|
||||
<p>
|
||||
When you're ready to begin, click the Continue button below.
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">Print these instructions</a>
|
||||
</p>
|
||||
<div class="continue"><center>
|
||||
<a href="/web/servers/" class="btn_continue" data-step="before_begin">Continue</a>
|
||||
</center></div>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<img title="Descriptive Topological Graphic" src="../img/topology_description.png" height="385px" width="538px"></img>
|
||||
</div>
|
|
@ -1,35 +0,0 @@
|
|||
<h2>Select the Compass features you want to deploy and configure</h2>
|
||||
|
||||
<div class="left-side">
|
||||
<div class="inside">
|
||||
<h3><span><img src="../img/green_check_16px.png" height="16px" width="16px"></img></span> OpenStack Virtualization</h3>
|
||||
|
||||
<p style="padding-left:40px">
|
||||
Create and run KVM virtual machines. This feature is the core of OpenStack, and is a required part of the Openstack deployment.
|
||||
</p>
|
||||
|
||||
<h3 class="unavailable">
|
||||
<input id="lm" type="checkbox" disabled> Live Migration of Virtual Machines
|
||||
</h3>
|
||||
|
||||
<p class="unavailable" style="padding-left:40px">
|
||||
Live Migration allows virtual machines to be moved from one compute server to another without powering them down.
|
||||
</p>
|
||||
|
||||
<h3 class="unavailable">
|
||||
<input id="ha" type="checkbox" disabled> High Availability (HA)
|
||||
</h3>
|
||||
|
||||
<p class="unavailable" style="padding-left:40px">
|
||||
High Availability automatically restarts a virtual machine on a different compute server in the event of its being accidentally powered off due to a compute server failure.
|
||||
</p>
|
||||
|
||||
<div class="continue"><center>
|
||||
<a id="continue" href="javascript: void(0)" data-step="features" class="btn_continue">Continue</a>
|
||||
</center></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-side">
|
||||
<img title="Descriptive Features Graphic" src="../img/features_graphic.png" height="362px" width="559px"></img>
|
||||
</div>
|
|
@ -1,32 +0,0 @@
|
|||
.tab_panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab_panel_active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.roles {
|
||||
width: 150px;
|
||||
|
||||
}
|
||||
|
||||
.ms-choice {
|
||||
border: 1px solid #C0C0C0;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 5px 0 rgba(215, 211, 207, 0.75) inset;
|
||||
}
|
||||
|
||||
#customize-panel {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#autofill-panel {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.radioText {
|
||||
color: #5964A1;
|
||||
font-size: 15px;
|
||||
font-weight:bold;
|
||||
}
|
|
@ -1,740 +0,0 @@
|
|||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view'
|
||||
).then(
|
||||
'./host_config.css',
|
||||
'./views/init.ejs',
|
||||
'./views/server_row.ejs',
|
||||
'./views/pattern_tip.ejs',
|
||||
'ods/models/cluster.js',
|
||||
'lib/jquery-ui-1.10.3.custom.css',
|
||||
'lib/jquery-ui-1.10.3.custom.js',
|
||||
'lib/jquery.numeric.js',
|
||||
'lib/jquery.multiple.select.js',
|
||||
'lib/multiple-select.css'
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.host_config', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init'));
|
||||
|
||||
var self = this;
|
||||
|
||||
$("#pattern").change(function() {
|
||||
var pattern = $("#pattern").val();
|
||||
if (pattern == "Switch IP") {
|
||||
$("#custom-pattern").hide();
|
||||
} else if (pattern == "Switch alias") {
|
||||
$("#custom-pattern").hide();
|
||||
} else if (pattern == "Host") {
|
||||
$("#custom-pattern").hide();
|
||||
} else if (pattern == "Custom") {
|
||||
$("#custom-pattern").show();
|
||||
}
|
||||
});
|
||||
|
||||
$("input:radio[name='fillType']").change(function() {
|
||||
var fillType = $("input:radio[name='fillType']:checked").val();
|
||||
if(fillType == "autofill") {
|
||||
$("#autofill-panel").show(500);
|
||||
$("#customize-panel").hide(500);
|
||||
} else {
|
||||
$("#autofill-panel").hide(500);
|
||||
$("#customize-panel").show(500);
|
||||
}
|
||||
});
|
||||
|
||||
$("#dialog-confirm").dialog({
|
||||
autoOpen: false,
|
||||
resizable: false,
|
||||
height: 350,
|
||||
width: 550,
|
||||
modal: true,
|
||||
buttons: {
|
||||
"Fill values": function() {
|
||||
var fillType = $("input:radio[name='fillType']:checked").val();
|
||||
|
||||
if(fillType == "autofill") {
|
||||
var management_auto = $("#management-auto").val();
|
||||
var tenant_auto = $("#tenant-auto").val();
|
||||
var hostname_auto = $("#hostname-auto").val();
|
||||
|
||||
if (hostname_auto == "Switch IP") {
|
||||
self.fillHostnameBySwitchIp();
|
||||
} else if (hostname_auto == "Switch alias") {
|
||||
self.fillHostnameBySwitchAlias();
|
||||
} else if (hostname_auto == "Host") {
|
||||
self.fillHostnameByServer();
|
||||
}
|
||||
|
||||
self.fillMgtIpBySequence(parseInt(management_auto));
|
||||
self.fillTntIpBySequence(parseInt(tenant_auto));
|
||||
} else { //customize
|
||||
var management_cust = $("#management-customize").val();
|
||||
var tenant_cust = $("#tenant-customize").val();
|
||||
var hostname_cust = $("#hostname-customize").val();
|
||||
|
||||
|
||||
self.fillMgtIpByCustomStr(management_cust);
|
||||
self.fillTntIpByCustomStr(tenant_cust);
|
||||
self.fillHostnameByCustomStr(hostname_cust);
|
||||
}
|
||||
|
||||
self.tabSelected($(".tab_nav_active"));
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function() {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
/*
|
||||
$(".pattern-tip").tooltip({
|
||||
items: "[data-geo], [title]",
|
||||
content: function() {
|
||||
var element = $(this);
|
||||
if (element.is("[data-geo]")) {
|
||||
return self.view('pattern_tip');
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
$( document ).tooltip();
|
||||
|
||||
$(".integer").numeric(false, function() {
|
||||
this.value = "";
|
||||
this.focus();
|
||||
});
|
||||
|
||||
// get adapter roles
|
||||
this.adapterRoles = [];
|
||||
Ods.Adapter.getRoles(this.options.odsState.adapter_id, this.proxy('onGetRoles'), this.proxy('onGetRolesErr'));
|
||||
|
||||
this.server_count = this.options.odsState.servers.length;
|
||||
},
|
||||
|
||||
'#clear-hostconfig click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
$(".server-panels input").val("");
|
||||
$(".server-panels select").multipleSelect("uncheckAll");
|
||||
},
|
||||
|
||||
onGetRoles: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onGetRoles data *** ", data);
|
||||
steal.dev.log(" *** onGetRoles textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onGetRoles xhr *** ", xhr);
|
||||
if (xhr.status == 200) {
|
||||
this.adapterRoles = data.roles;
|
||||
this.filloutTabs();
|
||||
}
|
||||
},
|
||||
|
||||
onGetRolesErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onGetRoleErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onGetRoleErr status *** ", status);
|
||||
steal.dev.log(" *** onGetRoleErr statusText *** ", xhr);
|
||||
this.adapterRoles = [];
|
||||
this.filloutTabs();
|
||||
|
||||
$('.roles').multipleSelect({
|
||||
placeholder: "No roles available",
|
||||
selectAll: false
|
||||
});
|
||||
},
|
||||
|
||||
fillRolesDropdowns: function(el, selectedRoles) {
|
||||
for (var i = 0; i < this.adapterRoles.length; i++) {
|
||||
el.append("<option value=" + this.adapterRoles[i].name + ">" + this.adapterRoles[i].description + "</option>");
|
||||
}
|
||||
el.multipleSelect({
|
||||
placeholder: "auto",
|
||||
selectAll: false
|
||||
});
|
||||
el.multipleSelect("setSelects", selectedRoles);
|
||||
},
|
||||
|
||||
fillHostnameBySwitchIp: function() {
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
servers[i]['hostname'] = key.replace(/\./g, "-") + '-p' + servers[i].port;
|
||||
serverData[key][i]['hostname'] = servers[i]['hostname'];
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
},
|
||||
|
||||
fillHostnameBySwitchAlias: function() {
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
var key_index = 1;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
servers[i]['hostname'] = "switch" + key_index + '-p' + servers[i].port;
|
||||
}
|
||||
key_index++;
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
},
|
||||
|
||||
fillHostnameByServer: function() {
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
var server_index = 1;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
servers[i]['hostname'] = "server" + server_index;
|
||||
server_index++;
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
},
|
||||
|
||||
fillHostnameByCustomStr: function(customStr) {
|
||||
var preDefinedPatterns = ["{swIpPart1}", "{swIpPart2}", "{swIpPart3}", "{swIpPart4}", "{port}",
|
||||
"{mgtIpPart1}", "{mgtIpPart2}", "{mgtIpPart3}", "{mgtIpPart4}",
|
||||
"{tntIpPart1}", "{tntIpPart2}", "{tntIpPart3}", "{tntIpPart4}"
|
||||
];
|
||||
var swIpPart1 = 0,
|
||||
swIpPart2 = 0,
|
||||
swIpPart3 = 0,
|
||||
swIpPart4 = 0,
|
||||
port = 0,
|
||||
mgtIpPart1 = 0,
|
||||
mgtIpPart2 = 0,
|
||||
mgtIpPart3 = 0,
|
||||
mgtIpPart4 = 0,
|
||||
tntIpPart1 = 0,
|
||||
tntIpPart2 = 0,
|
||||
tntIpPart3 = 0,
|
||||
tntIpPart4 = 0;
|
||||
digitNum = 0,
|
||||
customCalculation = 0;
|
||||
|
||||
//var regExp = /\[([^)]+\].(\d+))/;
|
||||
var regExp = /\[(.*?)\].(\d+)/;
|
||||
var originalCustomStr = customStr;
|
||||
var replaceStr = "";
|
||||
|
||||
customCalculation = regExp.exec(customStr);
|
||||
if (customCalculation) {
|
||||
replaceStr = customCalculation[0];
|
||||
digitNum = parseInt(customCalculation[2]);
|
||||
customCalculation = customCalculation[1].split("].")[0];
|
||||
} else {
|
||||
regExp = /\[(.*?)\]/;
|
||||
customCalculation = regExp.exec(customStr);
|
||||
if(customCalculation) {
|
||||
replaceStr = customCalculation[0];
|
||||
customCalculation = customCalculation[1];
|
||||
}
|
||||
}
|
||||
|
||||
if (!customCalculation) {
|
||||
alert("Invalid host name customization");
|
||||
} else {
|
||||
while (customCalculation.indexOf(preDefinedPatterns[0]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[0], "swIpPart1");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[1]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[1], "swIpPart2");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[2]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[2], "swIpPart3");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[3]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[3], "swIpPart4");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[4]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[4], "port");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[5]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[5], "mgtIpPart1");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[6]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[6], "mgtIpPart2");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[7]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[7], "mgtIpPart3");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[8]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[8], "mgtIpPart4");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[9]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[9], "tntIpPart1");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[10]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[10], "tntIpPart2");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[11]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[11], "tntIpPartt3");
|
||||
}
|
||||
while (customCalculation.indexOf(preDefinedPatterns[12]) != -1) {
|
||||
customCalculation = customCalculation.replace(preDefinedPatterns[12], "tntIpPart4");
|
||||
}
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
var originalCustomCalculation = customCalculation;
|
||||
for (var key in serverData) {
|
||||
var swIpParts = key.split(".");
|
||||
swIpPart1 = parseInt(swIpParts[0]);
|
||||
swIpPart2 = parseInt(swIpParts[1]);
|
||||
swIpPart3 = parseInt(swIpParts[2]);
|
||||
swIpPart4 = parseInt(swIpParts[3]);
|
||||
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
port = parseInt(servers[i].port);
|
||||
var mgtIpParts = servers[i].management_ip.split(".");
|
||||
mgtIpPart1 = parseInt(mgtIpParts[0]);
|
||||
mgtIpPart2 = parseInt(mgtIpParts[1]);
|
||||
mgtIpPart3 = parseInt(mgtIpParts[2]);
|
||||
mgtIpPart4 = parseInt(mgtIpParts[3]);
|
||||
var tntIpParts = servers[i].tenant_ip.split(".");
|
||||
tntIpPart1 = parseInt(tntIpParts[0]);
|
||||
tntIpPart2 = parseInt(tntIpParts[1]);
|
||||
tntIpPart3 = parseInt(tntIpParts[2]);
|
||||
tntIpPart4 = parseInt(tntIpParts[3]);
|
||||
|
||||
try {
|
||||
customCalculation = eval(customCalculation);
|
||||
if(digitNum > 1) {
|
||||
customCalculation = this.leftPad(customCalculation, digitNum);
|
||||
}
|
||||
serverData[key][i]['hostname'] = originalCustomStr.replace(replaceStr, customCalculation);
|
||||
} catch (err) {
|
||||
serverData[key][i]['hostname'] = "";
|
||||
}
|
||||
customCalculation = originalCustomCalculation;
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
}
|
||||
},
|
||||
|
||||
leftPad: function(number, targetLength) {
|
||||
var output = number + '';
|
||||
while (output.length < targetLength) {
|
||||
output = '0' + output;
|
||||
}
|
||||
return output;
|
||||
},
|
||||
|
||||
fillMgtIpBySequence: function(interval) {
|
||||
var mgtIpStart = this.options.odsState.networking.interfaces.management.ip_start;
|
||||
var mgtIpEnd = this.options.odsState.networking.interfaces.management.ip_end;
|
||||
|
||||
var mgtIpStartParts = mgtIpStart.split(".");
|
||||
var mgtIpEndParts = mgtIpEnd.split(".");
|
||||
|
||||
var mgtIpParts = [parseInt(mgtIpStartParts[0]), parseInt(mgtIpStartParts[1]), parseInt(mgtIpStartParts[2]), parseInt(mgtIpStartParts[3])];
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
if (mgtIpParts[3] > 255) {
|
||||
mgtIpParts[3] = mgtIpParts[3] - 256;
|
||||
mgtIpParts[2]++;
|
||||
}
|
||||
if (mgtIpParts[2] > 255) {
|
||||
mgtIpParts[2] = mgtIpParts[2] - 256;
|
||||
mgtIpParts[1]++;
|
||||
}
|
||||
if (mgtIpParts[1] > 255) {
|
||||
mgtIpParts[1] = mgtIpParts[1] - 256;
|
||||
mgtIpParts[0]++;
|
||||
}
|
||||
if (mgtIpParts[0] > 255) {
|
||||
alert("Management IP range is not enough. Please update management IP start and end on Networking page.");
|
||||
serverData[key][i]['management_ip'] = "";
|
||||
return;
|
||||
}
|
||||
serverData[key][i]['management_ip'] = mgtIpParts[0] + "." + mgtIpParts[1] + "." + mgtIpParts[2] + "." + mgtIpParts[3];
|
||||
mgtIpParts[3] = mgtIpParts[3] + interval;
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
},
|
||||
|
||||
fillTntIpBySequence: function(interval) {
|
||||
var tntIpStart = this.options.odsState.networking.interfaces.tenant.ip_start;
|
||||
var tntIpEnd = this.options.odsState.networking.interfaces.tenant.ip_end;
|
||||
|
||||
var tntIpStartParts = tntIpStart.split(".");
|
||||
var tntIpEndParts = tntIpEnd.split(".");
|
||||
|
||||
var tntIpParts = [parseInt(tntIpStartParts[0]), parseInt(tntIpStartParts[1]), parseInt(tntIpStartParts[2]), parseInt(tntIpStartParts[3])];
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
if (tntIpParts[3] > 255) {
|
||||
tntIpParts[3] = tntIpParts[3] - 256;
|
||||
tntIpParts[2]++;
|
||||
}
|
||||
if (tntIpParts[2] > 255) {
|
||||
tntIpParts[2] = tntIpParts[2] - 256;
|
||||
tntIpParts[1]++;
|
||||
}
|
||||
if (tntIpParts[1] > 255) {
|
||||
tntIpParts[1] = tntIpParts[1] - 256;
|
||||
tntIpParts[0]++;
|
||||
}
|
||||
if (tntIpParts[0] > 255) {
|
||||
alert("Tenent IP range is not enough. Please update tenant IP start and end on Networking page.");
|
||||
serverData[key][i]['management_ip'] = "";
|
||||
return;
|
||||
}
|
||||
serverData[key][i]['tenant_ip'] = tntIpParts[0] + "." + tntIpParts[1] + "." + tntIpParts[2] + "." + tntIpParts[3];
|
||||
tntIpParts[3] = tntIpParts[3] + interval;
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
},
|
||||
|
||||
fillMgtIpByCustomStr: function(customStr) {
|
||||
var preDefinedPatterns = ["{swIpPart1}", "{swIpPart2}", "{swIpPart3}", "{swIpPart4}", "{port}"];
|
||||
var swIpPart1 = 0,
|
||||
swIpPart2 = 0,
|
||||
swIpPart3 = 0,
|
||||
swIpPart4 = 0,
|
||||
port = 0;
|
||||
var regExp = /\[(.*?)\]/;
|
||||
customStr = regExp.exec(customStr);
|
||||
if (!customStr) {
|
||||
alert("Invalid management IP customization");
|
||||
} else {
|
||||
customStr = customStr[1];
|
||||
while (customStr.indexOf(preDefinedPatterns[0]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[0], "swIpPart1");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[1]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[1], "swIpPart2");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[2]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[2], "swIpPart3");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[3]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[3], "swIpPart4");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[4]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[4], "port");
|
||||
}
|
||||
var mgtIpStart = this.options.odsState.networking.interfaces.management.ip_start;
|
||||
var mgtIpEnd = this.options.odsState.networking.interfaces.management.ip_end;
|
||||
var mgtIpStartParts = mgtIpStart.split(".");
|
||||
var mgtIpEndParts = mgtIpEnd.split(".");
|
||||
var mgtIpParts = [parseInt(mgtIpStartParts[0]), parseInt(mgtIpStartParts[1]), parseInt(mgtIpStartParts[2]), parseInt(mgtIpStartParts[3])];
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var swIpParts = key.split(".");
|
||||
swIpPart1 = parseInt(swIpParts[0]);
|
||||
swIpPart2 = parseInt(swIpParts[1]);
|
||||
swIpPart3 = parseInt(swIpParts[2]);
|
||||
swIpPart4 = parseInt(swIpParts[3]);
|
||||
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
port = parseInt(servers[i].port);
|
||||
try {
|
||||
mgtIpParts[3] = eval(customStr);
|
||||
serverData[key][i]['management_ip'] = mgtIpParts[0] + "." + mgtIpParts[1] + "." + mgtIpParts[2] + "." + mgtIpParts[3];
|
||||
} catch (err) {
|
||||
serverData[key][i]['management_ip'] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
}
|
||||
},
|
||||
|
||||
fillTntIpByCustomStr: function(customStr) {
|
||||
var preDefinedPatterns = ["{swIpPart1}", "{swIpPart2}", "{swIpPart3}", "{swIpPart4}", "{port}"];
|
||||
var swIpPart1 = 0,
|
||||
swIpPart2 = 0,
|
||||
swIpPart3 = 0,
|
||||
swIpPart4 = 0,
|
||||
port = 0;
|
||||
var regExp = /\[(.*?)\]/;
|
||||
customStr = regExp.exec(customStr);
|
||||
if (!customStr) {
|
||||
alert("Invalid tenant IP customization");
|
||||
} else {
|
||||
customStr = customStr[1];
|
||||
while (customStr.indexOf(preDefinedPatterns[0]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[0], "swIpPart1");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[1]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[1], "swIpPart2");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[2]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[2], "swIpPart3");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[3]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[3], "swIpPart4");
|
||||
}
|
||||
while (customStr.indexOf(preDefinedPatterns[4]) != -1) {
|
||||
customStr = customStr.replace(preDefinedPatterns[4], "port");
|
||||
}
|
||||
|
||||
var tntIpStart = this.options.odsState.networking.interfaces.tenant.ip_start;
|
||||
var tntIpEnd = this.options.odsState.networking.interfaces.tenant.ip_end;
|
||||
var tntIpStartParts = tntIpStart.split(".");
|
||||
var tntIpEndParts = tntIpEnd.split(".");
|
||||
var tntIpParts = [parseInt(tntIpStartParts[0]), parseInt(tntIpStartParts[1]), parseInt(tntIpStartParts[2]), parseInt(tntIpStartParts[3])];
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var swIpParts = key.split(".");
|
||||
swIpPart1 = parseInt(swIpParts[0]);
|
||||
swIpPart2 = parseInt(swIpParts[1]);
|
||||
swIpPart3 = parseInt(swIpParts[2]);
|
||||
swIpPart4 = parseInt(swIpParts[3]);
|
||||
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
port = parseInt(servers[i].port);
|
||||
try {
|
||||
tntIpParts[3] = eval(customStr);
|
||||
serverData[key][i]['tenant_ip'] = tntIpParts[0] + "." + tntIpParts[1] + "." + tntIpParts[2] + "." + tntIpParts[3];
|
||||
} catch (err) {
|
||||
serverData[key][i]['tenant_ip'] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverData;
|
||||
}
|
||||
},
|
||||
|
||||
filloutTabs: function() {
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
var count = 0;
|
||||
for (var key in serverData) {
|
||||
$(".switch-navs").append('<div data-switchIp="' + key + '" class="tab_nav">' + key + '</div><br>');
|
||||
count++;
|
||||
}
|
||||
var panel_minheight = $(".tab_nav").height() * count + 50;
|
||||
$(".tab_panel_active").css("min-height", panel_minheight);
|
||||
this.tabSelected($(".switch-navs .tab_nav:first-child"));
|
||||
},
|
||||
|
||||
tabSelected: function(el) {
|
||||
$('#tab1 table tbody tr').remove();
|
||||
$(".tab_nav_active").removeClass("tab_nav_active");
|
||||
el.addClass("tab_nav_active");
|
||||
|
||||
var switchIp = el.data('switchip');
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
var servers = serverData[switchIp];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
$('#hostconfig-table tbody').append(this.view('server_row', servers[i]));
|
||||
var roles = servers[i].roles;
|
||||
var rolesDropdown = $("#hostconfig-table tbody tr").eq(i).find(".roles");
|
||||
if(!roles) {
|
||||
roles = [];
|
||||
}
|
||||
this.fillRolesDropdowns(rolesDropdown, roles);
|
||||
}
|
||||
},
|
||||
|
||||
'#auto_fill click': function(el, ev) {
|
||||
$("#dialog-confirm").dialog("open");
|
||||
},
|
||||
|
||||
'updateServersConfig': function() {
|
||||
var currentSwitch = $(".tab_nav_active").data('switchip');
|
||||
for (var i = 0; i < this.options.odsState.servers_config[currentSwitch].length; i++) {
|
||||
this.options.odsState.servers_config[currentSwitch][i].hostname = $("#hostconfig-table tbody tr").eq(i).find(".hostname").val();
|
||||
this.options.odsState.servers_config[currentSwitch][i].management_ip = $("#hostconfig-table tbody tr").eq(i).find(".managenetIp").val();
|
||||
this.options.odsState.servers_config[currentSwitch][i].tenant_ip = $("#hostconfig-table tbody tr").eq(i).find(".tenantIp").val();
|
||||
var roles = $("#hostconfig-table tbody tr").eq(i).find(".roles").val();
|
||||
if(!roles) {
|
||||
roles = [];
|
||||
}
|
||||
this.options.odsState.servers_config[currentSwitch][i].roles = roles;
|
||||
}
|
||||
},
|
||||
|
||||
'div.tab_nav click': function(el, ev) {
|
||||
this.updateServersConfig();
|
||||
this.tabSelected(el);
|
||||
},
|
||||
|
||||
checkNonEmpty: function(el) {
|
||||
var value = el.val();
|
||||
if (!value) {
|
||||
el.addClass('error');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
'.hostconfig-finish click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var self = this;
|
||||
var hasError = false;
|
||||
|
||||
$('#hostconfig-table').find('.non-empty-value').each(function(index, value) {
|
||||
if (!self.checkNonEmpty($(value))) {
|
||||
hasError = true;
|
||||
}
|
||||
});
|
||||
|
||||
$('.partition-div').find('.non-empty-value').each(function(index, value) {
|
||||
if (!self.checkNonEmpty($(value))) {
|
||||
hasError = true;
|
||||
}
|
||||
});
|
||||
|
||||
if($("#spare").hasClass("error") ) {
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (hasError) {
|
||||
return;
|
||||
}
|
||||
|
||||
$("#continuing").css("opacity", 1);
|
||||
|
||||
this.updateServersConfig();
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
//var server_id = servers[i]['server_id'];
|
||||
var clusterhost_id = servers[i]['clusterhost_id'];
|
||||
var hostname = servers[i]['hostname'];
|
||||
//var server_ip = servers[i]['server_ip'];
|
||||
var management_ip = servers[i]['management_ip'];
|
||||
var tenant_ip = servers[i]['tenant_ip'];
|
||||
var roles = servers[i]['roles'];
|
||||
|
||||
var clusterhostConfigData = {
|
||||
"hostname": hostname,
|
||||
"networking": {
|
||||
"interfaces": {
|
||||
"management": {
|
||||
"ip": management_ip
|
||||
},
|
||||
"tenant": {
|
||||
"ip": tenant_ip
|
||||
}
|
||||
}
|
||||
},
|
||||
"roles": roles
|
||||
};
|
||||
|
||||
Ods.ClusterHost.update(clusterhost_id, clusterhostConfigData, this.proxy('onHostconfigData'), this.proxy('onHostconfigDataErr'));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// cluster host update success callback
|
||||
/************************************/
|
||||
onHostconfigData: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onHostconfigData data *** ", data);
|
||||
steal.dev.log(" *** onHostconfigData textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onHostconfigData xhr *** ", xhr);
|
||||
|
||||
$("#hostconfig_continue_err").hide();
|
||||
|
||||
if (xhr.status == 200) {
|
||||
this.server_count--;
|
||||
}
|
||||
|
||||
if (this.server_count == 0) {
|
||||
var partitionData = {
|
||||
"partition": "/home " + $("#home").val() + "%;/tmp " + $("#tmp").val() + "%;/var " + $("#var").val() + "%;"
|
||||
};
|
||||
this.options.odsState.partition = {
|
||||
"tmp": $("#tmp").val(),
|
||||
"slashvar": $("#var").val(),
|
||||
"home": $("#home").val()
|
||||
};
|
||||
Ods.Cluster.update(this.options.odsState.cluster_id, partitionData, "partition", this.proxy('onLogicPartitionAdded'), this.proxy('onLogicPartitionAddedErr'));
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// cluster host update error callback
|
||||
/************************************/
|
||||
onHostconfigDataErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onHostconfigDataErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onHostconfigDataErr status *** ", status);
|
||||
steal.dev.log(" *** onHostconfigDataErr statusText *** ", xhr);
|
||||
|
||||
$("#hostconfig_continue_err").html("<span class='errhint'> Error code: " + xhr.status + " </span>");
|
||||
$("#hostconfig_continue_err").show();
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// cluster update (partition) success callback
|
||||
/************************************/
|
||||
onLogicPartitionAdded: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onHostconfigData data *** ", data);
|
||||
steal.dev.log(" *** onHostconfigData textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onHostconfigData xhr *** ", xhr);
|
||||
|
||||
$("#hostconfig_continue_err").hide();
|
||||
if (xhr.status == 200) { // OK
|
||||
$("#continuing").css("opacity", 0);
|
||||
this.options.nav.gotoStep("6");
|
||||
}
|
||||
},
|
||||
|
||||
onLogicPartitionAddedErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onLogicPartitionAddedErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onLogicPartitionAddedErr status *** ", status);
|
||||
steal.dev.log(" *** onLogicPartitionAddedErr statusText *** ", xhr);
|
||||
|
||||
$("#hostconfig_continue_err").html("<span class='errhint'> Error code: " + xhr.status + " </span>");
|
||||
$("#hostconfig_continue_err").show();
|
||||
|
||||
},
|
||||
|
||||
check_partition: function() {
|
||||
var tmp_percent = parseInt($("#tmp").val());
|
||||
var var_percent = parseInt($("#var").val());
|
||||
var home_percent = parseInt($("#home").val());
|
||||
var total = tmp_percent + var_percent + home_percent;
|
||||
var spare_percent = 100 - total;
|
||||
$("#spare").val(spare_percent);
|
||||
if (spare_percent < 30) {
|
||||
$("#spare").addClass("error");
|
||||
$(".errhint").show();
|
||||
} else {
|
||||
$("#spare").removeClass("error");
|
||||
$(".errhint").hide();
|
||||
}
|
||||
},
|
||||
|
||||
'.integer keyup': function(el, ev) {
|
||||
if($(el).val()) {
|
||||
$(el).removeClass("error");
|
||||
} else {
|
||||
$(el).addClass("error");
|
||||
}
|
||||
this.check_partition();
|
||||
},
|
||||
|
||||
'.hostconfig-back click': function(el, ev) {
|
||||
this.options.nav.gobackStep("4");
|
||||
return false;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.element.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.element.hide();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,118 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>host_config Widget Unit Test</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div id="host_config-test"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='../../../steal/steal.js'></script>
|
||||
<script type='text/javascript'>
|
||||
steal('jquery/dom/route', 'ods/fixtures','ods/ui/host_config').then(function($) {
|
||||
|
||||
var config = [];
|
||||
|
||||
var server1 = {
|
||||
clusterhost_id: 100,
|
||||
hostname: "",
|
||||
id: 10,
|
||||
mac: "28:6e:31:47:c8:6c",
|
||||
port: "1",
|
||||
management_ip: "",
|
||||
tenant_ip: "",
|
||||
switch_ip: "172.29.8.40",
|
||||
vlan: "1",
|
||||
roles: []
|
||||
};
|
||||
|
||||
var server2 = {
|
||||
clusterhost_id: 100,
|
||||
hostname: "",
|
||||
id: 10,
|
||||
mac: "28:6e:31:34:fd:28",
|
||||
port: "2",
|
||||
management_ip: "",
|
||||
tenant_ip: "",
|
||||
switch_ip: "172.29.8.40",
|
||||
vlan: "2",
|
||||
roles: []
|
||||
};
|
||||
|
||||
if (config["172.29.8.40"] == undefined) {
|
||||
config["172.29.8.40"] = [server1];
|
||||
config["172.29.8.40"].push(server2);
|
||||
} else {
|
||||
config["172.29.8.40"].push(server1);
|
||||
config["172.29.8.40"].push(server2);
|
||||
}
|
||||
|
||||
var odsState = {
|
||||
networking: null,
|
||||
servers: [],
|
||||
servers_config: null,
|
||||
cluster_id: null,
|
||||
security: null,
|
||||
partition: null,
|
||||
feature: null,
|
||||
machines: [],
|
||||
switches: [],
|
||||
snmp: 1,
|
||||
adapter_id: 1
|
||||
};
|
||||
|
||||
var state = new $.Observe(odsState);
|
||||
|
||||
state.servers_config = config;
|
||||
state.cluster_id = 1;
|
||||
state.networking = {
|
||||
"interfaces": {
|
||||
"management": {
|
||||
"ip_start": "255.255.250.1",
|
||||
"ip_end": "10.10.10.255",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "10.10.10.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
},
|
||||
"tenant": {
|
||||
"ip_start": "192.168.100.100",
|
||||
"ip_end": "192.168.100.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "192.168.100.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
},
|
||||
"public": {
|
||||
"ip_start": "172.29.3.100",
|
||||
"ip_end": "172.29.3.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "172.29.3.1",
|
||||
"nic": "eth1",
|
||||
"promisc": 1
|
||||
},
|
||||
"storage": {
|
||||
"ip_start": "172.16.128.10",
|
||||
"ip_end": "172.16.128.200",
|
||||
"netmask": "255.255.255.0",
|
||||
"gateway": "172.16.128.1",
|
||||
"nic": "eth0",
|
||||
"promisc": 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$('#host_config-test').ods_ui_host_config({ "odsState" : state });
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<h2>Configure host names of the servers you just selected</h2>
|
||||
<p>
|
||||
Enter host names and IP addresses for each of the servers attached to the network switches and ports listed.
|
||||
</p>
|
||||
<div class="rounded" style="padding-top: 10; padding-bottom: 5px">
|
||||
<div class="float_left">Switch IP</div>
|
||||
<div class="float_right">
|
||||
<a href="javascript: void(0)" id="auto_fill" style="padding-right:20px">Fill values</a>
|
||||
<a id="clear-hostconfig" href="javascript: void(0)">Clear</a>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
<div id="dialog-confirm" title="Fill values">
|
||||
|
||||
<div>
|
||||
<input type="radio" name="fillType" value="autofill" checked> <span class="radioText">Auto fill</span>
|
||||
<div id="autofill-panel">
|
||||
<div class="float_left">
|
||||
<p>Management IP</p>
|
||||
<p>Tenant IP</p>
|
||||
<p>Host name</p>
|
||||
</div>
|
||||
<div class="float_left" style="padding-left:10px">
|
||||
<p>
|
||||
<select id="management-auto">
|
||||
<option value="1">Increase by 1</option>
|
||||
<option value="2">Increase by 2</option>
|
||||
<option value="3">Increase by 3</option>
|
||||
<option value="4">Increase by 4</option>
|
||||
<option value="5">Increase by 5</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<select id="tenant-auto">
|
||||
<option value="1">Increase by 1</option>
|
||||
<option value="2">Increase by 2</option>
|
||||
<option value="3">Increase by 3</option>
|
||||
<option value="4">Increase by 4</option>
|
||||
<option value="5">Increase by 5</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<select id="hostname-auto">
|
||||
<option value="Host">Host</option>
|
||||
<option value="Switch IP">Switch IP</option>
|
||||
<option value="Switch alias">Switch alias</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<input type="radio" name="fillType" value="customize"> <span class="radioText">Customize</span>
|
||||
<div id="customize-panel" style="display:none">
|
||||
<div class="float_left">
|
||||
<p>Management IP</p>
|
||||
<p>Tenant IP</p>
|
||||
<p>Host name</p>
|
||||
</div>
|
||||
<div class="float_left" style="padding-left:10px">
|
||||
<p>
|
||||
<input id="management-customize" class="rounded" placeholder="eg: [{port}*2]" title="Available patterns: {swIpPart1}, {swIpPart2}, {swIpPart3}, {swIpPart4}, {port}">
|
||||
</p>
|
||||
<p>
|
||||
<input id="tenant-customize" class="rounded" placeholder="eg: [{port}*2+1]" title="Available patterns: {swIpPart1}, {swIpPart2}, {swIpPart3}, {swIpPart4}, {port}">
|
||||
</p>
|
||||
<p>
|
||||
<input id="hostname-customize" class="rounded" placeholder="eg: sv-[{mgtIpPart4}*2].3" title="Available patterns: {swIpPart1}, {swIpPart2}, {swIpPart3}, {swIpPart4}, {port}, {mgtIpPart1}, {mgtIpPart2}, {mgtIpPart3}, {mgtIpPart4}, {tntIpPart1}, {tntIpPart2}, {tntIpPart3}, {tntIpPart4}">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<span class="pattern-tip ui-icon ui-icon-info" style="float: right; margin: 6px 19px 4px 7px;" data-geo="info-ico">-->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="float_left switch-navs" style="padding-top: 20px;">
|
||||
|
||||
</div>
|
||||
<div class="rounded float_left server-panels">
|
||||
<div id="tab1" class="tab_panel_active">
|
||||
<table id="hostconfig-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Port</th>
|
||||
<th>Host name</th>
|
||||
<th>Management IP</th>
|
||||
<th>Tenant IP</th>
|
||||
<th>Roles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="rounded partition-div" style="padding-top:10px;">
|
||||
<p>
|
||||
Logical Volume Partition (Total partition percentage should not exceed 100%)
|
||||
</p>
|
||||
<div class="float_left" style="width: 18%">
|
||||
tmp: <input id="tmp" class="rounded integer non-empty-value" onkeypress="return isNumber(event)" value="10" style="width: 80px">%
|
||||
</div>
|
||||
<div class="float_left" style="width: 18%">
|
||||
var: <input id="var" class="rounded integer non-empty-value" value="30" style="width: 80px">%
|
||||
</div>
|
||||
<div class="float_left" style="width: 18%">
|
||||
home: <input id="home" class="rounded integer non-empty-value" value="20" style="width: 80px">%
|
||||
</div>
|
||||
<div class="float_left" style="width: 18%">
|
||||
spare: <input id="spare" class="rounded" value="40" style="width: 80px; background-color: lightGrey" disabled="true">%
|
||||
</div>
|
||||
<div class="float_left" style="width: 28%">
|
||||
<div class="errhint" style="display: none">
|
||||
The spare value should be greater than 30%.
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
<div class="continue"><center>
|
||||
<a href="#" class="go-back hostconfig-back" >Go back</a>
|
||||
<a href="/web/install_review/" class="btn_continue hostconfig-finish">Continue</a>
|
||||
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img><br>
|
||||
<div id="hostconfig_continue_err" style="display:none;padding-top:10px"></div>
|
||||
</center></div>
|
|
@ -1,17 +0,0 @@
|
|||
<div>
|
||||
<strong>Switch IP: </strong>
|
||||
Use the IP address and port for the switch to which the host is attached
|
||||
</div>
|
||||
<div>
|
||||
<strong>Switch alias: </strong>
|
||||
Use the switch alias for the switch and port to which the host is attached
|
||||
</div>
|
||||
<div>
|
||||
<strong>Server: </strong>
|
||||
Auto-increment integer value based on the last generated value
|
||||
</div>
|
||||
<div>
|
||||
<strong>Custom: </strong>
|
||||
Pre-defined patterns include {switchIp}, {port}, {d.1}, {d.2}, {d.3}, {d.4},
|
||||
{mgtIpPart1}, {mgtIpPart2}, {mgtIpPart3}, {mgtIpPart4},
|
||||
{tntIpPart1}, {tntIpPart2}, {tntIpPart3}, {tntIpPart4}</div>
|
|
@ -1,18 +0,0 @@
|
|||
<tr data-hostid="<%= clusterhost_id %>">
|
||||
<td>
|
||||
<%= port %>
|
||||
</td>
|
||||
<td>
|
||||
<input class="rounded hostname non-empty-value" name="hostname" value="<%= hostname %>">
|
||||
</td>
|
||||
<td>
|
||||
<input class="rounded managenetIp non-empty-value" name="managenetIp" value="<%= management_ip %>">
|
||||
</td>
|
||||
<td>
|
||||
<input class="rounded tenantIp non-empty-value" name="tenantIp" value="<%= tenant_ip %>">
|
||||
</td>
|
||||
<td>
|
||||
<select multiple="multiple" class="roles" name="roles">
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
|
@ -1,46 +0,0 @@
|
|||
.ui-progressbar {
|
||||
position: relative;
|
||||
}
|
||||
.progress-label {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
left: 5px;
|
||||
top: -1px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 0 #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.node {
|
||||
cursor: pointer;
|
||||
}
|
||||
.node text {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
.link {
|
||||
fill: none;
|
||||
stroke: #999;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
#progress-graph {
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard-link {
|
||||
background-image: linear-gradient(to bottom, #8D92FB 0%, #3236A2 100%);
|
||||
border: 1px solid #A0A0A0;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
.dashboard-link:hover {
|
||||
background-image: linear-gradient(to bottom, #3236A2 0%, #8D92FB 100%);
|
||||
}
|
||||
.dashboard-link.disabled {
|
||||
background-image: none;
|
||||
background-color: #8D92FB;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
|
@ -1,68 +0,0 @@
|
|||
#tb_server_review {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 5px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#tb_server_select {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 600px;
|
||||
margin: 30px auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.display {
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
table.display thead th {
|
||||
padding: 3px 18px 3px 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dataTables_filter {
|
||||
width: 50%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dataTables_scrollHeadInner {
|
||||
width: 100% !important;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.dataTables_scrollHead {
|
||||
border: 1px solid grey !important;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
-moz-border-radius: 6px 6px 0px 0px;
|
||||
-webkit-border-radius: 6px 6px 0px 0px;
|
||||
}
|
||||
|
||||
.dataTables_scrollBody {
|
||||
border-left: 1px solid grey;
|
||||
border-right: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
-moz-border-radius: 0px 0px 6px 6px;
|
||||
-webkit-border-radius: 0px 0px 6px 6px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: #C3C7DD;
|
||||
|
||||
}
|
||||
|
||||
table.cluster {
|
||||
text-align: center;
|
||||
}
|
|
@ -1,797 +0,0 @@
|
|||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view'
|
||||
).then(
|
||||
'./views/init.ejs',
|
||||
'./install_review.css',
|
||||
'./views/install.ejs',
|
||||
'./views/progress_row.ejs',
|
||||
'ods/models/cluster.js',
|
||||
'lib/jquery-ui-1.10.3.custom.css',
|
||||
'lib/jquery.dataTables.js'
|
||||
).then(
|
||||
'lib/jquery-ui-1.10.3.custom.js',
|
||||
'./install.css'
|
||||
).then(
|
||||
function($) {
|
||||
$.Controller('Ods.Ui.install_review', {}, {
|
||||
init: function() {
|
||||
this.totalProgress = 0;
|
||||
this.serverCount = 0;
|
||||
if(this.options.installStep == "progress") {
|
||||
this.element.html(this.view('pending_clusters'));
|
||||
Ods.Cluster.get("installing",
|
||||
this.proxy('onGetInstallingCluster'),
|
||||
this.proxy('onGetInstallingClusterErr'));
|
||||
Ods.Cluster.get("successful",
|
||||
this.proxy('onGetInstallingCluster'),
|
||||
this.proxy('onGetInstallingClusterErr'));
|
||||
Ods.Cluster.get("failed",
|
||||
this.proxy('onGetInstallingCluster'),
|
||||
this.proxy('onGetInstallingClusterErr'));
|
||||
} else {
|
||||
this.element.html(this.view('init'));
|
||||
this.dataTableIpAddrSort();
|
||||
this.initServerTable();
|
||||
|
||||
this.onSecurityData(this.options.odsState.security);
|
||||
this.onNetworkingData(this.options.odsState.networking);
|
||||
this.onLogicPartitionData(this.options.odsState.partition);
|
||||
}
|
||||
},
|
||||
|
||||
'.review-back click': function(el, ev) {
|
||||
this.options.nav.gobackStep("5");
|
||||
return false;
|
||||
},
|
||||
|
||||
onLogicPartitionData: function(data) {
|
||||
$("#tmp").html(data.tmp + "%");
|
||||
$("#var").html(data.slashvar + "%");
|
||||
$("#home").html(data.home + "%");
|
||||
},
|
||||
|
||||
onSecurityData: function(data) {
|
||||
var server_uname = data.server_credentials.username;
|
||||
var service_uname = data.service_credentials.username;
|
||||
var console_uname = data.console_credentials.username;
|
||||
var server_pwd = data.server_credentials.password;
|
||||
var service_pwd = data.service_credentials.password;
|
||||
var console_pwd = data.console_credentials.password;
|
||||
var server_pwd_len = server_pwd.length;
|
||||
var service_pwd_len = service_pwd.length;
|
||||
var console_pwd_len = console_pwd.length;
|
||||
|
||||
$("#server_uname").html(server_uname);
|
||||
$("#service_uname").html(service_uname);
|
||||
$("#console_uname").html(console_uname);
|
||||
|
||||
var temp = "";
|
||||
for (i = 0; i < server_pwd_len; i++) {
|
||||
temp += "*";
|
||||
}
|
||||
$("#server_pwd").html(temp);
|
||||
|
||||
temp = "";
|
||||
for (i = 0; i < service_pwd_len; i++) {
|
||||
temp += "*";
|
||||
}
|
||||
$("#service_pwd").html(temp);
|
||||
|
||||
temp = "";
|
||||
for (i = 0; i < console_pwd_len; i++) {
|
||||
temp += "*";
|
||||
}
|
||||
$("#console_pwd").html(temp);
|
||||
},
|
||||
|
||||
onNetworkingData: function(data) {
|
||||
$("#mgt_start").html(data.interfaces.management.ip_start);
|
||||
$("#mgt_end").html(data.interfaces.management.ip_end);
|
||||
$("#vnw_start").html(data.interfaces.tenant.ip_start);
|
||||
$("#vnw_end").html(data.interfaces.tenant.ip_end);
|
||||
$("#float_start").html(data.interfaces.public.ip_start);
|
||||
$("#float_end").html(data.interfaces.public.ip_end);
|
||||
$("#storage_start").html(data.interfaces.storage.ip_start);
|
||||
$("#storage_end").html(data.interfaces.storage.ip_end);
|
||||
},
|
||||
|
||||
dataTableIpAddrSort: function() {
|
||||
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
|
||||
"ip-address-pre": function(a) {
|
||||
var m = a.split("."),
|
||||
x = "";
|
||||
|
||||
for (var i = 0; i < m.length; i++) {
|
||||
var item = m[i];
|
||||
if (item.length == 1) {
|
||||
x += "00" + item;
|
||||
} else if (item.length == 2) {
|
||||
x += "0" + item;
|
||||
} else {
|
||||
x += item;
|
||||
}
|
||||
}
|
||||
|
||||
return x;
|
||||
},
|
||||
|
||||
"ip-address-asc": function(a, b) {
|
||||
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
|
||||
},
|
||||
|
||||
"ip-address-desc": function(a, b) {
|
||||
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
initServerTable: function() {
|
||||
this.dataTable = $('#tb_server_review').dataTable({
|
||||
"sScrollY": "450px",
|
||||
"bPaginate": false,
|
||||
"bScrollCollapse": true,
|
||||
"aoColumns": [{
|
||||
"mData": "hostname"
|
||||
}, {
|
||||
"mData": "mac"
|
||||
}, {
|
||||
"mData": "management_ip",
|
||||
"sType": "ip-address"
|
||||
}, {
|
||||
"mData": "tenant_ip",
|
||||
"sType": "ip-address"
|
||||
}, {
|
||||
"mData": "switch_ip",
|
||||
"sType": "ip-address"
|
||||
}, {
|
||||
"mData": "port"
|
||||
}, {
|
||||
"mData": "roles",
|
||||
"mRender": function(data, type, full) {
|
||||
if (data.length == 0) {
|
||||
return "auto";
|
||||
} else if (data.toString().length <=10) {
|
||||
return data;
|
||||
} else {
|
||||
return data.toString().substring(0, 10) + " ...";
|
||||
}
|
||||
}
|
||||
}],
|
||||
"aoColumnDefs": [{
|
||||
bSortable: false,
|
||||
aTargets: [1, 6]
|
||||
}],
|
||||
"aaSorting": [
|
||||
[4, "asc"],
|
||||
[5, "asc"]
|
||||
]
|
||||
});
|
||||
$('.dataTables_info').remove();
|
||||
$('.dataTables_filter input').addClass('rounded');
|
||||
|
||||
this.dataTable.fnClearTable();
|
||||
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
this.dataTable.fnAddData(servers[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
'#begin-deploy click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
$("#continuing").css("opacity", 1);
|
||||
|
||||
var cluster_id = this.options.odsState.cluster_id;
|
||||
Ods.Cluster.action(cluster_id, {"deploy": []},
|
||||
this.proxy('onTriggerDeploy'),
|
||||
this.proxy('onTriggerDeployErr'));
|
||||
},
|
||||
|
||||
onTriggerDeploy: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onTriggerDeploy data *** ", data);
|
||||
steal.dev.log(" *** onTriggerDeploy textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onTriggerDeploy xhr *** ", xhr);
|
||||
|
||||
if (xhr.status == 202) { // accepted
|
||||
$("#continuing").css("opacity", 0);
|
||||
this.element.html(this.view('install'));
|
||||
$("#install_tabs").tabs();
|
||||
|
||||
this.initProgressbars();
|
||||
}
|
||||
},
|
||||
|
||||
onTriggerDeployErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onTriggerDeployErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onTriggerDeployErr status *** ", status);
|
||||
steal.dev.log(" *** onTriggerDeployErr statusText *** ", statusText);
|
||||
},
|
||||
|
||||
'#retrieve-progress click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
var selectedCluster = $("input[name='clusterRadio']:checked");
|
||||
if (!selectedCluster.val()) {
|
||||
alert("Please select a cluster");
|
||||
} else {
|
||||
this.options.odsState.cluster_id = selectedCluster.data('hostid');
|
||||
this.element.html(this.view('install'));
|
||||
$("#install_tabs").tabs();
|
||||
|
||||
//get clusterhosts by clustername
|
||||
Ods.ClusterHost.get(selectedCluster.val(),
|
||||
this.proxy('onGetClusterHosts'),
|
||||
this.proxy('onGetClusterHostsErr'));
|
||||
}
|
||||
},
|
||||
|
||||
onGetInstallingCluster: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onGetInstallingCluster data *** ", data);
|
||||
steal.dev.log(" *** onGetInstallingCluster textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onGetInstallingCluster xhr *** ", xhr);
|
||||
if (xhr.status == 200) {
|
||||
for (index in data.clusters) {
|
||||
$("table.cluster tbody").append(this.view('cluster_row', data.clusters[index]));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onGetInstallingClusterErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onGetInstallingClusterErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onGetInstallingClusterErr status *** ", status);
|
||||
steal.dev.log(" *** onGetInstallingClusterErr statusText *** ", statusText);
|
||||
},
|
||||
|
||||
onGetClusterHosts: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onGetClusterHosts data *** ", data);
|
||||
steal.dev.log(" *** onGetClusterHosts textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onGetClusterHosts xhr *** ", xhr);
|
||||
if (xhr.status == 200) {
|
||||
var serverConfig = [];
|
||||
for (index in data.cluster_hosts) {
|
||||
var server = {
|
||||
"hostname": data.cluster_hosts[index].hostname,
|
||||
"clusterhost_id": data.cluster_hosts[index].id,
|
||||
"switch_ip": data.cluster_hosts[index].switch_ip
|
||||
};
|
||||
var switchIp = server.switch_ip;
|
||||
if (serverConfig[switchIp] == undefined) {
|
||||
serverConfig[switchIp] = [server];
|
||||
} else {
|
||||
serverConfig[switchIp].push(server);
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = serverConfig;
|
||||
|
||||
this.initProgressbars();
|
||||
}
|
||||
},
|
||||
|
||||
onGetClusterHostsErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onGetClusterHostsErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onGetClusterHostsErr status *** ", status);
|
||||
steal.dev.log(" *** onGetClusterHostsErr statusText *** ", statusText);
|
||||
},
|
||||
|
||||
initProgressbars: function() {
|
||||
this.initTotalProgressbar();
|
||||
|
||||
this.serverTreeJson = {
|
||||
"name": "Compass Server",
|
||||
"type": "compass",
|
||||
"children": []
|
||||
};
|
||||
|
||||
for (var key in this.options.odsState.servers_config) {
|
||||
var switchjson = {
|
||||
"name": key,
|
||||
"type": "switch",
|
||||
"children": []
|
||||
};
|
||||
var servers = this.options.odsState.servers_config[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
this.serverCount ++;
|
||||
var serverjson = {
|
||||
"name": servers[i].hostname,
|
||||
"hostid": servers[i].clusterhost_id,
|
||||
"type": "server",
|
||||
"progress": 0,
|
||||
"message": "Waiting..."
|
||||
};
|
||||
switchjson.children.push(serverjson);
|
||||
|
||||
// initiate list based progress bars
|
||||
this.initListProgressbar(servers[i].clusterhost_id, servers[i].hostname);
|
||||
}
|
||||
this.serverTreeJson.children.push(switchjson);
|
||||
}
|
||||
// initiate graph based progress bars
|
||||
this.initGraphProgressbars();
|
||||
|
||||
setTimeout(this.proxy('getProgressData'), 1000);
|
||||
},
|
||||
|
||||
initTotalProgressbar: function() {
|
||||
this.totalProgressbar = $('.totalProgressbar');
|
||||
this.totalProgressbar.progressbar({
|
||||
value: false
|
||||
});
|
||||
this.totalProgressLabel = this.totalProgressbar.children(".progress-label");
|
||||
this.totalProgressbarValue = this.totalProgressbar.find(".ui-progressbar-value");
|
||||
},
|
||||
|
||||
initListProgressbar: function(hostid, hostname) {
|
||||
var initPData = {
|
||||
"hostname": hostname,
|
||||
"hostid": hostid,
|
||||
"message": "Waiting..."
|
||||
}
|
||||
$("#tabs-2 table tbody").append(this.view('progress_row', initPData));
|
||||
|
||||
var pbar = $('div[data-hostid="' + hostid + '"]');
|
||||
pbar.progressbar({
|
||||
value: false
|
||||
});
|
||||
},
|
||||
|
||||
'.refresh-progressbar click': function(el, ev) {
|
||||
this.getProgressData();
|
||||
},
|
||||
|
||||
getHostList: function() {
|
||||
this.pendingHostList = [];
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
this.pendingHostList.push(servers[i].clusterhost_id);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getProgressData: function() {
|
||||
this.getHostList();
|
||||
|
||||
var hosts = this.pendingHostList;
|
||||
this.pendingHostCount = hosts.length;
|
||||
var count = hosts.length;
|
||||
this.pendingHostList = [];
|
||||
|
||||
for (var i = 0; i < count; i++) {
|
||||
Ods.ClusterHost.progress(hosts[i], this.proxy('updateProgressBar'), this.proxy('updateProgressBarErr'));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/********************************************/
|
||||
// get clusterhost progress success callback
|
||||
/********************************************/
|
||||
updateProgressBar: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onUpdateProgressBar data *** ", data);
|
||||
steal.dev.log(" *** onUpdateProgressBar textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onUpdateProgressBar xhr *** ", xhr);
|
||||
|
||||
this.pendingHostCount--;
|
||||
|
||||
var progressData = data.progress;
|
||||
|
||||
|
||||
if (progressData.percentage < 1) {
|
||||
this.pendingHostList.push(progressData.id);
|
||||
}
|
||||
|
||||
// update graph-based progress bar
|
||||
this.updateGraphBar(progressData);
|
||||
|
||||
// update list-based progress bar
|
||||
this.updateListBar(progressData);
|
||||
|
||||
// update total progress bar
|
||||
this.updateTotalBar(progressData);
|
||||
|
||||
},
|
||||
|
||||
/********************************************/
|
||||
// get clusterhost progress error callback
|
||||
/********************************************/
|
||||
updateProgressBarErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** updateProgressBarErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** updateProgressBarErr status *** ", status);
|
||||
steal.dev.log(" *** updateProgressBarErr statusText *** ", xhr);
|
||||
//TODO
|
||||
},
|
||||
|
||||
updateGraphBar: function(progressData) {
|
||||
|
||||
// update progress data in serverTreeJson
|
||||
for (var sw in this.serverTreeJson.children) {
|
||||
var servers = this.serverTreeJson.children[sw]._children;
|
||||
if (servers == null) {
|
||||
servers = this.serverTreeJson.children[sw].children;
|
||||
}
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
if (servers[i].hostid == progressData.id) {
|
||||
servers[i].progress = progressData.percentage;
|
||||
servers[i].message = progressData.message;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update graph-based progress bar
|
||||
if ($('rect[data-hostid="' + progressData.id + '"]')) { // check if the node is expanded
|
||||
if (progressData.percentage > 1.0) {
|
||||
progressData.percentage = 1.0;
|
||||
}
|
||||
$('rect[data-hostid="' + progressData.id + '"]').attr("width", imgWidth * progressData.percentage);
|
||||
|
||||
$('text[data-hostid="' + progressData.id + '"]').text(progressData.message);
|
||||
}
|
||||
},
|
||||
|
||||
updateListBar: function(progressData) {
|
||||
var pbar = $('div[data-hostid="' + progressData.id + '"]');
|
||||
var progressLabel = pbar.children(".progress-label");
|
||||
var progressbarValue = pbar.find(".ui-progressbar-value");
|
||||
|
||||
|
||||
// update list-based progress bar
|
||||
if (pbar.is(":visible")) {
|
||||
progressbarValue.css({
|
||||
"width": progressData.percentage * pbar.width()
|
||||
});
|
||||
|
||||
progressLabel.text(progressData.message);
|
||||
progressbarValue.css({
|
||||
"opacity": "0.8"
|
||||
});
|
||||
if (progressData.severity == "WARNING") {
|
||||
progressbarValue.css({
|
||||
"background": "#FAA732"
|
||||
});
|
||||
} else if (progressData.severity == "ERROR") {
|
||||
progressbarValue.css({
|
||||
"background": "#BD362F"
|
||||
});
|
||||
} else {
|
||||
progressbarValue.css({
|
||||
"background": "#49AFCD"
|
||||
});
|
||||
}
|
||||
if (progressData.percentage >= 1.0) {
|
||||
progressLabel.text("Completed!");
|
||||
pbar.progressbar("value", 100);
|
||||
progressbarValue.css({
|
||||
"background": "#5BB75B"
|
||||
});
|
||||
} else {
|
||||
pbar.progressbar("value", progressData.percentage * 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateTotalBar: function(data) {
|
||||
if (this.pendingHostCount == 0) {
|
||||
Ods.Cluster.progress(this.options.odsState.cluster_id, this.proxy('onTotalProgressData'), this.proxy('onTotalProgressDataErr'));
|
||||
}
|
||||
},
|
||||
|
||||
/********************************************/
|
||||
// get cluster total progress success callback
|
||||
/********************************************/
|
||||
onTotalProgressData: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onTotalProgressData data *** ", data);
|
||||
steal.dev.log(" *** onTotalProgressData textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onTotalProgressData xhr *** ", xhr);
|
||||
|
||||
var total = data.progress.percentage;
|
||||
this.totalProgressbarValue.css({
|
||||
"background": "#0000ff",
|
||||
"opacity": 0.5
|
||||
});
|
||||
this.totalProgressLabel.text(Math.round(total * 100) + "%");
|
||||
this.totalProgressbarValue.css({
|
||||
"width": total * this.totalProgressbar.width()
|
||||
});
|
||||
|
||||
if (total < 1 || this.pendingHostList.length > 0) {
|
||||
setTimeout(this.proxy('getProgressData'), 3000);
|
||||
} else {
|
||||
this.totalProgressbar.progressbar("value", 100);
|
||||
Ods.DashboardLink.findOne(this.options.odsState.cluster_id, this.proxy('onFindDashboardLink'));
|
||||
}
|
||||
},
|
||||
|
||||
/********************************************/
|
||||
// get cluster total progress error callback
|
||||
/********************************************/
|
||||
onTotalProgressDataErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onTotalProgressDataErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onTotalProgressDataErr status *** ", status);
|
||||
steal.dev.log(" *** onTotalProgressDataErr statusText *** ", xhr);
|
||||
//TODO
|
||||
},
|
||||
|
||||
onFindDashboardLink: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onFindDashboardLink data *** ", data);
|
||||
steal.dev.log(" *** onFindDashboardLink textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onFindDashboardLink xhr *** ", xhr);
|
||||
|
||||
if (data.status == "OK") {
|
||||
$(".dashboard-link").attr("href", data.dashboardlinks["os-controller"]);
|
||||
$(".dashboard-link").attr("target", "_blank");
|
||||
$(".dashboard-link").removeClass("disabled");
|
||||
}
|
||||
},
|
||||
|
||||
'.ui-tabs-nav click': function(el, ev) {
|
||||
if ($("#tabs-2").is(":visible")) {
|
||||
var children = this.serverTreeJson.children;
|
||||
for (var sw in children) {
|
||||
var servers = children[sw]._children;
|
||||
if (servers == null) {
|
||||
servers = children[sw].children;
|
||||
}
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
var data = {
|
||||
"hostname": servers[i].name,
|
||||
"id": servers[i].hostid,
|
||||
"percentage": servers[i].progress,
|
||||
"message": servers[i].message
|
||||
};
|
||||
this.updateListBar(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initGraphProgressbars: function() {
|
||||
var margin = {
|
||||
top: 0,
|
||||
right: 120,
|
||||
bottom: 0,
|
||||
left: 130
|
||||
};
|
||||
|
||||
var serversHeight = this.serverCount * 68;
|
||||
if (serversHeight < 500) {
|
||||
serversHeight = 500;
|
||||
}
|
||||
|
||||
var width = 1000 - margin.right - margin.left,
|
||||
height = serversHeight - margin.top - margin.bottom;
|
||||
|
||||
imgWidth = 163;
|
||||
imgHeight = 32;
|
||||
|
||||
var i = 0,
|
||||
duration = 750,
|
||||
root;
|
||||
|
||||
var tree = d3.layout.tree()
|
||||
.size([height, width]);
|
||||
|
||||
var diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) {
|
||||
return [d.y, d.x];
|
||||
});
|
||||
|
||||
var svg = d3.select("#progress-graph").append("svg")
|
||||
.attr("width", width + margin.right + margin.left)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
root = this.serverTreeJson;
|
||||
root.x0 = height / 2;
|
||||
root.y0 = 0;
|
||||
|
||||
update(root);
|
||||
|
||||
d3.select(self.frameElement).style("height", "600px");
|
||||
|
||||
function update(source) {
|
||||
|
||||
// Compute the new tree layout.
|
||||
var nodes = tree.nodes(root).reverse(),
|
||||
links = tree.links(nodes);
|
||||
|
||||
// Normalize for fixed-depth.
|
||||
nodes.forEach(function(d) {
|
||||
d.y = d.depth * 300;
|
||||
});
|
||||
|
||||
// Update the nodes…
|
||||
var node = svg.selectAll("g.node")
|
||||
.data(nodes, function(d) {
|
||||
return d.id || (d.id = ++i);
|
||||
});
|
||||
|
||||
// Enter any new nodes at the parent's previous position.
|
||||
var nodeEnter = node.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) {
|
||||
var transX = parseFloat(source.y0) - 10;
|
||||
var transY = parseFloat(source.x0) - imgHeight / 2;
|
||||
return "translate(" + transX + "," + transY + ")";
|
||||
})
|
||||
.attr("width", imgWidth)
|
||||
.attr("height", imgHeight)
|
||||
.on("click", click);
|
||||
|
||||
nodeEnter.append("image")
|
||||
.attr("xlink:href", function(d) {
|
||||
if (d.type == "compass")
|
||||
return "../img/router.png";
|
||||
else if (d.type == "switch")
|
||||
return "../img/switch.png";
|
||||
else
|
||||
return "../img/server.png";
|
||||
})
|
||||
.attr("class", function(d) {
|
||||
return d.type;
|
||||
})
|
||||
.attr("width", imgWidth)
|
||||
.attr("height", imgHeight);
|
||||
|
||||
nodeEnter.append("rect")
|
||||
.attr("width", function(d) {
|
||||
if (d.type == "server") {
|
||||
return imgWidth * d.progress;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
.attr("height", imgHeight)
|
||||
.attr("data-hostid", function(d) {
|
||||
return d.hostid;
|
||||
})
|
||||
.style("fill", "blue")
|
||||
.style("opacity", function(d) {
|
||||
if (d.type == "server")
|
||||
return 0.4;
|
||||
else
|
||||
return 0;
|
||||
});
|
||||
|
||||
|
||||
nodeEnter.append("text")
|
||||
.attr("x", function(d) {
|
||||
if (d.type == "compass")
|
||||
return -5;
|
||||
else
|
||||
return d.children || d._children ? -8 : imgWidth + 10;
|
||||
})
|
||||
.attr("y", function(d) {
|
||||
if (d.type == "compass")
|
||||
return imgHeight / 2;
|
||||
else if (d.type == "switch")
|
||||
return 6;
|
||||
else
|
||||
return imgHeight / 2;
|
||||
})
|
||||
.attr("dy", ".25em")
|
||||
.attr("text-anchor", function(d) {
|
||||
return d.children || d._children ? "end" : "start";
|
||||
})
|
||||
.text(function(d) {
|
||||
return d.name;
|
||||
})
|
||||
.style("font-size", "15px")
|
||||
.style("fill-opacity", 1e-6);
|
||||
|
||||
nodeEnter.append("text")
|
||||
.attr("x", 0)
|
||||
.attr("y", 45)
|
||||
.attr("dy", ".25em")
|
||||
.attr("data-hostid", function(d) {
|
||||
return d.hostid;
|
||||
})
|
||||
.text(function(d) {
|
||||
if (d.type == "server")
|
||||
return d.message;
|
||||
else
|
||||
return null;
|
||||
})
|
||||
.style("font-size", "12px");
|
||||
|
||||
// Transition nodes to their new position.
|
||||
var nodeUpdate = node.transition()
|
||||
.duration(duration)
|
||||
.attr("transform", function(d) {
|
||||
var transX = parseFloat(d.y) - 10;
|
||||
var transY = parseFloat(d.x) - imgHeight / 2;
|
||||
return "translate(" + transX + "," + transY + ")";
|
||||
});
|
||||
|
||||
nodeUpdate.select("text")
|
||||
.style("fill-opacity", 1);
|
||||
|
||||
// Transition exiting nodes to the parent's new position.
|
||||
var nodeExit = node.exit().transition()
|
||||
.duration(duration)
|
||||
.attr("transform", function(d) {
|
||||
var transX = parseFloat(source.y) - 10;
|
||||
var transY = parseFloat(source.x) - imgHeight / 2;
|
||||
return "translate(" + transX + "," + transY + ")";
|
||||
})
|
||||
.remove();
|
||||
|
||||
nodeExit.select("circle")
|
||||
.attr("r", 1e-6);
|
||||
|
||||
nodeExit.select("text")
|
||||
.style("fill-opacity", 1e-6);
|
||||
|
||||
// Update the links…
|
||||
var link = svg.selectAll("path.link")
|
||||
.data(links, function(d) {
|
||||
return d.target.id;
|
||||
});
|
||||
|
||||
// Enter any new links at the parent's previous position.
|
||||
link.enter().insert("path", "g")
|
||||
.attr("class", "link")
|
||||
.attr("d", function(d) {
|
||||
var o = {
|
||||
x: source.x0,
|
||||
y: source.y0
|
||||
};
|
||||
return diagonal({
|
||||
source: o,
|
||||
target: o
|
||||
});
|
||||
});
|
||||
|
||||
// Transition links to their new position.
|
||||
link.transition()
|
||||
.duration(duration)
|
||||
.attr("d", diagonal);
|
||||
|
||||
// Transition exiting nodes to the parent's new position.
|
||||
link.exit().transition()
|
||||
.duration(duration)
|
||||
.attr("d", function(d) {
|
||||
var o = {
|
||||
x: source.x,
|
||||
y: source.y
|
||||
};
|
||||
return diagonal({
|
||||
source: o,
|
||||
target: o
|
||||
});
|
||||
})
|
||||
.remove();
|
||||
|
||||
// Stash the old positions for transition.
|
||||
nodes.forEach(function(d) {
|
||||
d.x0 = d.x;
|
||||
d.y0 = d.y;
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle children on click.
|
||||
function click(d) {
|
||||
if (d.children) {
|
||||
d._children = d.children;
|
||||
d.children = null;
|
||||
} else {
|
||||
d.children = d._children;
|
||||
d._children = null;
|
||||
}
|
||||
update(d);
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.element.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.element.hide();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,98 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>install_review Widget Unit Test</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div id="install_review-test"> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type='text/javascript' src='../../../steal/steal.js'></script>
|
||||
<script type='text/javascript' src='../../../lib/d3.min.js'></script>
|
||||
<script type='text/javascript'>
|
||||
steal('jquery/dom/route', 'ods/fixtures', 'ods/ui/install_review').then(function($) {
|
||||
|
||||
var config = [];
|
||||
|
||||
var server1 = {
|
||||
clusterhost_id: 100,
|
||||
hostname: "server01",
|
||||
id: 10,
|
||||
mac: "28:6e:31:47:c8:6c",
|
||||
port: "1",
|
||||
management_ip: "10.2.172.9",
|
||||
tenant_ip: "192.168.100.101",
|
||||
switch_ip: "172.29.8.40",
|
||||
vlan: "1",
|
||||
roles: ["role1", "role2", "role3", "role4", "role5", "role6", "role7"]
|
||||
};
|
||||
|
||||
var server2 = {
|
||||
clusterhost_id: 200,
|
||||
hostname: "server02",
|
||||
id: 20,
|
||||
mac: "28:6e:31:34:fd:28",
|
||||
port: "2",
|
||||
management_ip: "10.2.172.10",
|
||||
tenant_ip: "192.168.100.102",
|
||||
switch_ip: "172.29.8.40",
|
||||
vlan: "2",
|
||||
roles: ["role2"]
|
||||
};
|
||||
|
||||
if (config["172.29.8.40"] == undefined) {
|
||||
config["172.29.8.40"] = [server1];
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
} else {
|
||||
config["172.29.8.40"].push(server1);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
config["172.29.8.40"].push(server2);
|
||||
}
|
||||
|
||||
var odsState = {
|
||||
networking: null,
|
||||
servers: [],
|
||||
servers_config: null,
|
||||
cluster_id: null,
|
||||
security: null,
|
||||
partition: null,
|
||||
feature: null,
|
||||
machines: [],
|
||||
switches: [],
|
||||
snmp: 1
|
||||
};
|
||||
|
||||
var state = new $.Observe(odsState);
|
||||
state.servers_config = config;
|
||||
state.cluster_id = 1;
|
||||
state.servers = [{},{},{},{},{},{},{},{},{}];
|
||||
|
||||
$('#install_review-test').ods_ui_install_review({ "odsState" : state });
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<tr>
|
||||
<td><input type="radio" name="clusterRadio" value="<%= clusterName%>" data-hostid="<%= id %>" ></td>
|
||||
<td><%= id %></td>
|
||||
<td style="width: 70%;"><%= clusterName%></td>
|
||||
</tr>
|
|
@ -1,92 +0,0 @@
|
|||
<h2>Ready to deploy OpenStack</h2>
|
||||
<p style="margin: 0; padding-left: 20px;">Review the configuration shown above and if corrent, click deploy to begin the OpenStack deployment.</p>
|
||||
<div class="left-side">
|
||||
<div class="inside">
|
||||
<h3>IP Pool</h3>
|
||||
<div class="rounded" style="padding-top: 5px; padding-bottom: 8px;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Network IP range</th>
|
||||
<th>Start</th>
|
||||
<th>End</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Management</td>
|
||||
<td id="mgt_start"></td>
|
||||
<td id="mgt_end"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tenant</td>
|
||||
<td id="vnw_start"></td>
|
||||
<td id="vnw_end"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Public</td>
|
||||
<td id="float_start"></td>
|
||||
<td id="float_end"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Storage</td>
|
||||
<td id="storage_start"></td>
|
||||
<td id="storage_end"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h3>Logical Volume Partition</h3>
|
||||
<div class="rounded" style="padding-top: 8px; padding-bottom: 5px;">
|
||||
<div class="float_left" style="padding-right:20px">tmp: <span id="tmp"></span></div>
|
||||
<div class="float_left" style="padding-right:20px">var: <span id="var"></span></div>
|
||||
<div class="float_left" style="padding-right:20px">home: <span id="home"></span></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<h3>System Credentials </h3>
|
||||
<div class="rounded" style="padding-top: 0; padding-bottom: 5px;">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2" style="width:33%">Hypervisor</th>
|
||||
<th colspan="2" style="width:33%">OpenStack Services</th>
|
||||
<th colspan="2" style="width:33%">OpenStack Management Console</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User name: </td><td id="server_uname"></td>
|
||||
<td>User name: </td><td id="service_uname"></td>
|
||||
<td>User name: </td><td id="console_uname"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password: </td><td id="server_pwd"></td>
|
||||
<td>Password: </td><td id="service_pwd"></td>
|
||||
<td>Password: </td><td id="console_pwd"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<h3>OpenStack Servers</h3>
|
||||
<div class="">
|
||||
<table id="tb_server_review" cellpadding="0" cellspacing="0" border="0" class="display">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Host name</th>
|
||||
<th>MAC Addr</th>
|
||||
<th>Mgt IP</th>
|
||||
<th>Tenant IP</th>
|
||||
<th>Switch IP</th>
|
||||
<th>Port</th>
|
||||
<th>Roles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody> </tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="continue"><center>
|
||||
<a href="#" class="go-back review-back" >Go back</a>
|
||||
<a href="/web/install/" id="begin-deploy" class="btn_continue">Deploy</a>
|
||||
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img>
|
||||
</center></div>
|
|
@ -1,50 +0,0 @@
|
|||
<h2>
|
||||
Deploying OpenStack
|
||||
<span style="float:right;">
|
||||
<a class="refresh-progressbar"><img src="../img/refresh.png"></img></a>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p style="padding-left: 30px; color: black;">Compass is deploying OpenStack onto the servers, and configuring them for use with the following features: <span style="color: #990000; margin-top: -5px; font-weight: bold;">Core virtualization, <span style="opacity:0.3">Live Migration, High Availability</span></span> </p>
|
||||
|
||||
<p style="padding-left: 30px; color: black;">Click <a class="dashboard-link disabled">here</a> to go to OpenStack dashboard when deployment is finished.</p>
|
||||
|
||||
<div class="rounded" style="margin-left: 45px; margin-bottom: 20px;"><center>
|
||||
<table style="width:80%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 20%;">Total Progress:</td>
|
||||
<td style="width: 70%;">
|
||||
<div class="totalProgressbar float_left" style="width:100%; height: 20px; border: 1px solid #aaaaaa;">
|
||||
<div class="progress-label">Waiting...</div>
|
||||
<!--<div id="total_percentage" style="position: absolute; z-index: 5; margin-left: 390px;"></div>
|
||||
<div id="total_bar" style="width:0%; height: 100%; background: #0000ff; opacity: 0.5;"></div>-->
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-size: 13px; font-weight: bold; padding-left: 3px;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</center></div>
|
||||
|
||||
<div id="install_tabs" style="margin-left: 45px;">
|
||||
<ul>
|
||||
<li><a href="#tabs-1">Graph</a></li>
|
||||
<li><a href="#tabs-2">List</a></li>
|
||||
</ul>
|
||||
<div id="tabs-1" class="graph">
|
||||
<div id="progress-graph">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="tabs-2" class="list"><center>
|
||||
<table id="progress-list" style="width:80%">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</center></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
|
@ -1,23 +0,0 @@
|
|||
<h2>Pending Clusters</h2>
|
||||
<p style="margin: 0; padding-left: 20px;">Click continue to see OpenStack deployment progress of the selected cluster.</p>
|
||||
|
||||
<div class="rounded" style="padding-top: 10px; padding-bottom: 5px; margin-left: 20px; margin-top: 10px;">
|
||||
<table class="cluster">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Cluster Id</th>
|
||||
<th>Cluster Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
<div class="continue"><center>
|
||||
<a href="#" id="retrieve-progress" class="btn_continue">Continue</a>
|
||||
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img>
|
||||
</center></div>
|
|
@ -1,9 +0,0 @@
|
|||
<tr name="<%= hostname%>">
|
||||
<td style="width: 20%;"> <%= hostname %> </td>
|
||||
<td style="width: 70%;">
|
||||
<div data-hostid="<%= hostid %>" class="center_gradient server_progress">
|
||||
<div class="server-progress-label progress-label"> <%= message %> </div>
|
||||
</div>
|
||||
</td>
|
||||
<td><!--<img src="../img/info_icon_16px.png"></img>--></td>
|
||||
</tr>
|
|
@ -1,127 +0,0 @@
|
|||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view'
|
||||
).then(
|
||||
'ods/ui/welcome',
|
||||
'ods/ui/features',
|
||||
'ods/ui/servers',
|
||||
'ods/ui/security',
|
||||
'ods/ui/networking',
|
||||
'ods/ui/host_config',
|
||||
'ods/ui/install_review',
|
||||
'./views/init.ejs'
|
||||
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.nav', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init'));
|
||||
this.steps = this.element.find("ul li span");
|
||||
this.fixupContentSize();
|
||||
},
|
||||
|
||||
gotoStep: function(step) {
|
||||
var that = this;
|
||||
$.each(this.steps, function(index, value) {
|
||||
var el = $(value);
|
||||
var s = el.data("step");
|
||||
if (step == s) {
|
||||
el.removeClass("inactive");
|
||||
el.addClass("active");
|
||||
return false;
|
||||
} else {
|
||||
el.addClass("passed");
|
||||
el.removeClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
var options = {
|
||||
nav: this,
|
||||
odsState: this.options.odsState,
|
||||
mainBox: this.options.mainBox
|
||||
};
|
||||
if (step === "1") {
|
||||
this.options.mainBox.ods_ui_welcome("destroy");
|
||||
this.options.mainBox.ods_ui_features(options);
|
||||
} else if (step === "2") {
|
||||
this.options.mainBox.ods_ui_features("destroy");
|
||||
this.options.mainBox.ods_ui_servers(options);
|
||||
} else if (step == "3") {
|
||||
this.options.mainBox.ods_ui_servers("destroy");
|
||||
this.options.mainBox.ods_ui_security(options);
|
||||
} else if (step == "4") {
|
||||
this.options.mainBox.ods_ui_security("destroy");
|
||||
this.options.mainBox.ods_ui_networking(options);
|
||||
} else if (step == "5") {
|
||||
this.options.mainBox.ods_ui_networking("destroy");
|
||||
this.options.mainBox.ods_ui_host_config(options);
|
||||
} else if (step == "6") {
|
||||
this.options.mainBox.ods_ui_host_config("destroy");
|
||||
this.options.mainBox.ods_ui_install_review(options);
|
||||
}
|
||||
},
|
||||
|
||||
gobackStep: function(step) {
|
||||
var that = this;
|
||||
$.each(this.steps, function(index, value) {
|
||||
var el = $(value);
|
||||
var s = el.data("step");
|
||||
if (step == s) {
|
||||
el.removeClass("passed");
|
||||
el.addClass("active");
|
||||
} else {
|
||||
if (el.hasClass("active")) {
|
||||
el.removeClass("active");
|
||||
el.addClass("inactive");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var options = {
|
||||
nav: this,
|
||||
odsState: this.options.odsState,
|
||||
mainBox: this.options.mainBox
|
||||
};
|
||||
if (step === "1") {
|
||||
this.options.mainBox.ods_ui_servers("destroy");
|
||||
this.options.mainBox.ods_ui_features(options);
|
||||
} else if (step === "2") {
|
||||
this.options.mainBox.ods_ui_security("destroy");
|
||||
this.options.mainBox.ods_ui_servers(options);
|
||||
} else if (step == "3") {
|
||||
this.options.mainBox.ods_ui_networking("destroy");
|
||||
this.options.mainBox.ods_ui_security(options);
|
||||
} else if (step == "4") {
|
||||
this.options.mainBox.ods_ui_host_config("destroy");
|
||||
this.options.mainBox.ods_ui_networking(options);
|
||||
} else if (step == "5") {
|
||||
this.options.mainBox.ods_ui_install_review("destroy");
|
||||
this.options.mainBox.ods_ui_host_config(options);
|
||||
}
|
||||
},
|
||||
|
||||
fixupContentSize: function() {
|
||||
var header_height = $('#header').outerHeight();
|
||||
var menu_height = $('#menu').outerHeight();
|
||||
var footer_height = $('#footer').outerHeight();
|
||||
var window_height = $(window).outerHeight();
|
||||
var content_height = window_height - header_height - menu_height - footer_height;
|
||||
|
||||
if (content_height > 200) {
|
||||
$('#content').height(content_height);
|
||||
}
|
||||
},
|
||||
|
||||
'{window} resize': function(ev) {
|
||||
this.fixupContentSize();
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.element.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.element.hide();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,9 +0,0 @@
|
|||
<ul>
|
||||
<li><span class="active" data-step="welcome">Welcome</span></li>
|
||||
<li><span class="inactive" data-step="1">1. Features</span></li>
|
||||
<li><span class="inactive" data-step="2">2. Servers</span></li>
|
||||
<li><span class="inactive" data-step="3">3. Security</span></li>
|
||||
<li><span class="inactive" data-step="4">4. Networking</span></li>
|
||||
<li><span class="inactive" data-step="5">5. Host Configuration</span></li>
|
||||
<li><span class="inactive" data-step="6">6. Deploy</span></li>
|
||||
</ul>
|
|
@ -1,43 +0,0 @@
|
|||
#tabs {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.ui-tabs-vertical {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-tabs-vertical .ui-tabs-nav {
|
||||
padding: .2em .1em .2em .2em;
|
||||
float: left;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.ui-tabs-vertical .ui-tabs-nav li {
|
||||
clear: left;
|
||||
width: 100%;
|
||||
border-bottom-width: 1px !important;
|
||||
border-right-width: 0 !important;
|
||||
margin: 0 -1px .2em 0;
|
||||
}
|
||||
|
||||
.ui-tabs-vertical .ui-tabs-nav li a {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
|
||||
padding-bottom: 0;
|
||||
padding-right: .1em;
|
||||
border-right-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.ui-tabs-vertical .ui-tabs-panel {
|
||||
padding: 1em;
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nicHint {
|
||||
padding-left: 10px;
|
||||
padding-top: 3px;
|
||||
}
|
|
@ -1,425 +0,0 @@
|
|||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view'
|
||||
).then(
|
||||
'./networking.css',
|
||||
'./views/init.ejs',
|
||||
'ods/models/cluster.js',
|
||||
'lib/jquery-ui-1.10.3.custom.css',
|
||||
'lib/jquery-ui-1.10.3.custom.js'
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.networking', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init'));
|
||||
|
||||
this.initAccordion();
|
||||
|
||||
this.nicErr = 0;
|
||||
|
||||
this.prefillNetworking();
|
||||
},
|
||||
|
||||
prefillNetworking: function() {
|
||||
var oldNetworkingData = this.options.odsState.networking;
|
||||
if (oldNetworkingData) {
|
||||
$("#global_nameservers").val(oldNetworkingData.global.nameservers);
|
||||
$("#global_searchpath").val(oldNetworkingData.global.search_path);
|
||||
$("#global_gateway").val(oldNetworkingData.global.gateway);
|
||||
$("#global_proxy").val(oldNetworkingData.global.proxy);
|
||||
$("#global_ntpserver").val(oldNetworkingData.global.ntp_server);
|
||||
|
||||
$("#mgt_ip_start").val(oldNetworkingData.interfaces.management.ip_start);
|
||||
$("#mgt_ip_end").val(oldNetworkingData.interfaces.management.ip_end);
|
||||
$("#mgt_netmask").val(oldNetworkingData.interfaces.management.netmask);
|
||||
$("#mgt_gateway").val(oldNetworkingData.interfaces.management.gateway);
|
||||
$("#mgt_nic").val(oldNetworkingData.interfaces.management.nic);
|
||||
$("#mgt_promisc").prop("checked", oldNetworkingData.interfaces.management.promisc ? true : false);
|
||||
|
||||
$("#vnw_ip_start").val(oldNetworkingData.interfaces.tenant.ip_start);
|
||||
$("#vnw_ip_end").val(oldNetworkingData.interfaces.tenant.ip_end);
|
||||
$("#vnw_netmask").val(oldNetworkingData.interfaces.tenant.netmask);
|
||||
$("#vnw_gateway").val(oldNetworkingData.interfaces.tenant.gateway);
|
||||
$("#vnw_nic").val(oldNetworkingData.interfaces.tenant.nic);
|
||||
$("#vnw_promisc").prop("checked", oldNetworkingData.interfaces.tenant.promisc ? true : false);
|
||||
|
||||
$("#float_ip_start").val(oldNetworkingData.interfaces.public.ip_start);
|
||||
$("#float_ip_end").val(oldNetworkingData.interfaces.public.ip_end);
|
||||
$("#float_netmask").val(oldNetworkingData.interfaces.public.netmask);
|
||||
$("#float_gateway").val(oldNetworkingData.interfaces.public.gateway);
|
||||
$("#float_nic").val(oldNetworkingData.interfaces.public.nic);
|
||||
$("#float_promisc").prop("checked", oldNetworkingData.interfaces.public.promisc ? true : false);
|
||||
|
||||
$("#storage_ip_start").val(oldNetworkingData.interfaces.storage.ip_start);
|
||||
$("#storage_ip_end").val(oldNetworkingData.interfaces.storage.ip_end);
|
||||
$("#storage_netmask").val(oldNetworkingData.interfaces.storage.netmask);
|
||||
$("#storage_gateway").val(oldNetworkingData.interfaces.storage.gateway);
|
||||
$("#storage_nic").val(oldNetworkingData.interfaces.storage.nic);
|
||||
$("#storage_promisc").prop("checked", oldNetworkingData.interfaces.storage.promisc ? true : false);
|
||||
}
|
||||
},
|
||||
|
||||
initAccordion: function() {
|
||||
this.accordion = $("#accordion").accordion({
|
||||
collapsible: true,
|
||||
heightStyle: "content"
|
||||
});
|
||||
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
|
||||
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
|
||||
},
|
||||
|
||||
checkNonEmpty: function(el) {
|
||||
var value = el.val();
|
||||
if (!value) {
|
||||
el.addClass('error');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
'.networking-finish click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var self = this;
|
||||
var hasError = false;
|
||||
// remove the error class within the el
|
||||
$('#accordion').find('.error').removeClass('error');
|
||||
|
||||
// return if any required input is empty
|
||||
$('#accordion').find('.non-empty-value').each(function(index, value) {
|
||||
if (!self.checkNonEmpty($(value))) {
|
||||
hasError = true;
|
||||
}
|
||||
});
|
||||
if (hasError) {
|
||||
return;
|
||||
}
|
||||
|
||||
//global section
|
||||
var global_nameservers = $("#global_nameservers").val();
|
||||
var global_searchpath = $("#global_searchpath").val();
|
||||
var global_gateway = $("#global_gateway").val();
|
||||
var global_proxy = $("#global_proxy").val();
|
||||
var global_ntpserver = $("#global_ntpserver").val();
|
||||
var global_havip = $("#global_havip").val();
|
||||
|
||||
//management section
|
||||
var mgt_ipstart = $("#mgt_ip_start").val();
|
||||
var mgt_ipend = $("#mgt_ip_end").val();
|
||||
var mgt_netmask = $("#mgt_netmask").val();
|
||||
var mgt_gateway = $("#mgt_gateway").val();
|
||||
var mgt_nic = $("#mgt_nic").val();
|
||||
var mgt_promisc = $("#mgt_promisc").attr("checked") ? 1 : 0;
|
||||
|
||||
//tenant networks section
|
||||
var tenant_ipstart = $("#vnw_ip_start").val();
|
||||
var tenant_ipend = $("#vnw_ip_end").val();
|
||||
var tenant_netmask = $("#vnw_netmask").val();
|
||||
var tenant_gateway = $("#vnw_gateway").val();
|
||||
var tenant_nic = $("#vnw_nic").val();
|
||||
var tenant_promisc = $("#vnw_promisc").attr("checked") ? 1 : 0;
|
||||
|
||||
//public ip range section
|
||||
var public_ipstart = $("#float_ip_start").val();
|
||||
var public_ipend = $("#float_ip_end").val();
|
||||
var public_netmask = $("#float_netmask").val();
|
||||
var public_gateway = $("#float_gateway").val();
|
||||
var public_nic = $("#float_nic").val();
|
||||
var public_promisc = $("#float_promisc").attr("checked") ? 1 : 0;
|
||||
|
||||
//storage ip range section
|
||||
var storage_ipstart = $("#storage_ip_start").val();
|
||||
var storage_ipend = $("#storage_ip_end").val();
|
||||
var storage_netmask = $("#storage_netmask").val();
|
||||
var storage_gateway = $("#storage_gateway").val();
|
||||
var storage_nic = $("#storage_nic").val();
|
||||
var storage_promisc = $("#storage_promisc").attr("checked") ? 1 : 0;
|
||||
|
||||
|
||||
// verify IP range
|
||||
if (!$(".ipaddress").hasClass("error") && this.nicErr == 0) {
|
||||
var mgtIpRangeValid = this.verifyIpRange(mgt_ipstart, mgt_ipend, this.options.odsState.servers.length);
|
||||
var tenantIpRangeValid = this.verifyIpRange(tenant_ipstart, tenant_ipend, this.options.odsState.servers.length);
|
||||
/*
|
||||
var mindex = mgt_ipstart.lastIndexOf('.') + 1;
|
||||
var mgtIpPrefix = mgt_ipstart.substring(0, mindex);
|
||||
var mgtIpStartLastDigit = mgt_ipstart.substring(mindex);
|
||||
var mgtIpEndLastDigit = mgt_ipend.substring(mindex);
|
||||
|
||||
var tindex = tenant_ipstart.lastIndexOf('.') + 1;
|
||||
var tenantIpPrefix = tenant_ipstart.substring(0, tindex);
|
||||
var tenantIpStartLastDigit = tenant_ipstart.substring(tindex);
|
||||
var tenantIpEndLastDigit = tenant_ipend.substring(tindex);
|
||||
*/
|
||||
|
||||
if (!mgtIpRangeValid) {
|
||||
alert("The management IP range is not valid.");
|
||||
} else if (!tenantIpRangeValid) {
|
||||
alert("The tenant IP range is not valid.");
|
||||
} else {
|
||||
// config server ip
|
||||
var server_count = this.options.odsState.servers.length;
|
||||
|
||||
this.serverData = [];
|
||||
|
||||
var oldConfigData = this.options.odsState.servers_config;
|
||||
|
||||
var isConfiged = false;
|
||||
for (var key in oldConfigData) {
|
||||
var servers = oldConfigData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
isConfiged = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
for (var i = 0; i < server_count; i++) {
|
||||
var server = this.options.odsState.servers[i];
|
||||
|
||||
if (!isConfiged) {
|
||||
server['hostname'] = '';
|
||||
server['roles'] = [];
|
||||
server['management_ip'] = '';
|
||||
server['tenant_ip'] = '';
|
||||
}
|
||||
|
||||
//server['server_ip'] = this.startPrefix + (parseInt(this.startLastDigit) + i);
|
||||
|
||||
var switchIp = server.switch_ip;
|
||||
if (this.serverData[switchIp] == undefined) {
|
||||
this.serverData[switchIp] = [server];
|
||||
} else {
|
||||
this.serverData[switchIp].push(server);
|
||||
}
|
||||
}
|
||||
this.options.odsState.servers_config = this.serverData;
|
||||
/*
|
||||
var j = 0;
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
serverData[key][i]['management_ip'] = mgtIpPrefix + (parseInt(mgtIpStartLastDigit) + j);
|
||||
serverData[key][i]['tenant_ip'] = tenantIpPrefix + (parseInt(tenantIpStartLastDigit) + j);
|
||||
j++;
|
||||
}
|
||||
}
|
||||
*/
|
||||
var networkingData = {
|
||||
"networking": {
|
||||
"interfaces": {
|
||||
"management": {
|
||||
"ip_start": mgt_ipstart,
|
||||
"ip_end": mgt_ipend,
|
||||
"netmask": mgt_netmask,
|
||||
"gateway": mgt_gateway,
|
||||
"nic": mgt_nic,
|
||||
"promisc": mgt_promisc
|
||||
},
|
||||
"tenant": {
|
||||
"ip_start": tenant_ipstart,
|
||||
"ip_end": tenant_ipend,
|
||||
"netmask": tenant_netmask,
|
||||
"gateway": tenant_gateway,
|
||||
"nic": tenant_nic,
|
||||
"promisc": tenant_promisc
|
||||
},
|
||||
"public": {
|
||||
"ip_start": public_ipstart,
|
||||
"ip_end": public_ipend,
|
||||
"netmask": public_netmask,
|
||||
"gateway": public_gateway,
|
||||
"nic": public_nic,
|
||||
"promisc": public_promisc
|
||||
},
|
||||
"storage": {
|
||||
"ip_start": storage_ipstart,
|
||||
"ip_end": storage_ipend,
|
||||
"netmask": storage_netmask,
|
||||
"gateway": storage_gateway,
|
||||
"nic": storage_nic,
|
||||
"promisc": storage_promisc
|
||||
}
|
||||
},
|
||||
"global": {
|
||||
"nameservers": global_nameservers,
|
||||
"search_path": global_searchpath,
|
||||
"gateway": global_gateway,
|
||||
"proxy": global_proxy,
|
||||
"ntp_server": global_ntpserver,
|
||||
"ha_vip": global_havip
|
||||
}
|
||||
}
|
||||
};
|
||||
this.options.odsState.networking = networkingData.networking;
|
||||
|
||||
$("#continuing").css("opacity", 1);
|
||||
Ods.Cluster.update(this.options.odsState.cluster_id, networkingData, "networking", this.proxy('onNetworkingAdded'), this.proxy('onNetworkingAddedErr'));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/************************************************/
|
||||
// cluster update (networking) success callback
|
||||
/************************************************/
|
||||
onNetworkingAdded: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onNetworkingAdded data *** ", data);
|
||||
steal.dev.log(" *** onNetworkingAdded textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onNetworkingAdded xhr *** ", xhr);
|
||||
$("#networking_continue_err").hide();
|
||||
|
||||
if (xhr.status == 200) {
|
||||
$("#continuing").css("opacity", 0);
|
||||
this.options.nav.gotoStep("5");
|
||||
}
|
||||
},
|
||||
|
||||
/************************************************/
|
||||
// cluster update (networking) error callback
|
||||
/************************************************/
|
||||
onNetworkingAddedErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onNetworkingAddedErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onNetworkingAddedErr status *** ", status);
|
||||
steal.dev.log(" *** onNetworkingAddedErr statusText *** ", xhr);
|
||||
|
||||
$("#continuing").css("opacity", 0);
|
||||
|
||||
if (xhr.status == 400) { // bad request
|
||||
var errMessage = JSON.parse(xhr.responseText).message;
|
||||
$("#networking_continue_err").html("<span class='errhint'>" + errMessage + "</span>");
|
||||
$("#networking_continue_err").show();
|
||||
} else if (xhr.status == 500) {
|
||||
$("#networking_continue_err").html("<span class='errhint'>Error code: 500</span>");
|
||||
$("#networking_continue_err").show();
|
||||
}
|
||||
},
|
||||
|
||||
'.nic change': function(el, ev) {
|
||||
var management_nic = $("#mgt_nic").val();
|
||||
var tenant_nic = $("#vnw_nic").val();
|
||||
var public_nic = $("#float_nic").val();
|
||||
var storage_nic = $("#storage_nic").val();
|
||||
|
||||
var nicVals = [public_nic, management_nic, tenant_nic, storage_nic];
|
||||
var nicConflicts = [0, 0, 0, 0];
|
||||
|
||||
for (var i = 1; i < nicVals.length; i++) {
|
||||
if (nicVals[i] == nicVals[0]) {
|
||||
nicConflicts[i] = 1;
|
||||
nicConflicts[0] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
var okHint = "<img src='../img/green_check_16px.png'></img>";
|
||||
|
||||
this.nicErr = 0;
|
||||
if (nicConflicts[0] == 1) {
|
||||
this.nicErr = 1;
|
||||
$("#float_nic_err").html("<span class='errhint'>Public network cannot share nic with any other network. Please choose another one.</span>");
|
||||
} else {
|
||||
$("#float_nic_err").html(okHint);
|
||||
}
|
||||
|
||||
if (nicConflicts[1] == 1) {
|
||||
this.nicErr = 1;
|
||||
$("#mgt_nic_err").html("<span class='errhint'>Management network cannot share nic with public network. Please choose another one.</span>");
|
||||
} else {
|
||||
$("#mgt_nic_err").html(okHint);
|
||||
}
|
||||
|
||||
if (nicConflicts[2] == 1) {
|
||||
this.nicErr = 1;
|
||||
$("#vnw_nic_err").html("<span class='errhint'>Tenant network cannot share nic with any other network. Please choose another one.</span>");
|
||||
} else {
|
||||
$("#vnw_nic_err").html(okHint);
|
||||
}
|
||||
|
||||
if (nicConflicts[3] == 1) {
|
||||
this.nicErr = 1;
|
||||
$("#storage_nic_err").html("<span class='errhint'>Storage network cannot share nic with public network. Please choose another one.</span>");
|
||||
} else {
|
||||
$("#storage_nic_err").html(okHint);
|
||||
}
|
||||
},
|
||||
|
||||
'#mgt_ip_end focus': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
this.autofillIpRange($("#mgt_ip_start"), $("#mgt_ip_end"));
|
||||
},
|
||||
|
||||
'#vnw_ip_end focus': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
this.autofillIpRange($("#vnw_ip_start"), $("#vnw_ip_end"));
|
||||
},
|
||||
|
||||
'#float_ip_end focus': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
this.autofillIpRange($("#float_ip_start"), $("#float_ip_end"));
|
||||
},
|
||||
|
||||
'#storage_ip_end focus': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
this.autofillIpRange($("#storage_ip_start"), $("#storage_ip_end"));
|
||||
},
|
||||
|
||||
autofillIpRange: function(elStart, elEnd) {
|
||||
if (elStart.hasClass("error")) {
|
||||
return;
|
||||
}
|
||||
var lastDotIndex = elStart.val().lastIndexOf(".");
|
||||
var IpPrefix = elStart.val().substring(0, lastDotIndex + 1);
|
||||
var IpEndVal = IpPrefix + "255";
|
||||
elEnd.val(IpEndVal);
|
||||
var len = IpEndVal.length;
|
||||
elEnd[0].setSelectionRange(lastDotIndex + 1, len);
|
||||
},
|
||||
|
||||
verifyIpRange: function(start, end, minCount) {
|
||||
var rindex = start.lastIndexOf('.') + 1;
|
||||
var startPrefix = start.substring(0, rindex);
|
||||
var endPrefix = end.substring(0, rindex);
|
||||
var startLastDigit = start.substring(rindex);
|
||||
var endLastDigit = end.substring(rindex);
|
||||
|
||||
if (startPrefix != endPrefix) {
|
||||
return false;
|
||||
} else if (parseInt(endLastDigit) - parseInt(startLastDigit) < minCount) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
'input.ipaddress keyup': function(el, ev) {
|
||||
var isValid = this.validateIpFormat(el.val());
|
||||
if (!isValid) {
|
||||
el.addClass("error");
|
||||
} else {
|
||||
el.removeClass("error");
|
||||
}
|
||||
},
|
||||
|
||||
validateIpFormat: function(value) {
|
||||
var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
if (value.match(ipformat)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
'.networking-back click': function(el, ev) {
|
||||
this.options.nav.gobackStep("3");
|
||||
return false;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
|
||||
this.element.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.element.hide();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>networking Widget Unit Test</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div id="networking-test"> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type='text/javascript' src='../../../steal/steal.js'></script>
|
||||
<script type='text/javascript'>
|
||||
steal('jquery/dom/route', 'ods/fixtures','ods/ui/networking').then(function($) {
|
||||
|
||||
var odsState = {
|
||||
networking: null,
|
||||
servers: [],
|
||||
servers_config: null,
|
||||
cluster_id: null,
|
||||
security: null,
|
||||
partition: null,
|
||||
feature: null,
|
||||
machines: [],
|
||||
switches: [],
|
||||
snmp: 1
|
||||
};
|
||||
var state = new $.Observe(odsState);
|
||||
state.cluster_id = 1;
|
||||
$('#networking-test').ods_ui_networking({ "odsState" : state });
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
<h2>Specify network addresses you want to use for your OpenStack servers</h2>
|
||||
<p>Provide static network addresses needed to facilitate the OpenStack cluster</p>
|
||||
<div id="accordion">
|
||||
<div>Management Network</div>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>IP Range</td>
|
||||
<td><input id="mgt_ip_start" type="input" class="rounded ipaddress non-empty-value" placeholder="start" value=""><input id="mgt_ip_end" type="input" class="rounded ipaddress non-empty-value" placeholder="end" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Netmask</td>
|
||||
<td><input id="mgt_netmask" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gateway (optional)</td>
|
||||
<td><input id="mgt_gateway" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIC</td>
|
||||
<td>
|
||||
<select id="mgt_nic" class="nic float_left">
|
||||
<option selected>eth0</option>
|
||||
<option>eth1</option>
|
||||
<option>eth2</option>
|
||||
<option>eth3</option>
|
||||
<option>eth4</option>
|
||||
</select>
|
||||
<div id="mgt_nic_err" class="nicHint float_left" ><i> (This selection should be consistent with your networking plan.)</i></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="mgt_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>Tenant Network</div>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>IP Range</td>
|
||||
<td><input id="vnw_ip_start" type="input" class="rounded ipaddress non-empty-value" placeholder="start" value=""><input id="vnw_ip_end" type="input" class="rounded ipaddress non-empty-value" placeholder="end" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Netmask</td>
|
||||
<td><input id="vnw_netmask" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gateway (optional)</td>
|
||||
<td><input id="vnw_gateway" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIC</td>
|
||||
<td>
|
||||
<select id="vnw_nic" class="nic float_left">
|
||||
<option>eth0</option>
|
||||
<option selected>eth1</option>
|
||||
<option>eth2</option>
|
||||
<option>eth3</option>
|
||||
<option>eth4</option>
|
||||
</select>
|
||||
<div id="vnw_nic_err" class="nicHint float_left"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="vnw_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>Public Network</div>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>IP Range</td>
|
||||
<td>
|
||||
<input id="float_ip_start" type="input" class="rounded ipaddress non-empty-value" placeholder="start" value=""><input id="float_ip_end" type="input" class="rounded ipaddress non-empty-value" placeholder="end" value="">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Netmask</td>
|
||||
<td>
|
||||
<input id="float_netmask" type="input" class="rounded non-empty-value" value="">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gateway (optional)</td>
|
||||
<td>
|
||||
<input id="float_gateway" type="input" class="rounded" value="">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIC</td>
|
||||
<td>
|
||||
<select id="float_nic" class="nic float_left">
|
||||
<option>eth0</option>
|
||||
<option>eth1</option>
|
||||
<option selected>eth2</option>
|
||||
<option>eth3</option>
|
||||
<option>eth4</option>
|
||||
</select>
|
||||
<div id="float_nic_err" class="nicHint float_left"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="float_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>Storage Network</div>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>IP Range</td>
|
||||
<td>
|
||||
<input id="storage_ip_start" type="input" class="rounded ipaddress non-empty-value" placeholder="start" value=""><input id="storage_ip_end" type="input" class="rounded ipaddress non-empty-value" placeholder="end" value="">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Netmask</td>
|
||||
<td><input id="storage_netmask" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gateway (optional)</td>
|
||||
<td><input id="storage_gateway" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIC</td>
|
||||
<td>
|
||||
<select id="storage_nic" class="nic float_left">
|
||||
<option>eth0</option>
|
||||
<option>eth1</option>
|
||||
<option>eth2</option>
|
||||
<option selected>eth3</option>
|
||||
<option>eth4</option>
|
||||
</select>
|
||||
<div id="storage_nic_err" class="nicHint float_left"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="storage_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>Global Network</div>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Nameserver</td>
|
||||
<td><input id="global_nameservers" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Search Path</td>
|
||||
<td><input id="global_searchpath" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gateway</td>
|
||||
<td><input id="global_gateway" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Proxy (optional)</td>
|
||||
<td><input id="global_proxy" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NTP Server (optional)</td>
|
||||
<td><input id="global_ntpserver" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HA Virtual IP (optional)</td>
|
||||
<td><input id="global_havip" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="continue"><center>
|
||||
<a href="#" class="go-back networking-back" >Go back</a>
|
||||
<a href="/web/host_config/" class="btn_continue networking-finish">Continue</a>
|
||||
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img><br>
|
||||
<div id="networking_continue_err" style="display:none;padding-top:10px"></div>
|
||||
</center></div>
|
|
@ -1,15 +0,0 @@
|
|||
.error {
|
||||
background-color: #FFE6E6;
|
||||
border-color: red !important;
|
||||
}
|
||||
|
||||
.errhint {
|
||||
border: 1px solid red;
|
||||
padding: 4px 8px;
|
||||
background-color: white;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
|
@ -1,207 +0,0 @@
|
|||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view'
|
||||
).then(
|
||||
'./views/init.ejs',
|
||||
'ods/models/cluster.js'
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.security', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init'));
|
||||
|
||||
this.prefillSecurity();
|
||||
},
|
||||
|
||||
prefillSecurity: function() {
|
||||
var oldSecurityData = this.options.odsState.security;
|
||||
if (oldSecurityData) {
|
||||
$("#server_uname").val(oldSecurityData.server_credentials.username);
|
||||
$("#server_pwd").val(oldSecurityData.server_credentials.password);
|
||||
$("#server_confirm").val(oldSecurityData.server_credentials.password);
|
||||
|
||||
$("#service_uname").val(oldSecurityData.service_credentials.username);
|
||||
$("#service_pwd").val(oldSecurityData.service_credentials.password);
|
||||
$("#service_confirm").val(oldSecurityData.service_credentials.password);
|
||||
|
||||
$("#console_uname").val(oldSecurityData.console_credentials.username);
|
||||
$("#console_pwd").val(oldSecurityData.console_credentials.password);
|
||||
$("#console_confirm").val(oldSecurityData.console_credentials.password);
|
||||
}
|
||||
},
|
||||
|
||||
'.security-finish click': function(el, ev) {
|
||||
ev.preventDefault();
|
||||
$("#continuing").css("opacity", 1);
|
||||
|
||||
this.usernameCheck($("#server_uname"), $("#server_uname_err"));
|
||||
this.passwordCheck($("#server_pwd"), $("#server_confirm"), $("#server_pwd_err"));
|
||||
this.usernameCheck($("#service_uname"), $("#service_uname_err"));
|
||||
this.passwordCheck($("#service_pwd"), $("#service_confirm"), $("#service_pwd_err"));
|
||||
this.usernameCheck($("#console_uname"), $("#console_uname_err"));
|
||||
this.passwordCheck($("#console_pwd"), $("#console_confirm"), $("#console_pwd_err"));
|
||||
|
||||
if ($("input").hasClass("error") == false) {
|
||||
var server_username = $("#server_uname").val();
|
||||
var server_password = $("#server_pwd").val();
|
||||
var service_username = $("#service_uname").val();
|
||||
var service_password = $("#service_pwd").val();
|
||||
var console_username = $("#console_uname").val();
|
||||
var console_password = $("#console_pwd").val();
|
||||
|
||||
var securityData = {
|
||||
"security": {
|
||||
"server_credentials": {
|
||||
"username": server_username,
|
||||
"password": server_password
|
||||
},
|
||||
"service_credentials": {
|
||||
"username": service_username,
|
||||
"password": service_password
|
||||
},
|
||||
"console_credentials": {
|
||||
"username": console_username,
|
||||
"password": console_password
|
||||
}
|
||||
}
|
||||
};
|
||||
this.options.odsState.security = securityData.security;
|
||||
Ods.Cluster.update(this.options.odsState.cluster_id, securityData, "security", this.proxy('onSecurityAdded'), this.proxy('onSecurityAddedErr'));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/************************************************/
|
||||
// cluster update (security) success callback
|
||||
/************************************************/
|
||||
onSecurityAdded: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onSecurityAdded data *** ", data);
|
||||
steal.dev.log(" *** onSecurityAdded textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onSecurityAdded xhr *** ", xhr);
|
||||
|
||||
$("#security_continue_err").hide();
|
||||
|
||||
if (xhr.status == 200) { // OK
|
||||
$("#continuing").css("opacity", 0);
|
||||
this.options.nav.gotoStep("4");
|
||||
}
|
||||
},
|
||||
|
||||
/************************************************/
|
||||
// cluster update (security) error callback
|
||||
/************************************************/
|
||||
onSecurityAddedErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onSecurityAddedErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onSecurityAddedErr status *** ", status);
|
||||
steal.dev.log(" *** onSecurityAddedErr statusText *** ", xhr);
|
||||
|
||||
$("#security_continue_err").html("<span class='errhint'>Error code: " + xhr.status + "</span>");
|
||||
$("#security_continue_err").show();
|
||||
},
|
||||
|
||||
usernameCheck: function(unameInput, errhint) {
|
||||
var unameVal = unameInput.val();
|
||||
var unameErr = false;
|
||||
if (unameVal == '') {
|
||||
unameInput.addClass("error");
|
||||
errhint.html("<span class='errhint'>Please enter a username.</span>");
|
||||
unameErr = true;
|
||||
} else if (unameVal.length < 4) {
|
||||
unameInput.addClass("error");
|
||||
errhint.html("<span class='errhint'>Username should have at least 4 characters.</span>");
|
||||
unameErr = true;
|
||||
}
|
||||
|
||||
if (unameErr == false) {
|
||||
unameInput.removeClass("error");
|
||||
errhint.html("<img src='../img/green_check_16px.png'></img>");
|
||||
}
|
||||
},
|
||||
|
||||
'#server_uname keyup': function(el, ev) {
|
||||
this.usernameCheck($("#server_uname"), $("#server_uname_err"));
|
||||
},
|
||||
|
||||
'#service_uname keyup': function(el, ev) {
|
||||
this.usernameCheck($("#service_uname"), $("#service_uname_err"));
|
||||
},
|
||||
|
||||
'#console_uname keyup': function(el, ev) {
|
||||
this.usernameCheck($("#console_uname"), $("#console_uname_err"));
|
||||
},
|
||||
|
||||
passwordCheck: function(pwdInput, confirmInput, errhint) {
|
||||
var passwordVal = pwdInput.val();
|
||||
var checkVal = confirmInput.val();
|
||||
var passwordErr = false;
|
||||
|
||||
if (passwordVal == '') {
|
||||
pwdInput.addClass("error");
|
||||
errhint.html("<span class='errhint'>Please enter a password.</span>");
|
||||
passwordErr = true;
|
||||
} else if (passwordVal.length < 4 || passwordVal.length > 10) {
|
||||
pwdInput.addClass("error");
|
||||
errhint.html("<span class='errhint'>Password should have 4-10 characters.</span>");
|
||||
passwordErr = true;
|
||||
} else if (checkVal == '') {
|
||||
confirmInput.addClass("error");
|
||||
pwdInput.removeClass("error");
|
||||
errhint.html("<span class='errhint'>Please re-enter your password.</span>");
|
||||
passwordErr = true;
|
||||
} else if (passwordVal != checkVal) {
|
||||
confirmInput.addClass("error");
|
||||
pwdInput.removeClass("error");
|
||||
errhint.html("<span class='errhint'>Passwords do not match.</span>");
|
||||
passwordErr = true;
|
||||
}
|
||||
if (passwordErr == false) {
|
||||
pwdInput.removeClass("error");
|
||||
confirmInput.removeClass("error");
|
||||
errhint.html("<img src='../img/green_check_16px.png'></img>");
|
||||
}
|
||||
},
|
||||
|
||||
'#server_pwd keyup': function(el, ev) {
|
||||
this.usernameCheck($("#server_uname"), $("#server_uname_err"));
|
||||
this.passwordCheck($("#server_pwd"), $("#server_confirm"), $("#server_pwd_err"));
|
||||
},
|
||||
|
||||
'#server_confirm keyup': function(el, ev) {
|
||||
this.usernameCheck($("#server_uname"), $("#server_uname_err"));
|
||||
this.passwordCheck($("#server_pwd"), $("#server_confirm"), $("#server_pwd_err"));
|
||||
},
|
||||
|
||||
'#service_pwd keyup': function(el, ev) {
|
||||
this.usernameCheck($("#service_uname"), $("#service_uname_err"));
|
||||
this.passwordCheck($("#service_pwd"), $("#service_confirm"), $("#service_pwd_err"));
|
||||
},
|
||||
|
||||
'#service_confirm keyup': function(el, ev) {
|
||||
this.usernameCheck($("#service_uname"), $("#service_uname_err"));
|
||||
this.passwordCheck($("#service_pwd"), $("#service_confirm"), $("#service_pwd_err"));
|
||||
},
|
||||
|
||||
'#console_pwd keyup': function(el, ev) {
|
||||
this.usernameCheck($("#console_uname"), $("#console_uname_err"));
|
||||
this.passwordCheck($("#console_pwd"), $("#console_confirm"), $("#console_pwd_err"));
|
||||
},
|
||||
|
||||
'#console_confirm keyup': function(el, ev) {
|
||||
this.usernameCheck($("#console_uname"), $("#console_uname_err"));
|
||||
this.passwordCheck($("#console_pwd"), $("#console_confirm"), $("#console_pwd_err"));
|
||||
},
|
||||
|
||||
'.security-back click': function(el, ev) {
|
||||
this.options.nav.gobackStep("2");
|
||||
return false;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.element.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.element.hide();
|
||||
}
|
||||
});
|
||||
});
|