Components View first iteration (#2012)

* Components View first iteration

This PR fixes #2008.

This fix adds:
1. Components View (View)  under Application Explorer
2. View shows components discovered in workspace root folders
3. Detection for devfile components based on odo env view, which works
   when cluster is not accessible or user is logged off from cluster
4. Detection for s2i components based on parsing .odo/config.yaml
   (forkaround for odo env view not working for s2i components)
5. Refresh for View based after event about new folder added to
   workspace
6. Refrehs for View after component created form existing workspace
   folder (to avoid using watch for every folder in workspace)
7. Reveal in Explorer for components to activate Explorer view and
   select context folder (not always working correctly first time, have
   no idea why)
8. Support to create component when there is no accessible cluster or
   user is logged off (there should be quick input requests for project
   and application names, there should be qiuickpiks provided that allow
   to select existing and not existing projects/applications)

Not implemented yet:
1. Show folders/files under component node (requires some work to
   incorporate filesystem watching with exlusion for folders like
   'node_modules'
2. Watching for filesystem changes or focus ganed event to detect
   changes done in vscode terminal or external terminal
3. Showing hierarchy Project/Application/Component rather than flat list
4. Support pushing components to cluster from the view, especially for
   components with project that does not exist or currently not active
5. Showing state Pushed/Not pushed for components pushed to current
   cluster/namespace (or current context)
6. No icons yet
7. No view Welcome page with 'Create Component' button


Signed-off-by: Denis Golovin dgolovin@redhat.com

Author: dgolovin

package.json

@@ -791,6 +791,20 @@
         "command": "openshift.component.test.palette",
         "title": "Test Component",
         "category": "OpenShift"
+      },
+      {
+        "command": "openshift.component.revealInExplorer",
+        "title": "Reveal in Explorer",
+        "category": "OpenShift"
+      },
+      {
+        "command": "openshift.componentsView.refresh",
+        "title": "Refresh Components View",
+        "category": "OpenShift",
+        "icon": {
+          "dark": "images/title/dark/icon-refresh.svg",
+          "light": "images/title/light/icon-refresh.svg"
+        }
       }
 
     ],
@@ -826,6 +840,10 @@
           "id": "openshiftProjectExplorer",
           "name": "Application Explorer"
         },
+        {
+          "id": "openshiftComponentsView",
+          "name": "Components"
+        },
         {
           "id": "openshiftComponentTypesView",
           "name": "Component Types"
@@ -997,6 +1015,14 @@
         {
           "command": "openshift.explorer.addCluster.openCrcAddClusterPage",
           "when": "false"
+        },
+        {
+          "command": "openshift.component.revealInExplorer",
+          "when": "false"
+        },
+        {
+          "command": "openshift.componentType.newComponent",
+          "when": "false"
         }
       ],
       "view/title": [
@@ -1005,6 +1031,11 @@
           "when": "view == openshiftComponentTypesView",
           "group": "navigation"
         },
+        {
+          "command": "openshift.componentsView.refresh",
+          "when": "view == openshiftComponentsView",
+          "group": "navigation"
+        },
         {
           "command": "openshift.explorer.addCluster",
           "when": "view == openshiftProjectExplorer && isVSCode == 1",
@@ -1365,6 +1396,10 @@
           "command": "openshift.componentType.newComponent",
           "when": "view == openshiftComponentTypesView && viewItem == s2iImageStreamTag || viewItem == devfileStarterProject || viewItem == devfileComponentType",
           "group": "0@0"
+        },
+        {
+          "command": "openshift.component.revealInExplorer",
+          "when": "view == openshiftComponentsView && viewItem == openshift.component"
         }
       ]
     },
@@ -1424,4 +1459,4 @@
     }
   },
   "extensionDependencies": []
-}
+}

src/base/baseTreeDataProvider.ts

