Skip to content

Commit

Permalink
Merge pull request #1065 from PintoGideon/bug-fixes
Browse files Browse the repository at this point in the history 
Bug fixes
  • Loading branch information
@PintoGideon
PintoGideon authored Feb 15, 2024
2 parents 22b7bc1 + 1662f76 commit 5088bde
Show file tree
Hide file tree
Showing 16 changed files with 299 additions and 254 deletions.
25 changes: 16 additions & 9 deletions src/api/common.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import * as React from "react";
import axios, { AxiosProgressEvent } from "axios";
import ChrisAPIClient from "./chrisapiclient";
import { Pipeline, PipelineList, PluginPiping, Feed } from "@fnndsc/chrisapi";
import {
Pipeline,
type PipelineList,
PluginPiping,
Feed,
PipelineInstance,
} from "@fnndsc/chrisapi";

export function useSafeDispatch(dispatch: any) {
const mounted = React.useRef(false);
Expand Down Expand Up @@ -184,7 +190,8 @@ export const fetchPipelines = async (
} = {
error_message: "",
};
let registeredPipelinesList, registeredPipelines;
let registeredPipelinesList: PipelineList;
let registeredPipelines: PipelineInstance[];
const offset = perPage * (page - 1);
const client = ChrisAPIClient.getClient();
const params = {
Expand All @@ -194,17 +201,17 @@ export const fetchPipelines = async (
};
try {
registeredPipelinesList = await client.getPipelines(params);
registeredPipelines = registeredPipelinesList.getItems();
registeredPipelines =
(registeredPipelinesList.getItems() as PipelineInstance[]) || [];
return {
registeredPipelines,
registeredPipelinesList,
error: errorPayload,
};
} catch (error) {
const errorObj = catchError(error);
errorPayload = errorObj;
}

return {
registeredPipelines,
registeredPipelinesList,
error: errorPayload,
};
};

export async function fetchResources(pipelineInstance: Pipeline) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/CreateFeed/CreateFeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export default function CreateFeed() {
)}
</WizardStep>
<WizardStep id={3} name="Pipelines">
<PipelineContainer />
<PipelineContainer justDisplay={true} />
</WizardStep>
<WizardStep
id={4}
Expand Down
241 changes: 122 additions & 119 deletions src/components/CreateFeed/Pipelines.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import { useQuery } from "@tanstack/react-query";
import { ErrorAlert } from "../Common";
import type { Pipeline } from "@fnndsc/chrisapi";
import { EmptyStateComponent } from "../Common";
import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";

