@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
283 lines • 16.1 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
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;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useEffect, useRef, useState } from "react";
import { Icon, Spacing } from "../../index.js";
import { ElapsedDateTimeDisplay } from "../DateTimeDisplay/ElapsedDateTimeDisplay.js";
import { ActivityControlWidget } from "./ActivityControlWidget.js";
import { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal.js";
var progressBreakpointIndetermination = 10;
var progressBreakpointAnimation = 99;
var defaultLayout = {
small: false,
border: false,
canShrink: false,
visualization: "spinner",
};
/** Silk activity control. */
export function SilkActivityControl(props) {
var widget = useSilkActivityControl(props).widget;
return widget;
}
export function useSilkActivityControl(_a) {
var _this = this;
var label = _a.label, initialStatus = _a.initialStatus, registerForUpdates = _a.registerForUpdates, executeActivityAction = _a.executeActivityAction, showReloadAction = _a.showReloadAction, showStartAction = _a.showStartAction, viewValueAction = _a.viewValueAction, showStopAction = _a.showStopAction, failureReportAction = _a.failureReportAction, unregisterFromUpdates = _a.unregisterFromUpdates, translate = _a.translate, elapsedTimeOfLastStart = _a.elapsedTimeOfLastStart, tags = _a.tags, _b = _a.layoutConfig, layoutConfig = _b === void 0 ? defaultLayout : _b, _c = _a.hideMessageOnStatus, hideMessageOnStatus = _c === void 0 ? function () { return false; } : _c, executePrioritized = _a.executePrioritized, _d = _a.translateUnits, translateUnits = _d === void 0 ? function (unit) { return unit.toString(); } : _d, props = __rest(_a, ["label", "initialStatus", "registerForUpdates", "executeActivityAction", "showReloadAction", "showStartAction", "viewValueAction", "showStopAction", "failureReportAction", "unregisterFromUpdates", "translate", "elapsedTimeOfLastStart", "tags", "layoutConfig", "hideMessageOnStatus", "executePrioritized", "translateUnits"]);
var _e = __read(useState(initialStatus), 2), activityStatus = _e[0], setActivityStatus = _e[1];
var currentStatus = useRef(initialStatus);
var _f = __read(useState(false), 2), showStartPrioritized = _f[0], setShowStartPrioritized = _f[1];
var _g = __read(useState(undefined), 2), errorReport = _g[0], setErrorReport = _g[1];
// Register update function
useEffect(function () {
var updateActivityStatus = function (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(function () {
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
var 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: function () { return 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: function () { return 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: function () { return 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: function () { return 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") {
var action = typeof viewValueAction.action === "string"
? function () {
window.open(viewValueAction.action, "_blank");
}
: viewValueAction.action;
actions.push({
"data-test-id": "activity-view-data",
icon: "artefact-rawdata",
action: action,
tooltip: viewValueAction.tooltip,
});
}
var showErrorReport = function (action) { return __awaiter(_this, void 0, void 0, function () {
var errorReport;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, action.fetchErrorReport(action.renderMarkdown)];
case 1:
errorReport = _a.sent();
setErrorReport(errorReport);
return [2 /*return*/];
}
});
}); };
var closeErrorReport = function () {
setErrorReport(undefined);
};
var activityControlLabel = (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) && elapsedTimeOfLastStart ? (React.createElement(React.Fragment, null,
label,
React.createElement(Spacing, { vertical: true, size: "tiny" }),
React.createElement(ElapsedDateTimeDisplay, { dateTime: activityStatus.startTime, prefix: elapsedTimeOfLastStart.prefix, suffix: elapsedTimeOfLastStart.suffix, translateUnits: elapsedTimeOfLastStart.translate }))) : (label);
var timerExecutionMessage = ((activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) || (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.queueTime)) && activityStatus.statusName !== "Finished" ? (React.createElement(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;
var visualization = layoutConfig.visualization, otherLayoutConfig = __rest(layoutConfig, ["visualization"]);
var visualizationProps = {}; // visualization==="none" or undefined
var runningProgress = activityStatus && activityStatus.isRunning;
var waitingProgress = activityStatus && activityStatus.concreteStatus === "Waiting";
var animateProgress = activityStatus && activityStatus.progress > 0 && activityStatus.progress < progressBreakpointAnimation;
var indeterminateProgress = activityStatus && activityStatus.progress < progressBreakpointIndetermination;
var intent = activityStatus ? 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: intent,
},
};
}
if (visualization === "spinner") {
visualizationProps = {
progressSpinner: {
value: waitingProgress || (runningProgress && indeterminateProgress)
? undefined
: activityStatus && activityStatus.progress > 0
? activityStatus.progress / 100
: 0,
intent: intent,
},
};
}
if ((activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.statusName) === "Finished" && intent !== "none" && intent !== "primary") {
visualizationProps = __assign(__assign({}, visualizationProps), { progressSpinnerFinishedIcon: React.createElement(Icon, { name: ["state-".concat(intent)], intent: intent }) });
}
var widget = (React.createElement(React.Fragment, null,
React.createElement(ActivityControlWidget, __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.createElement(ActivityExecutionErrorReportModal, { title: failureReportAction.title, key: "error-report-modal", closeButtonValue: failureReportAction.closeButtonValue, downloadButtonValue: failureReportAction.downloadButtonValue, fetchErrorReport: function () { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, failureReportAction.fetchErrorReport(true)];
case 1: return [2 /*return*/, (_a.sent())];
}
});
}); }, report: failureReportAction.renderReport(errorReport), onDiscard: closeErrorReport }))));
return {
elapsedDateTime: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) && elapsedTimeOfLastStart ? (React.createElement(ElapsedDateTimeDisplay, { dateTime: activityStatus.startTime, translateUnits: elapsedTimeOfLastStart.translate })) : (React.createElement(React.Fragment, null)),
intent: intent,
widget: widget,
};
}
export var calcIntent = function (activityStatus) {
var concreteStatus = activityStatus.concreteStatus;
var 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;
};
//# sourceMappingURL=SilkActivityControl.js.map