Skip to content

Commit 86ae209

Browse files
dgageotdgageot
authored
Merge pull request #240 from docker/improve-config-loading
Remove redundant calls when loading registry and config
2 parents d0fbc67 + e3954b9 commit 86ae209

4 files changed

Lines changed: 175 additions & 163 deletions

File tree

‎src/extension/ui/src/Constants.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@ export const ASSIGNED_SECRET_PLACEHOLDER = "********";
2424
export const BUSYBOX = 'busybox@sha256:37f7b378a29ceb4c551b1b5582e27747b855bbfaa73fa11914fe0df028dc581f';
2525

2626
// Filenames in docker-prompts volume
27-
export const REGISTRY_YAML = 'registry.yaml'
27+
export const REGISTRY_YAML = 'registry.yaml'
28+
export const CONFIG_YAML = 'config.yaml'

‎src/extension/ui/src/Registry.ts‎

Lines changed: 16 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,40 @@
1-
import { v1 } from "@docker/extension-api-client-types";
2-
import { parse, stringify } from "yaml";
3-
import { REGISTRY_YAML } from "./Constants";
4-
import { readFileInPromptsVolume, writeToPromptsVolume } from "./utils/Files";
5-
import { mergeDeep } from "./MergeDeep";
6-
import { ParsedParameters } from "./types/config";
1+
import { v1 } from '@docker/extension-api-client-types';
2+
import { parse, stringify } from 'yaml';
3+
4+
import { CONFIG_YAML, REGISTRY_YAML } from './Constants';
5+
import { ParsedParameters } from './types/config';
6+
import { readFileInPromptsVolume, writeToPromptsVolume } from './utils/Files';
77

