Skip to content

Commit 6c6ba42

Browse files
committed
fix ui
1 parent 1cb93b0 commit 6c6ba42

File tree

8 files changed

+118
-208
lines changed

8 files changed

+118
-208
lines changed

server/go.mod

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,31 @@ require (
1818
gorm.io/driver/mysql v1.5.0
1919
gorm.io/gorm v1.25.0
2020
)
21+
22+
require (
23+
github.com/andybalholm/brotli v1.0.5 // indirect
24+
github.com/dustin/go-humanize v1.0.1 // indirect
25+
github.com/glebarez/go-sqlite v1.21.1 // indirect
26+
github.com/go-sql-driver/mysql v1.7.0 // indirect
27+
github.com/golang-jwt/jwt/v4 v4.0.0 // indirect
28+
github.com/jinzhu/inflection v1.0.0 // indirect
29+
github.com/jinzhu/now v1.1.5 // indirect
30+
github.com/klauspost/compress v1.16.3 // indirect
31+
github.com/mattn/go-colorable v0.1.13 // indirect
32+
github.com/mattn/go-isatty v0.0.18 // indirect
33+
github.com/mattn/go-runewidth v0.0.14 // indirect
34+
github.com/philhofer/fwd v1.1.2 // indirect
35+
github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
36+
github.com/rivo/uniseg v0.2.0 // indirect
37+
github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 // indirect
38+
github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
39+
github.com/tinylib/msgp v1.1.8 // indirect
40+
github.com/valyala/bytebufferpool v1.0.0 // indirect
41+
github.com/valyala/fasthttp v1.45.0 // indirect
42+
github.com/valyala/tcplisten v1.0.0 // indirect
43+
golang.org/x/sys v0.7.0 // indirect
44+
modernc.org/libc v1.22.3 // indirect
45+
modernc.org/mathutil v1.5.0 // indirect
46+
modernc.org/memory v1.5.0 // indirect
47+
modernc.org/sqlite v1.21.1 // indirect
48+
)

server/go.sum

Lines changed: 2 additions & 128 deletions
Large diffs are not rendered by default.

ui/src/components/Sidebar/index.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,16 @@ function MobileNav({ onOpen, ...rest }: MobileProps) {
142142
shadow="s1"
143143
{...rest}
144144
>
145-
<Flex alignItems="center" width="260px" justifyContent="center">
146-
<Image width="260px" height="40px" src={LogoImg} alt="loadster" />
147-
</Flex>
145+
<Link to="/">
146+
<Flex
147+
alignItems="center"
148+
width="260px"
149+
justifyContent="center"
150+
cursor="pointer"
151+
>
152+
<Image width="260px" height="40px" src={LogoImg} alt="loadster" />
153+
</Flex>
154+
</Link>
148155
<IconButton
149156
display={{ base: "flex", md: "none" }}
150157
onClick={onOpen}
Lines changed: 56 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, HStack } from "@chakra-ui/react";
1+
import { Box, Button, Spacer, VStack } from "@chakra-ui/react";
22
import { useSelector, useDispatch } from "react-redux";
33
import { useNavigate } from "react-router-dom";
44
import Stats, { STATE } from "./stats";
@@ -12,6 +12,7 @@ import StatusInfo from "../../../../components/Info/statusInfo";
1212
import { useInterval } from "../../../../hooks/useInterval";
1313
import { getLoadsterAction } from "../../../../store/stress/dashboard/actions";
1414
import Spinner from "../../../../components/Spinner";
15+
import { NumberFormat } from "../../../../utils/_shared";
1516

