From 196369333ed1d15d998e7bba27183183aca43c3b Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Thu, 28 Jul 2022 19:52:41 +0530 Subject: [PATCH 01/10] tunning the performance of getting devfile registries Signed-off-by: msivasubramaniaan --- src/extension.ts | 5 +++++ src/odo.ts | 16 +++++++++++++++- src/registriesView.ts | 8 ++++++++ .../devfile-registry/registryViewLoader.ts | 11 +++++------ 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index ed4a984d6..a9a7dfed6 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -31,6 +31,7 @@ import { WelcomePage } from './welcomePage'; import { ComponentsTreeDataProvider } from './componentsView'; import fsx = require('fs-extra'); +import { DevfileComponentType } from './odo/componentType'; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -146,6 +147,10 @@ export async function activate(extensionContext: ExtensionContext): Promise startTelemetry(extensionContext); + void OdoImpl.Instance.getCompTypesJson().then((values:DevfileComponentType[]) => { + OdoImpl.Instance.getComponentTypesOfJSON(values); + }); + return { verifyBundledBinaries, }; diff --git a/src/odo.ts b/src/odo.ts index 214b95bed..0ac700275 100644 --- a/src/odo.ts +++ b/src/odo.ts @@ -330,6 +330,8 @@ class OdoEventImpl implements OdoEvent { } export interface Odo { + getDevfileComponents(): DevfileComponentType[]; + getComponentTypeAdapters(): ComponentTypeAdapter[]; getKubeconfigEnv(): any; getClusters(): Promise; getProjects(): Promise; @@ -489,6 +491,9 @@ export class OdoImpl implements Odo { public readonly subject: Subject = new Subject(); + private static compTypeAdapters: ComponentTypeAdapter[] = []; + private static devfileComponents: DevfileComponentType[] = []; + public static get Instance(): Odo { if (!OdoImpl.instance) { OdoImpl.instance = new OdoImpl(); @@ -496,6 +501,14 @@ export class OdoImpl implements Odo { return OdoImpl.instance; } + public getComponentTypeAdapters(): ComponentTypeAdapter[] { + return OdoImpl.compTypeAdapters; + } + + public getDevfileComponents(): DevfileComponentType[] { + return OdoImpl.devfileComponents; + } + async getClusters(): Promise { let children = OdoImpl.data.getChildrenByParent(OdoImpl.ROOT); if (!children) { @@ -642,6 +655,7 @@ export class OdoImpl implements Odo { public async getCompTypesJson(): Promise { const result: cliInstance.CliExitData = await this.execute(Command.listCatalogComponentsJson(), undefined, true, this.getKubeconfigEnv()); const compTypesJson: ComponentTypesJson = this.loadJSON(result.stdout); + OdoImpl.devfileComponents = compTypesJson?.items; return compTypesJson?.items; } @@ -651,7 +665,7 @@ export class OdoImpl implements Odo { if (devFileComponents) { devFileComponents.map((item) => devfileItems.push(new ComponentTypeAdapter(item.Name, undefined, item.Description, undefined, item.Registry.Name))); } - + OdoImpl.compTypeAdapters = devfileItems; return devfileItems; } diff --git a/src/registriesView.ts b/src/registriesView.ts index 83dc27341..314f34bec 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -16,6 +16,7 @@ import { } from 'vscode'; import { getInstance, Odo, OdoImpl } from './odo'; import { + DevfileComponentType, Registry, } from './odo/componentType'; import { StarterProject } from './odo/componentTypeDescription'; @@ -248,6 +249,10 @@ export class ComponentTypesView implements TreeDataProvider { const newRegistry = await OdoImpl.Instance.addRegistry(regName, regURL, token); ComponentTypesView.instance.addRegistry(newRegistry); + void OdoImpl.Instance.getCompTypesJson().then((values:DevfileComponentType[]) => { + OdoImpl.Instance.getComponentTypesOfJSON(values); + }); + RegistryViewLoader.refresh(); } @@ -261,6 +266,9 @@ export class ComponentTypesView implements TreeDataProvider { if (yesNo === 'Yes') { await OdoImpl.Instance.removeRegistry(registry.Name); ComponentTypesView.instance.removeRegistry(registry); + void OdoImpl.Instance.getCompTypesJson().then((values:DevfileComponentType[]) => { + OdoImpl.Instance.getComponentTypesOfJSON(values); + }); RegistryViewLoader.refresh(); } } diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index 5817d072d..60039f840 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -11,7 +11,6 @@ import { Command } from '../../odo/command'; import { stringify } from 'yaml'; import { ComponentTypesView } from '../../registriesView'; import { StarterProject } from '../../odo/componentTypeDescription'; -import { DevfileComponentType } from '../../odo/componentType'; import { vsCommand } from '../../vscommand'; import { ExtCommandTelemetryEvent } from '../../telemetry'; @@ -123,11 +122,12 @@ export default class RegistryViewLoader { } } -function getAllComponents(eventActionName: string) { +async function getAllComponents(eventActionName: string) { compDescriptions.clear(); - getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { const components = new Set(); - getInstance().getComponentTypesOfJSON(devFileComponentTypes).map((comp) => { + const devfileComponents = getInstance().getDevfileComponents(); + const componentTypeAdapters = getInstance().getComponentTypeAdapters(); + componentTypeAdapters.map((comp) => { components.add(comp.name); }); const registries = await ComponentTypesView.instance.getRegistries(); @@ -140,7 +140,7 @@ function getAllComponents(eventActionName: string) { }); compDescriptions.add(component); }); - if (devFileComponentTypes.length === compDescriptions.size) { + if (devfileComponents.length === compDescriptions.size) { panel.webview.postMessage( { action: eventActionName, @@ -158,5 +158,4 @@ function getAllComponents(eventActionName: string) { ); }); }); - }); } From e206a413b7fa9b10e1eb1466969e9b51232f39df Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Fri, 29 Jul 2022 17:01:08 +0530 Subject: [PATCH 02/10] reduced the odo calls only at the time of loading the extension and update on the devfile registries Signed-off-by: msivasubramaniaan --- src/extension.ts | 22 +++--- src/registriesView.ts | 76 +++++++++++++++---- .../devfile-registry/registryViewLoader.ts | 54 ++++--------- 3 files changed, 84 insertions(+), 68 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index a9a7dfed6..941a7be7b 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -50,7 +50,7 @@ function migrateFromOdo018(): void { } } -async function verifyBundledBinaries(): Promise<{odoPath: string, ocPath: string}> { +async function verifyBundledBinaries(): Promise<{ odoPath: string, ocPath: string }> { return { odoPath: await ToolsConfig.detect('odo'), ocPath: await ToolsConfig.detect('oc'), @@ -64,8 +64,8 @@ export async function activate(extensionContext: ExtensionContext): Promise migrateFromOdo018(); Cluster.extensionContext = extensionContext; TokenStore.extensionContext = extensionContext; - const crcStatusItem = window.createStatusBarItem(StatusBarAlignment.Left); - crcStatusItem.command = 'openshift.explorer.stopCluster'; + const crcStatusItem = window.createStatusBarItem(StatusBarAlignment.Left); + crcStatusItem.command = 'openshift.explorer.stopCluster'; const disposable = [ ...(await registerCommands( './k8s/route', @@ -128,10 +128,10 @@ export async function activate(extensionContext: ExtensionContext): Promise }); function updateStatusBarItem(statusBarItem: StatusBarItem, text: string): void { - if (!workspace.getConfiguration('openshiftConnector').get('crcBinaryLocation')) { - statusBarItem.hide(); - return; - } + if (!workspace.getConfiguration('openshiftConnector').get('crcBinaryLocation')) { + statusBarItem.hide(); + return; + } statusBarItem.text = `$(debug-stop) ${text}`; statusBarItem.show(); } @@ -143,12 +143,10 @@ export async function activate(extensionContext: ExtensionContext): Promise OdoImpl.Instance.loadWorkspaceComponents(event); }); - OdoImpl.Instance.loadWorkspaceComponents(null); - - startTelemetry(extensionContext); + await ComponentTypesView.instance.getAllComponents().then(() => { + OdoImpl.Instance.loadWorkspaceComponents(null); - void OdoImpl.Instance.getCompTypesJson().then((values:DevfileComponentType[]) => { - OdoImpl.Instance.getComponentTypesOfJSON(values); + startTelemetry(extensionContext); }); return { diff --git a/src/registriesView.ts b/src/registriesView.ts index 314f34bec..4aee85915 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -16,6 +16,7 @@ import { } from 'vscode'; import { getInstance, Odo, OdoImpl } from './odo'; import { + ComponentTypeDescription, DevfileComponentType, Registry, } from './odo/componentType'; @@ -23,6 +24,9 @@ import { StarterProject } from './odo/componentTypeDescription'; import { vsCommand, VsCommandError } from './vscommand'; import validator from 'validator'; import RegistryViewLoader from './webview/devfile-registry/registryViewLoader'; +import { Command } from './odo/command'; +import { CommandText } from './base/command'; +import { CliExitData } from './cli'; type ComponentType = Registry; @@ -46,6 +50,7 @@ export class ComponentTypesView implements TreeDataProvider { readonly odo: Odo = getInstance(); private registries: Registry[]; + private compDescriptions: Set = new Set(); createTreeView(id: string): TreeView { if (!this.treeView) { @@ -98,6 +103,48 @@ export class ComponentTypesView implements TreeDataProvider { return this.registries; } + public getCompDescriptions(): Set { + return this.compDescriptions; + } + + public getListOfRegistries(): Registry[] { + return this.registries; + } + + public async getAllComponents(): Promise { + return new Promise((resolve) => { + const compDescs: Set = new Set(); + void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { + const components = new Set(); + getInstance().getComponentTypesOfJSON(devFileComponentTypes).map((comp) => { + components.add(comp.name); + }); + await this.getRegistries(); + Array.from(components).map((compName: string) => { + getInstance().execute(Command.describeCatalogComponent(compName)).then((componentDesc: CliExitData) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const out: ComponentTypeDescription[] = JSON.parse(componentDesc.stdout); + out.forEach((component) => { + // eslint-disable-next-line max-nested-callbacks + component.Devfile?.starterProjects?.map((starter: StarterProject) => { + starter.typeName = compName; + }); + compDescs.add(component); + }); + if (devFileComponentTypes.length === compDescs.size) { + this.compDescriptions.clear(); + this.compDescriptions = compDescs; + resolve(true); + } + }).catch(() => { + this.compDescriptions.clear(); + resolve(true); + }); + }); + }); + }); + } + // eslint-disable-next-line class-methods-use-this async getChildren(parent: ComponentType): Promise { let children: ComponentType[] = []; @@ -228,8 +275,8 @@ export class ComponentTypesView implements TreeDataProvider { let token: string; if (secure === 'Yes') { token = await window.showInputBox({ - placeHolder: 'Token to access the registry', - validateInput: (value) => value?.trim().length > 0 ? undefined : 'Token cannot be empty' + placeHolder: 'Token to access the registry', + validateInput: (value) => value?.trim().length > 0 ? undefined : 'Token cannot be empty' }); if (!token) return null; } @@ -239,21 +286,19 @@ export class ComponentTypesView implements TreeDataProvider { */ if (registryContext) { - const notChangedRegisty = registries.find((registry) => registry.Name === regName && registry.URL === regURL && registry.Secure === (secure === 'Yes')); - if (notChangedRegisty) { - return null; - } - await vscode.commands.executeCommand('openshift.componentTypesView.registry.remove', registryContext, true); + const notChangedRegisty = registries.find((registry) => registry.Name === regName && registry.URL === regURL && registry.Secure === (secure === 'Yes')); + if (notChangedRegisty) { + return null; + } + await vscode.commands.executeCommand('openshift.componentTypesView.registry.remove', registryContext, true); } const newRegistry = await OdoImpl.Instance.addRegistry(regName, regURL, token); ComponentTypesView.instance.addRegistry(newRegistry); - void OdoImpl.Instance.getCompTypesJson().then((values:DevfileComponentType[]) => { - OdoImpl.Instance.getComponentTypesOfJSON(values); - }); - - RegistryViewLoader.refresh(); + await ComponentTypesView.instance.getAllComponents().then(() => + RegistryViewLoader.refresh() + ); } @vsCommand('openshift.componentTypesView.registry.remove') @@ -266,10 +311,9 @@ export class ComponentTypesView implements TreeDataProvider { if (yesNo === 'Yes') { await OdoImpl.Instance.removeRegistry(registry.Name); ComponentTypesView.instance.removeRegistry(registry); - void OdoImpl.Instance.getCompTypesJson().then((values:DevfileComponentType[]) => { - OdoImpl.Instance.getComponentTypesOfJSON(values); - }); - RegistryViewLoader.refresh(); + await ComponentTypesView.instance.getAllComponents().then(() => + RegistryViewLoader.refresh() + ); } } diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index 60039f840..3d8d4a721 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -115,47 +115,21 @@ export default class RegistryViewLoader { } static refresh(): void { - if(panel) { - panel.webview.postMessage({action: 'loadingComponents' }); - getAllComponents('getAllComponents'); - } + if (panel) { + panel.webview.postMessage({ action: 'loadingComponents' }); + getAllComponents('getAllComponents'); + } } } -async function getAllComponents(eventActionName: string) { - compDescriptions.clear(); - const components = new Set(); - const devfileComponents = getInstance().getDevfileComponents(); - const componentTypeAdapters = getInstance().getComponentTypeAdapters(); - componentTypeAdapters.map((comp) => { - components.add(comp.name); - }); - const registries = await ComponentTypesView.instance.getRegistries(); - Array.from(components).map(async (compName: string) => { - getInstance().execute(Command.describeCatalogComponent(compName)).then((componentDesc) => { - const out = JSON.parse(componentDesc.stdout); - out.forEach((component) => { - component.Devfile?.starterProjects?.map((starter: StarterProject) => { - starter.typeName = compName; - }); - compDescriptions.add(component); - }); - if (devfileComponents.length === compDescriptions.size) { - panel.webview.postMessage( - { - action: eventActionName, - compDescriptions: Array.from(compDescriptions), - registries: registries - } - ); - } - }).catch((reason) => { - panel.webview.postMessage( - { - action: eventActionName, - error: '500: Internal Server Error, Please try later' - } - ); - }); - }); +function getAllComponents(eventActionName: string) { + const registries = ComponentTypesView.instance.getListOfRegistries(); + const componentDescriptions = ComponentTypesView.instance.getCompDescriptions(); + panel.webview.postMessage( + { + action: eventActionName, + compDescriptions: Array.from(componentDescriptions), + registries: registries + } + ); } From eb9e78b1029b6145367ee99ca9da45da0f3ef272 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Fri, 29 Jul 2022 17:06:19 +0530 Subject: [PATCH 03/10] removed unused methods and imports Signed-off-by: msivasubramaniaan --- src/extension.ts | 1 - src/odo.ts | 15 --------------- src/registriesView.ts | 1 - .../devfile-registry/registryViewLoader.ts | 6 +----- 4 files changed, 1 insertion(+), 22 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index 941a7be7b..dce2de13d 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -31,7 +31,6 @@ import { WelcomePage } from './welcomePage'; import { ComponentsTreeDataProvider } from './componentsView'; import fsx = require('fs-extra'); -import { DevfileComponentType } from './odo/componentType'; // eslint-disable-next-line @typescript-eslint/no-empty-function diff --git a/src/odo.ts b/src/odo.ts index 0ac700275..db0eccb8b 100644 --- a/src/odo.ts +++ b/src/odo.ts @@ -330,8 +330,6 @@ class OdoEventImpl implements OdoEvent { } export interface Odo { - getDevfileComponents(): DevfileComponentType[]; - getComponentTypeAdapters(): ComponentTypeAdapter[]; getKubeconfigEnv(): any; getClusters(): Promise; getProjects(): Promise; @@ -491,9 +489,6 @@ export class OdoImpl implements Odo { public readonly subject: Subject = new Subject(); - private static compTypeAdapters: ComponentTypeAdapter[] = []; - private static devfileComponents: DevfileComponentType[] = []; - public static get Instance(): Odo { if (!OdoImpl.instance) { OdoImpl.instance = new OdoImpl(); @@ -501,14 +496,6 @@ export class OdoImpl implements Odo { return OdoImpl.instance; } - public getComponentTypeAdapters(): ComponentTypeAdapter[] { - return OdoImpl.compTypeAdapters; - } - - public getDevfileComponents(): DevfileComponentType[] { - return OdoImpl.devfileComponents; - } - async getClusters(): Promise { let children = OdoImpl.data.getChildrenByParent(OdoImpl.ROOT); if (!children) { @@ -655,7 +642,6 @@ export class OdoImpl implements Odo { public async getCompTypesJson(): Promise { const result: cliInstance.CliExitData = await this.execute(Command.listCatalogComponentsJson(), undefined, true, this.getKubeconfigEnv()); const compTypesJson: ComponentTypesJson = this.loadJSON(result.stdout); - OdoImpl.devfileComponents = compTypesJson?.items; return compTypesJson?.items; } @@ -665,7 +651,6 @@ export class OdoImpl implements Odo { if (devFileComponents) { devFileComponents.map((item) => devfileItems.push(new ComponentTypeAdapter(item.Name, undefined, item.Description, undefined, item.Registry.Name))); } - OdoImpl.compTypeAdapters = devfileItems; return devfileItems; } diff --git a/src/registriesView.ts b/src/registriesView.ts index 4aee85915..5a4cd594c 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -25,7 +25,6 @@ import { vsCommand, VsCommandError } from './vscommand'; import validator from 'validator'; import RegistryViewLoader from './webview/devfile-registry/registryViewLoader'; import { Command } from './odo/command'; -import { CommandText } from './base/command'; import { CliExitData } from './cli'; type ComponentType = Registry; diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index 3d8d4a721..4a506e3bb 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -6,16 +6,12 @@ import * as vscode from 'vscode'; import * as path from 'path'; import * as fs from 'fs'; import { ExtenisonID } from '../../util/constants'; -import { getInstance } from '../../odo'; -import { Command } from '../../odo/command'; import { stringify } from 'yaml'; -import { ComponentTypesView } from '../../registriesView'; -import { StarterProject } from '../../odo/componentTypeDescription'; +import { ComponentTypesView } from '../../registriesView' import { vsCommand } from '../../vscommand'; import { ExtCommandTelemetryEvent } from '../../telemetry'; let panel: vscode.WebviewPanel; -let compDescriptions = new Set(); async function devfileRegistryViewerMessageListener(event: any): Promise { let starterProject = event.selectedProject; From 3771eeabf8ba4efd5913e2e9a9795da943373246 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Tue, 2 Aug 2022 13:21:23 +0530 Subject: [PATCH 04/10] removed getComponentTypesOfJSON and done refactoring Signed-off-by: msivasubramaniaan --- src/extension.ts | 8 ++++---- src/odo.ts | 10 ---------- src/registriesView.ts | 15 ++++++--------- 3 files changed, 10 insertions(+), 23 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index dce2de13d..f01d0771a 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -142,11 +142,11 @@ export async function activate(extensionContext: ExtensionContext): Promise OdoImpl.Instance.loadWorkspaceComponents(event); }); - await ComponentTypesView.instance.getAllComponents().then(() => { - OdoImpl.Instance.loadWorkspaceComponents(null); + await ComponentTypesView.instance.getAllComponents(); - startTelemetry(extensionContext); - }); + OdoImpl.Instance.loadWorkspaceComponents(null); + + startTelemetry(extensionContext); return { verifyBundledBinaries, diff --git a/src/odo.ts b/src/odo.ts index db0eccb8b..26ac854b9 100644 --- a/src/odo.ts +++ b/src/odo.ts @@ -338,7 +338,6 @@ export interface Odo { getApplicationChildren(application: OpenShiftObject): Promise; getComponents(application: OpenShiftObject, condition?: (value: OpenShiftObject) => boolean): Promise; getCompTypesJson():Promise; - getComponentTypesOfJSON(devFileComponents: DevfileComponentType[]):ComponentTypeAdapter[]; getComponentTypes(): Promise; getComponentChildren(component: OpenShiftObject): Promise; getRoutes(component: OpenShiftObject): Promise; @@ -645,15 +644,6 @@ export class OdoImpl implements Odo { return compTypesJson?.items; } - public getComponentTypesOfJSON(devFileComponents: DevfileComponentType[]): ComponentType[] { - const devfileItems: ComponentTypeAdapter[] = []; - - if (devFileComponents) { - devFileComponents.map((item) => devfileItems.push(new ComponentTypeAdapter(item.Name, undefined, item.Description, undefined, item.Registry.Name))); - } - return devfileItems; - } - public async getComponentTypes(): Promise { // if kc is produced, KUBECONFIG env var is empty or pointing diff --git a/src/registriesView.ts b/src/registriesView.ts index 5a4cd594c..736c03e83 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -110,16 +110,13 @@ export class ComponentTypesView implements TreeDataProvider { return this.registries; } - public async getAllComponents(): Promise { - return new Promise((resolve) => { + public async getAllComponents(): Promise { + return new Promise((resolve) => { const compDescs: Set = new Set(); void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { - const components = new Set(); - getInstance().getComponentTypesOfJSON(devFileComponentTypes).map((comp) => { - components.add(comp.name); - }); + const components = new Set(devFileComponentTypes.map((devFileComponentType: DevfileComponentType) => devFileComponentType.Name)); await this.getRegistries(); - Array.from(components).map((compName: string) => { + components.forEach((compName: string) => { getInstance().execute(Command.describeCatalogComponent(compName)).then((componentDesc: CliExitData) => { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const out: ComponentTypeDescription[] = JSON.parse(componentDesc.stdout); @@ -133,11 +130,11 @@ export class ComponentTypesView implements TreeDataProvider { if (devFileComponentTypes.length === compDescs.size) { this.compDescriptions.clear(); this.compDescriptions = compDescs; - resolve(true); + resolve(); } }).catch(() => { this.compDescriptions.clear(); - resolve(true); + resolve(); }); }); }); From d303e4fb5645623dd766ca5ea5f92cde04f874c4 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Tue, 2 Aug 2022 21:26:51 +0530 Subject: [PATCH 05/10] did rxjs subscriptions on getting component type description from ODO Signed-off-by: msivasubramaniaan --- src/extension.ts | 2 +- src/registriesView.ts | 68 ++++++++++--------- .../devfile-registry/registryViewLoader.ts | 33 +++++++-- 3 files changed, 64 insertions(+), 39 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index f01d0771a..ca782ab45 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -142,7 +142,7 @@ export async function activate(extensionContext: ExtensionContext): Promise OdoImpl.Instance.loadWorkspaceComponents(event); }); - await ComponentTypesView.instance.getAllComponents(); + void ComponentTypesView.instance.getAllComponents(); OdoImpl.Instance.loadWorkspaceComponents(null); diff --git a/src/registriesView.ts b/src/registriesView.ts index 736c03e83..d5378e93d 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -26,6 +26,7 @@ import validator from 'validator'; import RegistryViewLoader from './webview/devfile-registry/registryViewLoader'; import { Command } from './odo/command'; import { CliExitData } from './cli'; +import { Subject } from 'rxjs'; type ComponentType = Registry; @@ -49,7 +50,8 @@ export class ComponentTypesView implements TreeDataProvider { readonly odo: Odo = getInstance(); private registries: Registry[]; - private compDescriptions: Set = new Set(); + private readonly compDescriptions: Set = new Set(); + public readonly subject: Subject = new Subject(); createTreeView(id: string): TreeView { if (!this.treeView) { @@ -106,36 +108,40 @@ export class ComponentTypesView implements TreeDataProvider { return this.compDescriptions; } + public setComponentTypeDesc(value: ComponentTypeDescription): void { + this.compDescriptions.add(value); + } + public getListOfRegistries(): Registry[] { return this.registries; } - public async getAllComponents(): Promise { - return new Promise((resolve) => { - const compDescs: Set = new Set(); - void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { - const components = new Set(devFileComponentTypes.map((devFileComponentType: DevfileComponentType) => devFileComponentType.Name)); - await this.getRegistries(); - components.forEach((compName: string) => { - getInstance().execute(Command.describeCatalogComponent(compName)).then((componentDesc: CliExitData) => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - const out: ComponentTypeDescription[] = JSON.parse(componentDesc.stdout); - out.forEach((component) => { - // eslint-disable-next-line max-nested-callbacks - component.Devfile?.starterProjects?.map((starter: StarterProject) => { - starter.typeName = compName; - }); - compDescs.add(component); + public getAllComponents(): void { + ComponentTypesView.instance.subject.subscribe((compDesc: ComponentTypeDescription) => { + ComponentTypesView.instance.setComponentTypeDesc(compDesc); + }); + const compDescs: Set = new Set(); + void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { + const components = new Set(devFileComponentTypes.map((devFileComponentType: DevfileComponentType) => devFileComponentType.Name)); + await this.getRegistries(); + components.forEach((compName: string) => { + getInstance().execute(Command.describeCatalogComponent(compName)).then((componentDesc: CliExitData) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const out: ComponentTypeDescription[] = JSON.parse(componentDesc.stdout); + out.forEach((component) => { + // eslint-disable-next-line max-nested-callbacks + component.Devfile?.starterProjects?.map((starter: StarterProject) => { + starter.typeName = compName; }); - if (devFileComponentTypes.length === compDescs.size) { - this.compDescriptions.clear(); - this.compDescriptions = compDescs; - resolve(); - } - }).catch(() => { - this.compDescriptions.clear(); - resolve(); + compDescs.add(component); + this.subject.next(component); }); + if (devFileComponentTypes.length === compDescs.size) { + this.subject.next('Done'); + } + }).catch(() => { + this.subject.complete(); + this.subject.unsubscribe(); }); }); }); @@ -292,9 +298,9 @@ export class ComponentTypesView implements TreeDataProvider { const newRegistry = await OdoImpl.Instance.addRegistry(regName, regURL, token); ComponentTypesView.instance.addRegistry(newRegistry); - await ComponentTypesView.instance.getAllComponents().then(() => - RegistryViewLoader.refresh() - ); + ComponentTypesView.instance.compDescriptions.clear(); + ComponentTypesView.instance.getAllComponents(); + RegistryViewLoader.refresh() } @vsCommand('openshift.componentTypesView.registry.remove') @@ -307,9 +313,9 @@ export class ComponentTypesView implements TreeDataProvider { if (yesNo === 'Yes') { await OdoImpl.Instance.removeRegistry(registry.Name); ComponentTypesView.instance.removeRegistry(registry); - await ComponentTypesView.instance.getAllComponents().then(() => - RegistryViewLoader.refresh() - ); + ComponentTypesView.instance.compDescriptions.clear(); + ComponentTypesView.instance.getAllComponents(); + RegistryViewLoader.refresh(); } } diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index 4a506e3bb..49a5dbabf 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -10,6 +10,8 @@ import { stringify } from 'yaml'; import { ComponentTypesView } from '../../registriesView' import { vsCommand } from '../../vscommand'; import { ExtCommandTelemetryEvent } from '../../telemetry'; +import { ComponentTypeDescription } from '../../odo/componentType'; +import { isString } from 'lodash'; let panel: vscode.WebviewPanel; @@ -121,11 +123,28 @@ export default class RegistryViewLoader { function getAllComponents(eventActionName: string) { const registries = ComponentTypesView.instance.getListOfRegistries(); const componentDescriptions = ComponentTypesView.instance.getCompDescriptions(); - panel.webview.postMessage( - { - action: eventActionName, - compDescriptions: Array.from(componentDescriptions), - registries: registries - } - ); + if (componentDescriptions.size === 0) { + const components: ComponentTypeDescription[] = []; + ComponentTypesView.instance.subject.subscribe((componentDescription: ComponentTypeDescription | string) => { + if(!isString(componentDescription)) { + components.push(componentDescription); + } else { + panel.webview.postMessage( + { + action: eventActionName, + compDescriptions: components, + registries: registries + } + ); + } + }) + } else { + panel.webview.postMessage( + { + action: eventActionName, + compDescriptions: Array.from(componentDescriptions), + registries: registries + } + ); + } } From 262e1f718267cf23908e5e801aa677176cf4e935 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Tue, 2 Aug 2022 22:16:33 +0530 Subject: [PATCH 06/10] get componenets called only one time on edit event Signed-off-by: msivasubramaniaan --- src/registriesView.ts | 8 +++++--- src/webview/devfile-registry/registryViewLoader.ts | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/registriesView.ts b/src/registriesView.ts index d5378e93d..42ebc2287 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -313,9 +313,11 @@ export class ComponentTypesView implements TreeDataProvider { if (yesNo === 'Yes') { await OdoImpl.Instance.removeRegistry(registry.Name); ComponentTypesView.instance.removeRegistry(registry); - ComponentTypesView.instance.compDescriptions.clear(); - ComponentTypesView.instance.getAllComponents(); - RegistryViewLoader.refresh(); + if (!isEdit) { + ComponentTypesView.instance.compDescriptions.clear(); + ComponentTypesView.instance.getAllComponents(); + RegistryViewLoader.refresh(); + } } } diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index 49a5dbabf..f9db1f651 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -126,7 +126,7 @@ function getAllComponents(eventActionName: string) { if (componentDescriptions.size === 0) { const components: ComponentTypeDescription[] = []; ComponentTypesView.instance.subject.subscribe((componentDescription: ComponentTypeDescription | string) => { - if(!isString(componentDescription)) { + if (!isString(componentDescription)) { components.push(componentDescription); } else { panel.webview.postMessage( From d2334db89c30cf48c9bab7e6b2ba72d97e36fc39 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Thu, 4 Aug 2022 12:13:24 +0530 Subject: [PATCH 07/10] added label to loading screen and changed subscription logic Signed-off-by: msivasubramaniaan --- src/extension.ts | 7 ++++ src/registriesView.ts | 26 +++++--------- src/webview/devfile-registry/app/loading.tsx | 20 ++++++++++- .../devfile-registry/registryViewLoader.ts | 36 +++++-------------- 4 files changed, 43 insertions(+), 46 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index ca782ab45..2aa8b05b3 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -31,6 +31,7 @@ import { WelcomePage } from './welcomePage'; import { ComponentsTreeDataProvider } from './componentsView'; import fsx = require('fs-extra'); +import { getAllComponents } from './webview/devfile-registry/registryViewLoader'; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -144,6 +145,12 @@ export async function activate(extensionContext: ExtensionContext): Promise void ComponentTypesView.instance.getAllComponents(); + ComponentTypesView.instance.subject.subscribe((value: string) => { + if (value === 'refresh') { + getAllComponents('getAllComponents'); + } + }); + OdoImpl.Instance.loadWorkspaceComponents(null); startTelemetry(extensionContext); diff --git a/src/registriesView.ts b/src/registriesView.ts index 42ebc2287..54519edd4 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -51,7 +51,7 @@ export class ComponentTypesView implements TreeDataProvider { readonly odo: Odo = getInstance(); private registries: Registry[]; private readonly compDescriptions: Set = new Set(); - public readonly subject: Subject = new Subject(); + public subject: Subject = new Subject(); createTreeView(id: string): TreeView { if (!this.treeView) { @@ -108,19 +108,12 @@ export class ComponentTypesView implements TreeDataProvider { return this.compDescriptions; } - public setComponentTypeDesc(value: ComponentTypeDescription): void { - this.compDescriptions.add(value); - } - public getListOfRegistries(): Registry[] { return this.registries; } public getAllComponents(): void { - ComponentTypesView.instance.subject.subscribe((compDesc: ComponentTypeDescription) => { - ComponentTypesView.instance.setComponentTypeDesc(compDesc); - }); - const compDescs: Set = new Set(); + this.compDescriptions.clear(); void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { const components = new Set(devFileComponentTypes.map((devFileComponentType: DevfileComponentType) => devFileComponentType.Name)); await this.getRegistries(); @@ -133,15 +126,16 @@ export class ComponentTypesView implements TreeDataProvider { component.Devfile?.starterProjects?.map((starter: StarterProject) => { starter.typeName = compName; }); - compDescs.add(component); - this.subject.next(component); + this.compDescriptions.add(component); }); - if (devFileComponentTypes.length === compDescs.size) { - this.subject.next('Done'); + if (devFileComponentTypes.length === this.compDescriptions.size) { + this.subject.next('refresh'); } }).catch(() => { - this.subject.complete(); - this.subject.unsubscribe(); + if (this.subject.closed) { + this.subject = new Subject(); + this.getAllComponents(); + } }); }); }); @@ -298,7 +292,6 @@ export class ComponentTypesView implements TreeDataProvider { const newRegistry = await OdoImpl.Instance.addRegistry(regName, regURL, token); ComponentTypesView.instance.addRegistry(newRegistry); - ComponentTypesView.instance.compDescriptions.clear(); ComponentTypesView.instance.getAllComponents(); RegistryViewLoader.refresh() } @@ -314,7 +307,6 @@ export class ComponentTypesView implements TreeDataProvider { await OdoImpl.Instance.removeRegistry(registry.Name); ComponentTypesView.instance.removeRegistry(registry); if (!isEdit) { - ComponentTypesView.instance.compDescriptions.clear(); ComponentTypesView.instance.getAllComponents(); RegistryViewLoader.refresh(); } diff --git a/src/webview/devfile-registry/app/loading.tsx b/src/webview/devfile-registry/app/loading.tsx index d2d75e4db..1ae76fda6 100644 --- a/src/webview/devfile-registry/app/loading.tsx +++ b/src/webview/devfile-registry/app/loading.tsx @@ -6,7 +6,7 @@ import CircularProgress from '@mui/material/CircularProgress'; import Box from '@mui/material/Box'; import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles, Typography } from '@material-ui/core'; import loaderStyle from './loading.style'; const useLoadingStyle = makeStyles(loaderStyle); @@ -16,6 +16,24 @@ export function LoadScreen() { return ( + + loading components... + ); } diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index f9db1f651..c89844555 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -10,8 +10,6 @@ import { stringify } from 'yaml'; import { ComponentTypesView } from '../../registriesView' import { vsCommand } from '../../vscommand'; import { ExtCommandTelemetryEvent } from '../../telemetry'; -import { ComponentTypeDescription } from '../../odo/componentType'; -import { isString } from 'lodash'; let panel: vscode.WebviewPanel; @@ -115,36 +113,18 @@ export default class RegistryViewLoader { static refresh(): void { if (panel) { panel.webview.postMessage({ action: 'loadingComponents' }); - getAllComponents('getAllComponents'); } } } -function getAllComponents(eventActionName: string) { +export function getAllComponents(eventActionName: string) { const registries = ComponentTypesView.instance.getListOfRegistries(); const componentDescriptions = ComponentTypesView.instance.getCompDescriptions(); - if (componentDescriptions.size === 0) { - const components: ComponentTypeDescription[] = []; - ComponentTypesView.instance.subject.subscribe((componentDescription: ComponentTypeDescription | string) => { - if (!isString(componentDescription)) { - components.push(componentDescription); - } else { - panel.webview.postMessage( - { - action: eventActionName, - compDescriptions: components, - registries: registries - } - ); - } - }) - } else { - panel.webview.postMessage( - { - action: eventActionName, - compDescriptions: Array.from(componentDescriptions), - registries: registries - } - ); - } + panel.webview.postMessage( + { + action: eventActionName, + compDescriptions: Array.from(componentDescriptions), + registries: registries + } + ); } From 5f6339d1600231d0b7f411c9c3c8b327b2e1fa64 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Thu, 4 Aug 2022 19:09:16 +0530 Subject: [PATCH 08/10] changed loading screen to linear progress and corresponding css changes Signed-off-by: msivasubramaniaan --- src/registriesView.ts | 15 ++++++--- src/webview/devfile-registry/app/home.tsx | 15 +++++---- .../devfile-registry/app/loading.style.tsx | 3 ++ src/webview/devfile-registry/app/loading.tsx | 32 +++++++------------ 4 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/registriesView.ts b/src/registriesView.ts index 54519edd4..e8a55d492 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -51,7 +51,7 @@ export class ComponentTypesView implements TreeDataProvider { readonly odo: Odo = getInstance(); private registries: Registry[]; private readonly compDescriptions: Set = new Set(); - public subject: Subject = new Subject(); + public subject: Subject = new Subject(); createTreeView(id: string): TreeView { if (!this.treeView) { @@ -113,6 +113,7 @@ export class ComponentTypesView implements TreeDataProvider { } public getAllComponents(): void { + let isError = false; this.compDescriptions.clear(); void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => { const components = new Set(devFileComponentTypes.map((devFileComponentType: DevfileComponentType) => devFileComponentType.Name)); @@ -132,9 +133,15 @@ export class ComponentTypesView implements TreeDataProvider { this.subject.next('refresh'); } }).catch(() => { - if (this.subject.closed) { - this.subject = new Subject(); - this.getAllComponents(); + isError = true; + }).finally(() => { + if (isError) { + if (this.subject.closed) { + this.subject = new Subject(); + this.getAllComponents(); + } else { + this.subject.next('refresh'); + } } }); }); diff --git a/src/webview/devfile-registry/app/home.tsx b/src/webview/devfile-registry/app/home.tsx index a3da04057..85c576a37 100644 --- a/src/webview/devfile-registry/app/home.tsx +++ b/src/webview/devfile-registry/app/home.tsx @@ -56,7 +56,7 @@ export const Home: React.FC = ({ }) => { const [filteredcompDescriptions, setFilteredcompDescriptions] = React.useState([]); const [registries, setRegistries] = React.useState([]); const [searchValue, setSearchValue] = React.useState(''); - const [error, setError] = React.useState(''); + const [error, setError] = React.useState(false); React.useEffect(() => { return VSCodeMessage.onMessage((message) => { @@ -64,7 +64,7 @@ export const Home: React.FC = ({ }) => { if (message.data.error) { setError(message.data.error); } else { - setError(''); + setError(false); message.data.registries.map((registry: Registry) => { if (registry.URL.toLowerCase().indexOf('https://registry.devfile.io') !== -1) { registry.state = true; @@ -75,10 +75,10 @@ export const Home: React.FC = ({ }) => { setFilteredcompDescriptions(getFilteredCompDesc(message.data.registries, message.data.compDescriptions, searchValue)); } } else if (message.data.action === 'loadingComponents') { - setError(''); - setFilteredcompDescriptions([]); - setCompDescriptions([]); - setSearchValue(''); + setError(false); + setFilteredcompDescriptions([]); + setCompDescriptions([]); + setSearchValue(''); } }); }); @@ -120,9 +120,10 @@ export const Home: React.FC = ({ }) => { /> } + {error ? : null} : - error.length > 0 ? : + error ? : } ); diff --git a/src/webview/devfile-registry/app/loading.style.tsx b/src/webview/devfile-registry/app/loading.style.tsx index cb6b37cb3..e13c17c2d 100644 --- a/src/webview/devfile-registry/app/loading.style.tsx +++ b/src/webview/devfile-registry/app/loading.style.tsx @@ -7,6 +7,9 @@ import { Theme, createStyles } from '@material-ui/core/styles'; export default (theme: Theme) => createStyles({ + loadProgress: { + color: '#EE0000' + }, loading: { display: 'flex', justifyContent: 'center', diff --git a/src/webview/devfile-registry/app/loading.tsx b/src/webview/devfile-registry/app/loading.tsx index 1ae76fda6..e9074b6de 100644 --- a/src/webview/devfile-registry/app/loading.tsx +++ b/src/webview/devfile-registry/app/loading.tsx @@ -2,11 +2,9 @@ * Copyright (c) Red Hat, Inc. All rights reserved. * Licensed under the MIT License. See LICENSE file in the project root for license information. *-----------------------------------------------------------------------------------------------*/ - -import CircularProgress from '@mui/material/CircularProgress'; -import Box from '@mui/material/Box'; import React from 'react'; -import { makeStyles, Typography } from '@material-ui/core'; +import { Box, makeStyles, Typography } from '@material-ui/core'; +import LinearProgress from '@mui/material/LinearProgress'; import loaderStyle from './loading.style'; const useLoadingStyle = makeStyles(loaderStyle); @@ -14,26 +12,18 @@ const useLoadingStyle = makeStyles(loaderStyle); export function LoadScreen() { const loadingStyle = useLoadingStyle(); return ( - - - +
+
+ + + loading components... - - + style={{ marginTop: '0.5rem', fontSize: '1.25em' }} + >Loading Registry View +
+
); } From bdf166b0f291633dc1c0270e277ad1c313cfeb8f Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Tue, 9 Aug 2022 15:25:56 +0530 Subject: [PATCH 09/10] moved registryview loader dependency from component view Signed-off-by: msivasubramaniaan --- src/extension.ts | 7 ------- src/registriesView.ts | 17 ++--------------- .../devfile-registry/registryViewLoader.ts | 16 ++++++++++++++-- 3 files changed, 16 insertions(+), 24 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index 2aa8b05b3..ca782ab45 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -31,7 +31,6 @@ import { WelcomePage } from './welcomePage'; import { ComponentsTreeDataProvider } from './componentsView'; import fsx = require('fs-extra'); -import { getAllComponents } from './webview/devfile-registry/registryViewLoader'; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -145,12 +144,6 @@ export async function activate(extensionContext: ExtensionContext): Promise void ComponentTypesView.instance.getAllComponents(); - ComponentTypesView.instance.subject.subscribe((value: string) => { - if (value === 'refresh') { - getAllComponents('getAllComponents'); - } - }); - OdoImpl.Instance.loadWorkspaceComponents(null); startTelemetry(extensionContext); diff --git a/src/registriesView.ts b/src/registriesView.ts index e8a55d492..dd91ff1f0 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -23,7 +23,6 @@ import { import { StarterProject } from './odo/componentTypeDescription'; import { vsCommand, VsCommandError } from './vscommand'; import validator from 'validator'; -import RegistryViewLoader from './webview/devfile-registry/registryViewLoader'; import { Command } from './odo/command'; import { CliExitData } from './cli'; import { Subject } from 'rxjs'; @@ -135,13 +134,8 @@ export class ComponentTypesView implements TreeDataProvider { }).catch(() => { isError = true; }).finally(() => { - if (isError) { - if (this.subject.closed) { - this.subject = new Subject(); - this.getAllComponents(); - } else { - this.subject.next('refresh'); - } + if (isError && !this.subject.closed) { + this.subject.next('refresh'); } }); }); @@ -300,7 +294,6 @@ export class ComponentTypesView implements TreeDataProvider { ComponentTypesView.instance.addRegistry(newRegistry); ComponentTypesView.instance.getAllComponents(); - RegistryViewLoader.refresh() } @vsCommand('openshift.componentTypesView.registry.remove') @@ -315,7 +308,6 @@ export class ComponentTypesView implements TreeDataProvider { ComponentTypesView.instance.removeRegistry(registry); if (!isEdit) { ComponentTypesView.instance.getAllComponents(); - RegistryViewLoader.refresh(); } } } @@ -329,9 +321,4 @@ export class ComponentTypesView implements TreeDataProvider { public static async openRegistryWebSite(registry: Registry): Promise { await commands.executeCommand('vscode.open', Uri.parse(registry.URL)); } - - @vsCommand('openshift.componentTypesView.registry.openInView') - public static async openRegistryInWebview(): Promise { - await RegistryViewLoader.loadView('Devfile Registry'); - } } diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index c89844555..89976e3af 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -105,6 +105,11 @@ export default class RegistryViewLoader { .replace('', meta); } + @vsCommand('openshift.componentTypesView.registry.openInView') + public static async openRegistryInWebview(): Promise { + await RegistryViewLoader.loadView('Devfile Registry'); + } + @vsCommand('openshift.componentTypesView.registry.closeView') static async closeRegistryInWebview(): Promise { panel?.dispose(); @@ -117,10 +122,10 @@ export default class RegistryViewLoader { } } -export function getAllComponents(eventActionName: string) { +function getAllComponents(eventActionName: string) { const registries = ComponentTypesView.instance.getListOfRegistries(); const componentDescriptions = ComponentTypesView.instance.getCompDescriptions(); - panel.webview.postMessage( + panel?.webview.postMessage( { action: eventActionName, compDescriptions: Array.from(componentDescriptions), @@ -128,3 +133,10 @@ export function getAllComponents(eventActionName: string) { } ); } + +ComponentTypesView.instance.subject.subscribe((value: string) => { + if (value === 'refresh') { + RegistryViewLoader.refresh(); + getAllComponents('getAllComponents'); + } +}); From d608d58c51450e722e9a85b22c7487107991bcf0 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Wed, 17 Aug 2022 11:54:35 +0530 Subject: [PATCH 10/10] added catch block Signed-off-by: msivasubramaniaan --- src/registriesView.ts | 2 ++ src/webview/devfile-registry/app/home.tsx | 14 +++++++------- src/webview/devfile-registry/registryViewLoader.ts | 7 +++++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/registriesView.ts b/src/registriesView.ts index dd91ff1f0..fd682a927 100644 --- a/src/registriesView.ts +++ b/src/registriesView.ts @@ -139,6 +139,8 @@ export class ComponentTypesView implements TreeDataProvider { } }); }); + }).catch(() => { + this.subject.next('error'); }); } diff --git a/src/webview/devfile-registry/app/home.tsx b/src/webview/devfile-registry/app/home.tsx index 85c576a37..e706d637c 100644 --- a/src/webview/devfile-registry/app/home.tsx +++ b/src/webview/devfile-registry/app/home.tsx @@ -56,15 +56,15 @@ export const Home: React.FC = ({ }) => { const [filteredcompDescriptions, setFilteredcompDescriptions] = React.useState([]); const [registries, setRegistries] = React.useState([]); const [searchValue, setSearchValue] = React.useState(''); - const [error, setError] = React.useState(false); + const [error, setError] = React.useState(''); React.useEffect(() => { return VSCodeMessage.onMessage((message) => { if (message.data.action === 'getAllComponents') { - if (message.data.error) { - setError(message.data.error); + if (message.data.errorMessage && message.data.errorMessage.length > 0) { + setError(message.data.errorMessage); } else { - setError(false); + setError(''); message.data.registries.map((registry: Registry) => { if (registry.URL.toLowerCase().indexOf('https://registry.devfile.io') !== -1) { registry.state = true; @@ -75,7 +75,7 @@ export const Home: React.FC = ({ }) => { setFilteredcompDescriptions(getFilteredCompDesc(message.data.registries, message.data.compDescriptions, searchValue)); } } else if (message.data.action === 'loadingComponents') { - setError(false); + setError(''); setFilteredcompDescriptions([]); setCompDescriptions([]); setSearchValue(''); @@ -120,10 +120,10 @@ export const Home: React.FC = ({ }) => { /> } - {error ? : null} + {error?.length > 0 ? : null} : - error ? : + error?.length > 0 ? : } ); diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index 89976e3af..3063909ed 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -122,14 +122,15 @@ export default class RegistryViewLoader { } } -function getAllComponents(eventActionName: string) { +function getAllComponents(eventActionName: string, error?: string) { const registries = ComponentTypesView.instance.getListOfRegistries(); const componentDescriptions = ComponentTypesView.instance.getCompDescriptions(); panel?.webview.postMessage( { action: eventActionName, compDescriptions: Array.from(componentDescriptions), - registries: registries + registries: registries, + errorMessage: error } ); } @@ -138,5 +139,7 @@ ComponentTypesView.instance.subject.subscribe((value: string) => { if (value === 'refresh') { RegistryViewLoader.refresh(); getAllComponents('getAllComponents'); + } else if (value === 'error') { + getAllComponents('getAllComponents', 'Devfile Registry is not accessible'); } });