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

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