andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Issue badge and reset latestScenario 

Reset latestScenario when a line disconnects and surface AI-detected issues in the UI. Backend: clear config.latestScenario on disconnect. Frontend: initialize latestScenario in App state, import useEffect and add isShowIssue state in CardLine with an effect that checks line.latestScenario.detectAI.issue (array) to toggle the badge. UI: reorganize feature badges layout and render a red "Issue" pill when an AI-detected issue exists.
This commit is contained in:
nguyentrungthat 2026-02-23 16:34:17 +07:00
parent 763bfca791
commit 669c30ca11
3 changed files with 88 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
BACKEND/app/services/line_connection.ts
View File

@ -287,6 +287,7 @@ export default class LineConnection {
this.config.status = 'disconnected'
this.config.output += this.config.output + '[CLEAR_TERMINAL_SCROLL_BACK]'
this.config.listFeatureTested = []
this.config.latestScenario = undefined
this.physicalTest = new PhysicalPortTest([])
// this.config.inventory = undefined
this.socketIO.emit('line_disconnected', {

1
FRONTEND/src/App.tsx
View File

@ -256,6 +256,7 @@ function App() {
netOutput: "[CLEAR_TERMINAL_SCROLL_BACK]",
output: "[CLEAR_TERMINAL_SCROLL_BACK]",
listFeatureTested: [],
latestScenario: undefined,
},
data?.stationId
)

131
FRONTEND/src/components/CardLine.tsx
View File

@ -3,7 +3,7 @@ import type { IScenario, TLine, TStation } from "../untils/types";
import classes from "./Component.module.css";
import TerminalCLI from "./TerminalXTerm";
import type { Socket } from "socket.io-client";
import { memo, useMemo, useState } from "react";
import { memo, useEffect, useMemo, useState } from "react";
import { convertTimestampToDate } from "../untils/helper";
import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
import { notifications } from "@mantine/notifications";
@ -40,6 +40,7 @@ const CardLine = ({
const [isDisabled, setIsDisabled] = useState<boolean>(false);
const [valueBaud, setValueBaud] = useState<string>("");
const [focusTerminal, setFocusTerminal] = useState<boolean>(false);
const [isShowIssue, setIsShowIssue] = useState<boolean>(false);
// useEffect(() => {
// if (
@ -122,6 +123,18 @@ const CardLine = ({
}
};
useEffect(() => {
if (line?.latestScenario?.detectAI) {
const data =
line?.latestScenario?.detectAI?.issue &&
Array.isArray(line?.latestScenario?.detectAI?.issue)
? "- " + line?.latestScenario?.detectAI?.issue?.join("\n- ")
: "";
if (data) setIsShowIssue(true);
else setIsShowIssue(false);
} else setIsShowIssue(false);
}, [line?.latestScenario]);
return (
<Card
key={line.id}
@ -337,50 +350,78 @@ const CardLine = ({
</motion.div>
)}
</Flex>
<Flex
align={"center"}
gap={"4px"}
w={"100%"}
style={{
minHeight: "20px",
paddingBottom: "4px",
paddingTop: "2px",
}}
>
{line?.listFeatureTested?.includes("DPELP") ? (
<Text
style={{
border: "1px solid #ccc",
borderRadius: "16px",
paddingLeft: "4px",
paddingRight: "4px",
backgroundColor: "#5aadf1",
}}
fz={"9px"}
c={"dark"}
>
DPELP
</Text>
) : (
""
)}
{line?.listFeatureTested?.includes("PHYSICAL") ? (
<Text
style={{
border: "1px solid #ccc",
borderRadius: "16px",
paddingLeft: "4px",
paddingRight: "4px",
backgroundColor: "#69da53",
}}
fz={"9px"}
c={"dark"}
>
Physical
</Text>
) : (
""
)}
<Flex align={"center"} justify={"space-between"} w={"100%"}>
<Flex
align={"center"}
gap={"4px"}
style={{
minHeight: "20px",
paddingBottom: "4px",
paddingTop: "2px",
}}
>
{line?.listFeatureTested?.includes("DPELP") ? (
<Text
style={{
border: "1px solid #ccc",
borderRadius: "16px",
paddingLeft: "4px",
paddingRight: "4px",
backgroundColor: "#5aadf1",
}}
fz={"9px"}
c={"dark"}
>
DPELP
</Text>
) : (
""
)}
{line?.listFeatureTested?.includes("PHYSICAL") ? (
<Text
style={{
border: "1px solid #ccc",
borderRadius: "16px",
paddingLeft: "4px",
paddingRight: "4px",
backgroundColor: "#69da53",
}}
fz={"9px"}
c={"dark"}
>
Physical
</Text>
) : (
""
)}
</Flex>
<Flex
align={"center"}
gap={"4px"}
style={{
minHeight: "20px",
paddingBottom: "4px",
paddingTop: "2px",
}}
>
{isShowIssue ? (
<Text
style={{
border: "1px solid #ccc",
borderRadius: "16px",
paddingLeft: "4px",
paddingRight: "4px",
backgroundColor: "#ff2b2b",
}}
fz={"9px"}
c={"white"}
>
Issue
</Text>
) : (
""
)}
</Flex>
</Flex>
</Box>
</Flex>