Files
nomad/ui/app/components/action-card.js

78 lines
2.2 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
// @ts-check
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
export default class ActionCardComponent extends Component {
@service nomadActions;
get stateColor() {
/**
* @type {import('../models/action-instance').default}
*/
const instance = this.instance;
switch (instance.state) {
case 'starting':
return 'neutral';
case 'running':
return 'highlight';
case 'complete':
return 'success';
case 'error':
return 'critical';
default:
return 'neutral';
}
}
@action stop() {
this.instance.socket.close();
}
@action stopAll() {
this.nomadActions.stopPeers(this.instance.peerID);
}
@tracked selectedPeer = null;
@action selectPeer(peer) {
this.selectedPeer = peer;
}
get instance() {
// Either the passed instance, or the peer-selected instance
return this.selectedPeer || this.args.instance;
}
@tracked hasBeenAnchored = false;
/**
* Runs from the action-card template whenever instance.messages updates,
* and serves to keep the user's view anchored to the bottom of the messages.
* This uses a hidden element and the overflow-anchor css attribute, which
* keeps the element visible within the scrollable <code> block parent.
* A trick here is that, if the user scrolls up from the bottom of the block,
* we don't want to force them down to the bottom again on update, but we do
* want to keep them there by default (so they have the latest output).
* The hasBeenAnchored flag is used to track this state, and we do a little
* trick when the messages get long enough to cause a scroll to start the
* anchoring process here.
*
* @param {HTMLElement} element
*/
@action anchorToBottom(element) {
if (this.hasBeenAnchored) return;
const parentHeight = element.parentElement.clientHeight;
const elementHeight = element.clientHeight;
if (elementHeight > parentHeight) {
this.hasBeenAnchored = true;
element.parentElement.scroll(0, elementHeight);
}
}
}