Show resources in DABS Resource Explorer (#1008)

kartikgupta-db · web-flow · commit f6dcb486981d · 2024-01-28T20:54:57.000Z
## Changes
&lt;!-- Summary of your changes that are easy to understand --&gt;

## Tests
&lt;!-- How is this tested? --&gt;
diff --git a/packages/databricks-vscode/.vscode/settings.json b/packages/databricks-vscode/.vscode/settings.json
@@ -12,5 +12,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[xml]": {
+        "editor.defaultFormatter": "redhat.vscode-xml"
     }
 }
diff --git a/packages/databricks-vscode/resources/dark/logo.svg b/packages/databricks-vscode/resources/dark/logo.svg
diff --git a/packages/databricks-vscode/resources/dark/resource-explorer/jobs.svg b/packages/databricks-vscode/resources/dark/resource-explorer/jobs.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" viewBox="0 0 16 16"
+    aria-hidden="true" focusable="false" class="">
+    <path fill="white" fill-rule="evenodd"
+        d="M3.75 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm2.646-.5a2.751 2.751 0 1 1 0-1.5h5.229a3.375 3.375 0 0 1 .118 6.748L8.436 11.11a.75.75 0 0 1-.872 0l-3.3-2.357a1.875 1.875 0 0 0 .111 3.747h5.229a2.751 2.751 0 1 1 0 1.5H4.375a3.375 3.375 0 0 1-.118-6.748L7.564 4.89a.75.75 0 0 1 .872 0l3.3 2.357a1.875 1.875 0 0 0-.111-3.747H6.396Zm7.104 9.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM8 6.422 5.79 8 8 9.578 10.21 8 8 6.422Z"
+        clip-rule="evenodd"></path>
+</svg>
diff --git a/packages/databricks-vscode/resources/dark/resource-explorer/pipelines.svg b/packages/databricks-vscode/resources/dark/resource-explorer/pipelines.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" viewBox="0 0 16 16"
+    aria-hidden="true" focusable="false" class="">
+    <path fill="white" fill-rule="evenodd"
+        d="M10.75 6.75A5.75 5.75 0 0 0 5 1H1.75a.75.75 0 0 0-.75.75V6c0 .414.336.75.75.75H5a.25.25 0 0 1 .25.25v2.25A5.75 5.75 0 0 0 11 15h3.25a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75H11a.25.25 0 0 1-.25-.25V6.75ZM5.5 2.53a4.25 4.25 0 0 1 3.75 4.22V9a1.75 1.75 0 0 0 1.25 1.678v2.793A4.25 4.25 0 0 1 6.75 9.25V7A1.75 1.75 0 0 0 5.5 5.322V2.53ZM4 2.5v2.75H2.5V2.5H4Zm9.5 8.25H12v2.75h1.5v-2.75Z"
+        clip-rule="evenodd"></path>
+</svg>
diff --git a/packages/databricks-vscode/resources/dark/resource-explorer/python.svg b/packages/databricks-vscode/resources/dark/resource-explorer/python.svg
@@ -0,0 +1,6 @@
+<!-- License: Logo. Made by vorillaz: https://github.com/vorillaz/devicons -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path fill="white"
+        d="M13.275 15.88h5.417c1.508 0 2.712-1.241 2.712-2.756v-5.164c0-1.47-1.24-2.574-2.712-2.819-0.932-0.155-1.898-0.226-2.825-0.221s-1.813 0.083-2.592 0.221c-2.295 0.405-2.712 1.254-2.712 2.819v2.067h5.423v0.689h-7.459c-1.576 0-2.956 0.947-3.388 2.75-0.498 2.066-0.52 3.355 0 5.512 0.385 1.606 1.306 2.75 2.882 2.75h1.865v-2.478c0-1.79 1.549-3.369 3.388-3.369zM12.933 8.649c-0.562 0-1.018-0.461-1.018-1.030 0-0.572 0.455-1.037 1.018-1.037 0.56 0 1.018 0.465 1.018 1.037 0 0.57-0.457 1.030-1.018 1.030zM26.826 13.465c-0.389-1.569-1.133-2.75-2.712-2.75h-2.035v2.408c0 1.867-1.583 3.439-3.388 3.439h-5.417c-1.484 0-2.712 1.27-2.712 2.756v5.164c0 1.47 1.278 2.334 2.712 2.756 1.717 0.505 3.363 0.596 5.417 0 1.365-0.395 2.712-1.191 2.712-2.756v-2.067h-5.417v-0.689h8.129c1.576 0 2.163-1.099 2.712-2.75 0.566-1.699 0.542-3.332 0-5.512zM19.033 23.794c0.562 0 1.018 0.461 1.018 1.030 0 0.572-0.456 1.037-1.018 1.037-0.56 0-1.018-0.465-1.018-1.037 0-0.57 0.457-1.030 1.018-1.030z"></path>
+</svg>
diff --git a/packages/databricks-vscode/src/bundle/BundleCommands.ts b/packages/databricks-vscode/src/bundle/BundleCommands.ts
@@ -8,7 +8,9 @@ export class BundleCommands implements Disposable {
         "Databricks Asset Bundles"
     );
 
