catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.html

   1 <div *ngIf="!isModal">
   2     <div *ngIf="serviceHasDistibutions" class="w-sdc-distribution-view-header">
   3         <div class="w-sdc-distribution-view-title" data-tests-id="DistributionsLabel">DISTRIBUTION <span class="blue-font" data-tests-id="totalArtifacts">[{{distributions.length}}]</span></div>
   4         <div class="header-spacer"></div>
   5         <input type="text" value="GeeksForGeeks" id="inputForCopyToClipboard" [ngStyle]="{'z-index': '-2', 'width': '25px'}">
   6         <div class="top-search">
   7             <input type="text"
   8                    style="width: auto;"
   9                    class="search-text"
  10                    data-tests-id="searchTextbox"
  11                    placeholder="Search"
  12                    data-ng-model="searchBind"
  13                    ng-model-options="{ debounce: 500 }"
  14                    (keyup)="updateFilter($event)"/>
  15         </div>
  16         <div class="sprite-new refresh-btn" data-tests-id="refreshButton" (click)="refreshDistributions()" title="Refresh"></div>
  17     </div>
  18     <div class="w-sdc-distribution-view-header w-sdc-distribution-view-title" data-tests-id="noDistributionsLabel" *ngIf="!serviceHasDistibutions">No Distributions To Present</div>
  19 </div>
  20
  21 <div *ngIf="serviceHasDistibutions">
  22     <ngx-datatable
  23             [columnMode]="'flex'"
  24             [rowHeight]="'auto'"
  25             [reorderable]="false"
  26             [swapColumns]="false"
  27             [scrollbarV]="false"
  28             [rows]="distributions"
  29             [sorts]="[{prop: 'timestamp', dir: 'desc'}]"
  30
  31             #distributionTable>
  32         <ngx-datatable-row-detail [rowHeight]="'auto'">
  33             <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
  34                 <app-distribution-component-table [rowDistributionID]=row.distributionID [isModal]="isModal"
  35                                                   [statusFilter]="statusFilter"></app-distribution-component-table>
  36             </ng-template>
  37         </ngx-datatable-row-detail>
  38         <ngx-datatable-column [resizeable]="false" [flexGrow]="2" name="Distribution ID">
  39             <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded" >
  40                 <div class="expand-collapse-cell">
  41                    <a><svg-icon [clickable]="true" class="expand-collapse-icon"
  42                               [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
  43                               [size]="'medium'" (click)="expandRow(row, expanded)" [attr.data-tests-id]="generateDataTestID('expandIcon_', row.distributionID, isModal)"></svg-icon></a>
  44
  45                 </div>
  46                 <div class="distributionIDBlock">
  47                     <div class = "distributionRowValue" [attr.data-tests-id]="generateDataTestID('distID_', row.distributionID, isModal)">{{ row.distributionID }}</div>
  48                 </div>
  49             </ng-template>
  50         </ngx-datatable-column>
  51         <ngx-datatable-column [resizeable]="false" [flexGrow]="1" name="User id">
  52             <ng-template ngx-datatable-cell-template let-row="row">
  53                 <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('userID_', row.distributionID)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="row.userId">{{ row.userId }}</div>
  54             </ng-template>
  55         </ngx-datatable-column>
  56         <ngx-datatable-column [resizeable]="false" [flexGrow]="1" name="Time[UTC]">
  57             <ng-template ngx-datatable-cell-template let-row="row">
  58                 <div class = "distributionRowValue" [attr.data-tests-id]="generateDataTestID('timeStamp_', row.distributionID)">{{ row.timestamp }} </div>
  59             </ng-template>
  60         </ngx-datatable-column>
  61         <ngx-datatable-column [resizeable]="false"[flexGrow]="1" name="Status" >
  62             <ng-template ngx-datatable-cell-template let-row="row">
  63                 <div>
  64                     <span class="statusIcon">
  65                         <svg-icon [clickable]="true" class="expand-collapse-icon"
  66                         [name]= "getIconName(row.deployementStatus)" [mode]="'primary'"
  67                         [size]="'medium'"></svg-icon>
  68                     </span>
  69                     <span class = "distributionRowValue" [attr.data-tests-id]="generateDataTestID('status_', row.distributionID)">
  70                         {{ row.deployementStatus }}
  71                     </span>
  72                     <span class="btnMarkAsDistributed" (click)="markDeploy(row.distributionID, row.deployementStatus)">
  73                             <svg-icon [clickable]="true" [name]= "'success'" [mode]="getIconMode(row.deployementStatus)"
  74                                       [size]="'medium'"></svg-icon>
  75                     </span>
  76                 </div>
  77             </ng-template>
  78         </ngx-datatable-column>
  79     </ngx-datatable>
  80 </div>