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, 208 insertions, 0 deletions

diff --git a/gui/app/styles/main.css b/gui/app/styles/main.css
new file mode 100644
index 000000000..e13a66bce
--- /dev/null
+++ b/gui/app/styles/main.css
@@ -0,0 +1,208 @@
+.browsehappy {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+body {
+    padding: 0;
+}
+
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+
+.header,
+.marketing,
+.footer {
+    /*padding-left: 15px;
+    padding-right: 15px;*/
+}
+
+
+/* Custom page header */
+
+.header {
+    border-bottom: 1px solid #e5e5e5;
+    margin-bottom: 10px;
+}
+
+
+/* Make the masthead heading the same height as the navigation */
+
+.header h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 40px;
+    padding-bottom: 19px;
+}
+
+
+/* Custom page footer */
+
+.footer {
+    padding-top: 19px;
+    color: #777;
+    border-top: 1px solid #e5e5e5;
+}
+
+.container-narrow>hr {
+    margin: 30px 0;
+}
+
+
+/* Main marketing message and sign up button */
+
+.jumbotron {
+    text-align: center;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.jumbotron .btn {
+    font-size: 21px;
+    padding: 14px 24px;
+}
+
+
+/* Supporting marketing content */
+
+.marketing {
+    margin: 40px 0;
+}
+
+.marketing p+h4 {
+    margin-top: 28px;
+}
+
+
+/* Responsive: Portrait tablets and up */
+
+@media screen and (min-width: 768px) {
+    .container {
+        max-width: 730px;
+    }
+    /* Remove the padding we set earlier */
+    .header,
+    .marketing,
+    .footer {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    /* Space out the masthead */
+    .header {
+        margin-bottom: 30px;
+    }
+    /* Remove the bottom border on the jumbotron for visual effect */
+    .jumbotron {
+        border-bottom: 0;
+    }
+}
+
+.jumbotron.ng-scope {
+    margin-top: 100px;
+}
+
+.content {
+    /*margin-left: 300px;*/
+    /*margin-left: 100px;*/
+    position: relative;
+    margin-left: 25%;
+    width: 70%;
+    border: 1px solid #dfe3e4;
+    border-radius: 5px;
+    padding: 20px 20px 5px 20px;
+    height: 100%;
+    margin-right: 10px;
+    /*border-bottom: none;*/
+    margin-bottom: 10px;
+    padding-bottom: 20px;
+    /* overflow: hidden; */
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-content {
+    background-color: #fff;
+}
+
+.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;
+}
+
+textarea {
+    width: 100%;
+    height: 400px;
+    border-radius: 5px;
+    border: 1px solid #e8e8e8;
+}
+
+.naviSide {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    height: 150%;
+    background-color: #f8f8f8;
+    width: 210px;
+    padding: 30px 0 0 0;
+    border-radius: 10px;
+    border-right: 1px solid #e7e7e7;
+    z-index: 2;
+}
+
+.panel-body {
+    border: none;
+}
+
+.panel-group {
+    width: 210px;
+}
+
+.panel-group {
+    margin-bottom: 0px;
+}
+
+* {
+    border-radius: 0px ! important;
+}
+
+.naviSide.ng-scope {
+    box-shadow: 1px 1px 2px #888888;
+}
+
+.pagination>li>a,
+.pagination>li>span {
+    color: #333;
+}
+
+.pagination>.active>a,
+.pagination>.active>span,
+.pagination>.active>a:hover,
+.pagination>.active>span:hover,
+.pagination>.active>a:focus,
+.pagination>.active>span:focus {
+    background-color: #f9f9f9;
+    color: #333;
+    border-color: #ddd;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-close{
+    border: none;
+    background-color: #fff;
+}
+
+button:focus {outline:0;}
+input:focus{outline: 0}
+
+.ngdialog-content {
+    overflow: hidden;
+}
+