fix: improve project group list perf and dropdown filter (#4344)

Co-authored-by: Joana Maia <jmaia@contractor.linuxfoundation.org>
Signed-off-by: Yeganathan S <63534555+skwowet@users.noreply.github.com>
Signed-off-by: Joana Maia <jmaia@contractor.linuxfoundation.org>

Author: skwowet

backend/src/database/repositories/segmentRepository.ts

@@ -463,7 +463,12 @@ class SegmentRepository extends RepositoryBase<
       if (adminSegments.length === 0) {
         return { count: 0, rows: [], limit: criteria.limit, offset: criteria.offset }
       }
-      segmentsSearchQuery += `AND sp.id IN (:adminSegments)`
+      segmentsSearchQuery += `AND EXISTS (
+        SELECT 1 FROM segments sp
+        WHERE sp."grandparentSlug" = f.slug
+          AND sp."tenantId" = f."tenantId"
+          AND sp.id IN (:adminSegments)
+      )`
       replacements.adminSegments = adminSegments
     }
 
@@ -474,23 +479,7 @@ class SegmentRepository extends RepositoryBase<
                   SELECT
                       f.id AS foundation_id,
                       f.name AS foundation_name,
-                      f.status,
-                      f."createdAt",
-                      f."updatedAt",
-                      f."sourceId",
-                      f."sourceParentId",
-                      f.slug,
-                      p.name AS project_name,
-                      p.id AS project_id,
-                      p.status AS project_status,
-                      p.slug AS project_slug,
-                      COUNT(DISTINCT sp.id) AS subproject_count,
-                      JSONB_AGG(JSONB_BUILD_OBJECT(
-                          'id', sp.id,
-                          'name', sp.name,
-                          'status', sp.status,
-                          'slug', sp.slug
-                          )) AS subprojects
+                      COUNT(DISTINCT p.id)::int AS project_count
                   FROM segments f
                   JOIN segments p
                       ON p."parentSlug" = f."slug"
@@ -503,22 +492,15 @@ class SegmentRepository extends RepositoryBase<
                   WHERE f."parentSlug" IS NULL
                     AND f."tenantId" = :tenantId
                     ${segmentsSearchQuery}
-                  GROUP BY f."id", p.id
+                  GROUP BY f.id
               )
           SELECT
               s.*,
               COUNT(*) OVER () AS "totalCount",
-              JSONB_AGG(JSONB_BUILD_OBJECT(
-                      'id', f.project_id,
-                      'name', f.project_name,
-                      'status', f.project_status,
-                      'slug', f.project_slug,
-                      'subprojects', f.subprojects
-                  )) AS projects
+              f.project_count AS "projectCount"
           FROM segments s
           JOIN foundations f ON s.id = f.foundation_id
           ${searchQuery}
