Ui supports profiler without backward

mindinsight/ui/src/locales/en-us.json

@@ -286,6 +286,7 @@
     "showAverage": "Average value",
     "iterationGapTime": "Step interval",
     "fpBpTime": "Forward and Backward Propagation",
+    "fpTime": "Forward Propagation",
     "tailTime": "Step Tail",
     "time": "Time",
     "operatorTimeConAnalysis": "Operator Time Consumption Analysis",
@@ -359,7 +360,9 @@
     "iterGapTimeLabel": "Time",
     "iterGapRateLabel": "Ratio",
     "fpBpTimeLabel": "Time",
+    "fpTimeLabel": "Time",
     "fpBpRateLabel": "Ratio",
+    "fpRateLabel": "Ratio",
     "tailTimeLabel": "Time",
     "tailRateLabel": "Ratio",
     "operatorDetail": "Operator Details",
@@ -371,6 +374,7 @@
     "pipelineMiddleTitle": "Queue relationship between operators",
     "deviceQueueOp": "Data Transmission",
     "deviceQueueOpTip": "Forward and Backward Propagation",
+    "deviceQueueOpFpTip": "Forward Propagation",
     "getNext": "Data Obtaining Operator",
     "connectorQuene": "Host Queues",
     "getData": "Data Obtaining",
@@ -389,6 +393,7 @@
     "totalTime": "Total consumed time:",
     "totalSteps": "Total steps:",
     "fpbpTimeRatio": "Ratio of time consumed by forward and backward propagation:",
+    "fpTimeRatio": "Ratio of time consumed by forward propagation:",
     "iterationGapTimeRatio": "Ratio of time consumed by step interval:",
     "iterativeTailingTimeRatio": "Ratio of time consumed by step tail:",
     "dataProcess": "This shows the data processing. Data is stored in the host queue during data processing, and then stored in the data queue on a chip during data transmission. Finally, the forward and backward propagation get_next transmits the data to forward propagation.",

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

@@ -284,6 +284,7 @@
     "showAverage": "展示平均值",
     "iterationGapTime": "迭代间隙时间",
     "fpBpTime": "前向+反向时间",
+    "fpTime": "前向时间",
     "tailTime": "迭代拖尾时间",
     "time": "时间",
     "operatorTimeConAnalysis": "算子耗时分析",
@@ -358,7 +359,9 @@
     "iterGapTimeLabel": "迭代间隙时长",
     "iterGapRateLabel": "迭代间隙占比",
     "fpBpTimeLabel": "前向+反向时长",
+    "fpTimeLabel": "前向时长",
     "fpBpRateLabel": "前向+反向占比",
+    "fpRateLabel": "前向占比",
     "tailTimeLabel": "迭代拖尾时长",
     "tailRateLabel": "迭代拖尾占比",
     "operatorDetail": "算子详情",
@@ -370,6 +373,7 @@
     "pipelineMiddleTitle": "算子间队列关系",
     "deviceQueueOp": "数据发送",
     "deviceQueueOpTip": "前向+反向",
+    "deviceQueueOpFpTip": "前向",
     "getNext": "取数据算子",
     "connectorQuene": "主机队列",
     "getData": "数据获取",
@@ -388,6 +392,7 @@
     "totalTime": "总耗时：",
     "totalSteps": "总step数：",
     "fpbpTimeRatio": "前向反向耗时占比：",
+    "fpTimeRatio": "前向耗时占比：",
     "iterationGapTimeRatio": "迭代间隙耗时占比：",
     "iterativeTailingTimeRatio": "迭代拖尾耗时占比：",
     "dataProcess": "该图展示了数据处理阶段的流程，数据通过数据处理阶段存入主机队列，再通过数据传输阶段存入芯片侧的数据队列，最终由数据传输算子get_next发送给前向训练使用。",

mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue

@@ -53,8 +53,12 @@ limitations under the License.
                 </div>
                 <div>{{$t('profiling.totalSteps')}}<span>{{totalSteps}}</span></div>
                 <div>{{$t('profiling.iterationGapTimeRatio')}}<span>{{iterationIntervalPercent}}</span></div>
