feat: add english status

Issue-ID: USECASEUI-368
Change-Id: Id7acfd53cf2b34ff28add9d69e45c943c0977785
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

4 files changed, 94 insertions, 124 deletions

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
index d1ee6ae9..e1eee188 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices';
-import {pieChartconfig,lineChartconfig} from './monitorEchartsConfig';
+import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices';
+import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
 @Component({
-  selector: 'app-monitor-5g',
-  templateUrl: './monitor-5g.component.html',
-  styleUrls: ['./monitor-5g.component.less']
+    selector: 'app-monitor-5g',
+    templateUrl: './monitor-5g.component.html',
+    styleUrls: ['./monitor-5g.component.less']
 })
 export class Monitor5gComponent implements OnInit {
 
@@ -19,34 +19,34 @@ export class Monitor5gComponent implements OnInit {
     loading = false;
     selectDate: number = 0;
 
-    trafficData: any[] =[];
-    trafficLegend: any[] =[];
-    trafficChartInit :Object = pieChartconfig;
-    trafficChartData :Object;
+    trafficData: any[] = [];
+    trafficLegend: any[] = [];
+    trafficChartInit: Object = pieChartconfig;
+    trafficChartData: Object;
 
-    onlineusersData: any[] =[];
-    onlineuserXAxis :any[] = [];
-    onlineuserLegend :any[] = [];
-    onlineuserChartInit :Object = lineChartconfig;
-    onlineuserChartData :Object;
+    onlineusersData: any[] = [];
+    onlineuserXAxis: any[] = [];
+    onlineuserLegend: any[] = [];
+    onlineuserChartInit: Object = lineChartconfig;
+    onlineuserChartData: Object;
 
-    bandwidthData: any[] =[];
-    bandwidthXAxis :any[] = [];
-    bandwidthLegend :any[] = [];
-    bandwidthChartInit :Object = lineChartconfig;
-    bandwidthChartData :Object;
-  ngOnInit() {
-      this.getBusinessList()
-  }
+    bandwidthData: any[] = [];
+    bandwidthXAxis: any[] = [];
+    bandwidthLegend: any[] = [];
+    bandwidthChartInit: Object = lineChartconfig;
+    bandwidthChartData: Object;
+    ngOnInit() {
+        this.getBusinessList()
+    }
 
-    getBusinessList (): void{
+    getBusinessList(): void {
         this.loading = true;
         let paramsObj = {
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
-        this.myhttp.getSlicingBusinessList(paramsObj,false).subscribe (res => {
-            const { result_header: { result_code }, result_body: { slicing_business_list,record_number } } = res;
+        this.myhttp.getSlicingBusinessList(paramsObj, false).subscribe(res => {
+            const { result_header: { result_code }, result_body: { slicing_business_list, record_number } } = res;
             if (+result_code === 200) {
                 this.total = record_number;
                 this.loading = false;
@@ -60,7 +60,7 @@ export class Monitor5gComponent implements OnInit {
     }
     onDateChange(result: Date): void {
         console.log('Selected Time: ', result);
-        if(result === null){
+        if (result === null) {
             this.selectDate = 0;
             this.getChartsData()
         }
@@ -75,30 +75,30 @@ export class Monitor5gComponent implements OnInit {
         if (!this.listOfData.length) {
             return false;
         }
-        if(this.selectDate !==0){
+        if (this.selectDate !== 0) {
             time = this.selectDate
         }
         const service_list = [];
         this.listOfData.forEach(item => {
-            service_list.push({service_id: item.service_instance_id});
+            service_list.push({ service_id: item.service_instance_id });
         });
         this.fetchTrafficData(service_list, time);
         this.fetchOnlineusersData(service_list, time);
         this.fetchBandwidthData(service_list, time);
     }
-    fetchTrafficData(service_list, time){
-        this.myhttp.getFetchTraffic(service_list,time).subscribe (res => {
+    fetchTrafficData(service_list, time) {
+        this.myhttp.getFetchTraffic(service_list, time).subscribe(res => {
             const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
-            if (+result_code === 200 && slicing_usage_traffic_list.length >0) {
-                slicing_usage_traffic_list.forEach((item)=>{
+            if (+result_code === 200 && slicing_usage_traffic_list.length > 0) {
+                slicing_usage_traffic_list.forEach((item) => {
                     this.trafficData.push({
-                        name:item.service_id,
-                        value:item.traffic_data
+                        name: item.service_id,
+                        value: item.traffic_data
                     });
                     this.trafficLegend.push(item.service_id)
                 });
                 this.trafficChartData = {
-                    legend:{
+                    legend: {
                         orient: 'vertical',
                         left: '0px',
                         bottom: '0px',
@@ -116,23 +116,23 @@ export class Monitor5gComponent implements OnInit {
             }
         })
     }
-    fetchOnlineusersData(service_list, time){
-        this.myhttp.getFetchOnlineusers(service_list,time).subscribe (res => {
+    fetchOnlineusersData(service_list, time) {
+        this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => {
             const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res;
             if (+result_code === 200) {
-                slicing_online_user_list[0].online_user_list.map((key)=>{
+                slicing_online_user_list[0].online_user_list.map((key) => {
                     this.onlineuserXAxis.push(key.timestamp)
                 });
-                 slicing_online_user_list.forEach((item)=>{
-                     this.onlineuserLegend.push(item.service_id);
-                     this.onlineusersData.push({
-                         name: item.service_id,
-                         type: 'line',
-                         data:this.getOnlineuserSeriesData(item)
-                     })
+                slicing_online_user_list.forEach((item) => {
+                    this.onlineuserLegend.push(item.service_id);
+                    this.onlineusersData.push({
+                        name: item.service_id,
+                        type: 'line',
+                        data: this.getOnlineuserSeriesData(item)
+                    })
                 });
                 this.onlineuserChartData = {
-                    legend:{
+                    legend: {
                         bottom: '0px',
                         data: this.onlineuserLegend
                     },
@@ -144,23 +144,23 @@ export class Monitor5gComponent implements OnInit {
             }
         })
     }
-    fetchBandwidthData(service_list, time){
-        this.myhttp.getFetchBandwidth(service_list,time).subscribe (res => {
+    fetchBandwidthData(service_list, time) {
+        this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => {
             const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res;
             if (+result_code === 200) {
-                slicing_total_bandwidth_list[0].total_bandwidth_list.map((key)=>{
+                slicing_total_bandwidth_list[0].total_bandwidth_list.map((key) => {
                     this.bandwidthXAxis.push(key.timestamp)
                 });
-                slicing_total_bandwidth_list.forEach((item)=>{
+                slicing_total_bandwidth_list.forEach((item) => {
                     this.bandwidthLegend.push(item.service_id);
                     this.bandwidthData.push({
                         name: item.service_id,
                         type: 'line',
-                        data:this.getBandwidthSeriesData(item)
+                        data: this.getBandwidthSeriesData(item)
                     })
                 });
                 this.bandwidthChartData = {
-                    legend:{
+                    legend: {
                         bottom: '0px',
                         data: this.bandwidthLegend
                     },
@@ -172,16 +172,16 @@ export class Monitor5gComponent implements OnInit {
             }
         })
     }
-    getOnlineuserSeriesData(item){
+    getOnlineuserSeriesData(item) {
         let datas = [];
-        item.online_user_list.forEach((keys)=>{
+        item.online_user_list.forEach((keys) => {
             datas.push(keys.online_users)
         })
         return datas
     }
-    getBandwidthSeriesData(item){
+    getBandwidthSeriesData(item) {
         let datas = [];
-        item.total_bandwidth_list.forEach((keys)=>{
+        item.total_bandwidth_list.forEach((keys) => {
             datas.push(keys.total_bandwidth)
         })
         return datas
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
index ff5ec273..c4aeb72e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
@@ -2,45 +2,26 @@
 	<div nz-row>
 		<div nz-col nzSpan="12" class="task_status">
 			<span>Status : </span>
-			<nz-select
-				nzShowSearch
-				nzAllowClear
-				[(ngModel)]="selectedValue"
-				nzPlaceHolder="Select a processing status"
-				(ngModelChange)="processingStatusChange()"
-			>
-				<nz-option
-					*ngFor="let item of statusOptions"
-					[nzLabel]="item.title"
-					[nzValue]="item.value"
-				></nz-option>
+			<nz-select nzShowSearch nzAllowClear [(ngModel)]="selectedValue" nzPlaceHolder="Select a processing status"
+				(ngModelChange)="processingStatusChange()">
+				<nz-option *ngFor="let item of statusOptions" [nzLabel]="item.title" [nzValue]="item.value"></nz-option>
 			</nz-select>
 		</div>
 	</div>
 	<div>
-		<nz-table
-			#basicTable
-			nzShowPagination
-			nzPageSizeOptions
-			nzShowSizeChanger
-			[nzTotal]="total"
-			[nzLoading]="loading"
-			[nzData]="listOfData"
-			[nzPageIndex]="pageNum"
-			[nzPageSize]="pageSize"
-			[nzFrontPagination]="false"
-			(nzPageSizeChange)="pageSizeChange($event)"
-			(nzPageIndexChange)="pageNumChange($event)"
-		>
+		<nz-table #basicTable nzShowPagination nzPageSizeOptions nzShowSizeChanger [nzTotal]="total"
+			[nzLoading]="loading" [nzData]="listOfData" [nzPageIndex]="pageNum" [nzPageSize]="pageSize"
+			[nzFrontPagination]="false" (nzPageSizeChange)="pageSizeChange($event)"
+			(nzPageIndexChange)="pageNumChange($event)">
 			<thead>
 				<tr>
-					<th>任务ID</th>
-					<th>任务名称</th>
+					<th>Task ID</th>
+					<th>Task Name</th>
 					<th>S-NSSAI</th>
-					<th>切片业务类型</th>
-					<th>到达时间</th>
-					<th>处理环节</th>
-					<th>操作</th>
+					<th>Service Type</th>
+					<th>Created time</th>
+					<th>Status</th>
+					<th>Action</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -50,35 +31,21 @@
 					<td>{{ data.service_snssai }}</td>
 					<td>{{ data.service_type }}</td>
 					<td>{{ data.create_time | date: "yyyy-MM-dd HH:mm:ss"}}</td>
-					<td>{{ data.status }}</td>
+					<td>{{ data.processing_status }}</td>
 					<td>
-						<span
-							*ngIf="data.processing_status === 'Planning'"
-							class="task_operation_disabled"
-							>{{ data.operation }}</span
-						>
-						<a
-							(click)="showdetail(data)"
-							*ngIf="data.processing_status !== 'Planning'"
-							>{{ data.operation }}</a
-						>
+						<span *ngIf="data.processing_status === 'Planning'"
+							class="task_operation_disabled">{{ data.operation }}</span>
+						<a (click)="showdetail(data)"
+							*ngIf="data.processing_status !== 'Planning'">{{ data.operation }}</a>
 					</td>
 				</tr>
 			</tbody>
 		</nz-table>
 	</div>
-	<app-slicing-task-model
-		[moduleTitle]="moduleTitle"
-		[showDetail]="showDetail"
-		[taskId]="taskId"
-		(cancel)="showDetail = $event"
-	>
+	<app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [taskId]="taskId"
+		(cancel)="showDetail = $event">
 	</app-slicing-task-model>
-	<app-check-process-model
-		[moduleTitle]="moduleTitle"
-		[showProcess]="showProcess"
-		[taskId]="taskId"
-		(cancel)="showProcess = $event"
-	>
+	<app-check-process-model [moduleTitle]="moduleTitle" [showProcess]="showProcess" [taskId]="taskId"
+		(cancel)="showProcess = $event">
 	</app-check-process-model>
-</div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
index bc14d4ff..da4aa09f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
@@ -1,13 +1,16 @@
 nz-select {
-    width: 200px;
+    width: 220px;
 }
-.task_status{
+
+.task_status {
     margin-bottom: 20px;
-    span{
+
+    span {
         margin-right: 5%;
     }
 }
+
 .task_operation_disabled {
     color: #A2ABCE;
     cursor: default;
-}
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
index fd135a61..e9cb8398 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -94,20 +94,20 @@ export class SlicingTaskManagementComponent implements OnInit {
     this.listOfData = list.map(item => {
       switch (item.processing_status) {
         case 'Planning':
-          item.status = '规划阶段';
-          item.operation = '任务处理'
+          // item.status = '规划阶段';
+          item.operation = 'Process Task'
           break;
         case 'Waiting to Confirm':
-          item.status = '审核阶段';
-          item.operation = '任务处理'
+          // item.status = '审核阶段';
+          item.operation = 'Process Task'
           break;
         case 'Creating':
-          item.status = '切片创建中';
-          item.operation = '查看进度'
+          // item.status = '切片创建中';
+          item.operation = 'View Progress'
           break;
         case 'Completed':
-          item.status = '创建完成';
-          item.operation = '查看结果'
+          // item.status = '创建完成';
+          item.operation = 'View Result'
           break;
       }
       return item;