Skip to content

Commit 6b52a36

Browse files
DaneEverittDaneEveritt
committed
Significantly reduce the number of re-renders on the console page when stats are flowing
1 parent 5fc4444 commit 6b52a36

File tree

4 files changed

+148
-110
lines changed

4 files changed

+148
-110
lines changed

‎resources/scripts/components/server/PowerControls.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import tw from 'twin.macro';
3+
import Can from '@/components/elements/Can';
4+
import Button from '@/components/elements/Button';
5+
import StopOrKillButton from '@/components/server/StopOrKillButton';
6+
import { PowerAction } from '@/components/server/ServerConsole';
7+
import { ServerContext } from '@/state/server';
8+
9+
const PowerControls = () => {
10+
const status = ServerContext.useStoreState(state => state.status.value);
11+
const instance = ServerContext.useStoreState(state => state.socket.instance);
12+
13+
const sendPowerCommand = (command: PowerAction) => {
14+
instance && instance.send('set state', command);
15+
};
16+
17+
return (
18+
<div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
19+
<Can action={'control.start'}>
20+
<Button
21+
size={'xsmall'}
22+
color={'green'}
23+
isSecondary
24+
css={tw`mr-2`}
25+
disabled={status !== 'offline'}
26+
onClick={e => {
27+
e.preventDefault();
28+
sendPowerCommand('start');
29+
}}
30+
>
31+
Start
32+
</Button>
33+
</Can>
34+
<Can action={'control.restart'}>
35+
<Button
36+
size={'xsmall'}
37+
isSecondary
38+
css={tw`mr-2`}
39+
disabled={!status}
40+
onClick={e => {
41+
e.preventDefault();
42+
sendPowerCommand('restart');
43+
}}
44+
>
45+
Restart
46+
</Button>
47+
</Can>
48+
<Can action={'control.stop'}>
49+
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
50+
</Can>
51+
</div>
52+
)
53+
};
54+
55+
export default PowerControls;

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 9 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,29 @@
1-
import React, { lazy, useEffect, useState } from 'react';
1+
import React, { lazy, memo } from 'react';
22
import { ServerContext } from '@/state/server';
3-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4-
import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
5-
import { bytesToHuman, megabytesToHuman } from '@/helpers';
63
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
7-
import TitledGreyBox from '@/components/elements/TitledGreyBox';
84
import Can from '@/components/elements/Can';
95
import ContentContainer from '@/components/elements/ContentContainer';
106
import tw from 'twin.macro';
11-
import Button from '@/components/elements/Button';
12-
import StopOrKillButton from '@/components/server/StopOrKillButton';
137
import ServerContentBlock from '@/components/elements/ServerContentBlock';
8+
import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
9+
import isEqual from 'react-fast-compare';
10+
import PowerControls from '@/components/server/PowerControls';
1411

1512
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
1613

1714
const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
1815
const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
1916

