@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -0,0 +1,55 @@
+import {Button, HtmlContentBlock, SimpleDialog} from "../../index";
+import React from "react";
+
+interface IProps {
+    // Title of the modal
+    title?: string
+    // Called when the close button is clicked
+    onDiscard: () => any
+    // The error report
+    report: JSX.Element
+    // Value of the download button
+    downloadButtonValue: string
+    // Value of the close button
+    closeButtonValue: string
+    // Function that fetches the Markdown error report
+    fetchErrorReport: () => Promise<string | undefined>
+}
+
+/** Shows the execution error report to the user and offers to download the report. */
+export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+    const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
+    const handleDownload = async () => {
+        const markdown = await fetchErrorReport()
+        if(markdown) {
+            const element = document.createElement("a");
+            element.href = window.URL.createObjectURL(new Blob([markdown], { type: "text/markdown" }));
+            element.download = fileName
+            //the above code is equivalent to
+            document.body.appendChild(element);
+            //onClick property
+            element.click();
+            document.body.removeChild(element);
+        }
+    };
+
+    return (
+        <SimpleDialog
+            title={title}
+            isOpen={true}
+            onClose={onDiscard}
+            actions={[
+                <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
+                    {downloadButtonValue}
+                </Button>,
+                <Button data-test-id={"error-report-close-btn"} key="close" onClick={onDiscard}>
+                    {closeButtonValue}
+                </Button>,
+            ]}
+        >
+            <HtmlContentBlock>
+                {report}
+            </HtmlContentBlock>
+        </SimpleDialog>
+    );
+}

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -0,0 +1,303 @@
+import {TestableComponent} from "../../components/interfaces";
+import {
+    ActivityControlWidget,
+    IActivityAction
+} from "./ActivityControlWidget";
+import React, {useEffect, useState} from "react";
+import {IActivityStatus} from "./ActivityControlTypes";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
+import {Spacing} from "../../index";
+import {
+    ElapsedDateTimeDisplay,
+    TimeUnits
+} from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+
+const progressBreakpointIndetermination = 10;
+const progressBreakpointAnimation = 99;
+
+interface SilkActivityControlProps extends TestableComponent {
+    // The label of this activity
+    label: string;
+    // Initial state
+    initialStatus?: IActivityStatus;
+    // Register a function in order to receive callbacks
+    registerForUpdates: (callback: (status: IActivityStatus) => any) => any;
+    // Un-register this component from any updates
+    unregisterFromUpdates: () => any;
+    // If the start action should be available
+    showStartAction: boolean;
+    // If the stop action should be available. Else actions can only be started, but not stopped.
+    showStopAction: boolean;
+    // Allow display and download of activity execution failure reports
+    failureReportAction?: IErrorReportAction;
+    // Show reload action, e.g. to refresh caches from scratch
+    showReloadAction: boolean;
+    // If defined, shows the 'View value' action, e.g. to check cache values
+    viewValueAction?: {
+        // Tooltip to show on icon button
+        tooltip?: string;
+        // The action, either a URL that will be opened in a new tab or a callback function
+        action: string | (() => any);
+    };
+    // DI activity actions
+    executeActivityAction: (action: ActivityAction) => void;
+    // Get the translation for a specific key
+    translate: (key: ActivityControlTranslationKeys) => string;
+    // When defined the elapsed time since the last start is displayed next to the label
+    elapsedTimeOfLastStart?: {
+        // Prefix before the elapsed time
+        prefix?: string;
+        // Suffix after the elapsed time
+        suffix?: string;
+        // The translation of the time units
+        translate: (unit: TimeUnits) => string;
+    };
+    // configure how the widget is displayed
+    layoutConfig?: IActivityControlLayoutProps;
+}
+
+export interface IActivityControlLayoutProps {
+    // show small version of the widget
+    small?: boolean;
+    // display widget inside rectange
+    border?: boolean;
+    // only use necessary width, not always the available 100% of parent element
+    canShrink?: boolean;
+    // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
+    visualization?: "none" | "progressbar" | "spinner";
+}
+
+const defaultLayout: IActivityControlLayoutProps = { small: false, border: false, canShrink: false, visualization: "spinner"};
+
+interface IErrorReportAction {
+    // The title of the error report modal
+    title?: string;
+    // The element that will be rendered in the modal, either as Markdown or object
+    renderReport: (report: string | IActivityExecutionReport) => JSX.Element;
+    // What version of the report should be handed to the renderReport function, if false IActivityExecutionReport, if true the Markdown string
+    renderMarkdown: boolean;
+    // The function to fetch the error report. It returns undefined if something went wrong.
+    fetchErrorReport: (markdown: boolean) => Promise<string | IActivityExecutionReport | undefined>;
+    // If besides showing the error report, there should also be an option to download it.
+    allowDownload?: boolean;
+    // The text of the download button in the modal
+    downloadButtonValue: string;
+    // The text of the close button in the modal
+    closeButtonValue: string;
+}
+
+export interface IActivityExecutionReport {
+    // Summary of the activity execution error
+    errorSummary: string;
+    // If the activity was running in a project context, the project ID
+    projectId?: string;
+    // If the activity was running in a task context, the task ID
+    taskId?: string;
+    // The activity ID
+    activityId: string;
+    // If the activity was running in a project context, the project label
+    projectLabel?: string;
+    // If the activity was running in a task context, the task label
+    taskLabel?: string;
+    // If the activity was running in a task context, the optional task description
+    taskDescription?: string;
+    // The error message of the error/exception that has occurred
+    errorMessage?: string;
+    // The stacktrace leading to the error
+    stackTrace?: IStacktrace;
+}
+
+interface IStacktrace {
+    // The final error message of the stacktrace
+    errorMessage?: String;
+    // The individual elements of the stack trace
+    lines: string[];
+    // In case of nested stacktraces this may contain the cause of the failure
+    cause?: IStacktrace;
+}
+
+export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport"
+
+export type ActivityAction = "start" | "cancel" | "restart"
+
+/** Silk activity control. */
+export function SilkActivityControl({
+                                        label,
+                                        initialStatus,
+                                        registerForUpdates,
+                                        executeActivityAction,
+                                        showReloadAction,
+                                        showStartAction,
+                                        viewValueAction,
+                                        showStopAction,
+                                        failureReportAction,
+                                        unregisterFromUpdates,
+                                        translate,
+                                        elapsedTimeOfLastStart,
+                                        layoutConfig = defaultLayout,
+                                        ...props
+                                    }: SilkActivityControlProps) {
+    const [activityStatus, setActivityStatus] = useState<IActivityStatus | undefined>(initialStatus)
+    const [errorReport, setErrorReport] = useState<string | IActivityExecutionReport | undefined>(undefined)
+
+    // Register update function
+    useEffect(() => {
+        const updateActivityStatus = (status: any) => {
+            setActivityStatus(status)
+        }
+        registerForUpdates(updateActivityStatus)
+        return unregisterFromUpdates
+    },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    )
+
+    // Create activity actions
+    const actions: IActivityAction[] = []
+
+    if(failureReportAction && 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) {
+        actions.push({
+            "data-test-id": "activity-start-activity",
+            icon: "item-start",
+            action: () => executeActivityAction("start"),
+            tooltip: translate("startActivity"),
+            disabled: activityStatus?.isRunning === true
+        })
+    }
+
+    if(showReloadAction) {
+        actions.push({
+            "data-test-id": "activity-reload-activity",
+            icon: "item-reload",
+            action: () => executeActivityAction("restart"),
+            tooltip: translate("reloadActivity"),
+            disabled: activityStatus?.isRunning === true
+        })
+    }
+
+    if(showStopAction) {
+        actions.push({
+            "data-test-id": "activity-stop-activity",
+            icon: "item-stop",
+            action: () => executeActivityAction("cancel"),
+            tooltip: translate("stopActivity"),
+            disabled: activityStatus?.isRunning === false
+        })
+    }
+
+    if(viewValueAction && activityStatus?.concreteStatus !== "Not executed") {
+        const action: () => any = typeof viewValueAction.action === "string" ? () => {
+            window.open(viewValueAction.action as string, "_blank")
+        } : viewValueAction.action
+        actions.push({
+            "data-test-id": "activity-view-data",
+            icon: "artefact-rawdata",
+            action,
+            tooltip: viewValueAction.tooltip
+        })
+    }
+
+    const showErrorReport = async (action: IErrorReportAction) => {
+        const errorReport = await action.fetchErrorReport(action.renderMarkdown)
+        setErrorReport(errorReport)
+    }
+
+    const closeErrorReport = () => {
+        setErrorReport(undefined)
+    }
+
+    const activityControlLabel = activityStatus?.startTime && elapsedTimeOfLastStart ? <>
+        {label}
+        <Spacing vertical={true} size={"tiny"} />
+        <ElapsedDateTimeDisplay
+            dateTime={activityStatus.startTime}
+            prefix={elapsedTimeOfLastStart.prefix}
+            suffix={elapsedTimeOfLastStart.suffix}
+            translateUnits={elapsedTimeOfLastStart.translate}
+        />
+    </> : label
+
+    const {visualization, ...otherLayoutConfig} = layoutConfig;
+    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;
+
+    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: activityStatus ? calcIntent(activityStatus) : "none",
+            }
+        }
+    };
+    if (visualization === "spinner") {
+        visualizationProps = {
+            progressSpinner: {
+                value: (waitingProgress || (runningProgress && indeterminateProgress)) ? undefined : ((activityStatus && activityStatus.progress > 0) ? (activityStatus.progress / 100) : 0),
+                intent: activityStatus ? calcIntent(activityStatus) : "none",
+            }
+        }
+    };
+
+    return <>
+        <ActivityControlWidget
+            key={"activity-control"}
+            data-test-id={props["data-test-id"]}
+            label={activityControlLabel}
+            activityActions={actions}
+            statusMessage={activityStatus?.message}
+            {...visualizationProps}
+            {...otherLayoutConfig}
+        />
+        {errorReport && failureReportAction && <ActivityExecutionErrorReportModal
+            title={failureReportAction.title}
+            key={"error-report-modal"}
+            closeButtonValue={failureReportAction.closeButtonValue}
+            downloadButtonValue={failureReportAction.downloadButtonValue}
+            fetchErrorReport={async () => {
+                return await failureReportAction.fetchErrorReport(true) as (string | undefined)
+            }}
+            report={failureReportAction.renderReport(errorReport)}
+            onDiscard={closeErrorReport}
+        />}
+    </>
+}
+
+const calcIntent = (activityStatus: IActivityStatus): Intent => {
+    const concreteStatus = activityStatus.concreteStatus
+    let intent: 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" // TODO: This is 100% yellow in the old activity control
+            break
+        default:
+            intent = "none"
+    }
+    return intent
+}

