-
Notifications
You must be signed in to change notification settings - Fork 4.6k
/
helm-chart.component.html
109 lines (109 loc) · 6.18 KB
/
helm-chart.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<div>
<div class="row chart-tool">
<div class="toolbar">
<div class="row flex-items-xs-right option-right rightPos">
<div class="flex-xs-middle">
<hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}"
[currentValue]="lastFilteredChartName"
(filterEvt)="updateFilterValue($event)"></hbr-filter>
<span class="card-btn" (click)="showCard(true)" (mouseenter)="mouseEnter('card') " (mouseleave)="mouseLeave('card')">
<clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
</span>
<span class="list-btn" (click)="showCard(false)" (mouseenter)="mouseEnter('list') " (mouseleave)="mouseLeave('list')">
<clr-icon [ngClass]="{'is-highlight': !isCardView || isHovering('list') }" shape="view-list"></clr-icon>
</span>
<span class="filter-divider"></span>
<span class="refresh-btn" (click)="refresh()">
<clr-icon shape="refresh"></clr-icon>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div *ngIf="!isCardView" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
<clr-dg-action-bar>
<button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasProjectAdminRole" (click)="onChartUpload($event)">
<clr-icon shape="upload" size="16"></clr-icon> {{'HELM_CHART.UPLOAD' | translate}}
</button>
</clr-dg-action-bar>
<clr-dg-column >{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
<clr-dg-column >{{'HELM_CHART.STATUS' | translate}}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.CHARTVERSIONS' | translate}}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.CREATED' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *ngFor="let chart of charts" [clrDgItem]="chart">
<clr-dg-cell>
<span class="list-img">
<img class="size-24 margin-right-12" [src]="chart.icon ?chart.icon:chartDefaultIcon" (error)="getDefaultIcon(chart);" />
</span>
<a href="javascript:void(0)" (click)="onChartClick(chart)">{{ chart.name }}</a>
</clr-dg-cell>
<clr-dg-cell>{{ getStatusString(chart) | translate }}</clr-dg-cell>
<clr-dg-cell>{{ chart.total_versions }}</clr-dg-cell>
<clr-dg-cell>{{ chart.created | date }}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
{{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>
</div>
<div *ngIf="isCardView" class="row card-container">
<div *ngFor="let item of charts;" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a let i=index; class="card clickable" (click)="onChartClick(item)">
<div class="card-header">
<div class="card-icon">
<img class="size-60" [src]="item.icon ?item.icon:chartDefaultIcon" (error)="getDefaultIcon(item);" />
</div>
<div class="card-title">{{item.name}}</div>
</div>
<div class="card-footer">
<div class="row flex-items-xs-between">
<div class="col-xs-6">
<span class="version-text">{{item.total_versions}}</span>
<label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
<label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
</div>
<div class="col-xs-6">
<span class="label"
[class.label-danger]="item.deprecated"
[class.label-success]="!item.deprecated"
>{{getStatusString(item) | translate}}</span>
</div>
</div>
</div>
</a>
</div>
<div *ngIf="loading">
<span class="vertical-helper"></span>
<span class="spinner"></span>
</div>
</div>
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate}}</h3>
<div class="modal-body">
<form #chartUploadForm="ngForm" enctype="multipart/form-data" (ngSubmit)="upload()">
<section class="form-block">
<div class="form-group">
<label for="chart"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
<input type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
</div>
<div class="form-group">
<label for="prov"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
<input type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
</div>
</section>
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
</button>
<span *ngIf="isUploading" class="spinner spinner-inline">
Loading...
</span>
</form>
</div>
</clr-modal>
</div>