import {
Expand All @@ -37,6 +38,7 @@ import {
} from "../../api/common";
import type { PipelinesProps } from "./types/pipeline";
import { Alert } from "antd";
import { useTypedSelector } from "../../store/hooks";

export const PIPELINEQueryTypes = {
NAME: ["Name", "Match plugin name containing this string"],
Expand Down Expand Up @@ -75,6 +77,7 @@ const Pipelines = ({
handleSetCurrentComputeEnv,
handleFormParameters,
}: PipelinesProps) => {
const showDelete = useTypedSelector((state) => state.user.isStaff);
const { pipelineData, selectedPipeline, pipelines } = state;
const [errors, setErrors] = React.useState({});
const { goToNextStep: onNext, goToPrevStep: onBack } =
Expand Down Expand Up @@ -119,23 +122,21 @@ const Pipelines = ({
dropdownValue.toLowerCase(),
);

const { registeredPipelines, registeredPipelinesList, error } = data;

if (registeredPipelines) {
handleDispatchWrap(registeredPipelines);
if (data?.registeredPipelines) {
handleDispatchWrap(data?.registeredPipelines);
}

if (registeredPipelinesList) {
if (data?.registeredPipelinesList) {
setPageState((pageState) => {
return {
...pageState,
itemCount: registeredPipelinesList.totalCount,
itemCount: data?.registeredPipelinesList.totalCount,
};
});
}

if (error.error_message) {
throw new Error(error.error_message);
if (data?.error.error_message) {
throw new Error(data?.error.error_message);
}
return data;
},
Expand Down Expand Up @@ -188,7 +189,7 @@ const Pipelines = ({

if (el) {
//@ts-ignore
el!.scrollIntoView({ block: "center", behavior: "smooth" });
el?.scrollIntoView({ block: "center", behavior: "smooth" });
}
});

Expand Down Expand Up @@ -238,7 +239,7 @@ const Pipelines = ({
}
//Not already expanded or not previous fetched and cached in state
if (
!(expanded && expanded[pipeline.data.id]) ||
!expanded?.[pipeline.data.id] ||
!state.pipelineData[pipeline.data.id]
) {
setPipeline(pipeline);
Expand All @@ -265,7 +266,10 @@ const Pipelines = ({

const handleKeyDown = useCallback(
(e: any, pipeline: Pipeline) => {
if (e.code == "Enter" && e.target.closest("DIV.pf-c-data-list__toggle")) {
if (
e.code === "Enter" &&
e.target.closest("DIV.pf-c-data-list__toggle")
) {
e.preventDefaut();
handleOnExpand(pipeline);
}
Expand All @@ -275,9 +279,9 @@ const Pipelines = ({

const handleBrowserKeyDown = useCallback(
(e: any) => {
if (e.code == "ArrowLeft") {
if (e.code === "ArrowLeft") {
onBack();
} else if (e.code == "ArrowRight") {
} else if (e.code === "ArrowRight") {
onNext();
}
},
Expand Down Expand Up @@ -356,7 +360,7 @@ const Pipelines = ({
customIcon={<SearchIcon />}
aria-label="search"
onChange={(_event, value: string) => {
handlePipelineSearch && handlePipelineSearch(value.toLowerCase());
handlePipelineSearch?.(value.toLowerCase());
}}
/>
</div>
Expand All @@ -368,69 +372,64 @@ const Pipelines = ({
onPerPageSelect={onPerPageSelect}
/>
</div>

<DataList aria-label="pipeline list">
{isError && (
<Alert type="error" description={<div>{error.message}</div>} />
)}

{isLoading ? (
<SpinContainer title="Fetching Pipelines" />
) : (
pipelines.length > 0 &&
pipelines.map((pipeline: any) => {
return (
<DataListItem
isExpanded={
expanded && expanded[pipeline.data.id] ? true : false
}
key={pipeline.data.id}
>
<DataListItemRow>
<DataListToggle
id={pipeline.data.id}
aria-controls="expand"
onKeyDown={(e) => handleKeyDown(e, pipeline)}
onClick={() => handleOnExpand(pipeline)}
/>
<DataListItemCells
dataListCells={[
<DataListCell key={pipeline.data.name}>
<div
className="plugin-table-row"
key={pipeline.data.name}
>
<span className="plugin-table-row__plugin-name">
{pipeline.data.name}
</span>
<span
className="plugin-table-row__plugin-description"
id={`${pipeline.data.description}`}
>
<em>{pipeline.data.description}</em>
</span>
</div>
</DataListCell>,
]}
/>
<DataListAction
aria-labelledby="select a pipeline"
id={pipeline.data.id}
aria-label="actions"
className="pipelines"
>
{!justDisplay && (
<Button
variant="primary"
key="select-action"
onClick={() => handleOnButtonClick(pipeline)}
) : pipelines.length > 0 ? (
pipelines.map((pipeline: any) => (
<DataListItem
isExpanded={expanded?.[pipeline.data.id] ? true : false}
key={pipeline.data.id}
>
<DataListItemRow>
<DataListToggle
id={pipeline.data.id}
aria-controls="expand"
onKeyDown={(e) => handleKeyDown(e, pipeline)}
onClick={() => handleOnExpand(pipeline)}
/>
<DataListItemCells
dataListCells={[
<DataListCell key={pipeline.data.name}>
<div
className="plugin-table-row"
key={pipeline.data.name}
>
{selectedPipeline === pipeline.data.id
? "Deselect"
: "Select"}
</Button>
)}

<span className="plugin-table-row__plugin-name">
{pipeline.data.name}
</span>
<span
className="plugin-table-row__plugin-description"
id={`${pipeline.data.description}`}
>
<em>{pipeline.data.description}</em>
</span>
</div>
</DataListCell>,
]}
/>
<DataListAction
aria-labelledby="select a pipeline"
id={pipeline.data.id}
aria-label="actions"
className="pipelines"
>
{!justDisplay && (
<Button
variant="primary"
key="select-action"
onClick={() => handleOnButtonClick(pipeline)}
>
{selectedPipeline === pipeline.data.id
? "Deselect"
: "Select"}
</Button>
)}
{/*Hardcode to only allow the user 'chris' to delete the pipelines*/}
{showDelete && (
<Button
key="delete-action"
onClick={async () => {
Expand All @@ -453,61 +452,65 @@ const Pipelines = ({
>
Delete
</Button>
</DataListAction>
</DataListItemRow>
<DataListContent
id={pipeline.data.id}
aria-label="PrimaryContent"
isHidden={!(expanded && expanded[pipeline.data.id])}
>
{((expanded && expanded[pipeline.data.id]) ||
state.pipelineData[pipeline.data.id]) &&
!isResourcesLoading &&
!isResourceError ? (
<>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<Tree
state={state.pipelineData[pipeline.data.id]}
currentPipelineId={pipeline.data.id}
handleNodeClick={handleNodeClick}
handleSetCurrentNode={handleSetCurrentNode}
handleSetPipelineEnvironments={
handleSetPipelineEnvironments
}
handleSetCurrentNodeTitle={handleSetCurrentNodeTitle}
/>
<GeneralCompute
handleSetGeneralCompute={handleSetGeneralCompute}
currentPipelineId={pipeline.data.id}
/>
</div>
)}
</DataListAction>
</DataListItemRow>

<ConfigurationPage
justDisplay={justDisplay}
pipelines={pipelines}
pipeline={pipeline}
currentPipelineId={pipeline.data.id}
<DataListContent
id={pipeline.data.id}
aria-label="PrimaryContent"
isHidden={!expanded?.[pipeline.data.id]}
>
{(expanded?.[pipeline.data.id] ||
state.pipelineData[pipeline.data.id]) &&
!isResourcesLoading &&
!isResourceError ? (
<>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<Tree
state={state.pipelineData[pipeline.data.id]}
currentPipelineId={pipeline.data.id}
handleNodeClick={handleNodeClick}
handleSetCurrentNode={handleSetCurrentNode}
handleSetPipelineEnvironments={
handleSetPipelineEnvironments
}
handleSetCurrentNodeTitle={handleSetCurrentNodeTitle}
handleDispatchPipelines={handleDispatchPipelines}
handleSetCurrentComputeEnv={handleSetCurrentComputeEnv}
handleFormParameters={handleFormParameters}
/>
</>
) : (
<SpinContainer title="Fetching Pipeline Resources" />
)}
</DataListContent>
</DataListItem>
);
})
<GeneralCompute
handleSetGeneralCompute={handleSetGeneralCompute}
currentPipelineId={pipeline.data.id}
/>
</div>

<ConfigurationPage
justDisplay={justDisplay}
pipelines={pipelines}
pipeline={pipeline}
currentPipelineId={pipeline.data.id}
state={state.pipelineData[pipeline.data.id]}
handleSetCurrentNodeTitle={handleSetCurrentNodeTitle}
handleDispatchPipelines={handleDispatchPipelines}
handleSetCurrentComputeEnv={handleSetCurrentComputeEnv}
handleFormParameters={handleFormParameters}
/>
</>
) : (
<SpinContainer title="Fetching Pipeline Resources" />
)}
</DataListContent>
</DataListItem>
))
) : (
<EmptyStateComponent title="No Pipelines were found registered to your ChRIS instance" />
)}
</DataList>

<div id="error">
{Object.keys(errors).length > 0 && (
<ErrorAlert errors={errors} cleanUpErrors={() => setErrors({})} />
Expand Down
Loading

0 comments on commit 5088bde

Please sign in to comment.