Skip to content

Commit f8a3af7

Browse files
volodymyrkochynvolodymyrkochyn
authored
Add possibility for some blocks display as not available (#79)
1 parent e29f67c commit f8a3af7

12 files changed

+243
-131
lines changed

‎src/App.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ function App() {
236236
}
237237
{
238238
openedTable === Table.Connectivity
239-
&& <ConnectivityTable device={device} />
239+
&& <ConnectivityTable device={device} peripherals={peripherals} />
240240
}
241241
{
242242
openedTable === Table.Memory
@@ -248,7 +248,7 @@ function App() {
248248
}
249249
{
250250
openedTable === Table.Peripherals
251-
&& <PeripheralsTable device={device} />
251+
&& <PeripheralsTable device={device} peripheralsUrl={peripherals} />
252252
}
253253
{
254254
openedTable === Table.Summary

‎src/components/ABCPUComponent.js

+45-25
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
11
import React from 'react';
2-
import CPUComponent from './CPUComponent';
2+
import { CPUComponent, CPUComponentDisabled } from './CPUComponent';
33
import * as server from '../utils/serverAPI';
44
import { subscribe, unsubscribe } from '../utils/events';
5+
import { State } from './ComponentsLib';
6+
import { useSelection } from '../SelectionProvider';
57

68
function ABCPUComponent({
7-
device, title, index, power, percent,
9+
device, title, index, power, percent, peripherals, messages,
810
}) {
911
const [dev, setDev] = React.useState(0);
1012
const [name, setName] = React.useState('');
1113
const [ep0, setEp0] = React.useState(0);
1214
const [ep1, setEp1] = React.useState(0);
1315
const [ep2, setEp2] = React.useState(0);
1416
const [ep3, setEp3] = React.useState(0);
17+
const [enable, setEnable] = React.useState(true);
18+
const { selectedItem } = useSelection();
1519

1620
function fetchEndPoint(href, setEp) {
1721
server.GET(server.peripheralPath(device, href), (data) => setEp(data.consumption.noc_power));
1822
}
1923

2024
function update() {
21-
if (device !== null) {
22-
server.GET(server.api.fetch(server.Elem.peripherals, device), (data) => {
23-
if (data[index] !== null) {
24-
const { href } = data[index][0];
25-
server.GET(server.peripheralPath(device, href), (cpuData) => {
26-
setName(cpuData.name);
27-
fetchEndPoint(`${href}/${cpuData.ports[0].href}`, setEp0);
28-
fetchEndPoint(`${href}/${cpuData.ports[1].href}`, setEp1);
29-
fetchEndPoint(`${href}/${cpuData.ports[2].href}`, setEp2);
30-
fetchEndPoint(`${href}/${cpuData.ports[3].href}`, setEp3);
31-
});
32-
}
33-
});
25+
if ((device !== null) && (peripherals !== null)) {
26+
setEnable(peripherals[index] !== undefined);
27+
if (peripherals[index] !== undefined) {
28+
const { href } = peripherals[index][0];
29+
server.GET(server.peripheralPath(device, href), (cpuData) => {
30+
setName(cpuData.name);
31+
fetchEndPoint(`${href}/${cpuData.ports[0].href}`, setEp0);
32+
fetchEndPoint(`${href}/${cpuData.ports[1].href}`, setEp1);
33+
fetchEndPoint(`${href}/${cpuData.ports[2].href}`, setEp2);
34+
fetchEndPoint(`${href}/${cpuData.ports[3].href}`, setEp3);
35+
});
36+
}
3437
}
3538
}
3639

@@ -41,6 +44,11 @@ function ABCPUComponent({
4144
}
4245
}
4346

47+
React.useEffect(() => {
48+
update();
49+
// eslint-disable-next-line react-hooks/exhaustive-deps
50+
}, [peripherals]);
51+
4452
React.useEffect(() => {
4553
subscribe('cpuChanged', cpuChanged);
4654
return () => { unsubscribe('cpuChanged', cpuChanged); };
@@ -51,17 +59,29 @@ function ABCPUComponent({
5159
if (device !== null) update();
5260
}
5361

62+
function getBaseName(item) {
63+
const base = enable ? 'clickable' : 'disabled';
64+
return (selectedItem === item && enable) ? `${base} selected` : base;
65+
}
66+
5467
return (
55-
<CPUComponent
56-
title={title}
57-
power={power}
58-
percent={percent}
59-
name={name}
60-
ep0={ep0}
61-
ep1={ep1}
62-
ep2={ep2}
63-
ep3={ep3}
64-
/>
68+
<State messages={messages} baseClass={getBaseName(title)}>
69+
{enable && (
70+
<CPUComponent
71+
title={title}
72+
power={power}
73+
percent={percent}
74+
name={name}
75+
ep0={ep0}
76+
ep1={ep1}
77+
ep2={ep2}
78+
ep3={ep3}
79+
/>
80+
)}
81+
{
82+
!enable && <CPUComponentDisabled title={title} />
83+
}
84+
</State>
6585
);
6686
}
6787

‎src/components/CPUComponent.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const text = [
88
'Endpoint 1', 'Endpoint 2', 'Endpoint 3', 'Endpoint 4',
99
];
1010

11-
function CPUComponent({
11+
export function CPUComponent({
1212
title, power, percent = 0, name, endpointText = text, ep0 = 0, ep1 = 0, ep2 = 0, ep3 = 0,
1313
}) {
1414
return (
@@ -59,6 +59,19 @@ function CPUComponent({
5959
);
6060
}
6161

62+
export function CPUComponentDisabled({ title }) {
63+
return (
64+
<div className="cpu-component-top">
65+
<div className="cpu-component-l1">
66+
<div className="cpu-component-title">{title}</div>
67+
</div>
68+
<div className="cpu-component-l2">
69+
<div className="cpu-component-power grayed-text">Not available</div>
70+
</div>
71+
</div>
72+
);
73+
}
74+
6275
CPUComponent.propTypes = {
6376
title: PropTypes.string.isRequired,
6477
power: PropTypes.number.isRequired,
@@ -74,5 +87,3 @@ CPUComponent.propTypes = {
7487
CPUComponent.defaultProps = {
7588
endpointText: text,
7689
};
77-
78-
export default CPUComponent;

‎src/components/ConnectivityComponent.js

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import CPUComponent from './CPUComponent';
2+
import { CPUComponent, CPUComponentDisabled } from './CPUComponent';
33
import * as server from '../utils/serverAPI';
44
import { subscribe, unsubscribe } from '../utils/events';
55
import { useSelection } from '../SelectionProvider';
@@ -20,6 +20,7 @@ function ConnectivityComponent({ device, peripherals }) {
2020
'Channel 1', 'Channel 2', 'Channel 3', 'Channel 4',
2121
];
2222
const { socState } = useGlobalState();
23+
const [enable, setEnable] = React.useState(true);
2324

2425
const update = React.useCallback(() => {
2526
function fetchEndPoint(href, setEp) {
@@ -28,14 +29,17 @@ function ConnectivityComponent({ device, peripherals }) {
2829
if (device === null) return;
2930
if (peripherals === null) return;
3031
const fpgaComplex = peripherals.fpga_complex;
31-
const { href } = fpgaComplex[0];
32-
setName(fpgaComplex[0].name);
33-
server.GET(server.peripheralPath(device, href), (fpgaComplexData) => {
34-
fetchEndPoint(`${href}/${fpgaComplexData.ports[0].href}`, setEp0);
35-
fetchEndPoint(`${href}/${fpgaComplexData.ports[1].href}`, setEp1);
36-
fetchEndPoint(`${href}/${fpgaComplexData.ports[2].href}`, setEp2);
37-
fetchEndPoint(`${href}/${fpgaComplexData.ports[3].href}`, setEp3);
38-
});
32+
setEnable(fpgaComplex !== undefined);
33+
if (fpgaComplex) {
34+
const { href } = fpgaComplex[0];
35+
setName(fpgaComplex[0].name);
36+
server.GET(server.peripheralPath(device, href), (fpgaComplexData) => {
37+
fetchEndPoint(`${href}/${fpgaComplexData.ports[0].href}`, setEp0);
38+
fetchEndPoint(`${href}/${fpgaComplexData.ports[1].href}`, setEp1);
39+
fetchEndPoint(`${href}/${fpgaComplexData.ports[2].href}`, setEp2);
40+
fetchEndPoint(`${href}/${fpgaComplexData.ports[3].href}`, setEp3);
41+
});
42+
}
3943
}, [device, peripherals]);
4044

4145
React.useEffect(() => update(), [update]);
@@ -53,13 +57,15 @@ function ConnectivityComponent({ device, peripherals }) {
5357
const Title = 'Connectivity';
5458

5559
function getBaseName() {
56-
return (selectedItem === Title) ? 'clickable selected' : 'clickable';
60+
const base = enable ? 'clickable' : 'disabled';
61+
return (selectedItem === Title && enable) ? `${base} selected` : base;
5762
}
5863

5964
const noc = totalConsumption.processing_complex.dynamic.components.find((elem) => elem.type === 'noc');
6065

6166
return (
6267
<State messages={socState.fpga_complex} baseClass={getBaseName()}>
68+
{enable && (
6369
<CPUComponent
6470
title={Title}
6571
power={noc ? noc.power : 0}
@@ -71,6 +77,8 @@ function ConnectivityComponent({ device, peripherals }) {
7177
ep3={ep3}
7278
endpointText={endpoints}
7379
/>
80+
)}
81+
{!enable && <CPUComponentDisabled title={Title} />}
7482
</State>
7583
);
7684
}

‎src/components/DMAComponent.js

+23-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
2-
import CPUComponent from './CPUComponent';
2+
import { CPUComponent, CPUComponentDisabled } from './CPUComponent';
33
import * as server from '../utils/serverAPI';
44
import { subscribe, unsubscribe } from '../utils/events';
55
import { useSelection } from '../SelectionProvider';
66
import { useSocTotalPower } from '../SOCTotalPowerProvider';
77
import { State } from './ComponentsLib';
88
import { useGlobalState } from '../GlobalStateProvider';
99

10-
function DMAComponent({ device }) {
10+
function DMAComponent({ device, peripherals }) {
1111
const [dev, setDev] = React.useState(null);
1212
const [ep0, setEp0] = React.useState(0);
1313
const [ep1, setEp1] = React.useState(0);
@@ -19,6 +19,7 @@ function DMAComponent({ device }) {
1919
'Channel 1', 'Channel 2', 'Channel 3', 'Channel 4',
2020
]);
2121
const { socState } = useGlobalState();
22+
const [enable, setEnable] = React.useState(true);
2223

2324
function fetchEndPoint(href, setEp, index) {
2425
server.GET(server.peripheralPath(device, href), (data) => {
@@ -31,16 +32,21 @@ function DMAComponent({ device }) {
3132
}
3233

3334
function update() {
34-
server.GET(server.api.fetch(server.Elem.peripherals, device), (data) => {
35-
if (data.dma !== null) {
36-
fetchEndPoint(`${data.dma[0].href}`, setEp0, 0);
37-
fetchEndPoint(`${data.dma[1].href}`, setEp1, 1);
38-
fetchEndPoint(`${data.dma[2].href}`, setEp2, 2);
39-
fetchEndPoint(`${data.dma[3].href}`, setEp3, 3);
40-
}
41-
});
35+
if (peripherals === null) return;
36+
setEnable(peripherals.dma !== undefined);
37+
if (peripherals.dma !== undefined) {
38+
fetchEndPoint(`${peripherals.dma[0].href}`, setEp0, 0);
39+
fetchEndPoint(`${peripherals.dma[1].href}`, setEp1, 1);
40+
fetchEndPoint(`${peripherals.dma[2].href}`, setEp2, 2);
41+
fetchEndPoint(`${peripherals.dma[3].href}`, setEp3, 3);
42+
}
4243
}
4344

45+
React.useEffect(() => {
46+
update();
47+
// eslint-disable-next-line react-hooks/exhaustive-deps
48+
}, [peripherals]);
49+
4450
React.useEffect(() => {
4551
subscribe('dmaChanged', update);
4652
return () => { unsubscribe('dmaChanged', update); };
@@ -54,13 +60,15 @@ function DMAComponent({ device }) {
5460
const Title = 'DMA';
5561

5662
function getBaseName() {
57-
return (selectedItem === Title) ? 'clickable selected' : 'clickable';
63+
const base = enable ? 'clickable' : 'disabled';
64+
return (selectedItem === Title && enable) ? `${base} selected` : base;
5865
}
5966

6067
const dma = totalConsumption.processing_complex.dynamic.components.find((elem) => elem.type === 'dma');
6168

6269
return (
6370
<State messages={socState.dma} baseClass={getBaseName()}>
71+
{enable && (
6472
<CPUComponent
6573
title={Title}
6674
power={dma ? dma.power : 0}
@@ -72,6 +80,10 @@ function DMAComponent({ device }) {
7280
ep3={ep3}
7381
endpointText={dmaEndpoints}
7482
/>
83+
)}
84+
{
85+
!enable && <CPUComponentDisabled title={Title} />
86+
}
7587
</State>
7688
);
7789
}

‎src/components/MemoryComponent.js

+2
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,12 @@ function MemoryComponent({ device, peripherals }) {
105105

106106
MemoryComponent.propTypes = {
107107
device: PropTypes.string,
108+
peripherals: PropTypes.oneOfType([PropTypes.object]),
108109
};
109110

110111
MemoryComponent.defaultProps = {
111112
device: null,
113+
peripherals: null,
112114
};
113115

114116
export default MemoryComponent;

0 commit comments

Comments
 (0)