From edbe3568a052da8afd24b6877c4c6fdcc7627ba3 Mon Sep 17 00:00:00 2001
From: chenjiankun <chenjiankun1@huawei.com>
Date: Mon, 24 Jul 2017 04:13:56 +0000
Subject: 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>
---
 gui/app/views/container.html               | 134 ++++++++++++
 gui/app/views/content.html                 |   0
 gui/app/views/environmentDetail.html       | 143 +++++++++++++
 gui/app/views/environmentList.html         | 155 ++++++++++++++
 gui/app/views/layout/footer.html           |   5 +
 gui/app/views/layout/header.html           |  43 ++++
 gui/app/views/layout/sideNav.html          | 141 ++++++++++++
 gui/app/views/layout/sideNav2.html         | 108 ++++++++++
 gui/app/views/main.html                    | 174 +++++++++++++++
 gui/app/views/main2.html                   | 174 +++++++++++++++
 gui/app/views/modal/chooseContainer.html   |  15 ++
 gui/app/views/modal/deleteConfirm.html     |  19 ++
 gui/app/views/modal/environmentDialog.html | 330 +++++++++++++++++++++++++++++
 gui/app/views/modal/projectCreate.html     |  21 ++
 gui/app/views/modal/suiteName.html         |  18 ++
 gui/app/views/modal/taskCreate.html        | 134 ++++++++++++
 gui/app/views/podupload.html               | 136 ++++++++++++
 gui/app/views/projectList.html             |  57 +++++
 gui/app/views/projectdetail.html           |  97 +++++++++
 gui/app/views/report.html                  |  56 +++++
 gui/app/views/suite.html                   | 149 +++++++++++++
 gui/app/views/suitedetail.html             | 110 ++++++++++
 gui/app/views/taskList.html                |  62 ++++++
 gui/app/views/taskmodify.html              | 162 ++++++++++++++
 gui/app/views/testcasechoose.html          |  48 +++++
 gui/app/views/testcasedetail.html          | 110 ++++++++++
 gui/app/views/testcaselist.html            | 150 +++++++++++++
 gui/app/views/uploadImage.html             | 145 +++++++++++++
 28 files changed, 2896 insertions(+)
 create mode 100644 gui/app/views/container.html
 create mode 100644 gui/app/views/content.html
 create mode 100644 gui/app/views/environmentDetail.html
 create mode 100644 gui/app/views/environmentList.html
 create mode 100644 gui/app/views/layout/footer.html
 create mode 100644 gui/app/views/layout/header.html
 create mode 100644 gui/app/views/layout/sideNav.html
 create mode 100644 gui/app/views/layout/sideNav2.html
 create mode 100644 gui/app/views/main.html
 create mode 100644 gui/app/views/main2.html
 create mode 100644 gui/app/views/modal/chooseContainer.html
 create mode 100644 gui/app/views/modal/deleteConfirm.html
 create mode 100644 gui/app/views/modal/environmentDialog.html
 create mode 100644 gui/app/views/modal/projectCreate.html
 create mode 100644 gui/app/views/modal/suiteName.html
 create mode 100644 gui/app/views/modal/taskCreate.html
 create mode 100644 gui/app/views/podupload.html
 create mode 100644 gui/app/views/projectList.html
 create mode 100644 gui/app/views/projectdetail.html
 create mode 100644 gui/app/views/report.html
 create mode 100644 gui/app/views/suite.html
 create mode 100644 gui/app/views/suitedetail.html
 create mode 100644 gui/app/views/taskList.html
 create mode 100644 gui/app/views/taskmodify.html
 create mode 100644 gui/app/views/testcasechoose.html
 create mode 100644 gui/app/views/testcasedetail.html
 create mode 100644 gui/app/views/testcaselist.html
 create mode 100644 gui/app/views/uploadImage.html

(limited to 'gui/app/views')

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
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>
-- 
cgit 1.2.3-korg