!229 UI add histogram clear data logic & modify graph default color &...

!229 UI add histogram clear data logic & modify graph default color & highlight profiler default sort icon 
Merge pull request !229 from 夏易凡/yf-master

mindinsight/ui/src/views/train-manage/graph.vue

@@ -2989,7 +2989,7 @@ export default {
           padding: 0;
         }
         #inside-box {
-          background-color: #c0d3ff;
+          background-color: #5b88f1;
           position: absolute;
           /* Transparency */
           opacity: 0.3;

mindinsight/ui/src/views/train-manage/profiler.vue

@@ -121,6 +121,7 @@
           <el-table v-show="statisticType === 1 && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
                     :data="opAllTypeList.opDetailList"
                     stripe
+                    ref="opAllTable"
                     width="100%"
                     height="calc(100% - 114px)"
                     @cell-click="showInfoDetail"
@@ -529,13 +530,18 @@ export default {
             if (res && res.data) {
               this.formatterDetailData(row, res.data);
               this.$nextTick(() => {
-                const item = this.$refs['expandChild'];
-                if (item) {
+                let item = null;
+                if (this.statisticType) {
+                  item = this.$refs['opAllTable'];
+                } else {
+                  item = this.$refs['expandChild'];
                   this.curActiveRow = {
                     rowItem: row,
                     childProp: row.op_sort_condition.name,
                     childOrder: row.op_sort_condition.type,
                   };
+                }
+                if (item) {
                   item.sort(
                       row.op_sort_condition.name,
                       row.op_sort_condition.type,
@@ -1030,7 +1036,7 @@ export default {
     if (this.$route.query && this.$route.query.dir && this.$route.query.id) {
       this.profile_dir = this.$route.query.dir;
       this.train_id = this.$route.query.id;
-      document.title = `${ decodeURIComponent(this.train_id)}-${this.$t('profiler.titleText')}-MindInsight`;
+      document.title = `${decodeURIComponent(this.train_id)}-${this.$t('profiler.titleText')}-MindInsight`;
     } else {
       document.title = `${this.$t('profiler.titleText')}-MindInsight`;
     }

mindinsight/ui/src/views/train-manage/training-dashboard.vue

@@ -292,9 +292,14 @@ export default {
       if (this.$route.query && this.$route.query.id) {
         this.trainingJobId = this.$route.query.id;
         this.summaryPath = decodeURIComponent(this.trainingJobId);
-        document.title = this.summaryPath + '-' + this.$t('trainingDashboard.trainingDashboardTitle') + '-MindInsight';
+        document.title =
+          this.summaryPath +
+          '-' +
+          this.$t('trainingDashboard.trainingDashboardTitle') +
+          '-MindInsight';
       } else {
-        document.title = this.$t('trainingDashboard.trainingDashboardTitle') + '-MindInsight';
+        document.title =
+          this.$t('trainingDashboard.trainingDashboardTitle') + '-MindInsight';
         this.trainingJobId = '';
         this.$message.error(this.$t('trainingDashboard.invalidId'));
       }
@@ -790,6 +795,7 @@ export default {
         histogramTag = this.histogramTag;
       }
       if (!histogramTag) {
+        this.histogramTag = histogramTag;
         return;
       }
       const params = {
@@ -797,21 +803,26 @@ export default {
         tag: histogramTag,
       };
       // tag
-      RequestService.getHistogramData(params).then((res) => {
-        if (
-          !res ||
-          !res.data ||
-          !res.data.histograms ||
-          !res.data.histograms.length
-        ) {
-          return;
-        }
-        const data = JSON.parse(JSON.stringify(res.data));
-        this.histogramTag = histogramTag;
-        this.histogramData = this.formOriData(data);
-        this.formatDataToChar();
-        this.updateHistogramSampleData();
-      });
+      RequestService.getHistogramData(params).then(
+          (res) => {
+            if (
+              !res ||
+            !res.data ||
+            !res.data.histograms ||
+            !res.data.histograms.length
+            ) {
+              return;
+            }
+            const data = JSON.parse(JSON.stringify(res.data));
+            this.histogramTag = histogramTag;
+            this.histogramData = this.formOriData(data);
+            this.formatDataToChar();
+            this.updateHistogramSampleData();
+          },
+          (e) => {
+            this.histogramTag = '';
+          },
+      );
     },
     formOriData(dataItem) {
       const chartData = [];