package/src/cmem/ActivityControl/activitycontrol.scss

@@ -0,0 +1,27 @@
+.#{$eccgui}-addon-activitycontrol {
+    .#{$eccgui}-overviewitem__item {
+        position: relative;
+    }
+
+    .#{$ns}-progress-bar {
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: $tab-indicator-width;
+    }
+}
+
+.#{$eccgui}-addon-activitycontrol--shrink {
+    max-width: 100%;
+    display: inline-flex;
+
+    &:not(.#{$eccgui}-card) {
+        display: inline-block;
+    }
+
+    .#{$eccgui}-overviewitem__depiction + .#{$eccgui}-overviewitem__description {
+        margin-left: 0;
+    }
+}

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -0,0 +1,95 @@
+import React, {useState} from "react";
+import {Link, Spacing} from "../../index";
+
+interface IContentBlobTogglerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+        space-delimited list of class names
+    */
+  className?: string;
+  /**
+        text label used for toggler when preview is displayed
+    */
+  toggleExtendText: string;
+  /**
+        text label used for toggler when full view is displayed
+    */
+  toggleReduceText: string;
+  /**
+        content that is displayed as preview
+    */
+  previewContent: React.ReactNode;
+  /**
+        content that is displayed as extended full view
+    */
+  fullviewContent: React.ReactNode;
+  /**
+        Show extended full view initially. Default: false
+    */
+  startExtended?: boolean;
+  /**
+        Callback if toggler is necessary. Default: true
+    */
+  enableToggler?: boolean;
+}
+
+/** Shows a preview with the option to expand to a full view (and back). */
+export function ContentBlobToggler({
+  className = "",
+  toggleExtendText,
+  toggleReduceText,
+  previewContent,
+  fullviewContent,
+  startExtended = false,
+  enableToggler = true,
+  ...otherProps
+}: IContentBlobTogglerProps) {
+  const [isExtended, setViewState] = useState(startExtended);
+  const handlerToggleView = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setViewState(!isExtended);
+  };
+
+  return (
+    <div className={className} {...otherProps}>
+        {!isExtended ? (
+          <>
+            {previewContent}
+            {enableToggler && (
+              <>
+                &hellip;{" "}
+                <Link
+                  href="#more"
+                  data-test-id={"content-blob-toggler-more-link"}
+                  onClick={(e: any) => {
+                    handlerToggleView(e);
+                  }}
+                >
+                  {toggleExtendText}
+                </Link>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            {fullviewContent}
+            {enableToggler && (
+                <div>
+                    <Spacing size="small" />
+                    <Link
+                        data-test-id={"content-blob-toggler-less-link"}
+                        href="#less"
+                        onClick={(e: any) => {
+                            handlerToggleView(e);
+                        }}
+                    >
+                        {toggleReduceText}
+                    </Link>
+                </div>
+            )}
+          </>
+        )}
+    </div>
+  );
+}

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { ContentBlobToggler, Markdown } from "../";
+
+interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     space-delimited list of class names
+     */
+    className?: string;
+    /**
+     The preview content will be cut to this length if it is too long.
+     */
+    previewMaxLength?: number;
+    /**
+     text label used for toggler when preview is displayed
+     */
+    toggleExtendText: string;
+    /**
+     text label used for toggler when full view is displayed
+     */
+    toggleReduceText: string;
+    /**
+     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     */
+    content: string;
+    /**
+     Content that is displayed as extended full view
+     */
+    fullviewContent: React.ReactNode;
+    /**
+     show extended full view initially
+     */
+    startExtended?: boolean;
+    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
+    firstNonEmptyLineOnly?: boolean
+    /** If enabled the preview is rendered as markdown. */
+    renderPreviewAsMarkdown?: boolean
+    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    allowedHtmlElementsInPreview?: string[]
+}
+
+/** Version of the content toggler for text only content. */
+export function StringPreviewContentBlobToggler({
+                                                    className = "",
+                                                    previewMaxLength,
+                                                    toggleExtendText,
+                                                    toggleReduceText,
+                                                    content,
+                                                    fullviewContent,
+                                                    startExtended,
+                                                    firstNonEmptyLineOnly,
+                                                    renderPreviewAsMarkdown = false,
+                                                    allowedHtmlElementsInPreview
+                                                }: IStringPreviewContentBlobTogglerProps) {
+    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content
+    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine
+    const enableToggler = previewString !== content
+
+    return <ContentBlobToggler
+        className={className}
+        previewContent={renderPreviewAsMarkdown ? <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown> : previewString}
+        toggleExtendText={toggleExtendText}
+        toggleReduceText={toggleReduceText}
+        fullviewContent={fullviewContent}
+        startExtended={startExtended}
+        enableToggler={enableToggler}
+    />
+}
+
+const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+
+/** Takes the first non-empty line from a preview string. */
+export function firstNonEmptyLine(preview: string) {
+    const previewString = preview.trim();
+    const result = newLineRegex.exec(previewString);
+    return result !== null ? previewString.substr(0, result.index) : previewString;
+}

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -0,0 +1,69 @@
+import React, {useEffect, useState} from "react";
+import {TestableComponent} from "../../components/interfaces";
+
+interface IProps extends TestableComponent {
+    // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
+    dateTime: string | number
+    // String to put before the elapsed time
+    prefix?: string
+    // String to put after the elapsed time
+    suffix?: string
+    // If the date time string should be shown as tooltip
+    showDateTimeTooltip?: boolean
+    // Translate time related vocabulary
+    translateUnits: (unit: TimeUnits) => string
+}
+
+export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
+
+const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
+    const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime()
+    return new Date().getTime() - absoluteMs
+}
+
+// Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
+    // In how many segments the time should be split, i.e. hours, minutes, seconds
+    const segmentSteps = [24, 60, 60]
+    // First convert to time in seconds
+    let remaining = Math.floor(elapsedTimeInMs / 1000)
+    const segmentValues: number[] = []
+    segmentSteps.reverse().forEach((segmentSize) => {
+        const segmentValue = remaining % segmentSize
+        remaining =  Math.floor(remaining / segmentSize)
+        segmentValues.push(segmentValue)
+    })
+    segmentValues.push(remaining)
+    return segmentValues.reverse()
+}
+
+// Returns the simplified elapsed time
+export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: TimeUnits) => string) => {
+    const units: TimeUnits[] = ["day", "hour", "minute"]
+    // Find first non-null value
+    let idx = 0
+    while(idx < 3 && timeSegments[idx] === 0) {
+        idx++
+    }
+    if(idx === 3) {
+        // Do not show exact seconds
+        return `< 1 ${translateUnits("minute")}`
+    } else {
+        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as TimeUnits)}`
+    }
+}
+/** Displays the elapsed time in a human readable way. */
+export const ElapsedDateTimeDisplay = ({dateTime, prefix = "", suffix = "", showDateTimeTooltip = true, translateUnits, ...otherProps}: IProps) => {
+    const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime))
+
+    useEffect(() => {
+        const timeout = setInterval(() => {
+            setElapsedTime(dateTimeToElapsedTimeInMs(dateTime))
+        }, 1000)
+        return () => clearInterval(timeout)
+    }, [dateTime])
+
+    return <span data-test-id={otherProps["data-test-id"]} title={showDateTimeTooltip ? new Date(dateTime).toString() : ""}>
+        {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix}
+    </span>
+}

package/src/cmem/DateTimeDisplay/tests/ElapsedDateTimeDisplay.test.tsx

@@ -0,0 +1,29 @@
+import {simplifiedElapsedTime, elapsedTimeSegmented, TimeUnits} from "../ElapsedDateTimeDisplay";
+
+describe("Elapsed time component", () => {
+    const checkMS = (timeInMs: number, expectedString: string) => expect(elapsedTimeSegmented(timeInMs).join(":")).toBe(expectedString)
+    const checkS = (timeInSeconds: number, expectedString: string) => checkMS(timeInSeconds * 1000, expectedString)
+    const translate = (timeUnit: TimeUnits) => timeUnit
+    const checkHumanReadable = (timeInSeconds: number, expectedString: string) => expect(simplifiedElapsedTime(elapsedTimeSegmented(timeInSeconds * 1000), translate)).toBe(expectedString)
+    it("should segment the time", () => {
+        checkMS(2123, "0:0:0:2")
+        checkS(2, "0:0:0:2")
+        checkS(12, "0:0:0:12")
+        checkS(62, "0:0:1:2")
+        checkS(72, "0:0:1:12")
+        checkS(10*60, "0:0:10:0")
+        checkS(10*60 + 2, "0:0:10:2")
+        checkS(3600 * 123 + 60 * 42 + 23, "5:3:42:23")
+    })
+    it("should return a human-readable representation of the time", () => {
+        checkHumanReadable(2, "< 1 minute")
+        checkHumanReadable(59, "< 1 minute")
+        checkHumanReadable(60, "1 minute")
+        checkHumanReadable(2 * 60, "2 minutes")
+        checkHumanReadable(3600, "1 hour")
+        checkHumanReadable(3600 + 1, "1 hour")
+        checkHumanReadable(2 * 3600, "2 hours")
+        checkHumanReadable(24 * 3600, "1 day")
+        checkHumanReadable(2 * 24 * 3600 + 123, "2 days")
+    })
+})

package/src/cmem/_index.scss

@@ -0,0 +1,2 @@
+@import "./ActivityControl/activitycontrol";
+@import "./markdown/markdown";