mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 05:45:22 +02:00
fix(ui): box-selector fixes [EE-3949] (#7489)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
8d304b78cb
commit
ace01eac9d
44 changed files with 770 additions and 616 deletions
|
|
@ -34,27 +34,29 @@
|
|||
<!-- edge-job-method-select -->
|
||||
<div class="col-sm-12 form-section-title"> Edge job configuration </div>
|
||||
<div class="form-group"></div>
|
||||
<div class="form-group px-4">
|
||||
<div class="boxselector_wrapper !mt-0">
|
||||
<div>
|
||||
<input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
|
||||
<label for="config_basic">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'calendar'" feather="true"></pr-icon>
|
||||
Basic configuration
|
||||
</div>
|
||||
<p>Select date from calendar</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
|
||||
<label for="config_advanced">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'edit'" feather="true"></pr-icon>
|
||||
Advanced configuration
|
||||
</div>
|
||||
<p>Write your own cron rule</p>
|
||||
</label>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<div class="boxselector_wrapper !mt-0">
|
||||
<div>
|
||||
<input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
|
||||
<label for="config_basic">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'calendar'" feather="true"></pr-icon>
|
||||
Basic configuration
|
||||
</div>
|
||||
<p>Select date from calendar</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
|
||||
<label for="config_advanced">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'edit'" feather="true"></pr-icon>
|
||||
Advanced configuration
|
||||
</div>
|
||||
<p>Write your own cron rule</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,28 +153,29 @@
|
|||
<!-- execution-method -->
|
||||
<div ng-if="!$ctrl.model.Id">
|
||||
<div class="col-sm-12 form-section-title"> Job content </div>
|
||||
<div class="form-group"></div>
|
||||
<div class="form-group px-4">
|
||||
<div class="boxselector_wrapper !mt-0">
|
||||
<div>
|
||||
<input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
|
||||
<label for="method_editor">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'edit'" feather="true"></pr-icon>
|
||||
Web editor
|
||||
</div>
|
||||
<p>Use our Web editor</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
|
||||
<label for="method_upload">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'upload'" feather="true"></pr-icon>
|
||||
Upload
|
||||
</div>
|
||||
<p>Upload from your computer</p>
|
||||
</label>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<div class="boxselector_wrapper">
|
||||
<div>
|
||||
<input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
|
||||
<label for="method_editor">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'edit'" feather="true"></pr-icon>
|
||||
Web editor
|
||||
</div>
|
||||
<p>Use our Web editor</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
|
||||
<label for="method_upload">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'upload'" feather="true"></pr-icon>
|
||||
Upload
|
||||
</div>
|
||||
<p>Upload from your computer</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import { compose, kubernetes } from '@@/BoxSelector/common-options/deployment-methods';
|
||||
|
||||
export default class EdgeStackDeploymentTypeSelectorController {
|
||||
/* @ngInject */
|
||||
constructor() {
|
||||
this.deploymentOptions = [
|
||||
{ id: 'deployment_compose', icon: 'fab fa-docker', label: 'Compose', description: 'Docker compose format', value: 0 },
|
||||
{
|
||||
id: 'deployment_kube',
|
||||
icon: 'fa fa-cubes',
|
||||
label: 'Kubernetes',
|
||||
description: 'Kubernetes manifest format',
|
||||
...compose,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
...kubernetes,
|
||||
value: 1,
|
||||
disabled: () => {
|
||||
return this.hasDockerEndpoint();
|
||||
|
|
|
|||
|
|
@ -26,27 +26,29 @@
|
|||
</div>
|
||||
|
||||
<div class="col-sm-12 form-section-title"> Group type </div>
|
||||
<div class="col-sm-12 !px-0">
|
||||
<div class="boxselector_wrapper">
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
|
||||
<label for="static-group">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'list'" feather="true"></pr-icon>
|
||||
Static
|
||||
</div>
|
||||
<p>Manually select Edge environments</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
|
||||
<label for="dynamic-group">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'tag'" feather="true" className="'feather'"></pr-icon>
|
||||
Dynamic
|
||||
</div>
|
||||
<p>Automatically associate environments via tags</p>
|
||||
</label>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<div class="boxselector_wrapper">
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
|
||||
<label for="static-group">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'list'" feather="true"></pr-icon>
|
||||
Static
|
||||
</div>
|
||||
<p>Manually select Edge environments</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
|
||||
<label for="dynamic-group">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'tag'" feather="true"></pr-icon>
|
||||
Dynamic
|
||||
</div>
|
||||
<p>Automatically associate environments via tags</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,27 +80,29 @@
|
|||
<!-- DynamicGroup -->
|
||||
<div ng-if="$ctrl.model.Dynamic">
|
||||
<div class="col-sm-12 form-section-title"> Tags </div>
|
||||
<div ng-if="$ctrl.tags.length" class="form-group col-sm-12">
|
||||
<div class="boxselector_wrapper">
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
|
||||
<label for="or-selector">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'tag'" feather="true"></pr-icon>
|
||||
Partial match
|
||||
</div>
|
||||
<p>Associate any environment matching at least one of the selected tags</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
|
||||
<label for="and-selector">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'tag'" feather="true" className="'feather'"></pr-icon>
|
||||
Full match
|
||||
</div>
|
||||
<p>Associate any environment matching all of the selected tags</p>
|
||||
</label>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<div class="boxselector_wrapper">
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
|
||||
<label for="or-selector">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'tag'" feather="true"></pr-icon>
|
||||
Partial match
|
||||
</div>
|
||||
<p>Associate any environment matching at least one of the selected tags</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="boxselector">
|
||||
<input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
|
||||
<label for="and-selector">
|
||||
<div class="boxselector_header vertical-center">
|
||||
<pr-icon icon="'tag'" feather="true"></pr-icon>
|
||||
Full match
|
||||
</div>
|
||||
<p>Associate any environment matching all of the selected tags</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue