Add failure to load display on ItemListLayout

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+apps-helm-charts/helm-chart.store.ts

@@ -14,8 +14,18 @@ export interface IChartVersion {
 export class HelmChartStore extends ItemStore<HelmChart> {
   @observable versions = observable.map<string, IChartVersion[]>();
 
-  loadAll() {
-    return this.loadItems(() => helmChartsApi.list());
+  async loadAll() {
+    try {
+      const res = await this.loadItems(() => helmChartsApi.list());
+
+      this.failedLoading = false;
+
+      return res;
+    } catch (error) {
+      this.failedLoading = true;
+
+      throw error;
+    }
   }
 
   getByName(name: string, repo: string) {

src/renderer/components/+apps-releases/release.store.ts

@@ -66,7 +66,9 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
 
       this.items.replace(this.sortItems(items));
       this.isLoaded = true;
+      this.failedLoading = false;
     } catch (error) {
+      this.failedLoading = true;
       console.error("Loading Helm Chart releases has failed", error);
 
       if (error.error) {

src/renderer/components/+landing-page/workspace-cluster.store.ts

@@ -65,8 +65,18 @@ export class WorkspaceClusterStore extends ItemStore<ClusterItem> {
     });
   }
 
-  loadAll() {
-    return this.loadItems(() => this.clusters);
+  async loadAll() {
+    try {
+      const res = await this.loadItems(() => this.clusters);
+
+      this.failedLoading = false;
+
+      return res;
+    } catch (error) {
+      this.failedLoading = true;
+
+      throw error;
+    }
   }
 
   async remove(clusterItem: ClusterItem) {

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -172,6 +172,10 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     return this.props.isReady ?? this.props.store.isLoaded;
   }
 
+  @computed get failedToLoad() {
+    return this.props.store.failedLoading;
+  }
+
   @computed get filters() {
     let { activeFilters } = pageFilters;
     const { isSearchable, searchFilters } = this.props;
@@ -293,6 +297,10 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   renderNoItems() {
+    if (this.failedToLoad) {
+      return <NoItems>Failed to load items.</NoItems>;
+    }
+
     if (!this.isReady) {
       return <Spinner center />;
     }
@@ -424,12 +432,13 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
 
   renderList() {
     const {
-      store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem,
-      tableProps = {}, tableId
+      store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks,
+      detailsItem, className, tableProps = {}, tableId,
     } = this.props;
     const { removeItemsDialog, items } = this;
     const { selectedItems } = store;
     const selectedItemId = detailsItem && detailsItem.getId();
+    const classNames = cssNames(className, "box", "grow", themeStore.activeTheme.type);
 
     return (
       <div className="items box grow flex column">
@@ -442,10 +451,8 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
           items={items}
           selectedItemId={selectedItemId}
           noItems={this.renderNoItems()}
-          {...({
-            ...tableProps,
-            className: cssNames("box grow", tableProps.className, themeStore.activeTheme.type),
-          })}
+          className={classNames}
+          {...tableProps}
         >
           {this.renderTableHeader()}
           {this.renderItems()}

src/renderer/item.store.ts

@@ -13,6 +13,7 @@ export abstract class ItemStore<T extends ItemObject = ItemObject> {
 
   protected defaultSorting = (item: T) => item.getName();
 
+  @observable failedLoading = false;
   @observable isLoading = false;
   @observable isLoaded = false;
   @observable items = observable.array<T>([], { deep: false });

src/renderer/kube-object.store.ts

@@ -146,18 +146,20 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
 
       const items = await this.loadItems({ namespaces, api: this.api });
 
-      this.isLoaded = true;
-
       if (merge) {
         this.mergeItems(items, { replace: false });
       } else {
         this.mergeItems(items, { replace: true });
       }
 
+      this.isLoaded = true;
+      this.failedLoading = false;
+
       return items;
     } catch (error) {
       console.error("Loading store items failed", { error, store: this });
       this.resetOnError(error);
+      this.failedLoading = true;
     } finally {
       this.isLoading = false;
     }