Skip to content

Commit c07f159

Browse files
added percentage of completion on progress bar (#3371)
* added percentage of completion on progress bar Signed-off-by: msivasubramaniaan <msivasub@redhat.com> * added percentage of completion on progress bar Signed-off-by: msivasubramaniaan <msivasub@redhat.com> * removed unused code Signed-off-by: msivasubramaniaan <msivasub@redhat.com> * added determinate variant Signed-off-by: msivasubramaniaan <msivasub@redhat.com> --------- Signed-off-by: msivasubramaniaan <msivasub@redhat.com>
1 parent 27e73fe commit c07f159

File tree

2 files changed

+55
-3
lines changed

2 files changed

+55
-3
lines changed

src/webview/create-component/createComponentLoader.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,9 @@ export default class CreateComponentLoader {
268268
*/
269269
case 'getRecommendedDevfileFromGit': {
270270
tmpFolder = Uri.parse(await promisify(tmp.dir)());
271+
void CreateComponentLoader.panel.webview.postMessage({
272+
action: 'cloneStart',
273+
});
271274
const cloneProcess: CloneProcess = await clone(
272275
message.data.url,
273276
tmpFolder.fsPath,
@@ -425,6 +428,9 @@ export default class CreateComponentLoader {
425428
let analyzeRes: AnalyzeResponse[] = [];
426429
let compDescriptions: ComponentTypeDescription[] = [];
427430
try {
431+
void CreateComponentLoader.panel.webview.postMessage({
432+
action: 'getRecommendedDevfileStart'
433+
});
428434
analyzeRes = await OdoImpl.Instance.analyze(uri.fsPath);
429435
compDescriptions = getCompDescription(analyzeRes);
430436
} catch (error) {
@@ -464,6 +470,9 @@ export default class CreateComponentLoader {
464470
}
465471
}
466472
} finally {
473+
void CreateComponentLoader.panel.webview.postMessage({
474+
action: 'getRecommendedDevfile'
475+
});
467476
const devfileRegistry: DevfileRegistry[] = getDevfileRegistries();
468477
const allDevfiles: Devfile[] = devfileRegistry.flatMap((registry) => registry.devfiles);
469478
const devfile: Devfile =
@@ -530,6 +539,9 @@ function clone(url: string, location: string, branch?: string): Promise<ClonePro
530539
const git = gitExtension.getAPI(1).git.path;
531540
let command = `${git} clone ${url} ${location}`;
532541
command = branch ? `${command} --branch ${branch}` : command;
542+
void CreateComponentLoader.panel.webview.postMessage({
543+
action: 'cloneExecution'
544+
});
533545
// run 'git clone url location' as external process and return location
534546
return new Promise((resolve, reject) =>
535547
cp.exec(command, (error: cp.ExecException) => {

src/webview/create-component/pages/fromExistingGitRepo.tsx

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ type RecommendedDevfileState = {
3232
devfile: Devfile;
3333
showRecommendation: boolean;
3434
isLoading: boolean;
35+
completionValue: number;
3536
isDevfileExistsInRepo: boolean;
3637
noRecommendation: boolean;
3738
};
@@ -58,6 +59,7 @@ export function FromExistingGitRepo({ setCurrentView }) {
5859
devfile: undefined,
5960
showRecommendation: false,
6061
isLoading: false,
62+
completionValue: 0,
6163
isDevfileExistsInRepo: false,
6264
noRecommendation: false,
6365
});
@@ -77,6 +79,10 @@ export function FromExistingGitRepo({ setCurrentView }) {
7779
showRecommendation: true,
7880
}));
7981
} else {
82+
setRecommendedDevfile((prevState) => ({
83+
...prevState,
84+
completionValue: 100,
85+
}));
8086
setRecommendedDevfile((prevState) => ({
8187
...prevState,
8288
devfile: message.data.devfile,
@@ -97,14 +103,28 @@ export function FromExistingGitRepo({ setCurrentView }) {
97103
case 'devfileExists': {
98104
setRecommendedDevfile((prevState) => ({
99105
...prevState,
100-
isDevfileExistsInRepo: message.data,
106+
completionValue: prevState.completionValue + 10
107+
}));
108+
setRecommendedDevfile((prevState) => ({
109+
...prevState,
110+
isDevfileExistsInRepo: message.data
101111
}));
102112
break;
103113
}
104114
case 'cloneFailed': {
105115
setCloneFailed(true);
106116
break;
107117
}
118+
case 'cloneStart':
119+
case 'cloneExecution':
120+
case 'getRecommendedDevfileStart': {
121+
setRecommendedDevfile((prevState) => ({ ...prevState, completionValue: prevState.completionValue + 10}));
122+
break;
123+
}
124+
case 'getRecommendedDevfile': {
125+
setRecommendedDevfile((prevState) => ({ ...prevState, completionValue: prevState.completionValue + 45}));
126+
break;
127+
}
108128
default:
109129
break;
110130
}
@@ -125,7 +145,7 @@ export function FromExistingGitRepo({ setCurrentView }) {
125145
branch: branchOption,
126146
},
127147
});
128-
setRecommendedDevfile((prevState) => ({ ...prevState, isLoading: true }));
148+
setRecommendedDevfile((prevState) => ({ ...prevState, isLoading: true, completionValue: 5 }));
129149
}
130150

131151
function createComponentFromGitRepo(
@@ -229,7 +249,27 @@ export function FromExistingGitRepo({ setCurrentView }) {
229249
spacing={2}
230250
alignItems="center"
231251
>
232-
<CircularProgress />
252+
<Box sx={{ position: 'relative', display: 'inline-flex' }}>
253+
<CircularProgress variant='determinate' value={recommendedDevfile.completionValue}/>
254+
<Box
255+
sx={{
256+
top: 0,
257+
left: 0,
258+
bottom: 0,
259+
right: 0,
260+
position: 'absolute',
261+
display: 'flex',
262+
alignItems: 'center',
263+
justifyContent: 'center',
264+
}}
265+
>
266+
<Typography
267+
variant='caption'
268+
component='div'
269+
color='text.secondary'
270+
>{`${Math.round(recommendedDevfile.completionValue)}%`}</Typography>
271+
</Box>
272+
</Box>
233273
<Typography variant="body2">
234274
Cloning git repository and scanning for
235275
recommended devfile.

0 commit comments

Comments
 (0)