[ui] Add missing loading and error messages

Adds a loading indicator for the individual and organization pages and an alert to display error messages on the individuals, organizations and jobs tables. Signed-off-by: Eva Millán <[email protected]>
chaoss · Aug 9, 2024 · fcb57d0 · fcb57d0
1 parent b83dc3c
commit fcb57d0
Show file tree

Hide file tree

Showing 12 changed files with 5,336 additions and 3,283 deletions.
diff --git a/releases/unreleased/add-missing-loading-and-error-indicators.yml b/releases/unreleased/add-missing-loading-and-error-indicators.yml
@@ -0,0 +1,9 @@
+---
+title: Improve loading and error indicators
+category: added
+author: Eva Millán <[email protected]>
+issue: 866
+notes: >
+  Added error and loading messages to improve the user experience
+  when the data takes time to load.
+  
diff --git a/ui/src/apollo/queries.js b/ui/src/apollo/queries.js
@@ -494,4 +494,6 @@ export {
   getOrganization,
   getScheduledTasks,
   findOrganization,
+  GET_INDIVIDUAL_BYUUID,
+  GET_ORGANIZATION,
 };
diff --git a/ui/src/components/IndividualsTable.stories.js b/ui/src/components/IndividualsTable.stories.js
@@ -590,3 +590,50 @@ export const HiddenHeader = () => ({
     isExpandable: false,
   }),
 });
+
+export const OnError = () => ({
+  components: { IndividualsTable },
+  template: IndividualsTableTemplate,
+  methods: {
+    queryIndividuals() {
+      throw new Error("Test error message");
+    },
+    deleteIndividual() {
+      return true;
+    },
+    getCountries() {
+      return true;
+    },
+    recommendMatches() {
+      return {
+        data: {
+          recommendMatches: {
+            jobId: "b65d2170-a560-4b20-954e-fc8c9f5afdd4",
+          },
+        },
+      };
+    },
+  },
+  provide: () => ({
+    getRecommendations: () => {},
+    getRecommendationsCount: () => {
+      return {
+        data: {
+          recommendedMerge: {
+            pageInfo: {
+              totalResults: 0,
+            },
+          },
+        },
+      };
+    },
+    manageRecommendation: () => {},
+  }),
+  data: () => ({
+    query: query,
+    hideHeader: false,
+    outlined: true,
+    isExpandable: false,
+  }),
+});
+
diff --git a/ui/src/components/IndividualsTable.vue b/ui/src/components/IndividualsTable.vue
@@ -204,6 +204,15 @@
           </v-col>
         </div>
       </template>
+      <template v-slot:no-data>
+        <v-alert v-if="error" class="text-left" density="compact" type="error">
+          {{ error }}
+        </v-alert>
+        <p v-else-if="Object.keys(filters).length > 0">
+          No results matched your search.
+        </p>
+        <p v-else>No data available</p>
+      </template>
     </v-data-table-server>
 
     <v-dialog v-model="dialog.open" max-width="500px">
@@ -447,6 +456,7 @@ export default {
         uuid: "",
       },
       selected: [],