-          GROUP BY s.id, f.foundation_name
           ORDER BY f.foundation_name
           ${this.getPaginationString(criteria)};
       `,

frontend/nginx.kube.conf

@@ -18,6 +18,20 @@ http {
 
     charset utf-8;
 
+    gzip on;
+    gzip_comp_level 5;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_vary on;
+    gzip_types
+        text/plain
+        text/css
+        text/javascript
+        application/javascript
+        application/json
+        application/xml
+        image/svg+xml;
+
     server {
         listen 8081 default_server;
         listen [::]:8081;

frontend/src/app.vue

@@ -23,9 +23,7 @@
 <script>
 import { mapActions } from 'vuex';
 import AppResizePage from '@/modules/layout/pages/resize-page.vue';
-import { mapActions as piniaMapActions, storeToRefs } from 'pinia';
-import { useActivityStore } from '@/modules/activity/store/pinia';
-import { useActivityTypeStore } from '@/modules/activity/store/type';
+import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import useSessionTracking from '@/shared/modules/monitoring/useSessionTracking';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
@@ -58,8 +56,10 @@ export default {
     tenant: {
       handler(tenant, oldTenant) {
         if (tenant?.id && tenant.id !== oldTenant?.id) {
-          this.fetchActivityTypes();
-          this.fetchActivityChannels();
+          this.listProjectGroups({
+            limit: 20,
+            reset: true,
+          });
         }
       },
     },
@@ -72,10 +72,6 @@ export default {
     if (queryParameters.get('state') === 'noconnect' && window.location.pathname.includes('/integration')) {
       return;
     }
-    this.listProjectGroups({
-      limit: null,
-      reset: true,
-    });
     if (['/auth/callback'].includes(window.location.pathname)) {
       return;
     }
@@ -91,12 +87,6 @@ export default {
     ...mapActions({
       resize: 'layout/resize',
     }),
-    ...piniaMapActions(useActivityStore, {
-      fetchActivityChannels: 'fetchActivityChannels',
-    }),
-    ...piniaMapActions(useActivityTypeStore, {
-      fetchActivityTypes: 'fetchActivityTypes',
-    }),
 
     handleResize() {
       this.resize({

frontend/src/modules/activity/components/activity-timeline.vue

@@ -257,7 +257,7 @@ const props = defineProps({
 });
 
 const lsSegmentsStore = useLfSegmentsStore();
-const { projectGroups, selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+const { selectedProjectGroup, selectedProjectGroupSubprojects } = storeToRefs(lsSegmentsStore);
 
 const enabledPlatforms: IdentityConfig[] = Object.values(lfIdentities);
 
@@ -274,16 +274,8 @@ const selectedSegment = ref(props.selectedSegment || null);
 
 const isMemberEntity = computed(() => props.entityType === 'member');
 
-const subprojects = computed(() => projectGroups.value.list.reduce((acc, projectGroup) => {
-  projectGroup.projects.forEach((project) => {
-    project.subprojects.forEach((subproject) => {
-      acc[subproject.id] = {
-        id: subproject.id,
-        name: subproject.name,
-      };
-    });
-  });
-
+const subprojects = computed(() => selectedProjectGroupSubprojects.value.reduce((acc, sp) => {
+  acc[sp.id] = { id: sp.id, name: sp.name };
   return acc;
 }, {}));
 
@@ -292,7 +284,7 @@ const segments = computed(() => {
     return (
       getSegmentsFromProjectGroup(selectedProjectGroup.value)?.map(
         (s) => subprojects.value[s],
-      ) || []
+      ).filter((s) => !!s) || []
     );
   }
   return (

frontend/src/modules/admin/modules/projects/components/view/lf-project-groups-table.vue

@@ -26,7 +26,10 @@
             </div>
           </lf-table-cell>
           <lf-table-cell>
-            <app-lf-project-column :projects="projectGroup.projects" />
+            <app-lf-project-column
+              :projects="projectGroup.projects || []"
+              :project-count="projectGroup.projectCount"
+            />
           </lf-table-cell>
           <lf-table-cell class="pr-2 flex justify-end">
             <app-lf-project-groups-dropdown

frontend/src/modules/admin/modules/projects/pages/project-groups-list.page.vue

@@ -84,7 +84,7 @@
 
             <div class="mb-8 flex flex-wrap gap-2.5">
               <div class="bg-gray-200 text-gray-900 text-2xs px-2 h-6 flex items-center w-fit rounded-md">
-                {{ pluralize('project', projectGroup.projects.length, true) }}
+                {{ pluralize('project', projectGroup.projectCount ?? projectGroup.projects?.length ?? 0, true) }}
               </div>
             </div>
 

frontend/src/modules/lf/layout/components/lf-banners.vue

@@ -158,11 +158,11 @@ import LfButton from '@/ui-kit/button/Button.vue';
 const ERROR_BANNER_WORKING_DAYS_DISPLAY = 3;
 
 const lsSegmentsStore = useLfSegmentsStore();
-const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+const { selectedProjectGroup, selectedProjectGroupSubprojects } = storeToRefs(lsSegmentsStore);
 const integrations = ref([]);
 const fetchIntegrationTimer = ref(null);
 const loading = ref(true);
-const subProjects = ref([]);
+const subProjects = computed(() => selectedProjectGroupSubprojects.value);
 
 const route = useRoute();
 
@@ -252,21 +252,6 @@ watch(selectedProjectGroup, (updatedProjectGroup, previousProjectGroup) => {
     loading.value = true;
     fetchIntegrations(updatedProjectGroup);
   }
-
-  if (!updatedProjectGroup) {
-    subProjects.value = [];
-  } else {
-    subProjects.value = updatedProjectGroup.projects
-      .reduce((acc, project) => {
-        project.subprojects.forEach((subproject) => {
-          if (subproject) {
-            acc.push(subproject);
-          }
-        });
-
-        return acc;
-      }, []);
-  }
 }, {
   deep: true,
   immediate: true,

frontend/src/modules/lf/layout/components/lf-menu-project-group-selection.vue

@@ -9,7 +9,7 @@
   >
     <template #reference>
       <el-input
-        v-model="model"
+        :model-value="selectedProjectGroup?.name ?? ''"
         class="project-groups-select-input"
         placeholder="Select project group..."
         readonly
@@ -64,7 +64,7 @@
                 {{ projectGroup.name }}
               </div>
               <div class="text-tiny text-gray-400">
-                {{ pluralize("project", projectGroup.projects.length, true) }}
+                {{ pluralize("project", projectGroup.projectCount ?? projectGroup.projects?.length ?? 0, true) }}
               </div>
             </div>
           </div>
@@ -147,15 +147,6 @@ let scrollContainer: HTMLElement | null = null;
 
 const { trackEvent } = useProductTracking();
 
-const model = computed({
-  get() {
-    return selectedProjectGroup.value?.name;
-  },
-  set(id) {
-    updateSelectedProjectGroup(id);
-  },
-});
-
 const queryKey = computed(() => [
   TanstackKey.ADMIN_PROJECT_GROUPS,
   searchValue.value,
@@ -230,18 +221,18 @@ onMounted(() => {
   });
 });
 
-const onOptionClick = ({ id, name }: ProjectGroup) => {
+const onOptionClick = (projectGroup: ProjectGroup) => {
   trackEvent({
     key: FeatureEventKey.SELECT_PROJECT_GROUP,
     type: EventType.FEATURE,
     properties: {
-      projectGroupId: id,
-      projectName: name,
+      projectGroupId: projectGroup.id,
+      projectName: projectGroup.name,
     },
   });
 
   isPopoverVisible.value = false;
-  updateSelectedProjectGroup(id);
+  updateSelectedProjectGroup(projectGroup);
 };
 
 onBeforeUnmount(() => {

frontend/src/modules/lf/segments/lf-segments-service.js

@@ -89,6 +89,18 @@ export class LfService {
     return response.data;
   }
 
+  static async querySubprojectsLite(body) {
+    const response = await authAxios.post(
+      '/segment/subproject/query-lite',
+      {
+        ...body,
+        excludeSegments: true,
+      },
+    );
+
+    return response.data;
+  }
+
   // Sub-projects
 
   static async createSubProject(body) {

frontend/src/modules/lf/segments/store/actions.js

@@ -270,19 +270,70 @@ export default {
 
     this.listProjects();
   },
-  updateSelectedProjectGroup(projectGroupId, sendToDashboard = true) {
-    if (projectGroupId) {
-      const projectGroup = this.projectGroups.list.find((p) => p.id === projectGroupId);
+  async fetchSubprojectsForProjectGroup(grandparentSlug) {
+    if (!grandparentSlug) {
+      this.selectedProjectGroupSubprojects = [];
+      return;
+    }
+
+    this.selectedProjectGroupSubprojects = [];
+
+    try {
+      const response = await LfService.querySubprojectsLite({
+        limit: null,
+        offset: 0,
+        filter: { grandparentSlug },
+      });
+      if (this.selectedProjectGroup?.slug === grandparentSlug) {
+        this.selectedProjectGroupSubprojects = response.rows || [];
+      }
+    } catch (e) {
+      if (this.selectedProjectGroup?.slug === grandparentSlug) {
+        this.selectedProjectGroupSubprojects = [];
+      }
+    }
+  },
+
+  async updateSelectedProjectGroup(projectGroupOrId, sendToDashboard = true) {
+    if (!projectGroupOrId) {
+      this.selectedProjectGroup = null;
+      this.selectedProjectGroupSubprojects = [];
+      return;
+    }
+
+    const id = typeof projectGroupOrId === 'string' ? projectGroupOrId : projectGroupOrId.id;
+    if (!id) {
+      this.selectedProjectGroup = null;
+      this.selectedProjectGroupSubprojects = [];
+      return;
+    }
+
+    try {
+      let projectGroup = this.projectGroups.list.find((p) => p.id === id) || null;
+      if (!projectGroup) {
+        await this.listProjectGroups({ limit: null, reset: true });
+        projectGroup = this.projectGroups.list.find((p) => p.id === id) || null;
+      }
+
+      if (!projectGroup?.id) {
+        this.selectedProjectGroup = null;
+        this.selectedProjectGroupSubprojects = [];
+        ToastStore.error('Project group could not be loaded');
+        return;
+      }
 
       this.selectedProjectGroup = projectGroup;
+      await this.fetchSubprojectsForProjectGroup(projectGroup.slug);
 
       if (sendToDashboard) {
         router.push({
           name: 'member',
         });
       }
-    } else {
+    } catch (e) {
       this.selectedProjectGroup = null;
+      this.selectedProjectGroupSubprojects = [];
+      ToastStore.error('Something went wrong while selecting the project group');
     }
   },
   doChangeProjectGroupCurrentPage(currentPage) {