fix(ui): add more informations for template instances list #4824

ui/src/app/shared/tabs/tabs.component.ts

@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs/Subscription';
 
 export class Tab {
     translate: string;
+    translate_args?: {};
     icon: string;
     key: string;
     default: boolean;
@@ -36,9 +37,13 @@ export class TabsComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges() {
-        this.selected = this.tabs.find(t => t.default);
         if (!this.selected) {
-            this.selected = this.tabs[0];
+            let default_tab = this.tabs.find(t => t.default);
+            if (default_tab) {
+                this.selected = default_tab;
+            } else {
+                this.selected = this.tabs[0];
+            }
         }
     }
 

ui/src/app/shared/tabs/tabs.html

@@ -1,7 +1,7 @@
 <sm-menu class="pointing secondary stackable">
     <a *ngFor="let t of tabs" sm-item [class.active]="selected.key === t.key" (click)="clickSelect(t)">
         <i *ngIf="t.icon" [ngClass]="[t.icon, 'icon']"></i>
-        {{t.translate | translate}}
+        {{t.translate | translate:t.translate_args}}
         <app-warning-tab *ngIf="warnings && warnings[t.key]" [warnings]="warnings[t.key]"></app-warning-tab>
     </a>
-</sm-menu>
+</sm-menu>

ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html

@@ -27,10 +27,12 @@
                 <div class="ui grid">
                     <div class="sixteen wide column">
                         <app-data-table [withSelect]="selectFunc" (selectChange)="selectChange($event)"
-                            [withPagination]="10" [columns]="columnsInstances" [data]="instances" [loading]="loadingInstances"></app-data-table>
+                            [withPagination]="10" [columns]="columnsInstances" [data]="instances"
+                            [loading]="loadingInstances"></app-data-table>
                     </div>
                     <div class="sixteen wide column centered">
-                        <button class="ui positive button" [class.disabled]="selectedInstanceKeys.length === 0" (click)="clickGoToParam()">
+                        <button class="ui positive button" [class.disabled]="selectedInstanceKeys.length === 0"
+                            (click)="clickGoToParam()">
                             {{ 'btn_next' | translate }}
                         </button>
                     </div>
@@ -41,13 +43,16 @@
                     <div class="sixteen wide column">
                         <div class="ui styled fluid accordion">
                             <ng-container *ngFor="let instance of selectedInstances;let i = index">
-                                <div class="title" [class.active]="accordionOpenedIndex === i" (click)="accordionOpen($event, i)">
+                                <div class="title" [class.active]="accordionOpenedIndex === i"
+                                    (click)="accordionOpen($event, i)">
                                     <i class="dropdown icon"></i>{{instance.request.workflow_name}}
                                 </div>
                                 <div class="content" [class.active]="accordionOpenedIndex === i">
-                                    <app-workflow-template-param-form *ngIf="accordionOpenedIndex === i" [project]="instance.project"
-                                        [workflowTemplate]="workflowTemplate" [workflowTemplateInstance]="instance"
-                                        (paramChange)="changeParam(instance.id, $event)"></app-workflow-template-param-form>
+                                    <app-workflow-template-param-form *ngIf="accordionOpenedIndex === i"
+                                        [project]="instance.project" [workflowTemplate]="workflowTemplate"
+                                        [workflowTemplateInstance]="instance"
+                                        (paramChange)="changeParam(instance.id, $event)">
+                                    </app-workflow-template-param-form>
                                 </div>
                             </ng-container>
                         </div>
@@ -68,7 +73,8 @@
             <div *ngIf="currentStep === 2" class="sixteen wide column">
                 <div class="ui grid">
                     <div class="sixteen wide column">
-                        <app-data-table *ngIf="response" [columns]="columnsOperations" [data]="response.operations"></app-data-table>
+                        <app-data-table *ngIf="response" [withPagination]="10" [columns]="columnsOperations"
+                            [data]="response.operations"></app-data-table>
                     </div>
                     <div class="four wide column left floated">
                         <button class="ui primary button" (click)="clickGoToInstanceReset()">

ui/src/app/views/settings/workflow-template/edit/workflow-template.edit.component.ts

@@ -3,13 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { AuditWorkflowTemplate } from 'app/model/audit.model';
 import { Group } from 'app/model/group.model';
-import {
-    InstanceStatus,
-    InstanceStatusUtil,
-    WorkflowTemplate,
-    WorkflowTemplateError,
-    WorkflowTemplateInstance
-} from 'app/model/workflow-template.model';
+// tslint:disable-next-line: max-line-length
+import { InstanceStatus, InstanceStatusUtil, WorkflowTemplate, WorkflowTemplateError, WorkflowTemplateInstance } from 'app/model/workflow-template.model';
 import { Workflow } from 'app/model/workflow.model';
 import { GroupService } from 'app/service/group/group.service';
 import { WorkflowTemplateService } from 'app/service/workflow-template/workflow-template.service';
@@ -325,7 +320,20 @@ export class WorkflowTemplateEditComponent implements OnInit {
                 this.loadingInstances = false;
                 this._cd.markForCheck();
             }))
-            .subscribe(is => this.instances = is.sort((a, b) => a.key() < b.key() ? -1 : 1));
+            .subscribe(is => {
+                this.instances = is.sort((a, b) => a.key() < b.key() ? -1 : 1)
+                this.tabs = this.tabs.map((tab) => {
+                    tab.default = false;
+                    if (tab.key === 'instances') {
+                        tab.translate = 'workflow_template_instances_with_nb';
+                        tab.translate_args = {
+                            nb: this.instances.length,
+                        };
+                    }
+
+                    return tab;
+                });
+            });
     }
 
     clickCreateBulk() {

ui/src/assets/i18n/en.json

@@ -892,6 +892,7 @@
   "workflow_template": "Workflow template",
   "workflow_templates": "Workflow templates",
   "workflow_template_instances": "Instances",
+  "workflow_template_instances_with_nb": "Instances ({{nb}})",
   "workflow_template_help_line_1": "Your workflow was not generated from a template.",
   "workflow_template_help_line_2": "A workflow template allows you to quickly create then update a workflow and its components.",
   "workflow_template_help_line_3": "You can init a new template from current workflow.",
@@ -933,4 +934,4 @@
   "workflow_error_unknown_key_description": "Key not found, please check that your all keys mentioned really exist. Or you can check if your SSH key which you mentioned in your application settings for your git repository is always valid and added on your git repository to have at least READ access.",
   "workflow_error_bad_vcs_strategy_title": "Bad VCS settings on application",
   "workflow_error_bad_vcs_strategy_description": "Please check if your SSH key which you mentioned in your application settings for your git repository is always valid and added on your git repository to have at least READ access. You can also check that you have a SSH key mentioned if you selected SSH mode on your application."
-}
+}

ui/src/assets/i18n/fr.json

@@ -914,6 +914,7 @@
   "workflow_template_imported_from_url": "Importé depuis une URL",
   "workflow_template_init_from_workflow": "Initialiser un modèle",
   "workflow_template_instances": "Instances",
+  "workflow_template_instances_with_nb": "Instances ({{nb}})",
   "workflow_template_no_usage": "Ce modèle de workflow n'est pas utilisé sur l'un de vos workflows",
   "workflow_template_not_imported_yet": "Pas encore importé",
   "workflow_template_saved": "Modèle de workflow sauvegardé",
@@ -933,4 +934,4 @@
   "workflow_wizard_select_repo": "Sélectionner un dépot",
   "workflow_wizard_select_template": "Sélectionner un modèle de workflow",
   "workfow_tag_no": "Aucun tag"
-}
+}