UI support display in English

mindinsight/ui/src/components/header.vue

@@ -28,11 +28,26 @@ limitations under the License.
                  :default-active="getActive()"
                  class="el-menu-demo"
                  mode="horizontal">
-          <el-menu-item index="/summary-manage">{{$t("summaryManage.summaryList")}}</el-menu-item>
-          <el-menu-item index="/model-traceback">{{$t("summaryManage.modelTraceback")}}</el-menu-item>
-          <el-menu-item index="/data-traceback">{{$t("summaryManage.dataTraceback")}}</el-menu-item>
-          <el-menu-item index="/compare-plate">{{$t("summaryManage.comparePlate")}}</el-menu-item>
-          <el-menu-item index="/hardware-visual">{{$t("summaryManage.hardwareVisual")}}</el-menu-item>
+          <el-menu-item index="/summary-manage"
+                        :title='$t("summaryManage.summaryList")'>
+            {{$t("summaryManage.summaryList")}}
+          </el-menu-item>
+          <el-menu-item index="/model-traceback"
+                        :title='$t("summaryManage.modelTraceback")'>
+            {{$t("summaryManage.modelTraceback")}}
+          </el-menu-item>
+          <el-menu-item index="/data-traceback"
+                        :title='$t("summaryManage.dataTraceback")'>
+            {{$t("summaryManage.dataTraceback")}}
+          </el-menu-item>
+          <el-menu-item index="/compare-plate"
+                        :title='$t("summaryManage.comparePlate")'>
+            {{$t("summaryManage.comparePlate")}}
+          </el-menu-item>
+          <el-menu-item index="/hardware-visual"
+                        :title='$t("summaryManage.hardwareVisual")'>
+            {{$t("summaryManage.hardwareVisual")}}
+          </el-menu-item>
         </el-menu>
       </div>
     </div>
@@ -46,7 +61,7 @@ limitations under the License.
          || !this.$route.path.indexOf('/compare-plate')
          || !this.$route.path.indexOf('/hardware-visual')">
       <div class="reload-training"
-          v-if="this.$route.path.indexOf('/scalar') > 0
+           v-if="this.$route.path.indexOf('/scalar') > 0
           || this.$route.path.indexOf('/image') > 0
           || this.$route.path.indexOf('/histogram') > 0
           || this.$route.path.indexOf('/tensor') > 0
@@ -54,13 +69,13 @@ limitations under the License.
           || !this.$route.path.indexOf('/compare-plate')">
         <!-- automatic refresh switch -->
         <el-switch v-model="isTimeReload"
-                  :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
+                   :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
                   timeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
-                  @change="timeReload"></el-switch>
+                   @change="timeReload"></el-switch>
         <i class="el-icon-edit"
-          :title="$t('header.timeReloadScope')"
-          v-if="isTimeReload && !isShowInp"
-          @click="editTime"></i>
+           :title="$t('header.timeReloadScope')"
+           v-if="isTimeReload && !isShowInp"
+           @click="editTime"></i>
 
         <el-input v-if="isTimeReload && isShowInp"
                   v-model="newReloadValue"
@@ -68,23 +83,23 @@ limitations under the License.
                   @input="timeValueChange"></el-input>
 
         <i class="el-icon-check"
-          v-if="isTimeReload && isShowInp"
-          @click="saveTimeValue"></i>
+           v-if="isTimeReload && isShowInp"
+           @click="saveTimeValue"></i>
         <i class="el-icon-close"
-          v-if="isTimeReload && isShowInp"
-          @click="cancelTimeValue"></i>
+           v-if="isTimeReload && isShowInp"
+           @click="cancelTimeValue"></i>
       </div>
       <div class="reload-hardware"
-        v-if="!this.$route.path.indexOf('/hardware-visual')">
+           v-if="!this.$route.path.indexOf('/hardware-visual')">
         <!-- automatic refresh switch -->
         <el-switch v-model="isHardwareTimeReload"
-                  :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
+                   :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
                   hardwareTimeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
-                  @change="hardwareTimeReload"></el-switch>
+                   @change="hardwareTimeReload"></el-switch>
         <i class="el-icon-edit"
-          :title="$t('header.timeReloadScope')"
-          v-if="isHardwareTimeReload && !isShowHardwareInp"
-          @click="editHardwareTime"></i>
+           :title="$t('header.timeReloadScope')"
+           v-if="isHardwareTimeReload && !isShowHardwareInp"
+           @click="editHardwareTime"></i>
 
         <el-input v-if="isHardwareTimeReload && isShowHardwareInp"
                   v-model="newHardwareReloadValue"
@@ -92,14 +107,13 @@ limitations under the License.
                   @input="hardwareTimeValueChange"></el-input>
 
         <i class="el-icon-check"
-          v-if="isHardwareTimeReload && isShowHardwareInp"
-          @click="saveHardwareTimeValue"></i>
+           v-if="isHardwareTimeReload && isShowHardwareInp"
+           @click="saveHardwareTimeValue"></i>
         <i class="el-icon-close"
