Skip to content

Commit 446a690

Browse files
andreip136andreip136
authored
Update node config type; Fix outdated config in node info (#503)
* update node config type * fix outdated config
1 parent 4e12041 commit 446a690

5 files changed

Lines changed: 70 additions & 67 deletions

File tree

‎src/components/node-config/configure-resources.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ type ConfigureResourcesProps = {
2828
setConfig: (config: NodeConfig) => void;
2929
};
3030

31-
type Environment = NonNullable<NodeConfig['dockerComputeEnvironments']>[number];
31+
type EnvGroup = NonNullable<NodeConfig['dockerComputeEnvironments']>[number];
32+
type Environment = EnvGroup['environments'][number];
3233
type Resource = NonNullable<Environment['resources']>[number];
3334
type FreeCompute = NonNullable<Environment['free']>;
3435

@@ -632,7 +633,15 @@ const EnvPreview: React.FC<{ env: Environment }> = ({ env }) => {
632633
};
633634

634635
const ConfigureResources: React.FC<ConfigureResourcesProps> = ({ config, setConfig }) => {
635-
const envs = config.dockerComputeEnvironments ?? [];
636+
const envs = config.dockerComputeEnvironments?.[0]?.environments ?? [];
637+
638+
const setEnvs = (nextEnvs: Environment[]) => {
639+
const [group, ...rest] = config.dockerComputeEnvironments ?? [];
640+
setConfig({
641+
...config,
642+
dockerComputeEnvironments: [{ ...group, environments: nextEnvs }, ...rest],
643+
});
644+
};
636645

637646
/**
638647
* Computed mapping of all resources across environments.
@@ -677,19 +686,18 @@ const ConfigureResources: React.FC<ConfigureResourcesProps> = ({ config, setConf
677686
};
678687

679688
const handleEnvChange = (index: number, next: Environment) => {
680-
const updated = envs.map((e, i) => (i === index ? next : e));
681-
setConfig({ ...config, dockerComputeEnvironments: updated });
689+
setEnvs(envs.map((e, i) => (i === index ? next : e)));
682690
};
683691

684692
const handleEnvDelete = (index: number) => {
685-
setConfig({ ...config, dockerComputeEnvironments: envs.filter((_, i) => i !== index) });
693+
setEnvs(envs.filter((_, i) => i !== index));
686694
setOpenIndexes((prev) => prev.filter((i) => i !== index).map((i) => (i > index ? i - 1 : i)));
687695
toast.info(`Deleted environment from position ${index + 1}`);
688696
};
689697

690698
const handleEnvAdd = () => {
691699
const newIndex = envs.length;
692-
setConfig({ ...config, dockerComputeEnvironments: [...envs, { ...DEFAULT_NEW_ENV }] });
700+
setEnvs([...envs, { ...DEFAULT_NEW_ENV }]);
693701
setOpenIndexes((prev) => [...prev, newIndex]);
694702
toast.info(`Added environment on position ${newIndex + 1}`);
695703
};

‎src/components/node-details/config-modal.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,16 @@ type ConfigModalProps = {
1515
isOpen: boolean;
1616
fetchingConfig: boolean;
1717
pushingConfig: boolean;
18-
config: Record<string, any>;
19-
editedConfig: Record<string, any>;
20-
setEditedConfig: Dispatch<SetStateAction<Record<string, any>>>;
21-
handlePushConfig: (config: Record<string, any>) => Promise<void>;
18+
editedConfig: NodeConfig;
19+
setEditedConfig: Dispatch<SetStateAction<NodeConfig>>;
20+
handlePushConfig: (config: NodeConfig) => Promise<void>;
2221
onClose: () => void;
2322
};
2423

2524
const ConfigModal = ({
2625
isOpen,
2726
fetchingConfig,
2827
pushingConfig,
29-
config,
3028
editedConfig,
3129
setEditedConfig,
3230
handlePushConfig,
@@ -36,7 +34,7 @@ const ConfigModal = ({
3634
const [resourcesOpen, setResourcesOpen] = useState(true);
3735
const [indexerOpen, setIndexerOpen] = useState(true);
3836

39-
const isFetching = fetchingConfig && (!config || Object.keys(config).length === 0);
37+
const isFetching = fetchingConfig && (!editedConfig || Object.keys(editedConfig).length === 0);
4038

4139
return (
4240
<Modal isOpen={isOpen} onClose={onClose} title="Edit node config" width="lg">
@@ -53,7 +51,7 @@ const ConfigModal = ({
5351
<ExpandMoreIcon className={classNames(styles.icon, { [styles.iconOpen]: generalOpen })} />
5452
</h3>
5553
<Collapse in={generalOpen}>
56-
<ConfigureGeneral config={editedConfig as NodeConfig} setConfig={setEditedConfig} />
54+
<ConfigureGeneral config={editedConfig} setConfig={setEditedConfig} />
5755
</Collapse>
5856
</Card>
5957

@@ -67,7 +65,7 @@ const ConfigModal = ({
6765
<ExpandMoreIcon className={classNames(styles.icon, { [styles.iconOpen]: resourcesOpen })} />
6866
</h3>
6967
<Collapse in={resourcesOpen}>
70-
<ConfigureResources config={editedConfig as NodeConfig} setConfig={setEditedConfig} />
68+
<ConfigureResources config={editedConfig} setConfig={setEditedConfig} />
7169
</Collapse>
7270
</Card>
7371

@@ -77,7 +75,7 @@ const ConfigModal = ({
7775
<ExpandMoreIcon className={classNames(styles.icon, { [styles.iconOpen]: indexerOpen })} />
7876
</h3>
7977
<Collapse in={indexerOpen}>
80-
<ConfigureIndexer config={editedConfig as NodeConfig} setConfig={setEditedConfig} />
78+
<ConfigureIndexer config={editedConfig} setConfig={setEditedConfig} />
8179
</Collapse>
8280
</Card>
8381

‎src/components/node-details/node-info.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Eligibility from '@/components/node-details/eligibility';
55
import { useP2P } from '@/contexts/P2PContext';
66
import { useOceanAccount } from '@/lib/use-ocean-account';
77
import { ComputeEnvironment } from '@/types/environments';
8+
import { NodeConfig } from '@/types/node-config';
89
import { Node } from '@/types/nodes';
910
import { useAuthModal } from '@account-kit/react';
1011
import CancelIcon from '@mui/icons-material/Cancel';
@@ -32,14 +33,14 @@ const NodeInfo: React.FC<NodeInfoProps> = ({ envs, node, nodeOnline }) => {
3233
const { closeAuthModal, isOpen: isAuthModalOpen, openAuthModal } = useAuthModal();
3334

3435
const { account, ocean, signMessage, user } = useOceanAccount();
35-
const { config, fetchConfig, getNodeLogs, pushConfig } = useP2P();
36+
const { fetchConfig, getNodeLogs, pushConfig } = useP2P();
3637

3738
const [fetchingConfig, setFetchingConfig] = useState<boolean>(false);
3839
const [pushingConfig, setPushingConfig] = useState<boolean>(false);
3940
const [isEditConfigDialogOpen, setIsEditConfigDialogOpen] = useState<boolean>(false);
4041
const [isDownloadLogsDialogOpen, setIsDownloadLogsDialogOpen] = useState<boolean>(false);
4142
const [downloadingLogs, setDownloadingLogs] = useState<boolean>(false);
42-
const [editedConfig, setEditedConfig] = useState<Record<string, any>>({});
43+
const [editedConfig, setEditedConfig] = useState<NodeConfig>({});
4344

4445
// TODO: replace this
4546
// This is temporary, used for local testing because `node` from props was
@@ -78,12 +79,6 @@ const NodeInfo: React.FC<NodeInfoProps> = ({ envs, node, nodeOnline }) => {
7879
}
7980
}, [account.isConnected, closeAuthModal, isAuthModalOpen]);
8081

81-
useEffect(() => {
82-
if (config) {
83-
setEditedConfig(config);
84-
}
85-
}, [config]);
86-
8782
async function handleFetchConfig() {
8883
if (!account.isConnected) {
8984
openAuthModal();
@@ -94,20 +89,21 @@ const NodeInfo: React.FC<NodeInfoProps> = ({ envs, node, nodeOnline }) => {
9489
}
9590
setFetchingConfig(true);
9691
try {
97-
await fetchConfig({
92+
const fetchedConfig = await fetchConfig({
9893
consumerAddress: account.address,
9994
expiryTimestamp: Date.now() + 5 * 60 * 1000, // 5 minutes expiry
10095
nodeUri: node.id,
10196
signMessage,
10297
});
98+
setEditedConfig(fetchedConfig as NodeConfig);
10399
} catch (error) {
104100
console.error('Error fetching node config :', error);
105101
} finally {
106102
setFetchingConfig(false);
107103
}
108104
}
109105

110-
async function handlePushConfig(config: Record<string, any>) {
106+
async function handlePushConfig(config: NodeConfig) {
111107
let success = false;
112108
if (!account.isConnected) {
113109
openAuthModal();
@@ -140,10 +136,10 @@ const NodeInfo: React.FC<NodeInfoProps> = ({ envs, node, nodeOnline }) => {
140136
}
141137

142138
function handleOpenEditConfigModal() {
143-
if (!config || Object.keys(config).length === 0) {
144-
handleFetchConfig();
145-
}
146-
139+
// Always refetch so the modal shows the current node's config, not a
140+
// config left over from a previously opened node.
141+
setEditedConfig({});
142+
handleFetchConfig();
147143
setIsEditConfigDialogOpen(true);
148144
}
149145

@@ -256,7 +252,6 @@ const NodeInfo: React.FC<NodeInfoProps> = ({ envs, node, nodeOnline }) => {
256252
isOpen={isEditConfigDialogOpen}
257253
fetchingConfig={fetchingConfig}
258254
pushingConfig={pushingConfig}
259-
config={config}
260255
editedConfig={editedConfig}
261256
setEditedConfig={setEditedConfig}
262257
handlePushConfig={handlePushConfig}

‎src/components/run-node/node-preview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ const NodePreview = ({ nodeConfig }: NodePreviewProps) => {
1717
return (
1818
<Card direction="column" padding="sm" radius="md" spacing="md" variant="glass">
1919
<h3>Preview configuration</h3>
20-
{nodeConfig.dockerComputeEnvironments?.length > 0 ? (
21-
nodeConfig.dockerComputeEnvironments?.map((env: ComputeEnvironment, index: number) => (
20+
{nodeConfig.dockerComputeEnvironments?.[0]?.environments?.length > 0 ? (
21+
nodeConfig.dockerComputeEnvironments[0].environments.map((env: ComputeEnvironment, index: number) => (
2222
<NodeEnvPreview
2323
key={index}
2424
environment={env}
2525
index={index}
26-
showEnvName={nodeConfig.dockerComputeEnvironments?.length > 1}
26+
showEnvName={nodeConfig.dockerComputeEnvironments[0].environments.length > 1}
2727
/>
2828
))
2929
) : (

‎src/types/node-config.ts‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,49 @@ export type NodeConfig = Partial<{
99
enabled: boolean;
1010
};
1111
dockerComputeEnvironments: {
12-
access: {
13-
accessLists: { [chainId: string]: string[] }[];
14-
addresses: string[];
15-
};
16-
description?: string;
17-
enableNetwork?: boolean;
18-
fees: {
19-
[chainId: string]: {
20-
feeToken: string;
21-
prices: {
22-
id: string;
23-
price: number;
24-
}[];
25-
}[];
26-
};
27-
maxJobDuration?: number;
28-
minJobDuration?: number;
29-
storageExpiry?: number;
30-
resources: {
31-
description?: string;
32-
id: ComputeResourceId;
33-
max?: number;
34-
min?: number;
35-
total: number;
36-
type?: ComputeResourceType;
37-
}[];
38-
free?: {
12+
environments: {
3913
access: {
4014
accessLists: { [chainId: string]: string[] }[];
4115
addresses: string[];
4216
};
43-
allowImageBuild?: boolean;
17+
description?: string;
18+
enableNetwork?: boolean;
19+
fees: {
20+
[chainId: string]: {
21+
feeToken: string;
22+
prices: {
23+
id: string;
24+
price: number;
25+
}[];
26+
}[];
27+
};
4428
maxJobDuration?: number;
45-
maxJobs?: number;
4629
minJobDuration?: number;
47-
resources?: {
48-
id: string;
49-
max: number;
50-
}[];
5130
storageExpiry?: number;
52-
};
31+
resources: {
32+
description?: string;
33+
id: ComputeResourceId;
34+
max?: number;
35+
min?: number;
36+
total: number;
37+
type?: ComputeResourceType;
38+
}[];
39+
free?: {
40+
access: {
41+
accessLists: { [chainId: string]: string[] }[];
42+
addresses: string[];
43+
};
44+
allowImageBuild?: boolean;
45+
maxJobDuration?: number;
46+
maxJobs?: number;
47+
minJobDuration?: number;
48+
resources?: {
49+
id: string;
50+
max: number;
51+
}[];
52+
storageExpiry?: number;
53+
};
54+
}[]
5355
}[];
5456
hasHttp: boolean;
5557
hasIndexer: boolean;

0 commit comments

Comments
 (0)