+      error: null,
     };
   },
   computed: {
@@ -472,24 +482,30 @@ export default {
     ) {
       if (this.disabledSearch) return;
       this.loading = true;
-      let response = await this.fetchPage(
-        page,
-        this.itemsPerPage,
-        filters,
-        orderBy
-      );
-      if (response) {
-        this.individuals = formatIndividuals(
-          response.data.individuals.entities
+      this.error = null;
+      try {
+        let response = await this.fetchPage(
+          page,
+          this.itemsPerPage,
+          filters,
+          orderBy
         );
-        this.pageCount = response.data.individuals.pageInfo.numPages;
-        this.page = response.data.individuals.pageInfo.page;
-        this.totalResults = response.data.individuals.pageInfo.totalResults;
-        this.allSelected = false;
-        this.$emit("updateIndividuals", this.individuals);
+        if (response) {
+          this.individuals = formatIndividuals(
+            response.data.individuals.entities
+          );
+          this.pageCount = response.data.individuals.pageInfo.numPages;
+          this.page = response.data.individuals.pageInfo.page;
+          this.totalResults = response.data.individuals.pageInfo.totalResults;
+          this.allSelected = false;
+          this.$emit("updateIndividuals", this.individuals);
+        }
+      } catch (error) {
+        this.error = this.$getErrorMessage(error);
+      } finally {
+        this.loading = false;
+        this.selected = [];
       }
-      this.loading = false;
-      this.selected = [];
     },
     startDrag(item, isSelected, toggleSelect, event) {
       if (!isSelected(item)) {

diff --git a/ui/src/components/JobsTable.stories.js b/ui/src/components/JobsTable.stories.js
@@ -117,3 +117,27 @@ export const Empty = () => ({
     },
   }),
 });
+
+export const OnError = () => ({
+  components: { JobsTable },
+  template: JobsTableTemplate,
+  methods: {
+    getJobs() {
+      throw new Error("Test error message")
+    },
+  },
+  data: () => ({
+    query: {
+      data: {
+        jobs: {
+          entities: [],
+          pageInfo: {
+            page: 1,
+            numPages: 1,
+            totalResults: 0,
+          },
+        },
+      },
+    },
+  }),
+});
diff --git a/ui/src/components/JobsTable.vue b/ui/src/components/JobsTable.vue
@@ -15,7 +15,9 @@
         Add
       </v-btn>
     </header>
-    <v-table v-if="jobs.length > 0">
+    <v-alert v-if="error" :text="error" density="compact" type="error" />
+    <v-progress-linear v-if="isLoading" color="primary" indeterminate />
+    <v-table v-else-if="jobs.length > 0">
       <template v-slot:default>
         <thead>
           <tr>
@@ -89,18 +91,31 @@ export default {
       pageSize: 10,
       pageCount: 1,
       openModal: false,
+      error: null,
+      isLoading: false,
     };
   },
   created() {
     this.getPaginatedJobs(1);
   },
   methods: {
     async getPaginatedJobs(page = this.page, pageSize = this.pageSize) {
-      let response = await this.getJobs(page, pageSize);
-      if (response) {
-        this.jobs = response.data.jobs.entities;
-        this.pageCount = response.data.jobs.pageInfo.numPages;
-        this.page = response.data.jobs.pageInfo.page;
+      this.isLoading = true;
+      try {
+        let response = await this.getJobs(page, pageSize);
+        if (response.data.jobs.entities) {
+          this.jobs = response.data.jobs.entities;
+          this.pageCount = response.data.jobs.pageInfo.numPages;
+          this.page = response.data.jobs.pageInfo.page;
+        } else if (response.errors) {
+          this.error = `Error fetching data: ${this.$getErrorMessage(
+            response.errors
+          )}`;
+        }
+      } catch (error) {
+        this.error = `Error fetching data: ${this.$getErrorMessage(error)}`;
+      } finally {
+        this.isLoading = false;
       }
     },
     getColor(status) {

diff --git a/ui/src/components/LoadingSpinner.stories.js b/ui/src/components/LoadingSpinner.stories.js
@@ -21,4 +21,4 @@ export const Label = () => ({
   data: () => ({
     label: "Loading...",
   }),
-});
+});
diff --git a/ui/src/components/OrganizationsTable.stories.js b/ui/src/components/OrganizationsTable.stories.js
@@ -301,3 +301,41 @@ export const Groups = () => ({
     name: "Groups",
   }),
 });
+
+export const OnError = () => ({
+  components: { OrganizationsTable },
+  template: OrganizationsTableTemplate,
+  methods: {
+    getOrganizations(page, items, filters) {
+      throw new Error("Test error message");
+    },
+    enroll() {
+      return true;
+    },
+    addOrganization() {
+      return;
+    },
+    addDomain() {
+      return;
+    },
+    deleteDomain() {
+      return;
+    },
+    deleteOrganization() {
+      return;
+    },
+    addTeam() {
+      return;
+    },
+    deleteTeam() {
+      return;
+    },
+    fetchTeams() {
+      return;
+    },
+  },
+  data: () => ({
+    isGroup: false,
+    name: "Organizations",
+  }),
+});
diff --git a/ui/src/components/OrganizationsTable.vue b/ui/src/components/OrganizationsTable.vue
@@ -98,6 +98,15 @@
           ></v-text-field>
         </div>
       </template>
+      <template v-slot:no-data>
+        <v-alert v-if="error" class="text-left" density="compact" type="error">
+          {{ error }}
+        </v-alert>
+        <p v-else-if="Object.keys(filters).length > 0">
+          No results matched your search.
+        </p>
+        <p v-else>No data available</p>
+      </template>
     </v-data-table-server>
 
     <organization-modal
@@ -267,6 +276,7 @@ export default {
         teamName: "",
       },
       loading: false,
+      error: null,
     };
   },
   created() {
@@ -275,14 +285,20 @@ export default {
   methods: {
     async getTableItems(page = this.page, filters = this.filters) {
       this.loading = true;
-      let response = await this.fetchPage(page, this.itemsPerPage, filters);
-      if (response) {
-        this.items = response.entities;
-        this.pageCount = response.pageInfo.numPages;
-        this.page = response.pageInfo.page;
-        this.totalResults = response.pageInfo.totalResults;
+      this.error = null;
+      try {
+        let response = await this.fetchPage(page, this.itemsPerPage, filters);
+        if (response) {
+          this.items = response.entities;
+          this.pageCount = response.pageInfo.numPages;
+          this.page = response.pageInfo.page;
+          this.totalResults = response.pageInfo.totalResults;
+        }
+      } catch (error) {
+        this.error = this.$getErrorMessage(error);
+      } finally {
+        this.loading = false;
       }
-      this.loading = false;
     },
     confirmEnroll(event) {
       Object.assign(this.dialog, {
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,4 +21,4 @@ export const Label = () => ({ @@
       data: () => ({
         label: "Loading...",
       }),
-    });
+    });