graph，看板异常情况处理

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

@@ -70,7 +70,7 @@ limitations under the License.
               <el-select @change="fileChange"
                          @visible-change="getSelectList"
                          :popper-append-to-body="false"
-                         class='search file-search'
+                         class='search'
                          v-model="fileSearchBox.value">
                 <el-option v-for="item in fileSearchBox.suggestions"
                            :key="item.value"
@@ -82,6 +82,7 @@ limitations under the License.
               <!-- Search box -->
               <Autocomplete class='search'
                             v-model="searchBox.value"
+                            :disabled="!fileSearchBox.value"
                             :fetch-suggestions="searchNodesNames"
                             :placeholder="$t('graph.inputNodeName')"
                             :popper-append-to-body="false"
@@ -373,6 +374,7 @@ export default {
       totalMemory: 16777216 * 2, // Memory size of the graph plug-in
       graphviz: null,
       graphvizTemp: null,
+      initOver: false,
     };
   },
   computed: {},
@@ -385,7 +387,7 @@ export default {
       return;
     }
     this.trainJobID = this.$route.query.train_id;
-    this.getDatavisualPlugins(this.queryGraphData);
+    this.getDatavisualPlugins();
     window.onresize = () => {
       if (this.graphDom.el) {
         this.initGraphRectData();
@@ -813,14 +815,14 @@ export default {
     },
     /**
      * To obtain datavisual plugins
-     * @param {Function} callback Call after get data visual plugins.
      */
-    getDatavisualPlugins(callback) {
+    getDatavisualPlugins() {
       const params = {
         train_id: this.trainJobID,
       };
       RequestService.getDatavisualPlugins(params)
           .then((res) => {
+            this.fileSearchBox.suggestions = [];
             if (
               !res ||
             !res.data ||
@@ -828,21 +830,27 @@ export default {
             !res.data.plugins.graph ||
             !res.data.plugins.graph.length
             ) {
+              this.initOver = true;
               return;
             }
-            this.fileSearchBox.suggestions = [];
             const tags = res.data.plugins.graph;
+            let hasFileSearchValue = false;
             tags.forEach((k) => {
               this.fileSearchBox.suggestions.push({
                 value: k,
               });
+              hasFileSearchValue = k === this.fileSearchBox.value || hasFileSearchValue;
             });
-            this.fileSearchBox.value = this.fileSearchBox.value || tags[0];
-            if (callback) {
-              callback();
+            if (!this.initOver) {
+              this.initOver = true;
+              this.fileSearchBox.value = tags.length ? tags[0] : '';
+              this.queryGraphData();
+            } else if(!hasFileSearchValue) {
+              this.fileSearchBox.value = '';
             }
           })
           .catch(() => {
+            this.initOver = true;
             this.loading.show = false;
           });
     },

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

@@ -24,12 +24,12 @@ limitations under the License.
     </div>
     <div class="cl-dashboard-center">
       <div class="cl-dashboard-con-up"
-           :class="curPageArr.length ? '' : 'no-data-hover'"
+           :class="curPageArr.length && !wrongPlugin ? '' : 'no-data-hover'"
            @click="viewMoreScalars">
         <div class="cl-dashboard-title"> {{$t("trainingDashboard.trainingScalar")}}</div>
         <div class="cl-module">
           <div class="cl-scalar-tagName"
-               v-if="curPageArr.length">
+               v-if="curPageArr.length && !wrongPlugin">
             <div v-for="(sampleItem,index) in curPageArr"
                  :key="index"
                  :class="['tagNameLeft',index==1? 'tagNameRight':'']">
@@ -37,10 +37,10 @@ limitations under the License.
             </div>
           </div>
           <div id="module-chart"
-               v-if="curPageArr.length"
+               v-if="curPageArr.length && !wrongPlugin"
                key="chart-data"></div>
           <div class="no-data-img"
-               v-if="!curPageArr.length"
+               v-if="!curPageArr.length || wrongPlugin"
                key="no-chart-data">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
@@ -51,7 +51,7 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="firstFloorNodes.length ? '' : 'no-data-hover'"
+           :class="firstFloorNodes.length && !wrongPlugin ? '' : 'no-data-hover'"
            @click="jumpToGraph">
         <div class="cl-dashboard-title">
           {{$t("trainingDashboard.calculationChart")}}
@@ -59,9 +59,9 @@ limitations under the License.
         <div class="cl-module">
           <div id="graph"
                class="graph"
-               v-show="firstFloorNodes.length"></div>
+               v-show="firstFloorNodes.length && !wrongPlugin"></div>
           <div class="no-data-img"
-               v-show="!firstFloorNodes.length">
+               v-show="!firstFloorNodes.length || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
             <p class='no-data-text'>
@@ -71,16 +71,16 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="showDatasetGraph ? '' : 'no-data-hover'"
+           :class="showDatasetGraph && !wrongPlugin ? '' : 'no-data-hover'"
            @click="jumpToDataMap">
         <div class="cl-dashboard-title"> {{$t("trainingDashboard.dataMap")}}</div>
         <div class="cl-module">
           <div id="dataMapGraph"
                class="graph"
-               v-show="showDatasetGraph"></div>
+               v-show="showDatasetGraph && !wrongPlugin"></div>
           <div class="no-data-img"
                key="no-chart-data"
-               v-show="!showDatasetGraph">
+               v-show="!showDatasetGraph || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
             <p class='no-data-text'>
@@ -90,7 +90,7 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="originImageDataArr.length ? '' : 'no-data-hover'"
+           :class="originImageDataArr.length && !wrongPlugin ? '' : 'no-data-hover'"
            @click="linkToImage($event)">
         <div class="cl-dashboard-title">
           <div class="cl-dashboard-title-left"> {{$t("trainingDashboard.samplingData")}}</div>
@@ -104,15 +104,15 @@ limitations under the License.
         </div>
         <div class="cl-module">
           <div class="image-container"
-               :class="originImageDataArr.length ? '' : 'no-data-img'">
+               :class="originImageDataArr.length && !wrongPlugin ? '' : 'no-data-img'">
             <img class="sample-img select-disable"
                  :src="curImageShowSample.curImgUrl"
-                 v-if="originImageDataArr.length">
+                 v-if="originImageDataArr.length && !wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt=""
-                 v-if=" !originImageDataArr.length">
+                 v-if="!originImageDataArr.length || wrongPlugin">
             <p class='no-data-text'
-               v-if=" !originImageDataArr.length">
+               v-if=" !originImageDataArr.length || wrongPlugin">
               {{$t("public.noData")}}
             </p>
           </div>
@@ -157,6 +157,7 @@ export default {
       showDatasetGraph: false,
       datasetGraphviz: {},
       reloadStopTime: 1000,
+      wrongPlugin: false,
     };
   },
   computed: {
@@ -268,20 +269,30 @@ export default {
         train_id: this.trainingJobId,
         manual_update: fromInit || false,
       };
-      RequestService.getDatavisualPlugins(params).then((res) => {
-        if (!res || !res.data || !res.data.plugins) {
-          return;
-        }
-        const data = res.data.plugins;
-        const imageTags = data.image || [];
-        const scalarTags = data.scalar || [];
-        const graphIds = data.graph || [];
-        this.dealImageData(imageTags);
-        this.getScalarList(scalarTags);
-        if (!this.firstFloorNodes.length && graphIds.length) {
-          this.queryGraphData();
-        }
-      });
+      RequestService.getDatavisualPlugins(params)
+          .then((res) => {
+            this.wrongPlugin = false;
+            if (!res || !res.data || !res.data.plugins) {
+              return;
+            }
+            const data = res.data.plugins;
+            const imageTags = data.image || [];
+            const scalarTags = data.scalar || [];
+            const graphIds = data.graph || [];
+            this.dealImageData(imageTags);
+            this.getScalarList(scalarTags);
+            if (!this.firstFloorNodes.length && graphIds.length) {
+              this.queryGraphData();
+            }
+          })
+          .catch((error)=>{
+            if (!error.response || !error.response.data || !error.response.data.error_code) {
+              return;
+            }
+            if (error.response.data.error_code.toString() === '50545005') {
+              this.wrongPlugin = true;
+            }
+          });
     },
 
     /**