diff options
Diffstat (limited to 'gui/app/views')
28 files changed, 2896 insertions, 0 deletions
diff --git a/gui/app/views/container.html b/gui/app/views/container.html new file mode 100644 index 000000000..b3d78bfb1 --- /dev/null +++ b/gui/app/views/container.html @@ -0,0 +1,134 @@ +<!--container management--> + +<div class="content"> + <div style="display:flex;flex-direction:row;"> + <div style="width:750px;"> + + <h3>{{envName}} -- Container + <!--<button class="btn btn-default" style="float:right">Go Next</button>--> + + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + + <hr/> + + <select ng-model="selectContainer" data-ng-options="container as container.name for container in containerList"> + <option value="">Choose...</option> + </select> + + <button class="btn btn-default" ng-click="createContainer()" ng-disabled="selectContainer==null"> + <div ng-show="!showloading">Create</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" /> + </button> + + <hr/> + + <div> + <h4 ng-show="displayContainerInfo.length==0">No Container Data</h4> + <div ng-show="displayContainerInfo.length!=0"> + <h4>Current Container</h4> + <table class="table table-striped"> + + <tr> + <th>name</th> + <th>status</th> + <th>time</th> + <th>delete</th> + + </tr> + <tr ng-repeat="con in displayContainerInfo"> + <td>{{con.name}}</td> + <td>{{con.status}}</td> + <td>{{con.time}}</td> + <td> + <button class="btn btn-default btn-sm" ng-click="openDeleteEnv(con.id,'container')">Delete</button> + </td> + + + </tr> + + + + </table> + </div> + </div> + + + + + + + + + + + </div> + + + </div> + +</div> +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 200px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + font-size: 12px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 15px; + height: 15px; + opacity: 0.8; + margin-left: -10px; + margin-top: -3px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + select { + height: 30px; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 135px; + margin-top: 20px; + margin-left: 20px; + } +</style> diff --git a/gui/app/views/content.html b/gui/app/views/content.html new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/gui/app/views/content.html diff --git a/gui/app/views/environmentDetail.html b/gui/app/views/environmentDetail.html new file mode 100644 index 000000000..4d5f21c68 --- /dev/null +++ b/gui/app/views/environmentDetail.html @@ -0,0 +1,143 @@ +<!--environment detail page--> + +<div class="content" style="overflow-x: scroll;"> + <div style="display:flex;flex-direction:row;"> + <div> + + + <h3> {{baseElementInfo.name}} -- Openrc + <button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button> + <button class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openDeleteEnv(1,'openrc')">Delete</button> + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + + + + <div> + + <button style="display:inline;" class="btn btn-default" ng-click="addEnvironment()" ng-show="uuid==null">Add Name</button> + </div> + + + + <hr/> + <div bs-tabs style="width:600px;"> + <div data-title="Detail" bs-pane ng-if="openrcInfo.openrc!=null"> + + <h4> + You have already set up the openrc parameters + </h4> + <hr /> + <div ng-repeat="(key,value) in openrcInfo.openrc"> + <nobr> + <font style="font-weight:600;font-size:14px;">{{key}} : </font> + <font style="font-size:14px;">{{value}}</font> + </nobr> + </div> + + </div> + <div data-title="Update" bs-pane> + + <div style="margin-top:20px;"> + <button class="btn btn-default" ng-click="addInfo()" style="margin-bottom:20px;">Add</button> + <div style="height:300px;width:800px;display:flex;flex-direction:column;flex-wrap:wrap;margin-left:5px;"> + <div ng-repeat="info in envInfo"> + <!--<div> {{info.name}}</div>--> + + <input class="edit-title" ng-model="info.name" ng-class="{'null-edit-title':info.name==null}" ng-attr-type="{{info.name.indexOf('PASSWORD')>-1 ? password : text}}" /> + + <div class="item-info"> + <input class="form-control" type="text" ng-model="info.value" /> + <!--<button class="delete-button" ng-click="deleteEnvItem($index)">delete</button>--> + <img src="images/close.png" ng-click="deleteEnvItem($index)" class="delete-img" /> + </div> + + + + </div> + </div> + <button class="btn btn-default" ng-click="submitOpenRcFile()" style="margin-bottom:20px;"> + <div ng-if="!showloading">submit</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" /> + </button> + + </div> + + </div> + <div data-title="Upload File" bs-pane> + <div style="margin-top:20px;height:405px;"> + <button class="btn btn-default" style="margin-bottom:20px;" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-size="5MB"> + <div ng-show="!loadingOPENrc">Upload</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" /> + </button> + + <!--<div ng-show="displayOpenrcFile!=null || displayOpenrcFile!=undefined"> + {{displayOpenrcFile.name}} last modified: {{filelastModified}} + </div>--> + </div> + </div> + </div> + + + + </div> + + + </div> + +</div> +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 200px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + font-size: 12px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 15px; + height: 15px; + opacity: 0.8; + margin-left: -10px; + margin-top: -3px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } +</style> diff --git a/gui/app/views/environmentList.html b/gui/app/views/environmentList.html new file mode 100644 index 000000000..29273a724 --- /dev/null +++ b/gui/app/views/environmentList.html @@ -0,0 +1,155 @@ +<div class="content"> + + <!--environmentList--> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + + <div> + + <h3>Environments + <button class="btn btn-default btn-sm" style="margin-left:30px;display:inline" ng-click="openEnvironmentDialog()">Add</button> + </h3> + <hr/> + + <!--<div ng-repeat="env in environmentList"> + {{env.name}} + </div>--> + <div dw-loading="key" dw-loading-options="{text:'loading'}"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;background-color: #f9f9f9;"> + <div style="font-weight:600">Name</div> + <div style="font-weight:600;margin-right:80px;">Action</div> + + </div> + + <div dir-paginate="env in environmentList | orderBy:'-id' | itemsPerPage: 10 "> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;"> + <div> <a style="color:#e95420" ng-click="gotoDetail('false',env.uuid)">{{env.name}}</a></div> + <div> + + <!-- <button class="btn btn-default btn-sm" ng-click="openDeleteEnv(env.uuid,'environment')">Delete</button> --> + + <div class="btn-group" uib-dropdown is-open="status.isopen" style="margin-right:60px;"> + <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle> + Modify <span class="caret"></span> + </button> + <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button"> + <li role="menuitem"><a ng-click="openDeleteEnv(env.uuid,'environment')">Delete</a></li> + <!-- <li role="menuitem"><a href="#">Another action</a></li> + <li role="menuitem"><a href="#">Something else here</a></li> + <li class="divider"></li> + <li role="menuitem"><a href="#">Separated link</a></li> --> + </ul> + </div> + </div> + + + + </div> + + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + </div> + + + + + + + + </div> + + + + +</div> + +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 300px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 19px; + height: 19px; + opacity: 0.8; + margin-left: 5px; + margin-top: 4px; + cursor: pointer; + } + + .deepColor { + background-color: #f9f9f9; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + } +</style> diff --git a/gui/app/views/layout/footer.html b/gui/app/views/layout/footer.html new file mode 100644 index 000000000..cfdf74af3 --- /dev/null +++ b/gui/app/views/layout/footer.html @@ -0,0 +1,5 @@ +<div class="footer"> + <div class="container"> + <p></p> + </div> +</div>
\ No newline at end of file diff --git a/gui/app/views/layout/header.html b/gui/app/views/layout/header.html new file mode 100644 index 000000000..033322a62 --- /dev/null +++ b/gui/app/views/layout/header.html @@ -0,0 +1,43 @@ +<div class="header"> + <div class="navbar navbar-default" role="navigation"> + <div> + <div class="navbar-header"> + + + + <a class="navbar-brand" href="#/">Yardstick</a> + </div> + + + </div> + </div> +</div> +</div> + +<style> + .header { + position: fixed; + top: 0px; + width: 100%; + /*box-shadow: 3px 2px 5px #888888;*/ + z-index: 9; + } + + .navbar { + position: relative; + min-height: 50px; + margin-bottom: 0px; + border: none; + /* border: 1px solid transparent; */ + } + + .navbar { + border-radius: 0px; + background-color: #e95420; + color: #fff; + } + + .navbar-default .navbar-brand { + color: #fff; + } +</style> diff --git a/gui/app/views/layout/sideNav.html b/gui/app/views/layout/sideNav.html new file mode 100644 index 000000000..42dcbbc6e --- /dev/null +++ b/gui/app/views/layout/sideNav.html @@ -0,0 +1,141 @@ +<div class="naviSide"> + + + + + <ul class="nav bs-sidenav"> + + <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> + <div class="panel panel-default "> + <div class="panel-heading " role="tab "> + <h4 class="panel-title "> + <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoProject();"> + Project + </a> + </h4> + + </div> + + </div> + </div> + <div class="panel-group" role="tablist" aria-multiselectable="true" bs-collapse style="margin-bottom:0px;" ng-model="activeStatus"> + <div class="panel panel-default"> + <div class="panel-heading" role="tab"> + <h4 class="panel-title"> + <a bs-collapse-toggle style=" text-decoration: none;"> + <div style="display:inline;" ng-click="gotoEnviron()">Environment </div> + <i class="fa fa-sort-asc" aria-hidden="true" style="margin-left: 71px;display:inline" ng-show="activeStatus==0"></i> + <i class="fa fa-sort-desc" aria-hidden="true" style="margin-left: 71px;display:inline" ng-show="activeStatus==-1"></i> + </a> + </h4> + </div> + <div class="panel-collapse" role="tabpanel" bs-collapse-target> + <div class="panel-body" style="border-top: 2px solid grey;text-align: right;cursor:pointer" ng-click="gotoOpenrcPage()" ng-class="{active:$state.includes('app.environmentDetail')}"> + Openrc + </div> + <div class="panel-body " style="border:none;text-align: right;cursor:pointer" ng-click="gotoUploadPage()" ng-class="{active:$state.includes('app.uploadImage')}"> + Image + </div> + <div class="panel-body " style="border:none;text-align: right;cursor:pointer" ng-click="gotoPodPage()" ng-class="{active:$state.includes('app.podUpload')}"> + Pod File + </div> + <div class="panel-body " style="border:none;text-align: right;cursor:pointer" ng-click="gotoContainerPage()" ng-class="{active:$state.includes('app.container')}"> + Container + </div> + <div class="panel-body " style="border:none;text-align: right;"> + Others + </div> + </div> + </div> + </div> + + <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> + <div class="panel panel-default "> + <div class="panel-heading " role="tab "> + <h4 class="panel-title "> + <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoTestcase()"> + Test Case + </a> + </h4> + + </div> + + </div> + </div> + + <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> + <div class="panel panel-default "> + <div class="panel-heading " role="tab "> + <h4 class="panel-title "> + <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoSuite()"> + Test Suite + </a> + </h4> + + </div> + + </div> + </div> + + + + </ul> + + + + + +</div> + + +<style> + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .naviSide { + height: 150%; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + width: 165px; + } + /* + a:hover { + width: 165px; + }*/ + + .nav>li>a:hover, + .nav>li>a:focus { + text-decoration: underline; + background-color: transparent; + } + + .active.panel-body { + background-color: #dfe3e4; + } +</style> diff --git a/gui/app/views/layout/sideNav2.html b/gui/app/views/layout/sideNav2.html new file mode 100644 index 000000000..104a9c6cf --- /dev/null +++ b/gui/app/views/layout/sideNav2.html @@ -0,0 +1,108 @@ +<div class="naviSide"> + + + <ul class="nav bs-sidenav"> + + <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> + <div class="panel panel-default "> + <div class="panel-heading " role="tab "> + <h4 class="panel-title "> + <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoProject();"> + Project + </a> + </h4> + + </div> + + </div> + </div> + <div class="panel-group" role="tablist" aria-multiselectable="false" bs-collapse style="margin-bottom:0px;"> + <div class="panel panel-default"> + <div class="panel-heading" role="tab"> + <h4 class="panel-title"> + <a bs-collapse-toggle style=" text-decoration: none;"> + <div style="display:inline;" ng-click="gotoEnviron()">Environment </div> + <!--<i class="fa fa-sort-asc" aria-hidden="true" style="margin-left: 71px;display:inline"></i>--> + </a> + </h4> + </div> + + </div> + </div> + + <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> + <div class="panel panel-default "> + <div class="panel-heading " role="tab "> + <h4 class="panel-title "> + <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoTestcase()"> + Test Case + </a> + </h4> + + </div> + + </div> + </div> + + <div class="panel-group " role="tablist " aria-multiselectable="true " bs-collapse style="margin-bottom:0px; "> + <div class="panel panel-default "> + <div class="panel-heading " role="tab "> + <h4 class="panel-title "> + <a bs-collapse-toggle style=" text-decoration: none;" ng-click="gotoSuite()"> + Test Suite + </a> + </h4> + + </div> + + </div> + </div> + + + + </ul> + +</div> + +<style> + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + width: 165px; + } + /*a:hover { + width: 165px; + }*/ + + .nav>li>a:hover, + .nav>li>a:focus { + text-decoration: underline; + background-color: transparent; + } +</style> diff --git a/gui/app/views/main.html b/gui/app/views/main.html new file mode 100644 index 000000000..d5f7a3af3 --- /dev/null +++ b/gui/app/views/main.html @@ -0,0 +1,174 @@ +<div> + <div ng-include="'views/layout/header.html'"></div> +</div> +<div ng-include="'views/layout/sideNav.html'"></div> + + +<div style="margin-top:80px;margin-left:100px;display:flex;flex-direction:row"> + <!--<div ncy-breadcrumb></div>--> + <div> + <ol class="progressDefine"> + <li data-step="1" ng-click="gotoProject();" style="cursor:pointer" ng-class="{'is-complete':projectShow}"> + Project + </li> + <li data-step="2" ng-class="{'is-complete':taskShow}"> + Task + </li> + + <li data-step="3" ng-class="{'progressDefine__last':reportShow}"> + Reporting + </li> + + </ol> + </div> + + +</div> + + + + + + + + + +<div ui-view></div> + + + +<style> + .stepsContent { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-left: 120px; + margin-top: 100px; + } + + .stepItem { + display: flex; + flex-direction: column; + } + + .nextButton { + margin-left: 500px; + } + + .progressDefine { + list-style: none; + margin: 0; + padding: 0; + display: table; + table-layout: fixed; + width: 100%; + color: #849397; + } + + .progressDefine>li { + position: relative; + display: table-cell; + text-align: center; + font-size: 0.8em; + } + + .progressDefine>li:before { + content: attr(data-step); + display: block; + margin: 0 auto; + background: #DFE3E4; + width: 3em; + height: 3em; + text-align: center; + margin-bottom: 0.25em; + line-height: 3em; + border-radius: 100%; + position: relative; + z-index: 5; + } + + .progressDefine>li:after { + content: ''; + position: absolute; + display: block; + background: #DFE3E4; + width: 100%; + height: 0.5em; + top: 1.25em; + left: 50%; + margin-left: 1.5em\9; + z-index: -1; + } + + .progressDefine>li:last-child:after { + display: none; + } + + .progressDefine>li.is-complete { + color: #e95420; + } + + .progressDefine>li.is-complete:before, + .progressDefine>li.is-complete:after { + color: #FFF; + background: #e95420; + } + + .progressDefine>li.is-active { + color: #3498DB; + } + + .progressDefine>li.is-active:before { + color: #FFF; + background: #3498DB; + } + /** + * Needed for IE8 + */ + + .progressDefine__last:after { + display: none !important; + } + /** + * Size Extensions + */ + + .progressDefine--medium { + font-size: 1.5em; + } + + .progressDefine--large { + font-size: 2em; + } + /** + * Some Generic Stylings + */ + + *, + *:after, + *:before { + box-sizing: border-box; + } + + h1 { + margin-bottom: 1.5em; + } + + .progressDefine { + margin-bottom: 3em; + } + + a { + color: #3498DB; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + /* + body { + text-align: center; + color: #444; + }*/ +</style> diff --git a/gui/app/views/main2.html b/gui/app/views/main2.html new file mode 100644 index 000000000..661d604c6 --- /dev/null +++ b/gui/app/views/main2.html @@ -0,0 +1,174 @@ +<div> + <div ng-include="'views/layout/header.html'"></div> +</div> +<div ng-include="'views/layout/sideNav2.html'"></div> + + +<div style="margin-top:80px;margin-left:220px;"> + <!--<div ncy-breadcrumb></div>--> + <div> + <ol class="progressDefine"> + <li data-step="1" ng-click="gotoProject();" style="cursor:pointer" ng-class="{'is-complete':projectShow}"> + Project + </li> + <li data-step="2" ng-class="{'is-complete':taskShow}"> + Task + </li> + + <li data-step="3" ng-class="{'is-complete':reportShow}"> + Reporting + </li> + + </ol> + </div> + + +</div> + + + + + + + + + +<div ui-view></div> + + + +<style> + .stepsContent { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-left: 120px; + margin-top: 100px; + } + + .stepItem { + display: flex; + flex-direction: column; + } + + .nextButton { + margin-left: 500px; + } + + .progressDefine { + list-style: none; + margin: 0; + padding: 0; + display: table; + table-layout: fixed; + width: 100%; + color: #849397; + } + + .progressDefine>li { + position: relative; + display: table-cell; + text-align: center; + font-size: 0.8em; + } + + .progressDefine>li:before { + content: attr(data-step); + display: block; + margin: 0 auto; + background: #DFE3E4; + width: 3em; + height: 3em; + text-align: center; + margin-bottom: 0.25em; + line-height: 3em; + border-radius: 100%; + position: relative; + z-index: 5; + } + + .progressDefine>li:after { + content: ''; + position: absolute; + display: block; + background: #DFE3E4; + width: 100%; + height: 0.5em; + top: 1.25em; + left: 50%; + margin-left: 1.5em\9; + z-index: -1; + } + + .progressDefine>li:last-child:after { + display: none; + } + + .progressDefine>li.is-complete { + color: #e95420; + } + + .progressDefine>li.is-complete:before, + .progressDefine>li.is-complete:after { + color: #FFF; + background: #e95420; + } + + .progressDefine>li.is-active { + color: #3498DB; + } + + .progressDefine>li.is-active:before { + color: #FFF; + background: #3498DB; + } + /** + * Needed for IE8 + */ + + .progressDefine__last:after { + display: none !important; + } + /** + * Size Extensions + */ + + .progressDefine--medium { + font-size: 1.5em; + } + + .progressDefine--large { + font-size: 2em; + } + /** + * Some Generic Stylings + */ + + *, + *:after, + *:before { + box-sizing: border-box; + } + + h1 { + margin-bottom: 1.5em; + } + + .progressDefine { + margin-bottom: 3em; + } + + a { + color: #3498DB; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + /* + body { + text-align: center; + color: #444; + }*/ +</style> diff --git a/gui/app/views/modal/chooseContainer.html b/gui/app/views/modal/chooseContainer.html new file mode 100644 index 000000000..4b857b22f --- /dev/null +++ b/gui/app/views/modal/chooseContainer.html @@ -0,0 +1,15 @@ +<h3>Choose Containers</h3> +<hr/> + + + +<style> + select { + height: 30px; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 135px; + margin-top: 20px; + margin-left: 20px; + } +</style>
\ No newline at end of file diff --git a/gui/app/views/modal/deleteConfirm.html b/gui/app/views/modal/deleteConfirm.html new file mode 100644 index 000000000..1659b884b --- /dev/null +++ b/gui/app/views/modal/deleteConfirm.html @@ -0,0 +1,19 @@ +<div>Confirm delete {{deleteName}} ?</div> + +<div style="display:flex;flex-direction:row; margin-left: 150px;margin-top: 30px;"> + <button class="btn btn-default" ng-click="deleteEnv()" ng-show="deleteName=='environment'">Confirm</button> + <button class="btn btn-default" ng-click="deleteProject()" ng-show="deleteName=='project'">Confirm</button> + <button class="btn btn-default" ng-click="deleteTask()" ng-show="deleteName=='task'">Confirm</button> + <button class="btn btn-default" ng-click="deleteTestCase()" ng-show="deleteName=='test case'">Confirm</button> + <button class="btn btn-default" ng-click="deleteSuite()" ng-show="deleteName=='test suite'">Confirm</button> + <button class="btn btn-default" ng-click="deleteContainer()" ng-show="deleteName=='container'">Confirm</button> + <button class="btn btn-default" ng-click="deletePod()" ng-show="deleteName=='pod'">Confirm</button> + <button class="btn btn-default" ng-click="deleteOpenRc()" ng-show="deleteName=='openrc'">Confirm</button> + + + + + + <button class="btn btn-default" style="margin-left:10px;" ng-click="closeThisDialog()">Cancel</button> + +</div>
\ No newline at end of file diff --git a/gui/app/views/modal/environmentDialog.html b/gui/app/views/modal/environmentDialog.html new file mode 100644 index 000000000..a5b88d240 --- /dev/null +++ b/gui/app/views/modal/environmentDialog.html @@ -0,0 +1,330 @@ +<!--environment input dialog--> + +<div> + <div ng-if="uuidEnv==null"> + <h4>Environment Name</h4> + <input type="text" ng-model="name" style="width:300px;" /> + + <div style="text-align:center;margin-top:20px;"> + <button class="btn btn-default" ng-disabled=" name==null || name==''" ng-click="addEnvironment(name)">Create</button> + </div> + </div> + + + <div style="display:flex;flex-direction:row;" ng-if="uuidEnv!=null&&showImage==null"> + <div> + <h3> {{name}} -- Openrc + <!--<button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button>--> + <button class="btn btn-default" ng-click="goToImage()" style="margin-bottom:20px;float:right" ng-disabled="showNextOpenRc==null && showNextOpenRc==null "> + Next + </button> + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + <div> + + <!--<button style="display:inline;" class="btn btn-default" ng-click="addEnvironment()" ng-show="uuid==null">Add Name</button>--> + </div> + + <hr/> + <div bs-tabs style="width:750px;"> + <div data-title="Detail" bs-pane ng-if="openrcInfo.openrc!=null"> + + <h4> + You have already set up the openrc parameters + </h4> + <hr /> + <div ng-repeat="(key,value) in openrcInfo.openrc"> + <nobr> + <font style="font-weight:600;font-size:14px;">{{key}} : </font> + <font style="font-size:14px;">{{value}}</font> + </nobr> + </div> + + </div> + <div data-title="Update" bs-pane> + + <div style="margin-top:20px;"> + <button class="btn btn-default" ng-click="addInfo()" style="margin-bottom:20px;">Add</button> + <div style="height:300px;width:800px;display:flex;flex-direction:column;flex-wrap:wrap;margin-left:5px;overflow-x:scroll"> + <div ng-repeat="info in envInfo"> + <!--<div> {{info.name}}</div>--> + + <input class="edit-title" ng-model="info.name" ng-class="{'null-edit-title':info.name==null}" ng-attr-type="{{info.name.indexOf('PASSWORD')>-1 ? password : text}}" /> + + <div class="item-info"> + <input class="form-control" type="text" ng-model="info.value" /> + <!--<button class="delete-button" ng-click="deleteEnvItem($index)">delete</button>--> + <img src="images/close.png" ng-click="deleteEnvItem($index)" class="delete-img" /> + </div> + + + + </div> + </div> + <button class="btn btn-default" ng-click="submitOpenRcFile();" style="margin-bottom:20px;"> + <div ng-if="!showloading">Submit</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" /> + </button> + + + </div> + + </div> + <div data-title="Upload File" bs-pane> + <div style="margin-top:20px;height:405px;"> + <button class="btn btn-default" style="margin-bottom:20px;" ngf-select="uploadFiles($file, $invalidFiles);" ngf-max-size="5MB"> + <div ng-show="!loadingOPENrc">Upload</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" /> + </button> + <!--<button class="btn btn-default" style="margin-bottom:20px;" ng-disabled="showNextOpenRc==null" ng-click="goToImage()"> + Next + </button>--> + + <!--<div ng-if="displayOpenrcFile!=null || displayOpenrcFile!=undefined"> + {{displayOpenrcFile.name}} last modified: {{filelastModified}} + </div>--> + </div> + </div> + </div> + + + + </div> + + + </div> + + <div ng-if="showImage==1&&showPod==null"> + <div style="display:flex;flex-direction:row;"> + <div style="width:750px;"> + + <h3>{{name}} -- Image + + <button class="btn btn-default" ng-click="goToPod()" ng-disabled="showNextPod==null" style="float:right"> + Next + </button> + <button class="btn btn-default" ng-click="goToPodPrev()" style="margin-right:5px;float:right"> + Previous + </button> + + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + + <hr/> + + <button class="btn btn-default" ng-click="uploadImage()"> + <div ng-if="!showloading">Load Image</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" /> + + </button> + + <i class="fa fa-check" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==1&&showImageStatus==1">done</i> + <i class="fa fa-spinner" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==0&&showImageStatus==1">loading</i> + <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: red;" ng-show="imageStatus==2&&showImageStatus==1">error</i> + + + <!--<button class="btn btn-default" ng-click="goToPod()" ng-disabled="showNextPod==null"> + Next + </button>--> + <hr> + <h4>Current Images</h4> + + <div> + <table class="table table-striped"> + + <tr> + <th>name</th> + <th>size</th> + <th>status</th> + <th>time</th> + </tr> + <tr ng-repeat="image in imageListData"> + <td>{{image.name}}</td> + <td>{{image.size/1024}} mb</td> + <td>{{image.status}}</td> + <td>{{image.time}}</td> + + </tr> + + + + </table> + </div> + + + </div> + + + </div> + </div> + + <div ng-if="showPod==1&&showContainer==null"> + <div style="display:flex;flex-direction:row;"> + <div style="width:750px;"> + + + <h3>{{name}} -- Pod File + <div style="float:right"> + <button class="btn btn-default" ng-click="skipPodPrev()">Previous</button> + <button class="btn btn-default" ng-click="skipPod()" ng-show="podData==null">Skip</button> + <button class="btn btn-default" ng-click="skipPod()" ng-show="podData!=null">Next</button> + + </div> + + </h3> + + <hr/> + + <button class="btn btn-default" ngf-select="uploadFilesPod($file, $invalidFiles)" ngf-max-size="5MB"> + <div ng-show="!loadingOPENrc">Upload</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" /> + </button> + + + <hr/> + + <div> + <h4>Current Pod Configuration</h4> + <table class="table table-striped"> + + <tr> + <th>ip</th> + <th>name</th> + <th>password</th> + <th>role</th> + <th>user</th> + </tr> + <tr ng-repeat="pod in podData.pod.nodes"> + <td>{{pod.ip}}</td> + <td>{{pod.name}}</td> + <td>{{pod.password}}</td> + <td>{{pod.role}}</td> + <td>{{pod.user}}</td> + + </tr> + <tr ng-show="podData.length==0"> + <td>no data</td> + + </tr> + + + + </table> + </div> + + + + + + + + + + + </div> + + + </div> + + </div> + + <div ng-if="showContainer!=null"> + <div style="display:flex;flex-direction:row;"> + <div style="width:750px;"> + + <h3>{{name}} -- Container + <div style="float:right"> + <button class="btn btn-default" ng-click="skipContainerPrev()">Previous</button> + <button class="btn btn-default" ng-click="skipContainer()" ng-show="ifskipOrClose!=1"> + Skip + </button> + <button class="btn btn-default" ng-click="closeThisDialog(); getEnvironmentList();" ng-show="ifskipOrClose==1"> + Close + </button> + </div> + <!--<button class="btn btn-default" style="float:right">Go Next</button>--> + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + + <hr/> + + <select ng-model="selectContainer" data-ng-options="container as container.name for container in containerList"> + <option value="">Choose...</option> + </select> + + <button class="btn btn-default" ng-click="createContainer(selectContainer)" ng-disabled="selectContainer==null"> + <div ng-show="!showloading">Create</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" /> + </button> + <!--<button class="btn btn-default" ng-click="skipContainer()" ng-show="ifskipOrClose!=1"> + Skip + </button> + <button class="btn btn-default" ng-click="closeThisDialog(); getEnvironmentList();" ng-show="ifskipOrClose==1"> + Close + </button>--> + + <hr/> + + <div> + <h4>Current Contain</h4> + <table class="table table-striped"> + + <tr> + <th>name</th> + <th>status</th> + <th>time</th> + + </tr> + <tr ng-repeat="con in displayContainerInfo"> + <td>{{con.name}}</td> + <td>{{con.status}}</td> + <td>{{con.time}}</td> + + + </tr> + + + + </table> + </div> + + + + + + + + + + + </div> + + + </div> + + </div> + + + + + + +</div> + + +<style> + input { + border-radius: 10px; + border: 1px solid #eeeeee; + width: 100%; + } + + select { + height: 30px; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 135px; + margin-top: 20px; + margin-left: 20px; + } +</style> diff --git a/gui/app/views/modal/projectCreate.html b/gui/app/views/modal/projectCreate.html new file mode 100644 index 000000000..74839e798 --- /dev/null +++ b/gui/app/views/modal/projectCreate.html @@ -0,0 +1,21 @@ +<div> + + <h4>Enter Project Name</h4> + <input type="text" ng-model="name" /> + + <div style="text-align:center;margin-top:20px;"> + <button class="btn btn-default" ng-disabled=" name==null || name==''" ng-click="createName(name)">Create</button> + </div> + + + +</div> + + +<style> + input { + border-radius: 10px; + border: 1px solid #eeeeee; + width: 100%; + } +</style> diff --git a/gui/app/views/modal/suiteName.html b/gui/app/views/modal/suiteName.html new file mode 100644 index 000000000..981d24210 --- /dev/null +++ b/gui/app/views/modal/suiteName.html @@ -0,0 +1,18 @@ +<h4>Enter Suite Name</h4> +<hr/> You have choose: +<div ng-repeat="selected in suitReconstructList">{{selected}}</div> +<hr/> +<input type="text" ng-model="name" /> + +<div style="text-align:center;margin-top:20px;"> + <button class="btn btn-default" ng-disabled="testsuiteList.length==0 || name==null || name==''" ng-click="createSuite(name)">Create</button> +</div> + + +<style> + input { + border-radius: 10px; + border: 1px solid #eeeeee; + width: 100%; + } +</style> diff --git a/gui/app/views/modal/taskCreate.html b/gui/app/views/modal/taskCreate.html new file mode 100644 index 000000000..e7812cf2b --- /dev/null +++ b/gui/app/views/modal/taskCreate.html @@ -0,0 +1,134 @@ + +<h4>Create Task</h4> +<hr/> +<div> + <div style="display:inline">Name <input type="text" ng-model="name" style="width:200px" /></div> + <button style="display:inline" class="btn btn-default" ng-disabled="name==null || name==''" ng-click="createTask(name)" ng-show="newUUID==null">Create</button> +</div> +<hr/> + +<div bs-tabs ng-show="newUUID!=null"> + <div data-title="Environment" bs-pane> + <div style="margin-top:10px" ng-show="displayEnvName!=null"> + <div style="display:inline">Choose Environment : {{displayEnvName}}</div> + <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="addEnvToTask()">confirm</button> + </div> + <hr /> + <div dir-paginate="env in environmentList | orderBy:'-id' | itemsPerPage: 10 "> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}"> + <div> {{env.name}}</div> + <!--<button class="btn btn-default btn-sm" ng-click="gotoDetail('false',env.uuid)">detail</button>--> + <img src="images/checkyes.png" style="height:18px;cursor:pointer" ng-click="constructTestSuit(env.uuid,env.name)" ng-show="selectEnv==env.uuid" /> + <img src="images/checkno.png" style="height:18px;cursor:pointer" ng-click="constructTestSuit(env.uuid,env.name)" ng-show="selectEnv!=env.uuid" /> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + + </div> + <div data-title="Content" bs-pane> + <div style="display:flex;flex-direction:row"> + <div style="margin-top:20px;">Source of Content</div> + + + <select ng-model="selectType" ng-change="triggerContent(selectType)" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> + <option value="">Choose...</option> + </select> + + </div> + <div style="margin-top:10px" ng-show="selectCase!=null"> + <div style="display:inline">Choose Source: {{selectCase}}</div> + <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="confirmAddCaseOrSuite(contentInfo)">Confirm</button> + <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="getTestDeatil()">Edit</button> + </div> + <hr/> + + <div ng-show="displayTable==true"> + <div ng-show="testcaselist.testcases.length!=0 && selectType.name=='Test Case'"> + <div dir-paginate="test in testcaselist.testcases | itemsPerPage: 10" pagination-id="testcase"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}"> + <div> {{test.Name}}</div> + <div style="font-size:10px;">{{test.Description}}</div> + <img src="images/checkyes.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(test.Name)" ng-show="selectCase==test.Name" /> + <img src="images/checkno.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(test.Name)" ng-show="selectCase!=test.Name" /> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls pagination-id="testcase"></dir-pagination-controls> + </center> + </div> + + <div ng-show="testsuitlist.length!=0 && selectType.name=='Test Suite'"> + <div dir-paginate="suite in testsuitlist | itemsPerPage: 10" pagination-id="testsuite"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}"> + <div> {{suite}}</div> + + <img src="images/checkyes.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(suite)" ng-show="selectCase==suite" /> + <img src="images/checkno.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(suite)" ng-show="selectCase!=suite" /> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls pagination-id="testsuite"></dir-pagination-controls> + </center> + </div> + </div> + + <div ng-show="displayTable==false"> + <textarea ng-model="contentInfo" spellcheck="false"> + + + </textarea> + + + </div> + + + + + </div> +</div> + +<div style="text-align:center;margin-top:20px;"> + <button class="btn btn-default" ng-click="closeThisDialog()" ng-disabled="newUUID===null || ifHasEnv!=true || (ifHasCase!=true && ifHasSuite!=true)">Close</button> + <button class="btn btn-default" ng-disabled="newUUID===null || ifHasEnv!=true || (ifHasCase!=true && ifHasSuite!=true)" ng-click="runAtask(newUUID)">Run</button> +</div> + + +<style> + input { + border-radius: 10px; + border: 1px solid #eeeeee; + width: 100%; + } + + .deepColor { + background-color: #f9f9f9; + } + + select { + height: 30px; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 135px; + margin-top: 20px; + margin-left: 20px; + } + + textarea { + width: 100%; + height: 400px; + border-radius: 5px; + border: 1px solid #e8e8e8; + } + + .deepColor { + background-color: #f9f9f9; + } +</style> diff --git a/gui/app/views/podupload.html b/gui/app/views/podupload.html new file mode 100644 index 000000000..99e83aca2 --- /dev/null +++ b/gui/app/views/podupload.html @@ -0,0 +1,136 @@ +<!--pod file upload--> + +<div class="content"> + <div style="display:flex;flex-direction:row;"> + <div style="width:750px;"> + <!--<i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i>--> + + + <h3>{{name}} -- Pod File + <button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button> + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + + <hr/> + + <button class="btn btn-default" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-size="5MB"> + <div ng-show="!loadingOPENrc">Upload</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" /> + </button> + <button class="btn btn-default" ng-click="openDeleteEnv(1,'pod')">Delete</button> + + <!--<div ng-show="displayOpenrcFile!=null || displayOpenrcFile!=undefined ||podData.pod.nodes!=null "> + {{displayOpenrcFile.name}} last modified: {{filelastModified}} + </div>--> + + <hr/> + + <div> + <h4 ng-show="podData.pod.nodes==null">No Pod Configuration</h4> + <div ng-show="podData.pod.nodes!=null"> + <h4>Current Pod Configuration</h4> + <table class="table table-striped"> + + <tr> + <th>ip</th> + <th>name</th> + <th>password</th> + <th>role</th> + <th>user</th> + </tr> + <tr ng-repeat="pod in podData.pod.nodes"> + <td>{{pod.ip}}</td> + <td>{{pod.name}}</td> + <td>{{pod.password}}</td> + <td>{{pod.role}}</td> + <td>{{pod.user}}</td> + + </tr> + + + + </table> + </div> + </div> + + + + + + + + + + + </div> + <!--<div style="margin-top:60px;margin-left:67px;"> + <h3>Openrc parameters</h3> + <div> + You have already set up the openrc parameters + </div> + <div ng-repeat="(key,value) in openrcInfo.openrc"> + <nobr> + <font style="font-weight:600;font-size:15px;">{{key}} : </font> + <font style="font-size:15px;">{{value}}</font> + </nobr> + </div> + </div>--> + + </div> + +</div> +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 200px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + font-size: 12px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 15px; + height: 15px; + opacity: 0.8; + margin-left: -10px; + margin-top: -3px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } +</style> diff --git a/gui/app/views/projectList.html b/gui/app/views/projectList.html new file mode 100644 index 000000000..ea6e63d6b --- /dev/null +++ b/gui/app/views/projectList.html @@ -0,0 +1,57 @@ +<div class="content"> + + <h3>Projects + <button class="btn btn-default btn-sm" style="margin-left:30px;" ng-click="openCreateProject()">Create</button> + </h3> + + <hr/> + + + + <div dw-loading="key" dw-loading-options="{text:'loading'}"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;background-color:#f9f9f9;"> + <div style="font-weight:600">Name</div> + <div style="font-weight:600;margin-right:4px;">Action</div> + + </div> + + <div dir-paginate="project in projectListData | orderBy:'-id' | itemsPerPage: 10 "> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;"> + <div> + <a ng-click="gotoDetail(project.uuid)" style="color:#e95420"> {{project.name}}</a> + </div> + <div> + <!-- <button class="btn btn-default btn-sm" ng-click="gotoDetail(project.uuid)">Detail</button> --> + <!--<button class="btn btn-default btn-sm" ng-click="openDeleteEnv(project.uuid,'project')">Delete</button>--> + <div class="btn-group" uib-dropdown is-open="status.isopen" style="margin-right:20px;"> + <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle> + Modify <span class="caret"></span> + </button> + <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button"> + <li role="menuitem" ng-show="task.status!=0"><a ng-click="openDeleteEnv(project.uuid,'project')">delete</a></li> + + + </ul> + </div> + </div> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + + </div> + + +</div> + +<toaster-container></toaster-container> + + +<style> + .deepColor { + background-color: #f9f9f9; + } +</style> diff --git a/gui/app/views/projectdetail.html b/gui/app/views/projectdetail.html new file mode 100644 index 000000000..ff61c5fed --- /dev/null +++ b/gui/app/views/projectdetail.html @@ -0,0 +1,97 @@ +<div class="content"> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + + <h3>Project -- Task + + </h3> + + <hr/> + + <div> + + <h4>{{projectData.name}}</h4> + <h5>{{projectData.time}}</h5> + <hr/> + <h4>Tasks + <button class="btn btn-default btn-sm" style="margin-left:30px;" ng-click="openCreate()">Create</button> + </h4> + <div ng-show="projectData.tasks.length==0">No task in this project</div> + <table class="table " width="100%" dw-loading="key" dw-loading-options="{text:'loading'}"> + <tr style="background-color:#f9f9f9"> + <td style="font-weight:700">Name</td> + <td style="font-weight:700"> Status</td> + <td style="font-weight:700">Action</td> + </tr> + <tr dir-paginate="task in finalTaskListDisplay | orderBy:'-id' | itemsPerPage: 6 " pagination-id="table"> + + <td width="10%"> <a ng-click="gotoDetail(task.uuid)" style="color:#e95420"> {{task.name}} </a></td> + <td width="40%"> + <div class="progree-parent" ng-show="task.status!=2"> + <div class="progree-child" ng-style="{'width':task.stausWidth}"> + </div> + </div> + <div class="progree-parent" ng-show="task.status==2" style="background-color:red"> + <div class="progree-child" style="width:0"> + </div> + </div> + </td> + + + <td width="50%"> + + <div class="btn-group" uib-dropdown is-open="status.isopen" style="margin-right:20px;"> + <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle> + Modify <span class="caret"></span> + </button> + <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button"> + <li role="menuitem" ng-show="task.status!=0"><a ng-click="runAtaskForTable(task.uuid)">run</a></li> + + <li role="menuitem" ng-show="task.status!=0"><a ng-click="gotoModify(task.uuid)">modify</a></li> + <li role="menuitem" ng-show="task.status!=-1 && task.status!=0"><a ng-click="gotoReport(task.uuid)" style="color:#2ecc71">reporting</a></li> + <li role="menuitem"><a ng-click="openDeleteEnv(task.uuid,'task')">delete</a></li> + + + </ul> + </div> + <!-- <button class="btn btn-default btn-sm" ng-click="runAtask(task.uuid)" ng-disabled="task.status!=-1">run</button> + <button class="btn btn-default btn-sm" ng-click="gotoDetail(task.uuid)">detail</button> + <button class="btn btn-default btn-sm" ng-click="gotoModify(task.uuid)" ng-disabled="task.status==0">modify</button> + <button class="btn btn-default btn-sm" ng-click="gotoReport(task.uuid)" style="color:#2ecc71" ng-disabled="task.status==-1 || task.status==0">reporting</button> + <button class="btn btn-default btn-sm" ng-click="openDeleteEnv(task.uuid,'task')">delete</button> --> + + </td> + + </tr> + </table> + + + + </div> + <center> + <dir-pagination-controls pagination-id="table"></dir-pagination-controls> + </center> + +</div> + + + +</div> + +<toaster-container></toaster-container> + +<style> + .progree-parent { + width: 50%; + background-color: #dfe3e4; + height: 10px; + border-radius: 10px; + } + + .progree-child { + width: 50%; + background-color: #2ecc71; + /* background-color: white; */ + height: 10px; + border-radius: 5px; + } +</style> diff --git a/gui/app/views/report.html b/gui/app/views/report.html new file mode 100644 index 000000000..78ac6a0c9 --- /dev/null +++ b/gui/app/views/report.html @@ -0,0 +1,56 @@ +<div class="content"> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + <h3>Yardstick Report </h3> + <hr/> + <div> + + <div>Task ID : {{result.result.task_id}} </div> + <div style="margin-top:5px;">Criteria : + <font style="color:#2ECC71" ng-show="result.result.criteria=='PASS'"> {{result.result.criteria}}</font> + <font style="color:red" ng-show="result.result.criteria=='FAIL'"> {{result.result.criteria}}</font> + </div> + <hr/> + <caption>Information</caption> + <table class="table table-striped"> + <tr> + <th>#</th> + <th>key</th> + <th>value</th> + </tr> + <tbody> + <tr ng-repeat="(key,value) in result.result.info"> + <td>{{$index}}</td> + <td>{{key}}</td> + <td>{{value}}</td> + </tr> + + </tbody> + </table> + <hr/> + + <caption>Test Cases</caption> + <table class="table table-striped"> + <tr> + <th>#</th> + <th>key</th> + + <th>value</th> + <th>grafana</th> + </tr> + <tbody> + <tr ng-repeat="(key,value) in result.result.testcases"> + <td>{{$index}}</td> + <td>{{key}}</td> + + <td>{{value.criteria}}</td> + <td> <button class="btn btn-default btn-sm" ng-click="goToExternal(key)"> grafana</button></td> + </tr> + </tbody> + </table> + + </div> +</div> + + + +</div> diff --git a/gui/app/views/suite.html b/gui/app/views/suite.html new file mode 100644 index 000000000..8e1348333 --- /dev/null +++ b/gui/app/views/suite.html @@ -0,0 +1,149 @@ +<div class="content"> + <!--suitelist--> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + + <div> + Test Suites + <button class="btn btn-default" style="margin-left:20px;" ng-click="gotoCreateSuite()"> + Create + + </button> + + <!--<div ng-show="displayOpenrcFile!=null || displayOpenrcFile!=undefined"> + {{displayOpenrcFile.name}} last modified: {{filelastModified}} + </div>--> + <hr/> + + <!--<div ng-repeat="env in environmentList"> + {{env.name}} + </div>--> + <div dw-loading="key" dw-loading-options="{text:'loading'}"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;background-color: #f9f9f9;" > + <div style="font-weight:600">Name</div> + <div style="font-weight:600;margin-right:4px;">Operate</div> + + </div> + + + <div dir-paginate="suite in testsuitlist | itemsPerPage: 10"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;"> + <div> + <a style="color:#e95420" ng-click="gotoDetail(suite)"> {{suite}} + </a> + </div> + <div> + <!-- <button class="btn btn-default btn-sm" ng-click="gotoDetail(suite)">Detail</button> --> + <button class="btn btn-default btn-sm" ng-click="openDeleteEnv(suite,'test suite')">Delete</button> + </div> + + </div> + + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + </div> + + + + + + + + + </div> + + + + +</div> + +<toaster-container></toaster-container> + +<style> + .deepColor { + background-color: #f9f9f9; + } + + .form-control { + border-radius: 5px; + width: 300px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 19px; + height: 19px; + opacity: 0.8; + margin-left: 5px; + margin-top: 4px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + } +</style> diff --git a/gui/app/views/suitedetail.html b/gui/app/views/suitedetail.html new file mode 100644 index 000000000..6122f6560 --- /dev/null +++ b/gui/app/views/suitedetail.html @@ -0,0 +1,110 @@ +<div class="content"> + <!--testcaselist--> + <div> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + + <h3>Detail</h3> + <hr/> + + <textarea ng-model="suiteinfo" spellcheck="false"> + + </textarea> + + + + + + + + </div> + + + + +</div> + +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 300px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 19px; + height: 19px; + opacity: 0.8; + margin-left: 5px; + margin-top: 4px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + } +</style> diff --git a/gui/app/views/taskList.html b/gui/app/views/taskList.html new file mode 100644 index 000000000..159fed5c9 --- /dev/null +++ b/gui/app/views/taskList.html @@ -0,0 +1,62 @@ +<div class="content"> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + <h3>Detail</h3> + <hr/> + <div style="display:flex;flex-direction:row"> + <div> + <h4>{{taskDetailData.name}}</h4> + <div style="margin-top:5px;">{{taskDetailData.time}}</div> + </div> + <div class="progree-parent" ng-show="taskDetailData.status!=2" style="margin-top:34px;margin-left:30px;"> + <div class="progree-child" ng-style="{'width':taskDetailData.stausWidth}"> + </div> + + </div> + <div class="progree-parent" ng-show="taskDetailData.status==2" style="background-color:red;margin-top:34px;margin-left:30px;"> + <div class="progree-child" style="width:0"> + </div> + </div> + <i class="fa fa-check" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="taskDetailData.status==1">finish</i> + <i class="fa fa-spinner" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="taskDetailData.status==0">runing</i> + <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: red;" ng-show="taskDetailData.status==2">failed</i> + </div> + + <div style="margin-top:5px;">Environment : {{displayEnv.name}} </div> + <div ng-show="taskDetailData.case_name!=false" style="margin-top:5px;margin-bottom:5px;"> Name : {{taskDetailData.case_name}}</div> + <textarea ng-model="taskDetailData.content" spellcheck="false"> + + </textarea> + + <div style="text-align:center;margin-top:20px;"> + <button class="btn btn-default" ng-click="createTask(name)" ng-show="">Run</button> + </div> +</div> + + +<style> + input { + border-radius: 10px; + border: 1px solid #eeeeee; + width: 100%; + } + + select { + height: 30px; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 135px; + margin-top: 20px; + margin-left: 20px; + } + + textarea { + width: 100%; + height: 350px; + border-radius: 5px; + border: 1px solid #e8e8e8; + } + + .content { + height: 90%; + } +</style> diff --git a/gui/app/views/taskmodify.html b/gui/app/views/taskmodify.html new file mode 100644 index 000000000..a4593f745 --- /dev/null +++ b/gui/app/views/taskmodify.html @@ -0,0 +1,162 @@ +<div class="content"> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + <h4>Modify </h4> + + <hr/> + + <div> + <div style="display:inline">Name <input type="text" ng-model="taskDetailData.name" style="width:200px" /></div> + + <button class="btn btn-default" ng-click="runAtask()" style="float:right;margin-right:10px;">Run</button> + </div> + <hr/> + + <div bs-tabs> + <div data-title="Environment" bs-pane> + <div style="margin-top:10px"> + <div style="display:inline">Choose Environment : {{envName}}</div> + <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="addEnvToTask()">Confirm</button> + </div> + <hr /> + <div dir-paginate="env in environmentList | orderBy:'-id' | itemsPerPage: 10 "> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}"> + <div> {{env.name}}</div> + <!--<button class="btn btn-default btn-sm" ng-click="gotoDetail('false',env.uuid)">detail</button>--> + <img src="images/checkyes.png" style="height:18px;cursor:pointer" ng-click="constructTestSuit(env.uuid,env.name)" ng-show="selectEnv==env.uuid" /> + <img src="images/checkno.png" style="height:18px;cursor:pointer" ng-click="constructTestSuit(env.uuid,env.name)" ng-show="selectEnv!=env.uuid" /> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + + </div> + <div data-title="Content" bs-pane> + <div style="margin-top:10px;"> + <button class="btn btn-default" ng-click="changeStatussourceFalse()">Modify Content</button> + <button class="btn btn-default" ng-click="changeStatussourceTrue()">Modify Source</button> + <div class="label-type" ng-show="taskDetailData.suite==false"> Test Case</div> + <div class="label-type" ng-show="taskDetailData.suite==true"> Test Suite</div> + <button class="btn btn-default" style="float:right" ng-disabled="sourceShow==null" ng-click="confirmToServer(contentInfo,taskDetailData.content)">Confirm</button> + </div> + + + <textarea ng-model="taskDetailData.content" ng-show="sourceShow==false" style="margin-top:5px;" spellcheck="false"> + + + </textarea> + + <div ng-show="sourceShow==true"> + <div style="display:flex;flex-direction:row"> + <div style="margin-top:20px;">Source of Content</div> + + + <select ng-model="selectType" ng-change="triggerContent(selectType)" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> + <option value="">Choose...</option> + </select> + + </div> + + <div style="margin-top:10px" ng-show="selectCase!=null "> + <div style="display:inline">Choose Source : {{selectCase}}</div> + <!--<button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="confirmAddCaseOrSuite(contentInfo)">Confirm</button>--> + <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="getTestDeatil()">Edit</button> + </div> + <hr/> + + <div ng-show="displayTable==true"> + <div ng-show="testcaselist.testcases.length!=0 && selectType.name=='Test Case'"> + <div dir-paginate="test in testcaselist.testcases | itemsPerPage: 10" pagination-id="testcase"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}"> + <div> {{test.Name}}</div> + <div style="font-size:10px;">{{test.Description}}</div> + <img src="images/checkyes.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(test.Name)" ng-show="selectCase==test.Name" /> + <img src="images/checkno.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(test.Name)" ng-show="selectCase!=test.Name" /> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls pagination-id="testcase"></dir-pagination-controls> + </center> + </div> + + <div ng-show="testsuitlist.length!=0 && selectType.name=='Test Suite'"> + <div dir-paginate="suite in testsuitlist | itemsPerPage: 10" pagination-id="testsuite"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}"> + <div> {{suite}}</div> + + <img src="images/checkyes.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(suite)" ng-show="selectCase==suite" /> + <img src="images/checkno.png" style="height:18px;cursor:pointer" ng-click="constructTestCase(suite)" ng-show="selectCase!=suite" /> + + </div> + <!--<hr style="margin-top:5px;margin-bottom:5px;" />--> + </div> + <center> + <dir-pagination-controls pagination-id="testsuite"></dir-pagination-controls> + </center> + </div> + </div> + + <div ng-show="displayTable==false"> + <textarea ng-model="contentInfo" spellcheck="false"> + </textarea> + + + </div> + </div> + + + + + </div> + </div> + + +</div> +<toaster-container></toaster-container> + + +<style> + input { + border-radius: 10px; + border: 1px solid #eeeeee; + width: 100%; + padding: 5px; + } + + .deepColor { + background-color: #f9f9f9; + } + + select { + height: 30px; + border-radius: 5px; + border: 1px solid #e8e8e8; + width: 135px; + margin-top: 20px; + margin-left: 20px; + } + + textarea { + width: 100%; + height: 350px; + border-radius: 5px; + border: 1px solid #e8e8e8; + } + + .label-type { + display: inline; + background-color: #2ecc71; + color: #fff; + border-radius: 5px; + padding: 3px; + font-size: 10px; + } + + .content { + height: auto; + } +</style> diff --git a/gui/app/views/testcasechoose.html b/gui/app/views/testcasechoose.html new file mode 100644 index 000000000..12bdb834f --- /dev/null +++ b/gui/app/views/testcasechoose.html @@ -0,0 +1,48 @@ +<div class="content"> + + <div> + Test case list + <button class="btn btn-default" style="margin-left:20px;" ng-click="openDialog()"> + <div ng-show="!loadingOPENrc">Create </div> + <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" /> + </button> + + + <hr/> You have choose : + <div ng-repeat="selected in suitReconstructList" style="display:inline;" class="item">{{selected}}</div> + <hr/> + + <!--<div ng-repeat="env in environmentList"> + {{env.name}} + </div>--> + <div dir-paginate="test in testcaselist.testcases | itemsPerPage: 10"> + <div style="display:flex;flex-direction:row;"> + <img src="images/checkyes.png" style="height:12px;cursor:pointer" ng-click="constructTestSuit(test.Name)" ng-show="testsuiteList.indexOf(test.Name)>-1" /> + <img src="images/checkno.png" style="height:12px;cursor:pointer" ng-click="constructTestSuit(test.Name)" ng-show="testsuiteList.indexOf(test.Name)==-1" /> + <div style="margin-left:50px;"> {{test.Name}}</div> + <div style="font-size:10px;margin-left:100px">{{test.Description}}</div> + + </div> + <hr style="margin-top:5px;margin-bottom:5px;" /> + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + + + + </div> + <toaster-container></toaster-container> + + <style> + .item { + background-color: #3498db; + color: #fff; + width: 150px; + border-radius: 5px; + padding-left: 10px; + margin-left: 2px; + margin-top: 3px; + padding: 4px; + } + </style> diff --git a/gui/app/views/testcasedetail.html b/gui/app/views/testcasedetail.html new file mode 100644 index 000000000..43a51537f --- /dev/null +++ b/gui/app/views/testcasedetail.html @@ -0,0 +1,110 @@ +<div class="content"> + <!--testcaselist--> + <div> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + + <h4>Detail</h4> + <hr/> + + <textarea ng-model="testcaseInfo" spellcheck="false"> + + </textarea> + + + + + + + + </div> + + + + +</div> + +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 300px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 19px; + height: 19px; + opacity: 0.8; + margin-left: 5px; + margin-top: 4px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + } +</style> diff --git a/gui/app/views/testcaselist.html b/gui/app/views/testcaselist.html new file mode 100644 index 000000000..3e8cfccf9 --- /dev/null +++ b/gui/app/views/testcaselist.html @@ -0,0 +1,150 @@ +<div class="content"> + <!--testcaselist--> + <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i> + + <div> + Test Cases + <button class="btn btn-default" style="margin-left:20px;" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-size="5MB"> + <div ng-show="!loadingOPENrc">Upload</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" /> + </button> + + <!--<div ng-show="displayOpenrcFile!=null || displayOpenrcFile!=undefined"> + {{displayOpenrcFile.name}} last modified: {{filelastModified}} + </div>--> + <hr/> + + <!--<div ng-repeat="env in environmentList"> + {{env.name}} + </div>--> + <div dw-loading="key" dw-loading-options="{text:'loading'}"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;background-color: #f9f9f9"> + <div style="font-weight:600">Name</div> + <div style="font-weight:600;margin-right:4px;">Operate</div> + + </div> + + <div dir-paginate="test in testcaselist.testcases | itemsPerPage: 10"> + <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;"> + <div> + + <a style="color:#e95420" ng-click="gotoDetail(test.Name)"> + {{test.Name}} + </a> + </div> + <div style="font-size:10px;">{{test.Description}}</div> + <div> + <!-- <button class="btn btn-default btn-sm" ng-click="gotoDetail(test.Name)">Detail</button> --> + <button class="btn btn-default btn-sm" ng-click="openDeleteEnv(test.Name,'test case')">Delete</button> + </div> + + </div> + + </div> + <center> + <dir-pagination-controls></dir-pagination-controls> + </center> + </div> + + + + + + + + </div> + + + + +</div> + +<toaster-container></toaster-container> + +<style> + .deepColor { + background-color: #f9f9f9; + } + + .form-control { + border-radius: 5px; + width: 300px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 19px; + height: 19px; + opacity: 0.8; + margin-left: 5px; + margin-top: 4px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + } +</style> diff --git a/gui/app/views/uploadImage.html b/gui/app/views/uploadImage.html new file mode 100644 index 000000000..17ccfdb8b --- /dev/null +++ b/gui/app/views/uploadImage.html @@ -0,0 +1,145 @@ +<!--upload image page--> + +<div class="content"> + <div style="display:flex;flex-direction:row;"> + <div style="width:750px;"> + + <h3>{{baseElementInfo.name}} -- Image + <button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button> + </h3> + <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>--> + + <hr/> + <button class="btn btn-default" ng-click="uploadImage()"> + <div ng-if="!showloading">Load Image</div> + <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" /> + </button> + <i class="fa fa-check" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==1&&ifshowStatus==1">done</i> + <i class="fa fa-spinner" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==0&&ifshowStatus==1">loading</i> + <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: red;" ng-show="imageStatus==2&&ifshowStatus==1">error</i> + + <hr> + <h4>Current Images</h4> + + <div> + <table class="table table-striped"> + + <tr> + <th>name</th> + <th>size</th> + <th>status</th> + <th>time</th> + </tr> + <tr ng-repeat="image in imageListData"> + <td>{{image.name}}</td> + <td>{{image.size/1024}} MB</td> + <td>{{image.status}}</td> + <td>{{image.time}}</td> + + </tr> + + + + </table> + </div> + + + + + + + + + + </div> + + + </div> + +</div> +<toaster-container></toaster-container> + +<style> + .form-control { + border-radius: 5px; + width: 200px; + margin-bottom: 10px; + } + + .uploadbutton { + background-color: #007ACC; + color: #fff; + border: 0px; + border-radius: 5px; + height: 27px; + } + + .edit-title { + border: 0px; + background-color: #ffffff; + margin-bottom: 5px; + font-size: 12px; + } + + .null-edit-title { + border: 1px solid #e5e6e7; + border-radius: 5px; + margin-bottom: 3px; + } + + .item-info { + display: flex; + flex-direction: row; + } + + .delete-img { + width: 15px; + height: 15px; + opacity: 0.8; + margin-left: -10px; + margin-top: -3px; + cursor: pointer; + } + + .nextButton { + margin-top: 30px; + border: none; + border-radius: 5px; + padding: 6px; + background-color: #339933; + color: #ffffff; + text-align: center; + /* margin-left: 300px; */ + } + + .bs-sidenav { + margin-top: 40px; + margin-bottom: 20px; + width: 124px; + } + + .nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; + } + + .nav>li { + position: relative; + display: block; + } + + li { + display: list-item; + text-align: -webkit-match-parent; + } + + a { + cursor: pointer; + } + + a.active { + background-color: #EEEEEE; + border-radius: 5px; + } +</style> |