@@ -0,0 +1,29 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+import * as vsc from 'vscode';
+
+export abstract class BaseTreeDataProvider<T> implements vsc.TreeDataProvider<T> {
+
+    protected treeView: vsc.TreeView<T>;
+
+    protected onDidChangeTreeDataEmitter: vsc.EventEmitter<T> =
+        new vsc.EventEmitter<T | undefined>();
+
+    readonly onDidChangeTreeData: vsc.Event<T | undefined> = this
+        .onDidChangeTreeDataEmitter.event;
+
+    public createTreeView(id: string): vsc.TreeView<T> {
+        if (!this.treeView) {
+            this.treeView = vsc.window.createTreeView(id, {
+                treeDataProvider: this,
+            });
+        }
+        return this.treeView;
+    }
+
+    abstract getTreeItem(element: T): vsc.TreeItem | Thenable<vsc.TreeItem>;
+    abstract getChildren(element?: T): vsc.ProviderResult<T[]>;
+}

src/component.ts src/componentTypesView.tssrc/component.ts renamed to src/componentTypesView.ts

@@ -0,0 +1,166 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+import { pathExistsSync, readFileSync } from 'fs-extra';
+import * as path from 'path';
+import * as vsc from 'vscode';
+import * as jsYaml from 'js-yaml';
+import { BaseTreeDataProvider } from './base/baseTreeDataProvider';
+import { CliExitData } from './cli';
+import { getInstance } from './odo';
+import { Command } from './odo/command';
+import { EnvInfo } from './odo/env';
+import { vsCommand } from './vscommand';
+
+
+export interface WorkspaceEntry {
+    uri: vsc.Uri;
+    type: vsc.FileType;
+}
+
+function isWorkspaceEntry(entry: any): entry is WorkspaceEntry {
+    return entry.uri && entry.type;
+}
+
+class Labeled {
+    constructor(public label: string) {}
+}
+
+class Project extends Labeled {
+}
+
+class Application extends Labeled {
+}
+
+type Entry = Project | Application | WorkspaceEntry | WorkspaceFolderComponent;
+
+export interface WorkspaceFolderComponent {
+    project: string;
+    application: string;
+    contextUri: vsc.Uri;
+    label: string;
+    description?: string;
+    tooltip?: string;
+}
+
+function isWorkspaceFolderComponent(entry: any): entry is WorkspaceFolderComponent {
+    return entry.contextUri;
+}
+
+async function getComponentsInWorkspace(): Promise<WorkspaceFolderComponent[]> {
+    const execs: Promise<CliExitData>[] = [];
+    vsc.workspace.workspaceFolders.forEach((folder)=> {
+        try {
+            execs.push(getInstance().execute(Command.viewEnv(), folder.uri.fsPath, false));
+        } catch (ignore) {
+            // ignore execution errors
+        }
+    });
+    const results = await Promise.all(execs);
+    return results.map((result) => {
+        try {
+            let compData: EnvInfo;
+            if (result.error) {
+                // detect S2I component manually
+                const pathToS2iConfig = path.join(result.cwd, '.odo', 'config.yaml');
+                if (pathExistsSync(pathToS2iConfig)) {
+                    // reconstruct env view form yaml file data
+                    const s2iConf = jsYaml.load(readFileSync(pathToS2iConfig, 'utf8'));
+                    compData = {
+                        spec: {
+                            appName: s2iConf.ComponentSettings.Application,
+                            project: s2iConf.ComponentSettings.Project,
+                            name: s2iConf.ComponentSettings.Name,
+                        }
+                    }
+                }
+            } else {
+                compData = JSON.parse(result.stdout) as EnvInfo;
+            }
+            const contextUri = vsc.Uri.parse(result.cwd);
+            const project = compData.spec.project ? compData.spec.project : 'N/A';
+            const application = compData.spec.appName ? compData.spec.appName : 'N/A';
+            const tooltip = ['Component',
+                `Name: ${compData.spec.name}`,
+                `Project: ${project}`,
+                `Application: ${application}`,
+                `Context: ${contextUri.fsPath}`,
+                ].join('\n');
+            const description = `${project}/${application}`;
+            return {
+                project,
+                application,
+                label: compData.spec.name,
+                contextUri,
+                description,
+                tooltip,
+                contextValue: 'openshift.component'
+            }
+        } catch (err) {
+            // ignore unexpected parsing errors
+        }
+    });
+}
+
+export class ComponentsTreeDataProvider extends BaseTreeDataProvider<Entry> {
+
+    static dataProviderInstance: ComponentsTreeDataProvider;
+
+    private constructor() {
+        super();
+        vsc.workspace.onDidChangeWorkspaceFolders(() => {
+            this.refresh();
+        });
+    }
+
+    private refresh(): void {
+        this.onDidChangeTreeDataEmitter.fire();
+    }
+
+    @vsCommand('openshift.componentsView.refresh')
+    public static refresh(): void {
+        ComponentsTreeDataProvider.instance.refresh();
+    }
+
+    @vsCommand('openshift.component.revealInExplorer')
+    public static async revealInExplorer(context: Entry): Promise<void> {
+        if (isWorkspaceFolderComponent(context)) {
+            await vsc.commands.executeCommand('workbench.view.explorer', );
+            await vsc.commands.executeCommand('revealInExplorer', context.contextUri);
+        }
+    }
+    createTreeView(id: string): vsc.TreeView<Entry> {
+        if (!this.treeView) {
+            this.treeView = vsc.window.createTreeView(id, {
+                treeDataProvider: this,
+            });
+        }
+        return this.treeView;
+    }
+
+    static get instance(): ComponentsTreeDataProvider {
+        if (!ComponentsTreeDataProvider.dataProviderInstance) {
+            ComponentsTreeDataProvider.dataProviderInstance = new ComponentsTreeDataProvider();
+        }
+        return ComponentsTreeDataProvider.dataProviderInstance;
+    }
+
+    getTreeItem(element: Entry): vsc.TreeItem {
+        if (isWorkspaceFolderComponent(element)) {
+            return element;
+        }
+    }
+
+    getChildren(element?: Entry): vsc.ProviderResult<Entry[]> {
+        if (element) {
+            if (isWorkspaceFolderComponent(element)) {
+                return [];
+            } else if (isWorkspaceEntry(element)) {
+                return []
+            }
+        }
+        return getComponentsInWorkspace();
+    }
+}

