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>

1 files changed, 174 insertions, 0 deletions

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>