catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html

   1 <div class="tosca-artifact-page">
   2     <loader [display]="isLoading" [relative]="true"></loader>
   3     <ngx-datatable
   4             columnMode="flex"
   5             [headerHeight]="40"
   6             [rowHeight]="35"
   7             [reorderable]="false"
   8             [swapColumns]="false"
   9             [rows]="toscaArtifacts$ | async"
  10             [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]"
  11             #toscaArtifactsTable
  12             (activate)="onActivate($event)">
  13         <ngx-datatable-row-detail [rowHeight]="80">
  14             <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
  15                 <div>Label: {{row.artifactLabel}}</div>
  16                 <div>UUID: {{row.artifactUUID}}</div>
  17                 <div>Description: {{row.description}}</div>
  18             </ng-template>
  19         </ngx-datatable-row-detail>
  20         <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3"
  21                               [prop]="'artifactDisplayName'">
  22             <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
  23                 <div class="expand-collapse-cell">
  24                     <svg-icon [clickable]="true" class="expand-collapse-icon"
  25                               [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
  26                               [size]="'medium'"></svg-icon>
  27                     <span>{{row.artifactDisplayName }}</span>
  28                 </div>
  29             </ng-template>
  30         </ngx-datatable-column>
  31         <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="3">
  32             <ng-template ngx-datatable-cell-template let-row="row">
  33                 {{row.artifactType}}
  34             </ng-template>
  35         </ngx-datatable-column>
  36         <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1">
  37             <ng-template ngx-datatable-cell-template let-row="row">
  38                 {{ row.artifactVersion }}
  39             </ng-template>
  40         </ngx-datatable-column>
  41         <ngx-datatable-column *ngIf="isService() && isCheckedOut()" [resizeable]="false" name="Upload" [flexGrow]="1">
  42             <ng-template ngx-datatable-cell-template let-row="row">
  43                 <div class="download-artifact-button">
  44                     <upload-artifact
  45                         [artifact]="row"
  46                         [componentId]="componentId"
  47                         [componentType]="componentType"
  48                         [disabled]="!isCheckedOut()"
  49                         [extensions]="getExtension(row.artifactType)"
  50                         (onFileUpload)="onFileUpload($event, row.artifactType)"
  51                         testId="upload_{{row.artifactDisplayName}}"
  52                     ></upload-artifact>
  53                 </div>
  54             </ng-template>
  55         </ngx-datatable-column>
  56         <ngx-datatable-column [resizeable]="false" name="Download" [flexGrow]="1">
  57             <ng-template ngx-datatable-cell-template let-row="row">
  58                 <div class="download-artifact-button">
  59                     <download-artifact [artifact]="row" [componentId]="componentId"
  60                                        [componentType]="componentType"
  61                                        testId="download_{{row.artifactDisplayName}}"></download-artifact>
  62                 </div>
  63             </ng-template>
  64         </ngx-datatable-column>
  65     </ngx-datatable>
  66 </div>