src/componentsView.ts

@@ -26,9 +26,10 @@ import { ToolsConfig } from './tools';
 import { extendClusterExplorer } from './k8s/clusterExplorer';
 import { WatchSessionsView } from './watch';
 import { DebugSessionsView } from './debug';
-import { ComponentTypesView } from './component';
+import { ComponentTypesView } from './componentTypesView';
 
 import fsx = require('fs-extra');
+import { ComponentsTreeDataProvider } from './componentsView';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 // this method is called when your extension is deactivated
@@ -72,7 +73,8 @@ export async function activate(extensionContext: ExtensionContext): Promise<any>
             './openshift/service',
             './k8s/console',
             './oc',
-            './component',
+            './componentTypesView',
+            './componentsView'
         )),
         commands.registerCommand('clusters.openshift.useProject', (context) =>
             commands.executeCommand('extension.vsKubernetesUseNamespace', context),
@@ -83,6 +85,7 @@ export async function activate(extensionContext: ExtensionContext): Promise<any>
         new DebugSessionsView().createTreeView('openshiftDebugView'),
         ...Component.init(extensionContext),
         ComponentTypesView.instance.createTreeView('openshiftComponentTypesView'),
+        ComponentsTreeDataProvider.instance.createTreeView('openshiftComponentsView'),
     ];
     disposable.forEach((value) => extensionContext.subscriptions.push(value));
 