88
export const getRegistry = async (client: v1.DockerDesktopClient) => {
9-
const parseRegistry = async () => {
9+
try {
1010
const registry = await readFileInPromptsVolume(client, REGISTRY_YAML);
1111
if (registry) {
12-
const value = parse(registry)["registry"] as {
12+
return parse(registry)['registry'] as {
1313
[key: string]: { ref: string; config: any };
1414
};
15-
if (!value) {
16-
client.desktopUI.toast.error(
17-
"Failed to parse registry.yaml: " + registry
18-
);
19-
}
20-
return value;
2115
}
16+
17+
await writeToPromptsVolume(client, REGISTRY_YAML, 'registry: {}');
2218
return {};
23-
};
24-
const writeRegistryIfNotExists = async () => {
25-
const registry = await readFileInPromptsVolume(client, REGISTRY_YAML);
26-
if (!registry) {
27-
await writeToPromptsVolume(client, REGISTRY_YAML, "registry: {}");
28-
}
29-
};
30-
try {
31-
await writeRegistryIfNotExists();
32-
return await parseRegistry();
3319
} catch (error) {
34-
client.desktopUI.toast.error("Failed to get prompt registry: " + error);
20+
client.desktopUI.toast.error('Failed to get registry: ' + error);
3521
return {};
3622
}
3723
};
3824

3925
export const getStoredConfig = async (client: v1.DockerDesktopClient) => {
40-
const parseConfig = async () => {
41-
const config = await readFileInPromptsVolume(client, "config.yaml");
26+
try {
27+
const config = await readFileInPromptsVolume(client, CONFIG_YAML);
4228
if (config) {
4329
return parse(config) as Promise<{
4430
[key: string]: { [key: string]: ParsedParameters };
4531
}>;
4632
}
33+
34+
await writeToPromptsVolume(client, CONFIG_YAML, '{}');
4735
return {};
48-
};
49-
const writeConfigIfNotExists = async () => {
50-
const config = await readFileInPromptsVolume(client, "config.yaml");
51-
if (!config) {
52-
await writeToPromptsVolume(client, "config.yaml", "{}");
53-
}
54-
};
55-
try {
56-
await writeConfigIfNotExists();
57-
return await parseConfig();
5836
} catch (error) {
59-
client.desktopUI.toast.error("Failed to get stored configs: " + error);
37+
client.desktopUI.toast.error('Failed to get stored configs: ' + error);
6038
return {};
6139
}
6240
};

‎src/extension/ui/src/components/LoadingState.tsx‎

Lines changed: 137 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,151 @@
1-
import { createDockerDesktopClient } from '@docker/extension-api-client';
2-
import { Box, CircularProgress, Fade, LinearProgress, Paper, Stack, Typography } from "@mui/material";
3-
import { useEffect, useState } from "react";
4-
5-
// Initialize the Docker Desktop client
6-
const client = createDockerDesktopClient();
1+
import {
2+
Box,
3+
CircularProgress,
4+
Fade,
5+
LinearProgress,
6+
Paper,
7+
Stack,
8+
Typography,
9+
} from '@mui/material';
10+
import { useEffect, useState } from 'react';
711

812
interface LoadingStateProps {
9-
appProps: any; // We'll use this to pass all our hook data
13+
appProps: any; // We'll use this to pass all our hook data
1014
}
1115

1216
const LoadingState: React.FC<LoadingStateProps> = ({ appProps }) => {
13-
const { imagesLoading, configLoading, secretsLoading, catalogLoading, registryLoading } = appProps;
14-
const [progress, setProgress] = useState(0);
15-
const isLoading = imagesLoading || configLoading || secretsLoading || catalogLoading || registryLoading;
16-
17-
useEffect(() => {
18-
const progress = [
19-
imagesLoading ? 0 : 100,
20-
configLoading ? 0 : 100,
21-
secretsLoading ? 0 : 100,
22-
catalogLoading ? 0 : 100,
23-
registryLoading ? 0 : 100,
24-
]
17+
const {
18+
imagesLoading,
19+
configLoading,
20+
secretsLoading,
21+
catalogLoading,
22+
registryLoading,
23+
} = appProps;
24+
const [progress, setProgress] = useState(0);
25+
const isLoading =
26+
imagesLoading ||
27+
configLoading ||
28+
secretsLoading ||
29+
catalogLoading ||
30+
registryLoading;
2531

26-
const progressPercent = Math.round(progress.reduce((a, b) => a + b) / progress.length);
32+
useEffect(() => {
33+
const progress = [
34+
imagesLoading ? 0 : 100,
35+
configLoading ? 0 : 100,
36+
secretsLoading ? 0 : 100,
37+
catalogLoading ? 0 : 100,
38+
registryLoading ? 0 : 100,
39+
];
2740

28-
setProgress(progressPercent);
29-
}, [imagesLoading, configLoading, secretsLoading, catalogLoading, registryLoading]);
41+
const progressPercent = Math.round(
42+
progress.reduce((a, b) => a + b) / progress.length
43+
);
3044

31-
if (!isLoading) return null;
45+
setProgress(progressPercent);
46+
}, [
47+
imagesLoading,
48+
configLoading,
49+
secretsLoading,
50+
catalogLoading,
51+
registryLoading,
52+
]);
3253

33-
const getLoadingText = () => {
34-
if (imagesLoading) return 'Loading required Docker images';
35-
if (configLoading) return 'Loading configuration';
36-
if (secretsLoading) return 'Loading secrets';
37-
if (catalogLoading) return 'Loading catalog';
38-
if (registryLoading) return 'Loading registry';
39-
return 'Loading...';
40-
}
54+
if (!isLoading) return null;
4155

42-
return (
43-
<Fade in={isLoading}>
44-
<Box sx={{
45-
position: 'fixed',
46-
top: 0,
47-
left: 0,
48-
right: 0,
49-
bottom: 0,
50-
backgroundColor: 'rgba(0, 0, 0, 0.6)',
51-
display: 'flex',
52-
alignItems: 'center',
53-
justifyContent: 'center',
54-
zIndex: 1200,
55-
}}>
56-
<Paper
57-
elevation={4}
58-
sx={{
59-
maxWidth: '500px',
60-
width: '90%',
61-
p: 3,
62-
borderRadius: 2,
63-
backgroundColor: 'background.paper',
64-
overflow: 'hidden',
65-
}}
66-
>
67-
<Stack spacing={2} alignItems="center" width="100%">
68-
<Typography variant="h6" fontWeight="medium" textAlign="center">
69-
{getLoadingText()}
70-
</Typography>
56+
const getLoadingText = () => {
57+
if (imagesLoading) return 'Loading required Docker images';
58+
if (configLoading) return 'Loading configuration';
59+
if (secretsLoading) return 'Loading secrets';
60+
if (catalogLoading) return 'Loading catalog';
61+
if (registryLoading) return 'Loading registry';
62+
return 'Loading...';
63+
};
7164

72-
<Box position="relative" display="flex" alignItems="center" justifyContent="center" my={1}>
73-
<CircularProgress
74-
variant="determinate"
75-
value={100}
76-
size={80}
77-
thickness={4}
78-
sx={{ color: 'rgba(0, 0, 0, 0.1)' }}
79-
/>
80-
<CircularProgress
81-
variant="determinate"
82-
value={progress}
83-
size={80}
84-
thickness={4}
85-
sx={{
86-
color: 'primary.main',
87-
position: 'absolute',
88-
left: 0,
89-
}}
90-
/>
91-
<Typography
92-
variant="h6"
93-
component="div"
94-
sx={{ position: 'absolute' }}
95-
>
96-
{progress}%
97-
</Typography>
98-
</Box>
65+
return (
66+
<Fade in={isLoading}>
67+
<Box
68+
sx={{
69+
position: 'fixed',
70+
top: 0,
71+
left: 0,
72+
right: 0,
73+
bottom: 0,
74+
backgroundColor: 'rgba(0, 0, 0, 0.6)',
75+
display: 'flex',
76+
alignItems: 'center',
77+
justifyContent: 'center',
78+
zIndex: 1200,
79+
}}
80+
>
81+
<Paper
82+
elevation={4}
83+
sx={{
84+
maxWidth: '500px',
85+
width: '90%',
86+
p: 3,
87+
borderRadius: 2,
88+
backgroundColor: 'background.paper',
89+
overflow: 'hidden',
90+
}}
91+
>
92+
<Stack spacing={2} alignItems="center" width="100%">
93+
<Typography variant="h6" fontWeight="medium" textAlign="center">
94+
{getLoadingText()}
95+
</Typography>
9996

100-
<LinearProgress
101-
sx={{
102-
width: '100%',
103-
height: 8,
104-
borderRadius: 4,
105-
'& .MuiLinearProgress-bar': {
106-
borderRadius: 4,
107-
transition: 'transform 0.4s ease'
108-
}
109-
}}
110-
variant="determinate"
111-
value={progress}
112-
/>
113-
</Stack>
114-
</Paper>
97+
<Box
98+
position="relative"
99+
display="flex"
100+
alignItems="center"
101+
justifyContent="center"
102+
my={1}
103+
>
104+
<CircularProgress
105+
variant="determinate"
106+
value={100}
107+
size={80}
108+
thickness={4}
109+
sx={{ color: 'rgba(0, 0, 0, 0.1)' }}
110+
/>
111+
<CircularProgress
112+
variant="determinate"
113+
value={progress}
114+
size={80}
115+
thickness={4}
116+
sx={{
117+
color: 'primary.main',
118+
position: 'absolute',
119+
left: 0,
120+
}}
121+
/>
122+
<Typography
123+
variant="h6"
124+
component="div"
125+
sx={{ position: 'absolute' }}
126+
>
127+
{progress}%
128+
</Typography>
115129
</Box>
116-
</Fade>
117-
);
118-
}
119130

120-
export default LoadingState;
131+
<LinearProgress
132+
sx={{
133+
width: '100%',
134+
height: 8,
135+
borderRadius: 4,
136+
'& .MuiLinearProgress-bar': {
137+
borderRadius: 4,
138+
transition: 'transform 0.4s ease',
139+
},
140+
}}
141+
variant="determinate"
142+
value={progress}
143+
/>
144+
</Stack>
145+
</Paper>
146+
</Box>
147+
</Fade>
148+
);
149+
};
150+
151+
export default LoadingState;

0 commit comments

Comments
 (0)