1617
export default function RequestStats() {
1718
const dispatch = useDispatch();
@@ -33,47 +34,59 @@ export default function RequestStats() {
3334
return <Spinner />;
3435
}
3536
return (
36-
<HStack
37-
width="auto"
38-
borderRadius="8px"
39-
bg="#F8F8F8"
40-
margin="12px 24px"
41-
paddingX="24px"
42-
paddingY="12px"
43-
flexWrap="wrap"
44-
>
45-
<StatusInfo
46-
text={loadsterRespons?.finish ? "Completed" : "Running"}
47-
positive={!loadsterRespons?.finish}
48-
/>
49-
<Stats
50-
state={STATE.NORMAL}
51-
value={loadsterRespons?.timeTaken || 0}
52-
text="Time"
53-
/>
54-
<Stats
55-
state={STATE.NORMAL}
56-
value={loadsterRespons?.totalRequest || 0}
57-
text="Total Request"
58-
/>
59-
<Stats
60-
state={STATE.POSITIVE}
61-
value={loadsterRespons?.totalRPS || 0}
62-
text="Total RPS"
63-
/>
64-
<Stats
65-
state={STATE.POSITIVE}
66-
value={loadsterRespons?.successRPS || 0}
67-
text="Success RPS"
68-
/>
69-
<Stats
70-
state={STATE.NAGATIVE}
71-
value={loadsterRespons?.failRPS || 0}
72-
text="Failed RPS"
73-
/>
74-
<Button onClick={() => navigate(`/request/${selectedRequestId}`)}>
75-
View In Details
76-
</Button>
77-
</HStack>
37+
<VStack padding="12px 54px" width="100%">
38+
<Box
39+
display="flex"
40+
flexWrap="wrap"
41+
justifyContent="space-between"
42+
width="100%"
43+
>
44+
<StatusInfo
45+
text={loadsterRespons?.finish ? "Completed" : "Running..."}
46+
positive={!loadsterRespons?.finish}
47+
/>
48+
<Spacer />
49+
<Button onClick={() => navigate(`/request/${selectedRequestId}`)}>
50+
View In Details
51+
</Button>
52+
</Box>
53+
<Box display="flex" flexWrap="wrap" justifyContent="space-between">
54+
<Stats
55+
state={STATE.NORMAL}
56+
value={(loadsterRespons?.minLatency || 0) / 1000}
57+
text="Fastest (MS)"
58+
/>
59+
<Stats
60+
state={STATE.NORMAL}
61+
value={(loadsterRespons?.maxLatency || 0) / 1000}
62+
text="Slowest (MS)"
63+
/>
64+
<Stats
65+
state={STATE.NORMAL}
66+
value={loadsterRespons?.timeTaken || 0}
67+
text="Time"
68+
/>
69+
<Stats
70+
state={STATE.NORMAL}
71+
value={NumberFormat(loadsterRespons?.totalRequest || 0)}
72+
text="Total Hit"
73+
/>
74+
<Stats
75+
state={STATE.POSITIVE}
76+
value={loadsterRespons?.totalRPS || 0}
77+
text="Total RPS"
78+
/>
79+
<Stats
80+
state={STATE.POSITIVE}
81+
value={loadsterRespons?.successRPS || 0}
82+
text="Success RPS"
83+
/>
84+
<Stats
85+
state={STATE.NAGATIVE}
86+
value={loadsterRespons?.failRPS || 0}
87+
text="Failed RPS"
88+
/>
89+
</Box>
90+
</VStack>
7891
);
7992
}

ui/src/pages/Dashboard/LoadRequest/RequestedStats/stats.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { HStack, Text } from "@chakra-ui/react";
1+
import { Text, VStack } from "@chakra-ui/react";
22
import { Animate } from "../../../../components/Stats/Animation";
33