20-
export default () => {
21-
const [ memory, setMemory ] = useState(0);
22-
const [ cpu, setCpu ] = useState(0);
23-
const [ disk, setDisk ] = useState(0);
24-
25-
const name = ServerContext.useStoreState(state => state.server.data!.name);
26-
const limits = ServerContext.useStoreState(state => state.server.data!.limits);
17+
const ServerConsole = () => {
2718
const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
28-
const status = ServerContext.useStoreState(state => state.status.value);
29-
30-
const connected = ServerContext.useStoreState(state => state.socket.connected);
31-
const instance = ServerContext.useStoreState(state => state.socket.instance);
32-
33-
const statsListener = (data: string) => {
34-
let stats: any = {};
35-
try {
36-
stats = JSON.parse(data);
37-
} catch (e) {
38-
return;
39-
}
40-
41-
setMemory(stats.memory_bytes);
42-
setCpu(stats.cpu_absolute);
43-
setDisk(stats.disk_bytes);
44-
};
45-
46-
const sendPowerCommand = (command: PowerAction) => {
47-
instance && instance.send('set state', command);
48-
};
49-
50-
useEffect(() => {
51-
if (!connected || !instance) {
52-
return;
53-
}
54-
55-
instance.addListener('stats', statsListener);
56-
instance.send('send stats');
57-
58-
return () => {
59-
instance.removeListener('stats', statsListener);
60-
};
61-
}, [ instance, connected ]);
62-
63-
const disklimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
64-
const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
6519

6620
return (
6721
<ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
6822
<div css={tw`w-full lg:w-1/4`}>
69-
<TitledGreyBox css={tw`break-all`} title={name} icon={faServer}>
70-
<p css={tw`text-xs uppercase`}>
71-
<FontAwesomeIcon
72-
icon={faCircle}
73-
fixedWidth
74-
css={[
75-
tw`mr-1`,
76-
status === 'offline' ? tw`text-red-500` : (status === 'running' ? tw`text-green-500` : tw`text-yellow-500`),
77-
]}
78-
/>
79-
&nbsp;{!status ? 'Connecting...' : status}
80-
</p>
81-
<p css={tw`text-xs mt-2`}>
82-
<FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {cpu.toFixed(2)}%
83-
</p>
84-
<p css={tw`text-xs mt-2`}>
85-
<FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(memory)}
86-
<span css={tw`text-neutral-500`}> / {memorylimit}</span>
87-
</p>
88-
<p css={tw`text-xs mt-2`}>
89-
<FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(disk)}
90-
<span css={tw`text-neutral-500`}> / {disklimit}</span>
91-
</p>
92-
</TitledGreyBox>
23+
<ServerDetailsBlock/>
9324
{!isInstalling ?
9425
<Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
95-
<div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
96-
<Can action={'control.start'}>
97-
<Button
98-
size={'xsmall'}
99-
color={'green'}
100-
isSecondary
101-
css={tw`mr-2`}
102-
disabled={status !== 'offline'}
103-
onClick={e => {
104-
e.preventDefault();
105-
sendPowerCommand('start');
106-
}}
107-
>
108-
Start
109-
</Button>
110-
</Can>
111-
<Can action={'control.restart'}>
112-
<Button
113-
size={'xsmall'}
114-
isSecondary
115-
css={tw`mr-2`}
116-
disabled={!status}
117-
onClick={e => {
118-
e.preventDefault();
119-
sendPowerCommand('restart');
120-
}}
121-
>
122-
Restart
123-
</Button>
124-
</Can>
125-
<Can action={'control.stop'}>
126-
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
127-
</Can>
128-
</div>
26+
<PowerControls/>
12927
</Can>
13028
:
13129
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
@@ -147,3 +45,5 @@ export default () => {
14745
</ServerContentBlock>
14846
);
14947
};
48+
49+
export default memo(ServerConsole, isEqual);

‎resources/scripts/components/server/ServerDetailsBlock.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useEffect, useState } from 'react';
2+
import tw from 'twin.macro';
3+
import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
4+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5+
import { bytesToHuman, megabytesToHuman } from '@/helpers';
6+
import TitledGreyBox from '@/components/elements/TitledGreyBox';
7+
import { ServerContext } from '@/state/server';
8+
9+
interface Stats {
10+
memory: number;
11+
cpu: number;
12+
disk: number;
13+
}
14+
15+
const ServerDetailsBlock = () => {
16+
const [ stats, setStats ] = useState<Stats>({ memory: 0, cpu: 0, disk: 0 });
17+
18+
const connected = ServerContext.useStoreState(state => state.socket.connected);
19+
const instance = ServerContext.useStoreState(state => state.socket.instance);
20+
21+
const statsListener = (data: string) => {
22+
let stats: any = {};
23+
try {
24+
stats = JSON.parse(data);
25+
} catch (e) {
26+
return;
27+
}
28+
29+
setStats({
30+
memory: stats.memory_bytes,
31+
cpu: stats.cpu_absolute,
32+
disk: stats.disk_bytes,
33+
});
34+
};
35+
36+
useEffect(() => {
37+
if (!connected || !instance) {
38+
return;
39+
}
40+
41+
instance.addListener('stats', statsListener);
42+
instance.send('send stats');
43+
44+
return () => {
45+
instance.removeListener('stats', statsListener);
46+
};
47+
}, [ instance, connected ]);
48+
49+
const name = ServerContext.useStoreState(state => state.server.data!.name);
50+
const limits = ServerContext.useStoreState(state => state.server.data!.limits);
51+
52+
const disklimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
53+
const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
54+
55+
return (
56+
<TitledGreyBox css={tw`break-words`} title={name} icon={faServer}>
57+
<p css={tw`text-xs uppercase`}>
58+
<FontAwesomeIcon
59+
icon={faCircle}
60+
fixedWidth
61+
css={[
62+
tw`mr-1`,
63+
status === 'offline' ? tw`text-red-500` : (status === 'running' ? tw`text-green-500` : tw`text-yellow-500`),
64+
]}
65+
/>
66+
&nbsp;{!status ? 'Connecting...' : status}
67+
</p>
68+
<p css={tw`text-xs mt-2`}>
69+
<FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}%
70+
</p>
71+
<p css={tw`text-xs mt-2`}>
72+
<FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(stats.memory)}
73+
<span css={tw`text-neutral-500`}> / {memorylimit}</span>
74+
</p>
75+
<p css={tw`text-xs mt-2`}>
76+
<FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(stats.disk)}
77+
<span css={tw`text-neutral-500`}> / {disklimit}</span>
78+
</p>
79+
</TitledGreyBox>
80+
);
81+
};
82+
83+
export default ServerDetailsBlock;

‎resources/scripts/routers/ServerRouter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import StartupContainer from '@/components/server/startup/StartupContainer';
3030
import requireServerPermission from '@/hoc/requireServerPermission';
3131

3232
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
33-
const { rootAdmin } = useStoreState(state => state.user.data!);
33+
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
3434
const [ error, setError ] = useState('');
3535
const [ installing, setInstalling ] = useState(false);
3636

0 commit comments

Comments
 (0)