src/extension.ts

@@ -6,12 +6,13 @@
 import { window } from 'vscode';
 import { CliChannel } from './cli';
 import { ToolsConfig } from './tools';
-import OpenShiftItem from './openshift/openshiftItem';
+import OpenShiftItem, { clusterRequired } from './openshift/openshiftItem';
 import { vsCommand } from './vscommand';
 
 export class Oc {
 
     @vsCommand('openshift.create')
+    @clusterRequired()
     public static async create(): Promise<string | null> {
         const document = window.activeTextEditor ? window.activeTextEditor.document : undefined;
         const pleaseSave = 'Please save your changes before executing \'OpenShift: Create\' command.';

src/oc.ts

@@ -863,12 +863,15 @@ export class OdoImpl implements Odo {
 
     public async createComponentFromFolder(application: OpenShiftObject, type: string, version: string, name: string, location: Uri, starter: string = undefined, useExistingDevfile = false): Promise<OpenShiftObject> {
         await this.execute(Command.createLocalComponent(application.getParent().getName(), application.getName(), type, version, name, location.fsPath, starter, useExistingDevfile), location.fsPath);
-        if (workspace.workspaceFolders) {
+        if (workspace.workspaceFolders && application.getParent().getParent()) { // if there are workspace folders and cluster is acvessible
             const targetApplication = (await this.getApplications(application.getParent())).find((value) => value === application);
             if (!targetApplication) {
                 await this.insertAndReveal(application);
             }
             await this.insertAndReveal(new OpenShiftComponent(application, name, ContextType.COMPONENT, location, 'local', version ? ComponentKind.S2I : ComponentKind.DEVFILE, {name: type? type : name , tag: version}));
+        } else {
+            OdoImpl.data.delete(application);
+            OdoImpl.data.delete(application.getParent());
         }
         let wsFolder: WorkspaceFolder;
         if (workspace.workspaceFolders) {

src/odo.ts

@@ -25,6 +25,11 @@ function verbose(_target: any, key: string, descriptor: any): void {
 }
 
 export class Command {
+
+    static viewEnv(): string {
+        return 'odo env view -o json';
+    }
+
     static printCatalogComponentImageStreamRefJson(name: string, namespace: string): string {
         return `oc get imagestream ${name} -n ${namespace} -o json`;
     }

src/odo/command.ts

@@ -0,0 +1,17 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+export interface EnvInfo {
+	kind?: 'EnvInfo';
+	apiVersion?: 'odo.dev/v1alpha1';
+	metadata?: {
+		creationTimestamp: string;
+	},
+	spec: {
+	    name: string;
+		project: string;
+		appName: string;
+	}
+}

src/odo/env.ts

@@ -4,7 +4,7 @@
  *-----------------------------------------------------------------------------------------------*/
 
 import { window } from 'vscode';
-import OpenShiftItem from './openshiftItem';
+import OpenShiftItem, { clusterRequired } from './openshiftItem';
 import { OpenShiftObject } from '../odo';
 import { Command } from '../odo/command';
 import { Progress } from '../util/progress';
@@ -13,13 +13,15 @@ import { vsCommand, VsCommandError } from '../vscommand';
 export class Application extends OpenShiftItem {
 
     @vsCommand('openshift.app.describe', true)
+    @clusterRequired()
     static async describe(treeItem: OpenShiftObject): Promise<void> {
         const application = await Application.getOpenShiftCmdData(treeItem,
             'Select Application you want to describe');
         if (application) Application.odo.executeInTerminal(Command.describeApplication(application.getParent().getName(), application.getName()), undefined, `OpenShift: Describe '${application.getName()}' Application`);
     }
 
     @vsCommand('openshift.app.delete', true)
+    @clusterRequired()
     static async del(treeItem: OpenShiftObject): Promise<string> {
         const application = await Application.getOpenShiftCmdData(treeItem,
             'Select Application to delete');