Yardstick GUI & GUI deployment

JIRA: YARDSTICK-758

As E release plan, we have the need of yardstick GUI.
This patch is GUI front end code and deployment.
The backend code is yardstick API.

Change-Id: Ib15f78bcc50168c7828beff97256e9939c6da809
Signed-off-by: chenjiankun <chenjiankun1@huawei.com>

6 files changed, 537 insertions, 0 deletions

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>