Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00
Code Issues Releases Activity

feat(ui): ui-improvements-helm EE-3476 (#7344)

Browse source 
* feat(ui): helm views ui update EE-3476
This commit is contained in:
Ali 2022-08-01 19:13:58 +12:00 • committed by GitHub
parent e28a1491d4
commit 57e53d1a21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 283 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

25
app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html
View file

@ -1,5 +1,10 @@
<rd-widget>
<rd-widget-header icon="fa-dharmachakra" title-text="Additional repositories"></rd-widget-header>
<div class="toolBar px-5 pt-5">
<div class="toolBarTitle">
<pr-icon icon="'svg-helm'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
Additional repositories
</div>
</div>
<rd-widget-body>
<div class="actionBar">
<form class="form-horizontal" name="addUserHelmRepoForm">
@ -7,7 +12,7 @@
<span class="col-sm-12 text-muted small"> Add a Helm repository. All Helm charts in the repository will be added to the list. </span>
</div>
<div class="form-group">
<div class="form-group mb-2">
<div class="col-sm-12">
<input
type="url"
@ -22,16 +27,20 @@
</div>
<div class="form-group nomargin" ng-show="addUserHelmRepoForm.repo.$invalid">
<div class="col-sm-12 small text-warning">
<div class="small">
<div ng-messages="addUserHelmRepoForm.repo.$error">
<p ng-message="pattern"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A valid URL beginning with http(s) is required.</p>
<p class="vertical-center" ng-message="pattern"
><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> A valid URL beginning with http(s) is required.</p
>
</div>
</div>
</div>
<div class="form-group" ng-show="$ctrl.doesRepoExist()">
<div class="col-sm-12 small text-warning">
<div> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Helm repo already exists. </div>
<div class="form-group nomargin" ng-show="$ctrl.doesRepoExist()">
<div class="small">
<div ng-messages="addUserHelmRepoForm.repo.$error">
<p class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Helm repo already exists.</p>
</div>
</div>
</div>
@ -39,7 +48,7 @@
<div class="col-sm-12">
<button
type="button"
class="btn btn-sm btn-default nomargin"
class="btn btn-primary btn-sm nomargin"
ng-click="$ctrl.addRepository()"
ng-disabled="$ctrl.state.isAddingRepo || addUserHelmRepoForm.repo.$invalid || $ctrl.doesRepoExist()"
analytics-on

19
app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list-item/helm-templates-list-item.html
View file

@ -1,12 +1,19 @@
<!-- helm chart -->
<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item" ng-click="$ctrl.onSelect($ctrl.model)">
<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item mx-[10px]" ng-click="$ctrl.onSelect($ctrl.model)">
<div class="blocklist-item-box">
<!-- helmchart-image -->
<span ng-if="$ctrl.model.icon">
<img class="blocklist-item-logo" ng-src="{{ $ctrl.model.icon }}" />
<fallback-image
src="$ctrl.model.icon"
fallback-icon="'svg-helm'"
class-name="'blocklist-item-logo h-16 w-auto'"
fallback-class-name="'icon-nested-blue !h-12 !w-12'"
fallback-mode="'primary'"
size="'xl'"
></fallback-image>
</span>
<span class="blocklist-item-logo" ng-if="!$ctrl.model.icon">
<i class="fa fa-dharmachakra fa-4x blue-icon" aria-hidden="true"></i>
<span class="blocklist-item-logo vertical-center" ng-if="!$ctrl.model.icon">
<pr-icon icon="'svg-helm'" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
</span>
<!-- !helmchart-image -->
<!-- helmchart-details -->
@ -18,8 +25,8 @@
{{ $ctrl.model.name }}
</span>
<span class="space-left blocklist-item-subtitle">
<span>
<i class="fa fa-dharmachakra" aria-hidden="true"></i>
<span class="vertical-center">
<pr-icon icon="'svg-helm'" mode="'primary'"></pr-icon>
</span>
<span> Helm </span>
</span>

58
app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
View file

@ -1,37 +1,37 @@
<div class="datatable">
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle"> <pr-icon icon="$ctrl.titleIcon" class-name="space-right"></pr-icon> {{ $ctrl.titleText }} </div>
</div>
<div class="actionBar">
<div>
<span style="width: 25%">
<ui-select ng-model="$ctrl.state.selectedCategory" theme="bootstrap">
<ui-select-match placeholder="Select a category">
<a class="btn btn-xs btn-link pull-right" ng-click="$ctrl.clearCategory()"><i class="glyphicon glyphicon-remove"></i></a>
<span>{{ $select.selected }}</span>
</ui-select-match>
<ui-select-choices repeat="category in ($ctrl.state.categories | filter: $select.search)">
<span>{{ category }}</span>
</ui-select-choices>
</ui-select>
</span>
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue space-right'"></pr-icon>
{{ $ctrl.titleText }}
</div>
</div>
<div class="searchBar" style="border-top: 2px solid #f6f6f6">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
<div class="searchBar vertical-center !mr-0">
<pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div>
<ui-select ng-model="$ctrl.state.selectedCategory" theme="bootstrap" append-to-body="true">
<ui-select-match placeholder="Select a category">
<a class="btn btn-xs btn-link pull-right vertical-center" ng-click="$ctrl.clearCategory()">
<pr-icon icon="'x'" feather="true"></pr-icon>
</a>
<span class="vertical-center">{{ $select.selected }}</span>
</ui-select-match>
<ui-select-choices repeat="category in ($ctrl.state.categories | filter: $select.search)">
<span>{{ category }}</span>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="blocklist">

2
app/kubernetes/components/helm/helm-templates/helm-templates.controller.js
View file

@ -83,7 +83,7 @@ export default class HelmTemplatesController {
}
async selectHelmChart(chart) {
this.$anchorScroll('view-top');
window.scrollTo(0, 0);
this.state.showCustomValues = false;
this.state.chart = chart;
await this.getHelmValues();

107
app/kubernetes/components/helm/helm-templates/helm-templates.html
View file

@ -2,14 +2,19 @@
<information-panel title-text="Information" ng-if="!$ctrl.state.chart">
<span class="small text-muted">
<p>
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
This is a first version for Helm charts, for more information see this <a href="https://www.portainer.io/blog/portainer-now-with-helm-support" target="_blank">blog post</a>.
</p>
<p ng-if="$ctrl.state.globalRepository === ''">
<i class="fa fa-exclamation-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<p class="inline-flex flex-row items-center">
<pr-icon icon="'info'" feather="true" class="mr-1 vertical-center" mode="'primary'"></pr-icon>
This is a first version for Helm charts, for more information see this&nbsp;<a
class="text-blue-8 hover:underline hover:text-blue-8"
href="https://www.portainer.io/blog/portainer-now-with-helm-support"
target="_blank"
>blog post</a
>.</p
>
<p ng-if="$ctrl.state.globalRepository === ''" class="inline-flex items-center">
<pr-icon icon="'info'" feather="true"></pr-icon>
<span>The Global Helm Repository is not configured.</span>
<a ng-if="$ctrl.state.isAdmin" ui-sref="portainer.settings">Configure Global Helm Repository in Settings</a>
<a ng-if="$ctrl.state.isAdmin" ui-sref="portainer.settings">Configure Global Helm Repository in Settings</a>.
</p>
</span>
</information-panel>
@ -18,7 +23,16 @@
<!-- helmchart-form -->
<div class="col-sm-12" ng-if="$ctrl.state.chart">
<rd-widget>
<rd-widget-custom-header icon="$ctrl.state.chart.icon" title-text="$ctrl.state.chart.name"></rd-widget-custom-header>
<div class="toolBarTitle vertical-center pt-5 px-5 text-muted">
<fallback-image
src="$ctrl.state.chart.icon"
fallback-icon="'svg-helm'"
class-name="'h-8 w-8'"
fallback-class-name="'icon-nested-blue'"
fallback-mode="'primary'"
></fallback-image>
{{ $ctrl.state.chart.name }}
</div>
<rd-widget-body classes="padding">
<form class="form-horizontal" name="$ctrl.helmTemplateCreationForm">
<!-- description -->
@ -26,7 +40,7 @@
<div class="col-sm-12 form-section-title"> Description </div>
<div class="form-group">
<div class="col-sm-12">
<div class="template-note" ng-bind-html="$ctrl.state.chart.description"></div>
<div class="text-xs text-muted" ng-bind-html="$ctrl.state.chart.description"></div>
</div>
</div>
</div>
@ -46,17 +60,16 @@
></select>
</div>
</div>
<div class="form-group" ng-if="!$ctrl.state.resourcePool">
<div class="col-sm-12 small text-muted">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
<div class="col-sm-12 small text-muted vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
You do not have access to any namespace. Contact your administrator to get access to a namespace.
</div>
</div>
<!-- !namespace-input -->
<!-- name-input -->
<div class="form-group">
<label for="release_name" class="col-sm-2 control-label text-left">Name</label>
<div class="form-group mb-2">
<label for="release_name" class="col-sm-2 control-label text-left required">Name</label>
<div class="col-sm-10">
<input
type="text"
@ -70,12 +83,17 @@
</div>
</div>
<div class="form-group" ng-show="$ctrl.helmTemplateCreationForm.release_name.$invalid">
<div class="col-sm-12 small text-warning">
<div class="small">
<div ng-messages="$ctrl.helmTemplateCreationForm.release_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="pattern">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field must consist of lower case alphanumeric characters or '-', start with an alphabetic
character, and end with an alphanumeric character (e.g. 'my-name', or 'abc-123').
<div class="col-sm-2"></div>
<p class="vertical-center col-sm-10 text-muted" ng-message="required">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>
This field is required.
</p>
<p class="vertical-center col-sm-10 text-muted" ng-message="pattern">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>
This field must consist of lower case alphanumeric characters or '-', start with an alphabetic character, and end with an alphanumeric character (e.g. 'my-name',
or 'abc-123').
</p>
</div>
</div>
@ -83,35 +101,44 @@
<!-- !name-input -->
<div class="form-group">
<div class="col-sm-12">
<a class="small interactive" ng-if="!$ctrl.state.showCustomValues && !$ctrl.state.loadingValues" ng-click="$ctrl.state.showCustomValues = true;">
<i class="fa fa-plus space-right" aria-hidden="true"></i> Show custom values
</a>
<span class="small interactive" ng-if="$ctrl.state.loadingValues"> <i class="fa fa-sync-alt space-right" aria-hidden="true"></i> Loading values.yaml... </span>
<a class="small interactive" ng-if="$ctrl.state.showCustomValues" ng-click="$ctrl.state.showCustomValues = false;">
<i class="fa fa-minus space-right" aria-hidden="true"></i> Hide custom values
</a>
<button
ng-if="!$ctrl.state.showCustomValues && !$ctrl.state.loadingValues"
class="btn btn-xs btn-default vertical-center mr-2 !ml-0"
ng-click="$ctrl.state.showCustomValues = true;"
>
<pr-icon icon="'plus'" feather="true" class="vertical-center"></pr-icon>
Show custom values
</button>
<span class="small interactive vertical-center" ng-if="$ctrl.state.loadingValues">
<pr-icon icon="'refresh-cw'" class="mr-1" feather="true"></pr-icon>
Loading values.yaml...
</span>
<button ng-if="$ctrl.state.showCustomValues" class="btn btn-xs btn-default vertical-center mr-2 !ml-0" ng-click="$ctrl.state.showCustomValues = false;">
<pr-icon icon="'minus'" feather="true" class="vertical-center"></pr-icon>
Hide custom values
</button>
</div>
</div>
<!-- values override -->
<div ng-if="$ctrl.state.showCustomValues">
<!-- web-editor -->
<div>
<div class="col-sm-12 form-section-title"> Web editor </div>
<div class="form-group">
<span class="col-sm-12 text-muted small">
You can get more information about Helm values file format in the
<a href="https://helm.sh/docs/chart_template_guide/values_files/" target="_blank">official documentation</a>.
</span>
</div>
<div class="form-group">
<div class="col-sm-12">
<code-editor
<web-editor-form
identifier="helm-app-creation-editor"
placeholder="# Define or paste the content of your values yaml file here"
yml="true"
on-change="($ctrl.editorUpdate)"
value="$ctrl.state.values"
></code-editor>
on-change="($ctrl.editorUpdate)"
yml="true"
placeholder="# Define or paste the content of your values yaml file here"
>
<editor-description>
You can get more information about Helm values file format in the
<a href="https://helm.sh/docs/chart_template_guide/values_files/" target="_blank" class="text-blue-8 hover:text-blue-8 hover:underline"
>official documentation</a
>.
</editor-description>
</web-editor-form>
</div>
</div>
</div>
@ -124,7 +151,7 @@
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
class="btn btn-primary btn-sm !ml-0"
ng-disabled="!($ctrl.state.appName && $ctrl.state.resourcePool && !$ctrl.state.loadingValues && !$ctrl.state.actionInProgress)"
ng-click="$ctrl.installHelmchart()"
button-spinner="$ctrl.state.actionInProgress"
@ -155,7 +182,7 @@
<div class="col-sm-12">
<helm-templates-list
title-text="Charts"
title-icon="fa-rocket"
title-icon="compass"
charts="$ctrl.state.charts"
table-key="$ctrl.state.charts"
select-action="$ctrl.selectHelmChart"