-                <div>{{$t('profiling.fpbpTimeRatio')}}<span>{{fpBpPercent}}</span></div>
-                <div>{{$t('profiling.iterativeTailingTimeRatio')}}<span>{{tailPercent}}</span></div>
+                  <div v-if="fpBpPercent">{{$t('profiling.fpbpTimeRatio')}}<span>{{fpBpPercent}}</span></div>
+                  <div v-else>{{$t('profiling.fpTimeRatio')}}<span>{{fpPercent}}</span></div>
+                  <div v-if="tailPercent">
+                    {{$t('profiling.iterativeTailingTimeRatio')}}
+                    <span>{{tailPercent}}</span>
+                  </div>
               </div>
               <i class="el-icon-info"></i>
             </el-tooltip>
@@ -391,6 +395,7 @@ export default {
       queueInfoShow: false, // Whether to show queue information
       deviceInfoShow: false, // Whether to show device information
       fpBpPercent: '--', // Ratio of time consumed by forward and backward propagation
+      fpPercent: '--', // Ratio of time consumed by forward propagation
       iterationIntervalPercent: '--', // Ratio of time consumed by step interval
       totalSteps: '--',
       totalTime: '--',
@@ -825,6 +830,7 @@ export default {
               // Set the display information in tip
               if (res.data.summary) {
                 this.fpBpPercent = res.data.summary.fp_and_bp_percent;
+                this.fpPercent = res.data.summary.fp_percent;
                 this.iterationIntervalPercent = res.data.summary.iteration_interval_percent;
                 this.totalSteps = res.data.summary.total_steps;
                 this.totalTime = res.data.summary.total_time;
@@ -850,6 +856,11 @@ export default {
             this.svg.data = [];
             this.svg.initOver = true;
             this.removeTrace();
+            this.fpBpPercent = '--';
+            this.iterationIntervalPercent = '--';
+            this.totalSteps = '--';
+            this.totalTime = '--';
+            this.tailPercent = '--';
           },
       );
     },
@@ -1025,6 +1036,9 @@ export default {
         case 'fp_and_bp':
           name = this.$t('profiling.deviceQueueOpTip');
           break;
+        case 'fp':
+          name = this.$t('profiling.deviceQueueOpFpTip');
+          break;
         case 'tail':
           name = this.$t('profiling.lterationTail');
           break;

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

@@ -53,8 +53,12 @@ limitations under the License.
                 </div>
                 <div>{{$t('profiling.totalSteps')}}<span>{{totalSteps}}</span></div>
                 <div>{{$t('profiling.iterationGapTimeRatio')}}<span>{{iterationIntervalPercent}}</span></div>
-                <div>{{$t('profiling.fpbpTimeRatio')}}<span>{{fpBpPercent}}</span></div>
-                <div>{{$t('profiling.iterativeTailingTimeRatio')}}<span>{{tailPercent}}</span></div>
+                  <div v-if="fpBpPercent">{{$t('profiling.fpbpTimeRatio')}}<span>{{fpBpPercent}}</span></div>
+                  <div v-else>{{$t('profiling.fpTimeRatio')}}<span>{{fpPercent}}</span></div>
+                  <div v-if="tailPercent">
+                    {{$t('profiling.iterativeTailingTimeRatio')}}
+                    <span>{{tailPercent}}</span>
+                  </div>
               </div>
               <i class="el-icon-info"></i>
             </el-tooltip>
@@ -386,6 +390,7 @@ export default {
   data() {
     return {
       fpBpPercent: '--', // Ratio of time consumed by forward and backward propagation
+      fpPercent: '--', // Ratio of time consumed by forward propagation
       iterationIntervalPercent: '--', // Ratio of time consumed by step interval
       totalSteps: '--',
       totalTime: '--',
@@ -704,8 +709,8 @@ export default {
               // Set the display information in tip
               if (res.data.summary) {
                 this.fpBpPercent = res.data.summary.fp_and_bp_percent;
-                this.iterationIntervalPercent =
-                res.data.summary.iteration_interval_percent;
+                this.fpPercent = res.data.summary.fp_percent;
+                this.iterationIntervalPercent = res.data.summary.iteration_interval_percent;
                 this.totalSteps = res.data.summary.total_steps;
                 this.totalTime = res.data.summary.total_time;
                 this.tailPercent = res.data.summary.tail_percent;
@@ -729,6 +734,11 @@ export default {
             this.svg.data = [];
             this.svg.initOver = true;
             this.removeTrace();
+            this.fpBpPercent = '--';
+            this.iterationIntervalPercent = '--';
+            this.totalSteps = '--';
+            this.totalTime = '--';
+            this.tailPercent = '--';
           },
       );
     },
@@ -904,6 +914,9 @@ export default {
         case 'fp_and_bp':
           name = this.$t('profiling.deviceQueueOpTip');
           break;
+        case 'fp':
+          name = this.$t('profiling.deviceQueueOpFpTip');
+          break;
         case 'tail':
           name = this.$t('profiling.lterationTail');
           break;

mindinsight/ui/src/views/profiling/step-trace.vue

@@ -54,7 +54,8 @@ limitations under the License.
         <span class="font-weight-style">{{$t('profiling.FPMessage')}}</span>
         <span>{{fp_start}}</span>
       </div>
-      <div class="step-padding-right">
+      <div class="step-padding-right"
+           v-if="bp_end">
         <span class="font-weight-style">{{$t('profiling.BPMessage')}}</span>
         <span>{{bp_end}}</span>
       </div>
@@ -102,35 +103,40 @@ limitations under the License.
           <p>{{svg.initOver?$t("public.noData"):$t("public.dataLoading")}}</p>
         </div>
       </div>
-
-      <div v-for="(item,key) in tabsArr"
-           :key="key"
-           class="chart-wrap">
-        <div class="title">{{ item.name }}</div>
-        <div class="rate-wrap">
-          <div v-if="item.timeSummary[item.rate] !== undefined">
-            <span>{{item.timeLabel}}:</span>
-            {{item.timeSummary[item.rate]}}ms</div>
-          <div v-if="item.timeSummary[item.percent] !== undefined">
-            <span>{{item.rateLabel}}:</span>{{item.timeSummary[item.percent]}}</div>
-          <div v-if="item.timeSummary.total_steps !== undefined">
-            <span>{{$t('profiling.stepNum')}}:</span>{{item.timeSummary.total_steps}}</div>
-        </div>
-        <div class="chart"
-             :id="item.id"
-             v-show="!item.noData"></div>
-        <div class="image-noData"
-             v-if="item.noData">
-          <div>
-            <img :src="require('@/assets/images/nodata.png')"
-                 alt="" />
+      <template v-for="(item,key) in tabsArr">
+        <div :key="key"
+             class="chart-wrap"
+             :class="{'chart-show':key!==2 && !bp_end}"
+             v-if="!(key===2 && !bp_end)">
+          <div class="title">{{ item.name }}</div>
+          <div class="rate-wrap">
+            <div v-if="item.timeSummary[item.rate] !== undefined">
+              <span>{{item.timeLabel}}:</span>
+              {{item.timeSummary[item.rate]}}ms
+            </div>
+            <div v-if="item.timeSummary[item.percent] !== undefined">
+              <span>{{item.rateLabel}}:</span>{{item.timeSummary[item.percent]}}
+            </div>
+            <div v-if="item.timeSummary.total_steps !== undefined">
+              <span>{{$t('profiling.stepNum')}}:</span>{{item.timeSummary.total_steps}}
+            </div>
+          </div>
+          <div class="chart"
+               :id="item.id"
+               v-show="!item.noData"></div>
+          <div class="image-noData"
+               v-if="item.noData">
+            <div>
+              <img :src="require('@/assets/images/nodata.png')"
+                   alt="" />
+            </div>
+            <p>{{item.initOver?$t("public.noData"):$t("public.dataLoading")}}</p>
           </div>
-          <p>{{item.initOver?$t("public.noData"):$t("public.dataLoading")}}</p>
         </div>
-      </div>
+      </template>
     </div>
     <div class="image-noData"
-         v-if="!(!tabsArr[0].noData && !tabsArr[1].noData && !tabsArr[2].noData && !svg.noData)">
+         v-if="tabsArr[0].noData && tabsArr[1].noData && tabsArr[2].noData && svg.noData">
       <div>
         <img :src="require('@/assets/images/nodata.png')"
              alt="" />
@@ -423,10 +429,18 @@ export default {
                   )}(ms)`;
                   this.tabsArr[0].noData = this.steps.max ? false : true;
                   this.tabsArr[0].initOver = true;
-                } else if (type === 'fp_and_bp') {
-                  option.yAxis.name = `${this.$t('profiling.fpBpTime')}(ms)`;
+                } else if (type === 'fp_and_bp' || type === 'fp') {
+                  option.yAxis.name =
+                  type === 'fp_and_bp'
+                    ? `${this.$t('profiling.fpBpTime')}(ms)`
+                    : `${this.$t('profiling.fpTime')}(ms)`;
                   this.tabsArr[1].noData = this.steps.max ? false : true;
                   this.tabsArr[1].initOver = true;
+                  if (type === 'fp_and_bp') {
+                    this.tabsArr[1].name = this.$t('profiling.deviceQueueOpTip');
+                  } else {
+                    this.tabsArr[1].name = this.$t('profiling.deviceQueueOpFpTip');
+                  }
                 } else if (type === 'tail') {
                   option.yAxis.name = `${this.$t('profiling.tailTime')}(ms)`;
                   this.tabsArr[2].noData = this.steps.max ? false : true;
@@ -439,10 +453,18 @@ export default {
           (error) => {
             if (type === 'iteration_interval') {
               this.tabsArr[0].noData = true;
-            } else if (type === 'fp_and_bp') {
+              this.tabsArr[0].initOver = true;
+            } else if (type === 'fp_and_bp' || type === 'fp') {
               this.tabsArr[1].noData = true;
+              this.tabsArr[1].initOver = true;
+              if (type === 'fp_and_bp') {
+                this.tabsArr[1].name = this.$t('profiling.deviceQueueOpTip');
+              } else {
+                this.tabsArr[1].name = this.$t('profiling.deviceQueueOpFpTip');
+              }
             } else if (type === 'tail') {
               this.tabsArr[2].noData = true;
+              this.tabsArr[2].initOver = true;
             }
           },
       );
@@ -496,7 +518,7 @@ export default {
                 : '--';
                 this.bp_end = res.data.point_info.bp_end
                 ? res.data.point_info.bp_end
-                : '--';
+                : '';
               } else {
                 this.fp_start = '--';
                 this.bp_end = '--';
@@ -509,9 +531,11 @@ export default {
                 );
               });
               if (init) {
-                this.getTimeInfo('fp-bp', 'fp_and_bp');
+                this.getTimeInfo('fp-bp', this.bp_end ? 'fp_and_bp' : 'fp');
                 this.getTimeInfo('iter-gap', 'iteration_interval');
-                this.getTimeInfo('tailing', 'tail');
+                if (this.bp_end) {
+                  this.getTimeInfo('tailing', 'tail');
+                }
               }
             } else {
               this.fp_start = '--';
@@ -715,6 +739,9 @@ export default {
         case 'fp_and_bp':
           name = this.$t('profiling.deviceQueueOpTip');
           break;
+        case 'fp':
+          name = this.$t('profiling.deviceQueueOpFpTip');
+          break;
         case 'tail':
           name = this.$t('profiling.lterationTail');
           break;
@@ -1030,6 +1057,9 @@ export default {
         }
       }
     }
+    .chart-wrap.chart-show {
+      width: calc(50% - 7.5px);
+    }
   }
   .image-noData {
     width: 100%;