frontend theme and color modify

frontend/mock/data/plugin/graphs/graph.js

@@ -0,0 +1,24 @@
+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    return {
+        // moock delay
+        _timeout: 0,
+        // mock http status
+        _status: 200,
+        // mock response data
+        _data: {
+            status: 0,
+            msg: 'SUCCESS',
+            data: {
+                url: 'someurl'
+            }
+        }
+    };
+};

frontend/package.json

@@ -54,6 +54,7 @@
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.4",
+    "interactjs": "^1.3.2",
     "json-loader": "^0.5.4",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^1.3.2",

frontend/src/App.san

@@ -46,8 +46,80 @@ export default {
 
 <style lang="stylus">
 
-// @import './style/variables';
+@import './style/variables';
 
-// +prefix-classes(prefix)
+// modify component style for custom theme
+.sm-appbar
+    background $-theme-color
 
+.sm-pagination .page-selector span.current
+    background $-theme-color
+
+.sm-text-field.has-label .sm-text-field-label
+    color $-right-font-color
+
+.sm-text-field-input
+    color $-right-font-color
+
+.sm-text-field-hint.state-show
+    color $-right-font-color
+
+.sm-text-field
+        .sm-text-field-line
+            background $-right-font-color
+        .sm-text-field-focus-line
+            background $-theme-color
+
+.sm-form-item .label
+    color $-right-font-color
+
+.sm-slider-bg
+    background $-right-font-color
+
+.sm-slider-fill,
+.sm-slider-thumb
+    background $-theme-color
+
+.sm-radio-icon-checked,
+.sm-checkbox-icon-checked
+    color $-theme-color
+
+.sm-radio .sm-radio-wrapper .sm-radio-label,
+.sm-checkbox .sm-radio-wrapper .sm-radio-label,
+.sm-radio .sm-checkbox-wrapper .sm-radio-label,
+.sm-checkbox .sm-checkbox-wrapper .sm-radio-label,
+.sm-radio .sm-radio-wrapper .sm-checkbox-label,
+.sm-checkbox .sm-radio-wrapper .sm-checkbox-label,
+.sm-radio .sm-checkbox-wrapper .sm-checkbox-label,
+.sm-checkbox .sm-checkbox-wrapper .sm-checkbox-label
+    color $-right-font-color
+
+.sm-button.variant-secondery.variant-raised,
+.sm-button.variant-secondery.variant-floating
+    background $-theme-color
+
+
++prefix-classes('visual-dl-page-')
+    .container
+        padding-right 250px
+        position relative
+        background $-left-background-color
+        .left
+            width 100%
+            overflow scroll
+            border solid 1px $-left-border-clor
+            background $-left-border-clor
+            min-height 300px
+            padding 2%
+            box-sizing border-box
+        .right
+            overflow scroll
+            width 250px
+            min-height 300px
+            position absolute
+            right 0
+            top 0
+            box-sizing border-box
+            .config-com
+                color $-right-font-color
 </style>

frontend/src/common/component/AppMenu.san

@@ -63,7 +63,9 @@ export default {
 
 .visual-dl-app-menu
     .sm-appbar-title
+        font-size 24px
         flex none
+        margin-right 50px
     .sm-appbar-right
         width 100%
         .sm-menu
@@ -72,6 +74,7 @@ export default {
             display flex
             flex-direction row
             .sm-menu-item
+                padding 0 30px
                 .sm-menu-item-content
                     color #fff
                     opacity 0.6

frontend/src/common/component/ExpandPanel.san

@@ -47,7 +47,7 @@ export default {
 <style lang="stylus">
     .visaul-dl-expand-panel
         .visaul-dl-expand-head
-            border solid 1px #e4e4e4
+            border solid 1px #ccc
             line-height 50px
             height 50px
             padding 0 20px

frontend/src/common/util/autoAdjustHeight.js

@@ -0,0 +1,13 @@
+export default function autoAdjustHeight() {
+    // compute the container height
+    let containerHeight = window.innerHeight - 64;
+    let containerLeftEl = document.getElementsByClassName('visual-dl-page-left')[0];
+    let containerRightEl = document.getElementsByClassName('visual-dl-page-right')[0];
+    containerLeftEl.style.height = containerHeight + 'px';
+    containerRightEl.style.height = containerHeight + 'px';
+    window.addEventListener('resize', () => {
+        let containerHeight = window.innerHeight - 64;
+        containerLeftEl.style.height = containerHeight + 'px';
+        containerRightEl.style.height = containerHeight + 'px';
+    });
+}

frontend/src/common/util/http.js

@@ -10,17 +10,19 @@ const instance = axios.create({
     timeout: 30000
 });
 
+// for better ux, don't send the error msg because there will be too mutch error
 const responseErrorStatus = response => {
     const data = response.data;
-    if (data[STATUS] !== 0) {
-        Notification.error(data[STATUSINFO]);
-        return Promise.reject(data);
-    }
+    // if (data[STATUS] !== 0) {
+    //     Notification.error(data[STATUSINFO]);
+    //     return Promise.reject(data);
+    // }
     return data;
 };
 
+// for better ux, don't send the error msg because there will be too mutch error
 const responseNetError = error => {
-    Notification.error('net error');
+    // Notification.error('net error');
     return Promise.reject(error);
 };
 
@@ -35,6 +37,7 @@ const formInstance = axios.create({
     }
 });
 
+
 formInstance.interceptors.response.use(responseErrorStatus, responseNetError);
 
 instance.interceptors.response.use(responseErrorStatus, responseNetError);

frontend/src/graph/Graph.san

@@ -1,24 +1,28 @@
 <template>
-    <div class="visual-dl-scalar-container">
-        <div class="visual-dl-scalar-left">
-            <div class="visual-dl-scalar-config-container">
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart
+                filtScreen="{{filtScreen}}"
+                download="{{download}}"
+                scale="{{config.scale}}"
+            ></ui-chart>
+        </div>
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
                 <ui-config
                     runsItems="{{runsItems}}"
                     config="{=config=}"
                     on-fitScreen="handleFitScreen"
+                    on-download="handleDownload"
                 ></ui-config>
             </div>
         </div>
-        <div class="visual-dl-scalar-right">
-            <ui-chart
-                filtScreen="{{filtScreen}}"
-            ></ui-chart>
-        </div>
     </div>
 </template>
 
 <script>
 import {getPluginHistogramsTags, getRuns} from '../service';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
 import config from './ui/config';
 import chart from './ui/chart';
 export default {
@@ -35,7 +39,8 @@ export default {
                 horizontal: 'step',
                 chartType: 'offset',
                 runs: [],
-                running: true
+                running: true,
+                scale: 0.5
             }
         };
     },
@@ -53,6 +58,10 @@ export default {
         });
     },
 
+    attached() {
+        autoAdjustHeight();
+    },
+
     filterTagsList(groupNameReg) {
         let tagsList = this.data.get('tagsList') || [];
         let regExp = new RegExp(groupNameReg);
@@ -64,29 +73,17 @@ export default {
         this.data.set('filtScreen', {
             filtScreen: true
         });
+        this.data.set('config.scale', 0.5);
+    },
+    handleDownload() {
+        this.data.set('download', {
+            filtScreen: true
+        });
     }
 };
 
 </script>
 
 <style lang="stylus">
 
-@import '../style/variables';
-
-+prefix-classes('visual-dl-scalar-')
-    .container
-        padding-left 300px
-        position relative
-        .left
-            width 280px
-            min-height 300px
-            border solid 1px #e4e4e4
-            position absolute
-            left 0
-        .right
-            width 100%
-            overflow hidden
-            border solid 1px #e4e4e4
-            min-height 300px
-            padding 20px
 </style>