Upgrade UI Modal Terminal
This commit is contained in:
parent
c66877e413
commit
81596ddbea
|
|
@ -17,3 +17,7 @@ button:focus {
|
|||
overflow-y: scroll !important;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.modalNoScroll > .mantine-Modal-inner > .mantine-Modal-content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,7 +159,8 @@
|
|||
|
||||
.scenarioCard {
|
||||
border: 2px solid transparent;
|
||||
background: linear-gradient(white, white) padding-box,
|
||||
background:
|
||||
linear-gradient(white, white) padding-box,
|
||||
linear-gradient(145deg, #e0e0e0, #f5f5f5) border-box;
|
||||
}
|
||||
|
||||
|
|
@ -168,3 +169,14 @@
|
|||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.specRow {
|
||||
padding: 9px 0;
|
||||
border-bottom: 1px dashed #e9ecef;
|
||||
}
|
||||
|
||||
.connStatus {
|
||||
padding: 8px 0;
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
|
|
@ -88,7 +89,12 @@ const SwitchConnectionStatus = ({
|
|||
const portName = line?.interface ? normalizePortName(line.interface) : "";
|
||||
|
||||
return (
|
||||
<Flex justify="center" mb="sm">
|
||||
<Flex
|
||||
justify="center"
|
||||
mb="sm"
|
||||
className={classes.connStatus}
|
||||
style={{ backgroundColor: isConnected ? "#e6f4ea" : "#ffe6e6" }}
|
||||
>
|
||||
<IconCircleDot size={18} color={isConnected ? "green" : "red"} />
|
||||
<Flex ml="xs" gap="xs">
|
||||
<Text size="sm">Internet</Text>
|
||||
|
|
@ -652,6 +658,7 @@ const ModalTerminal = ({
|
|||
}}
|
||||
size={"100%"}
|
||||
style={{ position: "absolute", left: 0 }}
|
||||
className={"modalNoScroll"}
|
||||
title={
|
||||
<Flex justify={"space-between"} align={"center"} w={"100%"}>
|
||||
<Flex w={"30vw"}>
|
||||
|
|
@ -881,7 +888,7 @@ const ModalTerminal = ({
|
|||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Flex direction={"column"} h={"95%"}>
|
||||
<Flex direction={"column"} h={"75%"}>
|
||||
<Box>
|
||||
<Flex gap={"sm"} justify={"center"} align={"center"}>
|
||||
<Text size="xl">
|
||||
|
|
@ -910,11 +917,11 @@ const ModalTerminal = ({
|
|||
style={{ width: "100%" }}
|
||||
>
|
||||
<Flex align="center" gap="xs">
|
||||
<Text size="md" mr="6px">
|
||||
<Text w={50} size="md">
|
||||
BAUD:
|
||||
</Text>
|
||||
<Text size="md">
|
||||
<strong>{line?.baud || ""}</strong>
|
||||
<Text size="md" fw={600}>
|
||||
{line?.baud || ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Menu
|
||||
|
|
@ -996,10 +1003,11 @@ const ModalTerminal = ({
|
|||
</Menu>
|
||||
</Flex>
|
||||
<Flex mt="4px" align="center">
|
||||
<Text size="md" mr="6px">
|
||||
<Text w={50} size="md" mr="6px">
|
||||
PID:
|
||||
</Text>
|
||||
<Text
|
||||
fw={600}
|
||||
size="md"
|
||||
style={{
|
||||
opacity: line?.inventory?.pid ? 1 : 0.5,
|
||||
|
|
@ -1017,7 +1025,7 @@ const ModalTerminal = ({
|
|||
{line?.inventory?.pid || ""}
|
||||
</Text>
|
||||
{line?.inventory?.vid ? (
|
||||
<Text size="md" ml={"sm"}>
|
||||
<Text fw={600} size="md" ml={"sm"}>
|
||||
{line?.inventory?.vid}
|
||||
</Text>
|
||||
) : (
|
||||
|
|
@ -1031,10 +1039,11 @@ const ModalTerminal = ({
|
|||
/>
|
||||
</Flex>
|
||||
<Flex mt="4px" align="center">
|
||||
<Text size="md" mr="6px">
|
||||
<Text w={50} size="md" mr="6px">
|
||||
SN:
|
||||
</Text>
|
||||
<Text
|
||||
fw={600}
|
||||
size="md"
|
||||
style={{
|
||||
opacity: line?.inventory?.sn ? 1 : 0.5,
|
||||
|
|
@ -1082,7 +1091,7 @@ const ModalTerminal = ({
|
|||
<Flex
|
||||
justify={"space-between"}
|
||||
direction={"column"}
|
||||
h={"95%"}
|
||||
h={"90%"}
|
||||
>
|
||||
<ScrollArea h={"95%"}>
|
||||
<Card
|
||||
|
|
@ -1093,7 +1102,7 @@ const ModalTerminal = ({
|
|||
h={"fit-content"}
|
||||
mt={"4px"}
|
||||
>
|
||||
<Flex>
|
||||
<Flex className={classes.specRow}>
|
||||
<Text size="md" mr={"6px"} fw={"bold"}>
|
||||
IOS:
|
||||
</Text>
|
||||
|
|
@ -1107,7 +1116,7 @@ const ModalTerminal = ({
|
|||
: ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Flex className={classes.specRow}>
|
||||
<Text size="md" mr={"sm"} fw={"bold"}>
|
||||
MAC:
|
||||
</Text>
|
||||
|
|
@ -1117,7 +1126,7 @@ const ModalTerminal = ({
|
|||
: ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Flex className={classes.specRow}>
|
||||
<Text size="md" mr={"sm"} fw={"bold"}>
|
||||
License:
|
||||
</Text>
|
||||
|
|
@ -1134,12 +1143,10 @@ const ModalTerminal = ({
|
|||
: ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box>
|
||||
<Box>
|
||||
<Text size="md" mr={"sm"} fw={"bold"}>
|
||||
Sh env/module:
|
||||
</Text>
|
||||
</Box>
|
||||
<Box className={classes.specRow}>
|
||||
<Text size="md" mr={"sm"} fw={"bold"}>
|
||||
Sh env/module:
|
||||
</Text>
|
||||
<Box>
|
||||
{findDataShowEnv()
|
||||
? findDataShowEnv()?.map(
|
||||
|
|
@ -1153,7 +1160,7 @@ const ModalTerminal = ({
|
|||
</Box>
|
||||
</Box>
|
||||
<Flex direction={"column"}>
|
||||
<Flex>
|
||||
<Flex className={classes.specRow}>
|
||||
<Text size="md" mr={"sm"} fw={"bold"}>
|
||||
Memory:
|
||||
</Text>
|
||||
|
|
@ -1166,7 +1173,7 @@ const ModalTerminal = ({
|
|||
: ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Flex className={classes.specRow}>
|
||||
<Text size="md" mr={"sm"} fw={"bold"}>
|
||||
Flash:
|
||||
</Text>
|
||||
|
|
@ -1249,11 +1256,7 @@ const ModalTerminal = ({
|
|||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="fieldset"
|
||||
w={280}
|
||||
style={{ border: "none", padding: 0 }}
|
||||
>
|
||||
<Box>
|
||||
<SwitchConnectionStatus
|
||||
line={line}
|
||||
findSwitchPort={findSwitchPort}
|
||||
|
|
@ -1317,56 +1320,87 @@ const ModalTerminal = ({
|
|||
ms={10000}
|
||||
style={{ marginTop: "8px" }}
|
||||
/>
|
||||
<fieldset>
|
||||
<legend>
|
||||
<Flex>
|
||||
<Text>
|
||||
List ports{" "}
|
||||
<Card
|
||||
shadow="sm"
|
||||
p="sm"
|
||||
radius="md"
|
||||
withBorder
|
||||
h={"fit-content"}
|
||||
mt={"4px"}
|
||||
style={{ marginBottom: "14px" }}
|
||||
>
|
||||
<Flex justify={"space-between"} align={"center"} mb={"sm"}>
|
||||
<Text fw={600} fz={"14px"}>
|
||||
List ports{" "}
|
||||
<Text component="span" c="var(--green-7)" fw={600}>
|
||||
{isPhysicalTest
|
||||
? `(${line?.listPortsPhysical?.length || 0}/${
|
||||
line?.ports?.length || 0
|
||||
})`
|
||||
: ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
</legend>
|
||||
<ScrollArea h={"45vh"} p={"4px"}>
|
||||
</Text>
|
||||
{isPhysicalTest && (
|
||||
<Badge
|
||||
size="sm"
|
||||
color="blue"
|
||||
leftSection={
|
||||
<Box component="span" className="blink" />
|
||||
}
|
||||
>
|
||||
Running
|
||||
</Badge>
|
||||
)}
|
||||
</Flex>
|
||||
<ScrollArea h={"42vh"} p={0} pb={"xs"}>
|
||||
<SimpleGrid cols={5} spacing={"xs"}>
|
||||
{isPhysicalTest && line?.ports
|
||||
? line.ports.map((port, i) => (
|
||||
<Box key={i}>
|
||||
<Box
|
||||
key={i}
|
||||
p={"8px 10px"}
|
||||
style={{
|
||||
border: "1px solid #e9ecef",
|
||||
borderRadius: "9px",
|
||||
background: line?.listPortsPhysical?.includes(
|
||||
port,
|
||||
)
|
||||
? "#ebfbee"
|
||||
: "#fff",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
fz={"15px"}
|
||||
fz={"12.5px"}
|
||||
fw={600}
|
||||
c={
|
||||
line?.listPortsPhysical?.includes(port)
|
||||
? "#014a1a"
|
||||
: "#dedede"
|
||||
? "#2b8a3e"
|
||||
: "#ced4da"
|
||||
}
|
||||
style={{ fontFamily: "monospace" }}
|
||||
>
|
||||
{normalizePortName(port)}
|
||||
</Text>
|
||||
{port?.includes("SFP") ? (
|
||||
<Text
|
||||
mt={-4}
|
||||
fz={"11px"}
|
||||
key={i}
|
||||
mt={2}
|
||||
fz={"9px"}
|
||||
c={
|
||||
line?.listPortsPhysical?.includes(port)
|
||||
? "#014a1a"
|
||||
: "#dedede"
|
||||
? "#2f9e44"
|
||||
: "#ced4da"
|
||||
}
|
||||
>
|
||||
SFP
|
||||
</Text>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
) : null}
|
||||
</Box>
|
||||
))
|
||||
: null}
|
||||
</SimpleGrid>
|
||||
</ScrollArea>
|
||||
</fieldset>
|
||||
</Card>
|
||||
<Flex justify={"space-between"}>
|
||||
<Button
|
||||
fw={400}
|
||||
|
|
|
|||
Loading…
Reference in New Issue