@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
244 lines • 13.7 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.calcIntent = void 0;
exports.SilkActivityControl = SilkActivityControl;
exports.useSilkActivityControl = useSilkActivityControl;
const react_1 = __importStar(require("react"));
const __1 = require("../../");
const ElapsedDateTimeDisplay_1 = require("../DateTimeDisplay/ElapsedDateTimeDisplay");
const ActivityControlWidget_1 = require("./ActivityControlWidget");
const ActivityExecutionErrorReportModal_1 = require("./ActivityExecutionErrorReportModal");
const progressBreakpointIndetermination = 10;
const progressBreakpointAnimation = 99;
const defaultLayout = {
small: false,
border: false,
canShrink: false,
visualization: "spinner",
};
/** Silk activity control. */
function SilkActivityControl(props) {
const { widget } = useSilkActivityControl(props);
return widget;
}
function useSilkActivityControl(_a) {
var { label, initialStatus, registerForUpdates, executeActivityAction, showReloadAction, showStartAction, viewValueAction, showStopAction, failureReportAction, unregisterFromUpdates, translate, elapsedTimeOfLastStart, tags, layoutConfig = defaultLayout, hideMessageOnStatus = () => false, executePrioritized, translateUnits = (unit) => unit.toString() } = _a, props = __rest(_a, ["label", "initialStatus", "registerForUpdates", "executeActivityAction", "showReloadAction", "showStartAction", "viewValueAction", "showStopAction", "failureReportAction", "unregisterFromUpdates", "translate", "elapsedTimeOfLastStart", "tags", "layoutConfig", "hideMessageOnStatus", "executePrioritized", "translateUnits"]);
const [activityStatus, setActivityStatus] = (0, react_1.useState)(initialStatus);
const currentStatus = (0, react_1.useRef)(initialStatus);
const [showStartPrioritized, setShowStartPrioritized] = (0, react_1.useState)(false);
const [errorReport, setErrorReport] = (0, react_1.useState)(undefined);
// Register update function
(0, react_1.useEffect)(() => {
const updateActivityStatus = (status) => {
if ((status === null || status === void 0 ? void 0 : status.concreteStatus) !== "Waiting") {
setShowStartPrioritized(false);
}
else if (executePrioritized) {
// Show start prioritized button only-if the activity is still in Waiting status after 2s
setTimeout(() => {
var _a;
if (((_a = currentStatus.current) === null || _a === void 0 ? void 0 : _a.concreteStatus) === "Waiting") {
setShowStartPrioritized(true);
}
}, 2000);
}
currentStatus.current = status;
setActivityStatus(status);
};
registerForUpdates(updateActivityStatus);
return unregisterFromUpdates;
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]);
// Create activity actions
const actions = [];
if (failureReportAction && (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.failed) && activityStatus.concreteStatus !== "Cancelled") {
actions.push({
"data-test-id": "activity-show-error-report",
icon: "artefact-report",
action: () => showErrorReport(failureReportAction),
tooltip: translate("showErrorReport"),
hasStateWarning: true,
});
}
if (showStartAction) {
if (showStartPrioritized && executePrioritized) {
actions.push({
"data-test-id": "activity-start-prioritized-activity",
icon: "item-skip-forward",
action: executePrioritized,
tooltip: translate("startPrioritized"),
});
}
else {
actions.push({
"data-test-id": "activity-start-activity",
icon: "item-start",
action: () => executeActivityAction("start"),
tooltip: translate("startActivity"),
disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === true,
});
}
}
if (showReloadAction) {
actions.push({
"data-test-id": "activity-reload-activity",
icon: "item-reload",
action: () => executeActivityAction("restart"),
tooltip: translate("reloadActivity"),
disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === true,
});
}
if (showStopAction) {
actions.push({
"data-test-id": "activity-stop-activity",
icon: "item-stop",
action: () => executeActivityAction("cancel"),
tooltip: translate("stopActivity"),
disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === false,
});
}
if (viewValueAction && (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.concreteStatus) !== "Not executed") {
const action = typeof viewValueAction.action === "string"
? () => {
window.open(viewValueAction.action, "_blank");
}
: viewValueAction.action;
actions.push({
"data-test-id": "activity-view-data",
icon: "artefact-rawdata",
action,
tooltip: viewValueAction.tooltip,
});
}
const showErrorReport = (action) => __awaiter(this, void 0, void 0, function* () {
const errorReport = yield action.fetchErrorReport(action.renderMarkdown);
setErrorReport(errorReport);
});
const closeErrorReport = () => {
setErrorReport(undefined);
};
const activityControlLabel = (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) && elapsedTimeOfLastStart ? (react_1.default.createElement(react_1.default.Fragment, null,
label,
react_1.default.createElement(__1.Spacing, { vertical: true, size: "tiny" }),
react_1.default.createElement(ElapsedDateTimeDisplay_1.ElapsedDateTimeDisplay, { dateTime: activityStatus.startTime, prefix: elapsedTimeOfLastStart.prefix, suffix: elapsedTimeOfLastStart.suffix, translateUnits: elapsedTimeOfLastStart.translate }))) : (label);
const timerExecutionMessage = ((activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) || (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.queueTime)) && activityStatus.statusName !== "Finished" ? (react_1.default.createElement(ElapsedDateTimeDisplay_1.ElapsedDateTimeDisplay, { includeSeconds: true, dateTime: (activityStatus.statusName === "Running"
? activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime
: activityStatus.statusName === "Waiting"
? activityStatus.queueTime
: activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime), translateUnits: translateUnits })) : null;
const { visualization } = layoutConfig, otherLayoutConfig = __rest(layoutConfig, ["visualization"]);
let visualizationProps = {}; // visualization==="none" or undefined
const runningProgress = activityStatus && activityStatus.isRunning;
const waitingProgress = activityStatus && activityStatus.concreteStatus === "Waiting";
const animateProgress = activityStatus && activityStatus.progress > 0 && activityStatus.progress < progressBreakpointAnimation;
const indeterminateProgress = activityStatus && activityStatus.progress < progressBreakpointIndetermination;
const intent = activityStatus ? (0, exports.calcIntent)(activityStatus) : "none";
if (visualization === "progressbar") {
visualizationProps = {
progressBar: {
animate: waitingProgress || (runningProgress && animateProgress),
stripes: waitingProgress || (runningProgress && animateProgress),
value: waitingProgress || (runningProgress && indeterminateProgress)
? undefined
: activityStatus && activityStatus.progress > 0
? activityStatus.progress / 100
: 0,
intent,
},
};
}
if (visualization === "spinner") {
visualizationProps = {
progressSpinner: {
value: waitingProgress || (runningProgress && indeterminateProgress)
? undefined
: activityStatus && activityStatus.progress > 0
? activityStatus.progress / 100
: 0,
intent,
},
};
}
if ((activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.statusName) === "Finished" && intent !== "none" && intent !== "primary") {
visualizationProps = Object.assign(Object.assign({}, visualizationProps), { progressSpinnerFinishedIcon: react_1.default.createElement(__1.Icon, { name: [`state-${intent}`], intent: intent }) });
}
const widget = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ActivityControlWidget_1.ActivityControlWidget, Object.assign({ key: "activity-control", tags: tags, "data-test-id": props["data-test-id"], label: activityControlLabel, activityActions: actions, timerExecutionMsg: timerExecutionMessage, statusMessage: hideMessageOnStatus(activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.concreteStatus) ? undefined : activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.message }, visualizationProps, otherLayoutConfig)),
errorReport && failureReportAction && (react_1.default.createElement(ActivityExecutionErrorReportModal_1.ActivityExecutionErrorReportModal, { title: failureReportAction.title, key: "error-report-modal", closeButtonValue: failureReportAction.closeButtonValue, downloadButtonValue: failureReportAction.downloadButtonValue, fetchErrorReport: () => __awaiter(this, void 0, void 0, function* () {
return (yield failureReportAction.fetchErrorReport(true));
}), report: failureReportAction.renderReport(errorReport), onDiscard: closeErrorReport }))));
return {
elapsedDateTime: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) && elapsedTimeOfLastStart ? (react_1.default.createElement(ElapsedDateTimeDisplay_1.ElapsedDateTimeDisplay, { dateTime: activityStatus.startTime, translateUnits: elapsedTimeOfLastStart.translate })) : (react_1.default.createElement(react_1.default.Fragment, null)),
intent,
widget,
};
}
const calcIntent = (activityStatus) => {
const concreteStatus = activityStatus.concreteStatus;
let intent;
switch (concreteStatus) {
case "Running":
case "Successful":
intent = "success";
break;
case "Cancelled":
case "Canceling":
intent = "warning";
break;
case "Failed":
intent = "danger";
break;
case "Waiting":
intent = "none";
break;
default:
intent = "none";
}
return intent;
};
exports.calcIntent = calcIntent;
//# sourceMappingURL=SilkActivityControl.js.map