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

   1 <div class="status-page">
   2   <ngx-datatable
   3           class="material"
   4           [columnMode]="'standard'"
   5           [rowHeight]="'auto'"
   6           [reorderable]="false"
   7           [swapColumns]="false"
   8           [rows]="artifacts"
   9           [scrollbarH]="true"
  10            #statusTable>
  11     <ngx-datatable-row-detail [rowHeight]="'auto'">
  12       <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
  13           <div *ngFor="let status of row.statuses">
  14             <span class = "status" [attr.data-tests-id]="generateDataTestID('statusTimeStamp_',componentName, row.name, status.status)">{{ status.timeStamp | date:'short':'UTC'}}</span>
  15             <span class = "status" [attr.data-tests-id]="generateDataTestID('statusValue_',componentName, row.name, status.status)">{{ status.status }}</span>
  16           </div>
  17       </ng-template>
  18     </ngx-datatable-row-detail>
  19     <ngx-datatable-column name="Component ID" [resizeable]="false" [width]="250">
  20       <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded" >
  21         <div>
  22           <span class="urlValue">
  23             <svg-icon [clickable]="true" class="expand-collapse-icon"
  24             [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
  25             [size]="'medium'" (click)="expandRow(row)" [attr.data-tests-id]="generateDataTestID('expandIcon_compID_', componentName, row.name)"></svg-icon>
  26           </span>
  27           <span class="urlValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('compID_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="componentName">
  28             {{ componentName }}
  29           </span>
  30         </div>
  31       </ng-template>
  32     </ngx-datatable-column>
  33     <ngx-datatable-column [resizeable]="false" [width]="280" name="Artifact Name">
  34       <ng-template ngx-datatable-cell-template let-row="row">
  35         <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('artName_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="row.name">{{ row.name }}</div>
  36       </ng-template>
  37     </ngx-datatable-column>
  38     <ngx-datatable-column [resizeable]="false" [width]="380" name="URL">
  39       <ng-template ngx-datatable-cell-template let-row="row">
  40         <div>
  41           <span class="urlValue ellipsisCell" id="urlCell" [attr.data-tests-id]="generateDataTestID('url_',componentName, row.name)">{{ row.url }}</span>
  42           <span class="urlCopyIcon" title="Copy URL">
  43               <svg-icon-label [clickable]="true" [mode]="'primary'" [labelPlacement]="'right'"
  44               [label]="" [name]="'copy-o'" [testId]="'copyToClipboard'"
  45               (click)="copyToClipboard(row.url)">
  46               </svg-icon-label>
  47           </span>
  48         </div>
  49       </ng-template>
  50     </ngx-datatable-column>
  51     <ngx-datatable-column [resizeable]="false" [width]="180" name="Time(UTC)">
  52       <ng-template ngx-datatable-cell-template let-row="row">
  53         <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('time_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="getLatestArtifact(row.name).timeStamp | date:'short':'UTC'">{{ getLatestArtifact(row.name).timeStamp | date:'short':'UTC'}}</div>
  54       </ng-template>
  55     </ngx-datatable-column>
  56     <ngx-datatable-column [resizeable]="false" [width]="280" name="Status">
  57       <ng-template ngx-datatable-cell-template let-row="row">
  58         <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('status_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="getLatestArtifact(row.name).status">{{ getLatestArtifact(row.name).status }}</div>
  59       </ng-template>
  60     </ngx-datatable-column>
  61   </ngx-datatable>
  62 </div>