-    constructor(private bundleRemoteStateModel: BundleRemoteStateModel) {}
+    constructor(private bundleRemoteStateModel: BundleRemoteStateModel) {
+        this.disposables.push(this.outputChannel);
+    }
 
     @onError({popup: {prefix: "Error refreshing remote state."}})
     async refreshRemoteState() {
diff --git a/packages/databricks-vscode/src/bundle/models/BundlePreValidateModel.ts b/packages/databricks-vscode/src/bundle/models/BundlePreValidateModel.ts
@@ -4,7 +4,6 @@ import {BundleTarget} from "../types";
 import {BaseModelWithStateCache} from "../../configuration/models/BaseModelWithStateCache";
 import {UrlUtils} from "../../utils";
 import {Mutex} from "../../locking";
-import {onError} from "../../utils/onErrorDecorator";
 
 export type BundlePreValidateState = {
     host?: URL;
@@ -68,7 +67,6 @@ export class BundlePreValidateModel extends BaseModelWithStateCache<BundlePreVal
             : undefined;
     }
 
-    @onError({popup: {prefix: "Failed to parse bundle yaml"}})
     @Mutex.synchronise("mutex")
     protected async readState() {
         if (this.target === undefined) {
diff --git a/packages/databricks-vscode/src/configuration/ConfigureWorkspaceWizard.ts b/packages/databricks-vscode/src/configuration/ConfigureWorkspaceWizard.ts
@@ -1,6 +1,10 @@
 import {commands, QuickPickItem, QuickPickItemKind, window} from "vscode";
 import {CliWrapper} from "../cli/CliWrapper";
-import {InputStep, MultiStepInput, ValidationMessageType} from "../ui/wizard";
+import {
+    InputStep,
+    MultiStepInput,
+    ValidationMessageType,
+} from "../ui/MultiStepInputWizard";
 import {workspaceConfigs} from "../vscode-objs/WorkspaceConfigs";
 import {
     AuthProvider,
diff --git a/packages/databricks-vscode/src/configuration/LoginWizard.ts b/packages/databricks-vscode/src/configuration/LoginWizard.ts
@@ -4,7 +4,7 @@ import {
     InputStep,
     MultiStepInput,
     ValidationMessageType,
-} from "../ui/wizard";
+} from "../ui/MultiStepInputWizard";
 import {CliWrapper} from "../cli/CliWrapper";
 import {workspaceConfigs} from "../vscode-objs/WorkspaceConfigs";
 import {
diff --git a/packages/databricks-vscode/src/configuration/ui/ConfigurationDataProvider.ts b/packages/databricks-vscode/src/configuration/ui/ConfigurationDataProvider.ts
@@ -31,24 +31,22 @@ export class ConfigurationDataProvider
     > = this._onDidChangeTreeData.event;
 
     private disposables: Array<Disposable> = [];
-    private components: Array<BaseComponent> = [];
+    private components: Array<BaseComponent> = [
+        new BundleTargetComponent(this.configModel),
+        new AuthTypeComponent(this.connectionManager, this.configModel),
+        new ClusterComponent(this.connectionManager, this.configModel),
+        new SyncDestinationComponent(
+            this.codeSynchronizer,
+            this.connectionManager,
+            this.configModel
+        ),
+    ];
     constructor(
         private readonly connectionManager: ConnectionManager,
         private readonly bundleProjectManager: BundleProjectManager,
         private readonly codeSynchronizer: CodeSynchronizer,
         private readonly configModel: ConfigModel
     ) {
-        this.components.push(
-            new BundleTargetComponent(this.configModel),
-            new AuthTypeComponent(this.connectionManager, this.configModel),
-            new ClusterComponent(this.connectionManager, this.configModel),
-            new SyncDestinationComponent(
-                this.codeSynchronizer,
-                this.connectionManager,
-                this.configModel
-            )
-        );
-
         this.disposables.push(
             this.bundleProjectManager.onDidChangeStatus(() => {
                 this._onDidChangeTreeData.fire();
diff --git a/packages/databricks-vscode/src/extension.ts b/packages/databricks-vscode/src/extension.ts
@@ -58,6 +58,7 @@ import {ConfigModel} from "./configuration/models/ConfigModel";
 import {OverrideableConfigModel} from "./configuration/models/OverrideableConfigModel";
 import {BundlePreValidateModel} from "./bundle/models/BundlePreValidateModel";
 import {BundleRemoteStateModel} from "./bundle/models/BundleRemoteStateModel";
+import {BundleResourceExplorerTreeDataProvider} from "./ui/bundle-resource-explorer/BundleResourceExplorerTreeDataProvider";
 import {BundleCommands} from "./bundle/BundleCommands";
 import {BundleProjectManager} from "./bundle/BundleProjectManager";
 
@@ -567,6 +568,29 @@ export async function activate(
         )
     );
 
+    // Bundle resource explorer
+    const bundleResourceExplorerTreeDataProvider =
+        new BundleResourceExplorerTreeDataProvider(configModel, context);
+    const bundleCommands = new BundleCommands(bundleRemoteStateModel);
+    context.subscriptions.push(
+        bundleResourceExplorerTreeDataProvider,
+        bundleCommands,
+        window.registerTreeDataProvider(
+            "dabsResourceExplorerView",
+            bundleResourceExplorerTreeDataProvider
+        ),
+        telemetry.registerCommand(
+            "databricks.bundle.refreshRemoteState",
+            bundleCommands.refreshRemoteState,
+            bundleCommands
+        ),
+        telemetry.registerCommand(
+            "databricks.bundle.deploy",
+            bundleCommands.deploy,
+            bundleCommands
+        )
+    );
+
     // Quickstart
     const quickstartCommands = new QuickstartCommands(context);
     context.subscriptions.push(
@@ -599,20 +623,6 @@ export async function activate(
         })
     );
 
-    // Bundle
-    const bundleCommands = new BundleCommands(bundleRemoteStateModel);
-    context.subscriptions.push(
-        telemetry.registerCommand(
-            "databricks.bundle.refreshRemoteState",
-            bundleCommands.refreshRemoteState,
-            bundleCommands
-        ),
-        telemetry.registerCommand(
-            "databricks.bundle.deploy",
-            bundleCommands.deploy,
-            bundleCommands
-        )
-    );
     // generate a json schema for bundle root and load a custom provider into
     // redhat.vscode-yaml extension to validate bundle config files with this schema
     registerBundleAutocompleteProvider(
diff --git a/packages/databricks-vscode/src/ui/MultiStepInputWizard.ts b/packages/databricks-vscode/src/ui/MultiStepInputWizard.ts
diff --git a/packages/databricks-vscode/src/ui/bundle-resource-explorer/BundleResourceExplorerTreeDataProvider.ts b/packages/databricks-vscode/src/ui/bundle-resource-explorer/BundleResourceExplorerTreeDataProvider.ts
@@ -0,0 +1,167 @@
+import {
+    Disposable,
+    Event,
+    EventEmitter,
+    ExtensionContext,
+    ProviderResult,
+    TreeDataProvider,
+    TreeItemCollapsibleState,
+} from "vscode";
+import {BundleResourceExplorerTreeItem, Renderer, TreeNode} from "./types";
+import {ConfigModel} from "../../configuration/models/ConfigModel";
+import {JobsRenderer} from "./JobsRenderer";
+import {onError} from "../../utils/onErrorDecorator";
+import {TasksRenderer} from "./TasksRenderer";
+import {PipelineRenderer} from "./PipelineRenderer";
+import path from "path";
+
+function humaniseResourceType(type: TreeNode["type"]) {
+    switch (type) {
+        case "pipelines":
+            return "Pipelines";
+        case "jobs":
+            return "Workflows";
+        default:
+            return type;
+    }
+}
+export class BundleResourceExplorerTreeDataProvider
+    implements TreeDataProvider<TreeNode>
+{
+    private disposables: Disposable[] = [];
+    private _onDidChangeTreeData: EventEmitter<TreeNode | undefined | void> =
+        new EventEmitter<TreeNode | undefined | void>();
+    readonly onDidChangeTreeData: Event<TreeNode | undefined | void> =
+        this._onDidChangeTreeData.event;
+
+    private renderers: Array<Renderer> = [
+        new JobsRenderer(),
+        new PipelineRenderer(),
+        new TasksRenderer(this.context),
+    ];
+    constructor(
+        private readonly configModel: ConfigModel,
+        private readonly context: ExtensionContext
+    ) {
+        this.disposables.push(
+            this.configModel.onDidChangeTarget(() => {
+                this._onDidChangeTreeData.fire();
+            }),
+            this.configModel.onDidChangeKey("remoteStateConfig")(() => {
+                this._onDidChangeTreeData.fire();
+            })
+        );
+    }
+
+    @onError({popup: {prefix: "Error rendering DABs Resource Viewer"}})
+    async getTreeItem(
+        element: TreeNode
+    ): Promise<BundleResourceExplorerTreeItem> {
+        if (element.type === "treeItem") {
+            return element.treeItem;
+        }
+        if (element.type === "resource_type_header") {
+            return {
+                label: humaniseResourceType(element.resourceType),
+                iconPath: this.getIconPath(element.resourceType),
+                contextValue: `${element.resourceType}-header`,
+                collapsibleState: TreeItemCollapsibleState.Expanded,
+            };
+        }
+
+        const renderer = this.renderers.find((r) => r.type === element.type);
+        if (renderer === undefined) {
+            throw new Error(
+                `No renderer found for element type ${element.type}`
+            );
+        }
+
+        const treeItem = renderer.getTreeItem(element);
+        const modifiedStatus = (element.data as any).modified_status as string;
+        if (modifiedStatus === undefined) {
+            return treeItem;
+        }
+
+        treeItem.label = {
+            label: `${modifiedStatus.charAt(0).toUpperCase()}${modifiedStatus
+                .slice(1)
+                .toLowerCase()} ${treeItem.label}`,
+            highlights: [[0, modifiedStatus.length]],
+        };
+
+        return treeItem;
+    }
+
+    private getIconPath(resourceType: string) {
+        return {
+            dark: this.context.asAbsolutePath(
+                path.join(
+                    "resources",
+                    "dark",
+                    "resource-explorer",
+                    `${resourceType}.svg`
+                )
+            ),
+            light: this.context.asAbsolutePath(
+                path.join(
+                    "resources",
+                    "light",
+                    "resource-explorer",
+                    `${resourceType}.svg`
+                )
+            ),
+        };
+    }
+
+    private async getRoots(): Promise<TreeNode[]> {
+        const remoteStateConfig =
+            await this.configModel.get("remoteStateConfig");
+        if (remoteStateConfig?.resources === undefined) {
+            return [];
+        }
+        return this.renderers
+            .map((r) => {
+                const children = r.getRoots(remoteStateConfig);
+                if (children.length === 0) {
+                    return [];
+                }
+                return [
+                    {
+                        type: "resource_type_header",
+                        parent: undefined,
+                        resourceType: r.type,
+                        children,
+                    },
+                    {
+                        type: "treeItem",
+                        parent: undefined,
+                        treeItem: {
+                            label: "",
+                            contextValue: "spacer",
+                            collapsibleState: TreeItemCollapsibleState.None,
+                        },
+                    },
+                ] as TreeNode[];
+            })
+            .flat();
+    }
+
+    @onError({popup: {prefix: "Error rendering DABs Resource Viewer"}})
+    async getChildren(element?: TreeNode) {
+        if (element === undefined) {
+            return await this.getRoots();
+        }
+        if (element.type === "resource_type_header") {
+            return element.children;
+        }
+        return this.renderers.map((r) => r.getChildren(element)).flat();
+    }
+
+    getParent(element: TreeNode): ProviderResult<TreeNode> {
+        return element.parent;
+    }
+
+    dispose() {
+        this.disposables.forEach((i) => i.dispose());
+    }
+}
diff --git a/packages/databricks-vscode/src/ui/bundle-resource-explorer/JobsRenderer.ts b/packages/databricks-vscode/src/ui/bundle-resource-explorer/JobsRenderer.ts
@@ -0,0 +1,55 @@
+import {TreeItemCollapsibleState} from "vscode";
+import {BundleRemoteState} from "../../bundle/models/BundleRemoteStateModel";
+import {BundleResourceExplorerTreeItem, Renderer, TreeNode} from "./types";
+
+export class JobsRenderer implements Renderer {
+    readonly type = "jobs";
+
+    constructor() {}
+    getTreeItem(element: TreeNode): BundleResourceExplorerTreeItem {
+        if (element.type !== this.type) {
+            throw new Error("Invalid element type");
+        }
+
+        return {
+            label: element.data.name,
+            contextValue: "job",
+            collapsibleState: TreeItemCollapsibleState.Collapsed,
+        };
+    }
+
+    getChildren(element: TreeNode): TreeNode[] {
+        if (element.type !== this.type) {
+            return [];
+        }
+
+        if (element.data.tasks === undefined) {
+            return [];
+        }
+
+        return element.data.tasks.map((task) => {
+            return {
+                type: "task",
+                jobId: element.data.id,
+                jobKey: element.resourceKey,
+                parent: element,
+                data: task,
+            };
+        });
+    }
+
+    getRoots(remoteStateConfig: BundleRemoteState): TreeNode[] {
+        const jobs = remoteStateConfig?.resources?.jobs;
+        if (jobs === undefined) {
+            return [];
+        }
+
+        return Object.keys(jobs).map((jobKey) => {
+            return {
+                type: this.type,
+                data: jobs[jobKey],
+                resourceKey: jobKey,
+            };
+        });
+    }
+}
diff --git a/packages/databricks-vscode/src/ui/bundle-resource-explorer/PipelineRenderer.ts b/packages/databricks-vscode/src/ui/bundle-resource-explorer/PipelineRenderer.ts
diff --git a/packages/databricks-vscode/src/ui/bundle-resource-explorer/TasksRenderer.ts b/packages/databricks-vscode/src/ui/bundle-resource-explorer/TasksRenderer.ts
diff --git a/packages/databricks-vscode/src/ui/bundle-resource-explorer/types.ts b/packages/databricks-vscode/src/ui/bundle-resource-explorer/types.ts

Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,8 @@`
`12`	`12`	`"editor.defaultFormatter": "esbenp.prettier-vscode",`
`13`	`13`	`"[javascript]": {`
`14`	`14`	`"editor.defaultFormatter": "esbenp.prettier-vscode"`
	`15`	`+ },`
	`16`	`+ "[xml]": {`
	`17`	`+ "editor.defaultFormatter": "redhat.vscode-xml"`
`15`	`18`	`}`
`16`	`19`	`}`