Skip to content

Commit

Permalink
Merge pull request #19349 from jeclrsg/hpcc-33083-playground-submit-f…
Browse files Browse the repository at this point in the history 
…eedback

HPCC-33083 ECL Watch v9 playground submit feedback
  • Loading branch information
@GordonSmith
GordonSmith authored Dec 12, 2024
2 parents ed88cd9 + 3a59a07 commit 858a57e
Showing 1 changed file with 35 additions and 19 deletions.
54 changes: 35 additions & 19 deletions esp/src/src-react/components/ECLPlayground.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from "react";
import { ReflexContainer, ReflexElement, ReflexSplitter } from "../layouts/react-reflex";
import { IconButton, IIconProps, Link, Dropdown, IDropdownOption, TextField, useTheme } from "@fluentui/react";
import { IconButton, IIconProps, Link, Dropdown, IDropdownOption, Spinner, SpinnerSize, TextField, useTheme } from "@fluentui/react";
import { Button } from "@fluentui/react-components";
import { CheckmarkCircleRegular, DismissCircleRegular, QuestionCircleRegular } from "@fluentui/react-icons";
import { scopedLogger } from "@hpcc-js/util";
import { useOnEvent } from "@fluentui/react-hooks";
import { mergeStyleSets } from "@fluentui/style-utilities";
import { ECLEditor, IPosition } from "@hpcc-js/codemirror";
import { Workunit, WUUpdate, WorkunitsService } from "@hpcc-js/comms";
import { Workunit, WUUpdate, WorkunitsService, WUStateID } from "@hpcc-js/comms";
import { HolyGrail } from "../layouts/HolyGrail";
import { DojoAdapter } from "../layouts/DojoAdapter";
import { pushUrl } from "../util/history";
Expand Down Expand Up @@ -238,7 +238,6 @@ const ECLEditorToolbar: React.FunctionComponent<ECLEditorToolbarProps> = ({
if (document.location.hash.includes("play")) {
if (wu.isFailed()) {
pushUrl(`/play/${wu.Wuid}`);
setWorkunit(wu);
displayErrors(wu, editor);
setOutputMode(OutputMode.ERRORS);
} else if (wu.isComplete()) {
Expand All @@ -247,24 +246,24 @@ const ECLEditorToolbar: React.FunctionComponent<ECLEditorToolbarProps> = ({
wu.publish(queryName);
setWuState("Published");
}
setWorkunit(wu);
setOutputMode(OutputMode.RESULTS);
}
} else {
if (wu.isComplete()) {
logger.info(`${nlsHPCC.Playground} ${nlsHPCC.Finished} (${wu.Wuid})`);
}
}
}, [editor, queryName, setOutputMode, setWorkunit]);
}, [editor, queryName, setOutputMode]);

const submitWU = React.useCallback(async () => {
const wu = await Workunit.create({ baseUrl: "" });
setWorkunit(wu);

await wu.update({ Jobname: queryName, QueryText: editor.ecl() });
await wu.submit(cluster);

wu.watchUntilComplete(changes => playgroundResults(wu));
}, [cluster, editor, playgroundResults, queryName]);
}, [cluster, editor, playgroundResults, queryName, setWorkunit]);

const publishWU = React.useCallback(async () => {
if (queryName === "") {
Expand All @@ -274,13 +273,14 @@ const ECLEditorToolbar: React.FunctionComponent<ECLEditorToolbarProps> = ({
setQueryNameErrorMsg("");

const wu = await Workunit.create({ baseUrl: "" });
setWorkunit(wu);

await wu.update({ Jobname: queryName, QueryText: editor.ecl() });
await wu.submit(cluster, WUUpdate.Action.Compile);

wu.watchUntilComplete(changes => playgroundResults(wu, "publish"));
}
}, [cluster, editor, playgroundResults, queryName, setQueryNameErrorMsg]);
}, [cluster, editor, playgroundResults, queryName, setQueryNameErrorMsg, setWorkunit]);

const checkSyntax = React.useCallback(() => {
service.WUSyntaxCheckECL({
Expand Down Expand Up @@ -470,6 +470,12 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
}, [editor]);
useOnEvent(document, "eclwatch-theme-toggle", handleThemeToggle);

const submissionComplete = React.useMemo(() => {
return workunit?.StateID === WUStateID.Completed ||
workunit?.StateID === WUStateID.Failed ||
(workunit?.ActionEx === "compile" && workunit?.StateID === WUStateID.Compiled);
}, [workunit?.StateID, workunit?.ActionEx]);

const handleEclChange = React.useMemo(() => debounce((evt) => {
if (editor.hasFocus()) {
setSyntaxStatusIcon(SyntaxCheckResult.Unknown);
Expand Down Expand Up @@ -507,23 +513,33 @@ export const ECLPlayground: React.FunctionComponent<ECLPlaygroundProps> = (props
</ReflexElement>
<ReflexSplitter />
<ReflexElement minSize={100} flex={0.25} style={{ overflow: "hidden" }}>
<DojoAdapter widgetClassID="Graph7Widget" params={{ Wuid: workunit?.Wuid }} />
{submissionComplete ?
<DojoAdapter widgetClassID="Graph7Widget" params={{ Wuid: workunit?.Wuid }} />
: <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
<Spinner size={SpinnerSize.large} />
</div>
}
</ReflexElement>
</ReflexContainer>
</ReflexElement>
<ReflexSplitter />
<ReflexElement propagateDimensions={true} minSize={100} style={{ overflow: "hidden" }}>
<div style={{ height: "calc(100% - 44px)" }}>
{outputMode === OutputMode.ERRORS ? (
<InfoGrid wuid={workunit?.Wuid} syntaxErrors={syntaxErrors} />

) : outputMode === OutputMode.RESULTS ? (
<TabbedResults wuid={workunit?.Wuid} filter={filter} />

) : outputMode === OutputMode.VIS ? (
<DojoAdapter widgetClassID="VizWidget" params={{ Wuid: workunit?.Wuid, Sequence: 0 }} />
) : null}
</div>
{submissionComplete ?
<div style={{ height: "calc(100% - 44px)" }}>
{outputMode === OutputMode.ERRORS ? (
<InfoGrid wuid={workunit?.Wuid} syntaxErrors={syntaxErrors} />

) : outputMode === OutputMode.RESULTS ? (
<TabbedResults wuid={workunit?.Wuid} filter={filter} />

) : outputMode === OutputMode.VIS ? (
<DojoAdapter widgetClassID="VizWidget" params={{ Wuid: workunit?.Wuid, Sequence: 0 }} />
) : null}
</div>
: <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
<Spinner size={SpinnerSize.large} />
</div>
}
</ReflexElement>
</ReflexContainer>
</div>;
Expand Down

0 comments on commit 858a57e

Please sign in to comment.