-          v-if="isHardwareTimeReload && isShowHardwareInp"
-          @click="cancelHardwareTimeValue"></i>
+           v-if="isHardwareTimeReload && isShowHardwareInp"
+           @click="cancelHardwareTimeValue"></i>
       </div>
 
-
       <!-- manual refresh switch -->
       <img src="../assets/images/reload.png"
            alt=""
@@ -113,7 +127,21 @@ limitations under the License.
            width="24"
            class="cl-header-img cl-reload"
            v-if="isReload"
-           :title="$t('header.RefreshingData')" />
+           :title="$t('header.refreshingData')" />
+    </div>
+    <div class="md-header-language"
+         v-show="isLanguage">
+      <span class="spanLanguage"
+            :class="[isChinese?'active':'']"
+            @click="changeLanguage('zh-cn')">
+        {{$t('public.zhLanguage')}}
+      </span>
+      <span class="spanLine">/</span>
+      <span class="spanLanguage"
+            :class="[!isChinese?'active':'']"
+            @click="changeLanguage('en-us')">
+        {{$t('public.enLanguage')}}
+      </span>
     </div>
   </div>
 </template>
@@ -123,6 +151,7 @@ export default {
   data() {
     return {
       isShowInp: false,
+      isLanguage: true,
       timeReloadValue: this.$store.state.timeReloadValue,
       newReloadValue: this.$store.state.timeReloadValue,
       isShowHardwareInp: false,
@@ -142,6 +171,16 @@ export default {
       },
       set(val) {},
     },
+    isChinese() {
+      let isChinese = false;
+      if (
+        localStorage.getItem('milang') &&
+        localStorage.getItem('milang') === 'zh-cn'
+      ) {
+        isChinese = true;
+      }
+      return isChinese;
+    },
     // set and get isHardwareTimeReload status
     isHardwareTimeReload: {
       get() {
@@ -258,6 +297,10 @@ export default {
         return this.$route.path;
       }
     },
+    changeLanguage(lan) {
+      localStorage.setItem('milang', lan);
+      window.location.reload();
+    },
   },
 };
 </script>
@@ -271,6 +314,19 @@ export default {
   display: flex;
   color: $headerColor;
   flex-shrink: 0;
+  .md-header-language {
+    width: 100px;
+    line-height: 64px;
+    .spanLine {
+      margin: 0 5px;
+    }
+    .spanLanguage {
+      cursor: pointer;
+    }
+    .active {
+      color: #00a5a7;
+    }
+  }
   // logo style
   .cl-header-logo {
     width: 161px;
@@ -332,7 +388,7 @@ export default {
 
   .cl-header-nav {
     margin-left: 50px;
-    flex: 1.5;
+    flex: 2.2;
 
     .el-menu {
       border-bottom: none;
@@ -341,6 +397,10 @@ export default {
       font-size: 16px;
       color: #fff;
       padding-top: 4px;
+      max-width: 20%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
     .el-menu--horizontal > .el-menu-item.is-active {
       color: #00a5a7 !important;

mindinsight/ui/src/locales/zh-cn.json

@@ -367,9 +367,21 @@
       "content12": "- MindSpore对该网络的流切分策略；",
       "content13": "- 算子在Device上的执行序列和执行时长。",
       "title2": "如何查看时间线：",
-      "content21": "要查看时间线的详细信息，您可以点击 \"下载\" 按钮将带有时间线信息的文件保存到本地，再通过工具查看。",
+      "content21": {
+        "part1": "要查看时间线的详细信息，您可以点击 \"",
+        "part2": "下载",
+        "part3": "\" 按钮将带有时间线信息的文件保存到本地，再通过工具查看。"
+      },
       "content22": "我们推荐您使用谷歌插件：chrome://tracing，或 Perfetto工具：https://ui.perfetto.dev/#!/viewer",
-      "content23": "选择一个工具，在浏览器地址栏输入地址并回车，进入页面点击按钮加载文件查看时间线（tracing工具点击左上角 \"load\"，Perfetto工具点击左侧栏 \"Open trace file\"）。",
+      "content23": {
+        "part1": "选择一个工具，在浏览器地址栏输入地址并",
+        "part2": "回车",
+        "part3": "，进入页面点击按钮加载文件查看时间线（tracing工具点击左上角 \"",
+        "part4": "Load",
+        "part5": "\"，Perfetto工具点击左侧栏 \"",
+        "part6": "Open trace file",
+        "part7": "\"）。"
+      },
       "title3": "如何使用时间线：",
       "content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；",
       "content32": "也可以具体定位到某个算子，查看分析它的执行时间。"

mindinsight/ui/src/main.js

@@ -23,9 +23,18 @@ import './assets/css/element.css';
 import './assets/css/reset.scss';
 import i18n from './i18n';
 import $ from 'jquery';
+import locale from '../node_modules/element-ui/lib/locale/lang/en';
+import localezh from '../node_modules/element-ui/lib/locale/lang/zh-CN';
 
+if (
+  localStorage.getItem('milang') &&
+  localStorage.getItem('milang') !== 'zh-cn'
+) {
+  Vue.use(ElementUI, {locale});
+} else {
+  Vue.use(ElementUI, {localezh});
+}
 window.$ = window.jQuery = $;
-Vue.use(ElementUI);
 
 Vue.prototype.$bus = new Vue();
 
@@ -47,7 +56,6 @@ router.onError((error) => {
 // forbidden showing production tip
 Vue.config.productionTip = false;
 
-
 /**
  * Check the browser version
  * @return {Boolen}

mindinsight/ui/src/views/train-manage/data-process.vue

@@ -316,6 +316,7 @@ export default {
         noData: true,
         size: null,
         initOver: false,
+        deviceId: null,
       },
       dataQueueChart: {
         // Data queue chart object
@@ -373,6 +374,7 @@ export default {
         // Average rate chart object
         id: 'average-rate',
         chartDom: null,
+        deviceId: null,
       },
       queueDeepChart: {
         // Queue deep chart object
@@ -438,14 +440,20 @@ export default {
      *  Tabs switch
      */
     handleClick() {
-      if (this.activeName === 'pipeLine') {
-        if (!Object.keys(this.allGraphData).length) {
-          this.$nextTick(() => {
-            this.queryAverageRate();
-          });
-        }
+      if (
+        this.activeName === 'pipeLine' &&
+        this.averageRateChart.deviceId !== this.currentCard
+      ) {
+        this.queryAverageRate();
+      } else if (
+        this.activeName === 'queueInfo' &&
+        this.connectQueueChart.deviceId !== this.currentCard
+      ) {
+        this.init();
       }
-      this.resizeCallback();
+      this.$nextTick(() => {
+        this.resizeCallback();
+      });
     },
     init() {
       this.queryProcessSummary();
@@ -652,6 +660,7 @@ export default {
         device_id: this.currentCard,
         train_id: this.trainId,
       };
+      this.connectQueueChart.deviceId = this.currentCard;
       RequestService.queryProcessSummary(params).then(
           (res) => {
             if (res && res.data) {
@@ -732,6 +741,7 @@ export default {
           device_id: this.currentCard,
         },
       };
+      this.averageRateChart.deviceId = this.currentCard;
       RequestService.queryOpQueue(params).then(
           (res) => {
             this.initOver = true;

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

@@ -42,17 +42,17 @@ limitations under the License.
         </el-popover>
         <div class="step"
              v-show="guide.step == 1">
-          <img src="@/assets/images/graph-step1.svg"
+          <img :src="require(`@/assets/images/graph-step1${language === 'en-us' ? '-en' : ''}.svg`)"
                alt="" />
         </div>
         <div class="step"
              v-show="guide.step == 2">
-          <img src="@/assets/images/graph-step2.svg"
+          <img :src="require(`@/assets/images/graph-step2${language === 'en-us' ? '-en' : ''}.svg`)"
                alt="" />
         </div>
         <div class="step"
              v-show="guide.step == 3">
-          <img src="@/assets/images/graph-step3.svg"
+          <img :src="require(`@/assets/images/graph-step3${language === 'en-us' ? '-en' : ''}.svg`)"
                alt="" />
         </div>
       </div>
@@ -492,6 +492,7 @@ export default {
         max: 10000,
         scale: {x: 1, y: 1},
       },
+      language: '',
     };
   },
   computed: {},
@@ -528,6 +529,7 @@ export default {
     }
 
     this.trainJobID = this.$route.query.train_id;
+    this.language = localStorage.getItem('milang') || 'zh-cn';
     document.title = `${decodeURIComponent(this.trainJobID)}-${this.$t(
         'graph.titleText',
     )}-MindInsight`;

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

@@ -320,9 +320,21 @@ limitations under the License.
                 <div>{{$t("profiling.timelineTips.content13")}}</div>
                 <br>
                 <div class="font-style">{{$t("profiling.timelineTips.title2")}}</div>
-                <div>{{$t("profiling.timelineTips.content21")}}</div>
+                <div>
+                  {{$t("profiling.timelineTips.content21.part1")}}
+                  <b>{{$t("profiling.timelineTips.content21.part2")}}</b>
+                  {{$t("profiling.timelineTips.content21.part3")}}
+                </div>
                 <div>{{$t("profiling.timelineTips.content22")}}</div>
-                <div>{{$t("profiling.timelineTips.content23")}}</div>
+                <div>
+                  {{$t("profiling.timelineTips.content23.part1")}}
+                  <b>{{$t("profiling.timelineTips.content23.part2")}}</b>
+                  {{$t("profiling.timelineTips.content23.part3")}}
+                  <b>{{$t("profiling.timelineTips.content23.part4")}}</b>
+                  {{$t("profiling.timelineTips.content23.part5")}}
+                  <b>{{$t("profiling.timelineTips.content23.part6")}}</b>
+                  {{$t("profiling.timelineTips.content23.part7")}}
+                </div>
                 <br>
                 <div class="font-style">{{$t("profiling.timelineTips.title3")}}</div>
                 <div>{{$t("profiling.timelineTips.content31")}}</div>