44
export enum STATE {
@@ -40,22 +40,26 @@ export default function Stats({
4040
state,
4141
}: {
4242
text: string;
43-
value: number;
43+
value: number | string;
4444
state: STATE;
4545
}) {
4646
const color = getColorCode(state);
4747
return (
48-
<HStack
49-
gap={3}
50-
minWidth="150px"
48+
<VStack
49+
gap={1}
50+
minWidth="200px"
51+
maxWidth="200px"
5152
borderLeft={`2px solid ${color}`}
52-
paddingLeft="12px"
53+
padding="12px 0"
54+
margin="12px"
55+
justifyContent="start"
56+
bg="#F8F8F8"
5357
flex={1}
5458
>
59+
<Text>{text}</Text>
5560
<Text color={getColorCodeForNumber(state)} fontWeight="600">
56-
<Animate value={value} />
61+
{typeof value === "number" ? <Animate value={value} /> : value}
5762
</Text>
58-
<Text>{text}</Text>
59-
</HStack>
63+
</VStack>
6064
);
6165
}

ui/src/pages/Dashboard/LoadRequest/requestStats.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,15 @@ import {
1515
getSelectedRequestId,
1616
} from "../../../store/stress/dashboard/selectors";
1717
import RequestResponse from "./RequestRespons";
18-
import { WorkerState } from "./RequestStatus/workerState";
18+
// import { WorkerState } from "./RequestStatus/workerState";
1919
import ServerMap from "./RequestStatus/serverMap";
2020
import RequestedStats from "./RequestedStats";
2121

2222
function ResponseTab({ children }: { children: ReactElement }) {
2323
const [, setTabIndex] = useState(0);
2424
const response = useSelector(getRequestResponseData);
2525

26-
const list = [
27-
"Response",
28-
"Request Status",
29-
"Worker Status",
30-
"Worker Stats",
31-
].filter((item) => {
26+
const list = ["Response", "Request Status", "Worker Stats"].filter((item) => {
3227
if (!response && item === "Response") {
3328
return false;
3429
}
@@ -75,9 +70,9 @@ export function RequestStats() {
7570
<TabPanel>
7671
<RequestedStats />
7772
</TabPanel>
78-
<TabPanel>
73+
{/* <TabPanel>
7974
<WorkerState />
80-
</TabPanel>
75+
</TabPanel> */}
8176
<TabPanel>
8277
<ServerMap />
8378
</TabPanel>

ui/src/pages/Login/index.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function Login() {
4646
<Heading fontSize="4xl">Sign in to your account</Heading>
4747
<Text fontSize="lg" color="gray.600">
4848
to enjoy all of our cool{" "}
49-
<Link color="blue.400" href="/signin">
49+
<Link color="primary.400" href="/signin">
5050
features
5151
</Link>
5252
✌️
@@ -82,21 +82,14 @@ export default function Login() {
8282
</Link> */}
8383
</Stack>
8484

85-
<Button
86-
onClick={handleSubmit}
87-
bg="tomato"
88-
color="white"
89-
_hover={{
90-
bg: "orange.400",
91-
}}
92-
>
85+
<Button onClick={handleSubmit} colorScheme="primary">
9386
Sign in
9487
</Button>
9588
<Text align="center">
9689
Don&apos;t have an account?
9790
<RouterLink to="/signup">
9891
{" "}
99-
<Button as="a" variant="link" color="tomato">
92+
<Button as="a" variant="link" color="primary.400">
10093
Signup
10194
</Button>
10295
</RouterLink>

ui/src/pages/Signup/index.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,7 @@ export default function SignupCard() {
154154
<Button
155155
loadingText="Submitting"
156156
size="lg"
157-
bg="tomato"
158-
color="white"
159-
_hover={{
160-
bg: "orange.500",
161-
}}
157+
colorScheme="primary"
162158
onClick={onRegister}
163159
>
164160
{loading ? <Spinner size="md" /> : "Sign up"}
@@ -168,7 +164,7 @@ export default function SignupCard() {
168164
<Text align="center">
169165
Already a user?{" "}
170166
<RouterLink to="/signin">
171-
<Button as="a" variant="link" color="tomato">
167+
<Button as="a" variant="link" color="primary.400">
172168
Login
173169
</Button>
174170
</RouterLink>

0 commit comments

Comments
 (0)