Log the output of the git-clone command into the OpenShift Logs.

- Convert 'exec' call to use 'spawn'
- Improve progress reporting when cloning git repo for component
  creation

Signed-off-by: Roland Grunberg <[email protected]>

Author: rgrunber

src/util/childProcessUtil.ts

@@ -8,6 +8,12 @@ import * as vscode from 'vscode';
 import { Util as cp } from '../util/utils';
 import { Filters } from './filters';
 
+const channel = vscode.window.createOutputChannel('OpenShift');
+
+export function getOpenShiftLogChannel(): vscode.OutputChannel {
+    return channel;
+}
+
 export interface CliExitData {
     readonly error: ExecException;
     readonly stdout: string;
@@ -38,32 +44,29 @@ class OdoChannel {
 
     private static instance = new OdoChannel();
 
-    private channel: vscode.OutputChannel;
-
     public static get Instance() {
         return OdoChannel.instance;
     }
 
     public constructor() {
-        this.channel = vscode.window.createOutputChannel('OpenShift');
     }
 
     show(): void {
-        this.channel.show();
+        channel.show();
     }
 
     print(text: string): void {
         const textData = OdoChannel.prettifyJson(text);
-        this.channel.append(textData);
+        channel.append(textData);
         if (!textData.endsWith('\n')) {
-            this.channel.append('\n');
+            channel.append('\n');
         }
         if (
             vscode.workspace
                 .getConfiguration('openshiftToolkit')
                 .get<boolean>('showChannelOnOutput')
         ) {
-            this.channel.show();
+            channel.show();
         }
     }
 

src/webview/create-component/createComponentLoader.ts

@@ -37,6 +37,7 @@ import {
 } from '../common-ext/createComponentHelpers';
 import { loadWebviewHtml, validateGitURL } from '../common-ext/utils';
 import { Devfile, TemplateProjectIdentifier } from '../common/devfile';
+import { getOpenShiftLogChannel } from '../../util/childProcessUtil';
 
 interface CloneProcess {
     status: boolean;
@@ -680,21 +681,38 @@ async function isDevfileExists(uri: vscode.Uri): Promise<boolean> {
 function clone(url: string, location: string, branch?: string): Promise<CloneProcess> {
     const gitExtension = vscode.extensions.getExtension('vscode.git').exports;
     const git = gitExtension.getAPI(1).git.path;
-    let command = `${git} clone ${url} ${location}`;
+    let command = `${git} clone --progress ${url} ${location}`;
     command = branch ? `${command} --branch ${branch}` : command;
     void CreateComponentLoader.panel.webview.postMessage({
         action: 'cloneExecution'
     });
-    // run 'git clone url location' as external process and return location
-    return new Promise((resolve, reject) =>
-        cp.exec(command, (error: cp.ExecException) => {
-            if (error) {
-                resolve({ status: false, error: error.message });
-            } else {
-                resolve({ status: true, error: undefined });
-            }
-        })
-    );
+    const channel = getOpenShiftLogChannel();
+
+    return new Promise((resolve, reject) => {
+        const proc = cp.spawn(command, {shell: true});
+        channel.appendLine(command);
+
+        proc.stdout.on('data', (data) => {
+            channel.append(data.toString());
+        });
+        proc.stderr.on('data', (data) => {
+            channel.append(data.toString());
+
+            void CreateComponentLoader.panel.webview.postMessage({
+                action: 'cloneProgress',
+                data: {
+                    completionProgress: data.toString(),
+                }
+            });
+        });
+
+        proc.on('error', (error) => {
+            resolve({ status: false, error: error.message });
+        });
+        proc.on('close', (code) => {
+            resolve({ status: true, error: undefined });
+        });
+    });
 }
 
 async function validateFolderPath(path: string) {
@@ -715,4 +733,4 @@ async function validateFolderPath(path: string) {
             },
         });
     }
-}
+}

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

@@ -36,6 +36,7 @@ type RecommendedDevfileState = {
     completionValue: number;
     isDevfileExistsInRepo: boolean;
     noRecommendation: boolean;
+    completionProgress: string;
 };
 
 type GitURLState = {
@@ -63,6 +64,7 @@ export function FromExistingGitRepo({ setCurrentView }) {
         completionValue: 0,
         isDevfileExistsInRepo: false,
         noRecommendation: false,
+        completionProgress: undefined
     });
     const [selectedDevfile, setSelectedDevfile] = React.useState<DevfileData>(undefined);
     const [initialComponentParentFolder, setInitialComponentParentFolder] = React.useState<string>(undefined);
@@ -123,6 +125,10 @@ export function FromExistingGitRepo({ setCurrentView }) {
                 setRecommendedDevfile((prevState) => ({ ...prevState, completionValue: prevState.completionValue + 10}));
                 break;
             }
+            case 'cloneProgress': {
+                setRecommendedDevfile((prevState) => ({ ...prevState, completionProgress: message.data.completionProgress}));
+                break;
+            }
             case 'getRecommendedDevfile': {
                 setRecommendedDevfile((prevState) => ({ ...prevState, completionValue: prevState.completionValue + 45}));
                 break;
@@ -299,6 +305,11 @@ export function FromExistingGitRepo({ setCurrentView }) {
                                                     Cloning git repository and scanning for
                                                     recommended devfile.
                                                 </Typography>
+                                                {recommendedDevfile.completionProgress && (
+                                                    <Typography variant="body2">
+                                                        {recommendedDevfile.completionProgress}
+                                                    </Typography>
+                                                )}
                                             </Stack>
                                         )}
                                     </>