diff --git a/ui/app/components/stepper-input.js b/ui/app/components/stepper-input.js index 871d74729..933cb4115 100644 --- a/ui/app/components/stepper-input.js +++ b/ui/app/components/stepper-input.js @@ -9,7 +9,7 @@ const ESC = 27; @classic @classNames('stepper-input') -@classNameBindings('class', 'disabled:is-disabled') +@classNameBindings('class', 'disabled:is-disabled', 'disabled:tooltip', 'disabled:multiline') export default class StepperInput extends Component { min = 0; max = 10; @@ -40,9 +40,13 @@ export default class StepperInput extends Component { @action setValue(e) { - const newValue = Math.min(this.max, Math.max(this.min, e.target.value)); - this.set('internalValue', newValue); - this.update(this.internalValue); + if (e.target.value !== '') { + const newValue = Math.floor(Math.min(this.max, Math.max(this.min, e.target.value))); + this.set('internalValue', newValue); + this.update(this.internalValue); + } else { + e.target.value = this.internalValue; + } } @action @@ -52,6 +56,15 @@ export default class StepperInput extends Component { } } + @action + selectValue(e) { + e.target.select(); + } + + @action focusInput() { + this.element.querySelector('.stepper-input-input').focus(); + } + update(value) { debounce(this, sendUpdateAction, value, this.debounce); } diff --git a/ui/app/components/task-group-row.js b/ui/app/components/task-group-row.js index 685ea65f6..8f01fd05e 100644 --- a/ui/app/components/task-group-row.js +++ b/ui/app/components/task-group-row.js @@ -1,4 +1,5 @@ import Component from '@ember/component'; +import { inject as service } from '@ember/service'; import { computed, action } from '@ember/object'; import { alias, oneWay } from '@ember/object/computed'; import { debounce } from '@ember/runloop'; @@ -10,12 +11,21 @@ import { lazyClick } from '../helpers/lazy-click'; @tagName('tr') @classNames('task-group-row', 'is-interactive') export default class TaskGroupRow extends Component { + @service can; + taskGroup = null; debounce = 500; @oneWay('taskGroup.count') count; @alias('taskGroup.job.runningDeployment') runningDeployment; + @computed('runningDeployment') + get tooltipText() { + if (this.can.cannot('scale job')) return "You aren't allowed to scale task groups"; + if (this.runningDeployment) return 'You cannot scale task groups during a deployment'; + return undefined; + } + onClick() {} click(event) { diff --git a/ui/app/controllers/jobs/job/task-group.js b/ui/app/controllers/jobs/job/task-group.js index cb6915be0..c780f9722 100644 --- a/ui/app/controllers/jobs/job/task-group.js +++ b/ui/app/controllers/jobs/job/task-group.js @@ -14,6 +14,7 @@ export default class TaskGroupController extends Controller.extend( WithNamespaceResetting ) { @service userSettings; + @service can; queryParams = [ { @@ -50,6 +51,13 @@ export default class TaskGroupController extends Controller.extend( @alias('listSorted') listToSearch; @alias('listSearched') sortedAllocations; + @computed('model.job.runningDeployment') + get tooltipText() { + if (this.can.cannot('scale job')) return "You aren't allowed to scale task groups"; + if (this.model.job.runningDeployment) return 'You cannot scale task groups during a deployment'; + return undefined; + } + @action gotoAllocation(allocation) { this.transitionToRoute('allocations.allocation', allocation); diff --git a/ui/app/styles/components/stepper-input.scss b/ui/app/styles/components/stepper-input.scss index 605934693..9a5b6a978 100644 --- a/ui/app/styles/components/stepper-input.scss +++ b/ui/app/styles/components/stepper-input.scss @@ -16,6 +16,7 @@ display: flex; align-self: center; padding-right: 0.75em; + cursor: pointer; } .stepper-input-input { diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss index 0546b5355..62c04fb48 100644 --- a/ui/app/styles/components/tooltip.scss +++ b/ui/app/styles/components/tooltip.scss @@ -12,6 +12,7 @@ max-width: 250px; color: $white; font-size: $size-7; + font-weight: $weight-normal; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; diff --git a/ui/app/templates/components/stepper-input.hbs b/ui/app/templates/components/stepper-input.hbs index 80440a605..a0f7c1486 100644 --- a/ui/app/templates/components/stepper-input.hbs +++ b/ui/app/templates/components/stepper-input.hbs @@ -1,4 +1,7 @@ -{{yield}} +{{yield}} @@ -20,6 +25,7 @@ diff --git a/ui/app/templates/components/task-group-row.hbs b/ui/app/templates/components/task-group-row.hbs index 3bc7e6b67..23bfabbb3 100644 --- a/ui/app/templates/components/task-group-row.hbs +++ b/ui/app/templates/components/task-group-row.hbs @@ -8,11 +8,12 @@ {{#if taskGroup.scaling}} + class="button-bar is-shadowless is-text bumper-left {{if (or runningDeployment (cannot "scale job")) "tooltip multiline"}}" + aria-label={{tooltipText}}> @@ -21,6 +22,7 @@ diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs index a915b1b5f..4d067a0b3 100644 --- a/ui/app/templates/jobs/job/task-group.hbs +++ b/ui/app/templates/jobs/job/task-group.hbs @@ -12,6 +12,7 @@ {{#if model.scaling}} ({ scope, label: text('[data-test-stepper-label]'), + clickLabel: clickable('[data-test-stepper-label]'), input: { scope: '[data-test-stepper-input]',