jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

chore(ui): add text-foreground class to NodeStatus build element (#5162)

Browse source 
* 📝 (NodeStatus/index.tsx): add text-foreground class to span element to improve text styling in build status section

* ✨ (NodeStatus/index.tsx): improve styling and readability by adding flex and text-foreground classes to status elements

* ✨ (build-status-display.tsx): Add a new component 'BuildStatusDisplay' to improve code organization and readability in the NodeStatus component.
📝 (index.tsx): Refactor NodeStatus component to use the new 'BuildStatusDisplay' component for displaying build status, validation details, and last run time. This change enhances code maintainability and reduces duplication.
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-09 17:13:28 -03:00 • committed by GitHub
commit 240e5790f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 79 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx Normal file
View file

@ -0,0 +1,72 @@
import {
RUN_TIMESTAMP_PREFIX,
STATUS_BUILD,
STATUS_BUILDING,
STATUS_INACTIVE,
} from "@/constants/constants";
import { BuildStatus } from "@/constants/enums";
const StatusMessage = ({ children, className = "text-foreground" }) => (
<span className={`flex ${className}`}>{children}</span>
);
const TimeStamp = ({ prefix, time }) => (
<div className="flex items-center text-sm text-secondary-foreground">
<div>{prefix}</div>
<div className="ml-1 text-secondary-foreground">{time}</div>
</div>
);
const Duration = ({ duration }) => (
<div className="flex items-center text-secondary-foreground">
<div>Duration:</div>
<div className="ml-1">{duration}</div>
</div>
);
const ValidationDetails = ({
validationString,
lastRunTime,
validationStatus,
}) => (
<div className="max-h-100 px-1 py-2.5">
<div className="flex max-h-80 flex-col gap-2 overflow-auto">
{validationString && (
<div className="text-sm text-foreground">{validationString}</div>
)}
{lastRunTime && (
<TimeStamp prefix={RUN_TIMESTAMP_PREFIX} time={lastRunTime} />
)}
<Duration duration={validationStatus?.data.duration} />
</div>
</div>
);
const BuildStatusDisplay = ({
buildStatus,
validationStatus,
validationString,
lastRunTime,
}) => {
if (buildStatus === BuildStatus.BUILDING) {
return <StatusMessage>{STATUS_BUILDING}</StatusMessage>;
}
if (buildStatus === BuildStatus.INACTIVE) {
return <StatusMessage>{STATUS_INACTIVE}</StatusMessage>;
}
if (!validationStatus) {
return <StatusMessage>{STATUS_BUILD}</StatusMessage>;
}
return (
<ValidationDetails
validationString={validationString}
lastRunTime={lastRunTime}
validationStatus={validationStatus}
/>
);
};
export default BuildStatusDisplay;

38
src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
View file

@ -25,6 +25,7 @@ import { Check } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import IconComponent from "../../../../components/common/genericIconComponent";
import BuildStatusDisplay from "./components/build-status-display";
import { normalizeTimeString } from "./utils/format-run-time";
export default function NodeStatus({
@ -199,37 +200,12 @@ export default function NodeStatus({
: "border-destructive bg-error-background",
)}
content={
buildStatus === BuildStatus.BUILDING ? (
<span> {STATUS_BUILDING} </span>
) : buildStatus === BuildStatus.INACTIVE ? (
<span> {STATUS_INACTIVE} </span>
) : !validationStatus ? (
<span className="flex">{STATUS_BUILD}</span>
) : (
<div className="max-h-100 px-1 py-2.5">
<div className="flex max-h-80 flex-col gap-2 overflow-auto">
{validationString && (
<div className="text-sm text-foreground">
{validationString}
</div>
)}
{lastRunTime && (
<div className="flex items-center text-sm text-secondary-foreground">
<div>{RUN_TIMESTAMP_PREFIX}</div>
<div className="ml-1 text-secondary-foreground">
{lastRunTime}
</div>
</div>
)}
<div className="flex items-center text-secondary-foreground">
<div>Duration:</div>
<div className="ml-1">
{validationStatus?.data.duration}
</div>
</div>
</div>
</div>
)
<BuildStatusDisplay
buildStatus={buildStatus}
validationStatus={validationStatus}
validationString={validationString}
lastRunTime={lastRunTime}
/>
}
side="bottom"
>