Scopes: Group suggested dashboards (grafana#92212)

Author: bfmatei

packages/grafana-data/src/types/scopes.ts

@@ -2,6 +2,7 @@ export interface ScopeDashboardBindingSpec {
   dashboard: string;
   dashboardTitle: string;
   scope: string;
+  groups?: string[];
 }
 
 // TODO: Use Resource from apiserver when we export the types

public/app/features/scopes/ScopesFacadeScene.ts

@@ -1,3 +1,5 @@
+import { isEqual } from 'lodash';
+
 import { SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 
 import { scopesSelectorScene } from './instance';
@@ -20,7 +22,7 @@ export class ScopesFacade extends SceneObjectBase<ScopesFacadeState> {
 
     this._subs.add(
       scopesSelectorScene?.subscribeToState((newState, prevState) => {
-        if (!newState.isLoadingScopes && (prevState.isLoadingScopes || newState.scopes !== prevState.scopes)) {
+        if (!newState.isLoadingScopes && (prevState.isLoadingScopes || !isEqual(newState.scopes, prevState.scopes))) {
           this.state.handler?.(this);
         }
       })

public/app/features/scopes/internal/ScopesDashboardsScene.tsx

@@ -1,23 +1,27 @@
 import { css, cx } from '@emotion/css';
 import { isEqual } from 'lodash';
-import { Link } from 'react-router-dom';
 
-import { GrafanaTheme2, urlUtil } from '@grafana/data';
+import { GrafanaTheme2, ScopeDashboardBinding } from '@grafana/data';
 import { SceneComponentProps, SceneObjectBase, SceneObjectRef, SceneObjectState } from '@grafana/scenes';
-import { Button, CustomScrollbar, FilterInput, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { Button, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
+import { ScopesDashboardsTree } from './ScopesDashboardsTree';
+import { ScopesDashboardsTreeSearch } from './ScopesDashboardsTreeSearch';
 import { ScopesSelectorScene } from './ScopesSelectorScene';
-import { fetchSuggestedDashboards } from './api';
+import { fetchDashboards } from './api';
 import { DASHBOARDS_OPENED_KEY } from './const';
-import { SuggestedDashboard } from './types';
-import { getScopeNamesFromSelectedScopes } from './utils';
+import { SuggestedDashboardsFoldersMap } from './types';
+import { filterFolders, getScopeNamesFromSelectedScopes, groupDashboards } from './utils';
 
 export interface ScopesDashboardsSceneState extends SceneObjectState {
   selector: SceneObjectRef<ScopesSelectorScene> | null;
-  dashboards: SuggestedDashboard[];
-  filteredDashboards: SuggestedDashboard[];
+  // by keeping a track of the raw response, it's much easier to check if we got any dashboards for the currently selected scopes
+  dashboards: ScopeDashboardBinding[];
+  // this is a grouping in folders of the `dashboards` property. it is used for filtering the dashboards and folders when the search query changes
+  folders: SuggestedDashboardsFoldersMap;
+  // a filtered version of the `folders` property. this prevents a lot of unnecessary parsings in React renders
+  filteredFolders: SuggestedDashboardsFoldersMap;
   forScopeNames: string[];
   isLoading: boolean;
   isPanelOpened: boolean;
@@ -28,7 +32,8 @@ export interface ScopesDashboardsSceneState extends SceneObjectState {
 
 export const getInitialDashboardsState: () => Omit<ScopesDashboardsSceneState, 'selector'> = () => ({
   dashboards: [],
-  filteredDashboards: [],
+  folders: {},
+  filteredFolders: {},
   forScopeNames: [],
   isLoading: false,
   isPanelOpened: localStorage.getItem(DASHBOARDS_OPENED_KEY) === 'true',
@@ -80,7 +85,8 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
     if (scopeNames.length === 0) {
       return this.setState({
         dashboards: [],
-        filteredDashboards: [],
+        folders: {},
+        filteredFolders: {},
         forScopeNames: [],
         isLoading: false,
         scopesSelected: false,
@@ -89,26 +95,50 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
 
     this.setState({ isLoading: true });
 
-    const dashboards = await fetchSuggestedDashboards(scopeNames);
+    const dashboards = await fetchDashboards(scopeNames);
+    const folders = groupDashboards(dashboards);
+    const filteredFolders = filterFolders(folders, this.state.searchQuery);
 
     this.setState({
       dashboards,
-      filteredDashboards: this.filterDashboards(dashboards, this.state.searchQuery),
+      folders,
+      filteredFolders,
       forScopeNames: scopeNames,
       isLoading: false,
       scopesSelected: scopeNames.length > 0,
     });
   }
 
   public changeSearchQuery(searchQuery: string) {
+    searchQuery = searchQuery ?? '';
+
     this.setState({
-      filteredDashboards: searchQuery
-        ? this.filterDashboards(this.state.dashboards, searchQuery)
-        : this.state.dashboards,
-      searchQuery: searchQuery ?? '',
+      filteredFolders: filterFolders(this.state.folders, searchQuery),
+      searchQuery,
     });
   }
 
+  public updateFolder(path: string[], isExpanded: boolean) {
+    let folders = { ...this.state.folders };
+    let filteredFolders = { ...this.state.filteredFolders };
+    let currentLevelFolders: SuggestedDashboardsFoldersMap = folders;
+    let currentLevelFilteredFolders: SuggestedDashboardsFoldersMap = filteredFolders;
+
+    for (let idx = 0; idx < path.length - 1; idx++) {
+      currentLevelFolders = currentLevelFolders[path[idx]].folders;
+      currentLevelFilteredFolders = currentLevelFilteredFolders[path[idx]].folders;
+    }
+
+    const name = path[path.length - 1];
+    const currentFolder = currentLevelFolders[name];
+    const currentFilteredFolder = currentLevelFilteredFolders[name];
+
+    currentFolder.isExpanded = isExpanded;
+    currentFilteredFolder.isExpanded = isExpanded;
+
+    this.setState({ folders, filteredFolders });
+  }
+
   public togglePanel() {
     if (this.state.isPanelOpened) {
       this.closePanel();
@@ -135,20 +165,13 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
   public disable() {
     this.setState({ isEnabled: false });
   }
-
-  private filterDashboards(dashboards: SuggestedDashboard[], searchQuery: string): SuggestedDashboard[] {
-    const lowerCasedSearchQuery = searchQuery.toLowerCase();
-
-    return dashboards.filter(({ dashboardTitle }) => dashboardTitle.toLowerCase().includes(lowerCasedSearchQuery));
-  }
 }
 
 export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<ScopesDashboardsScene>) {
-  const { dashboards, filteredDashboards, isLoading, isPanelOpened, isEnabled, searchQuery, scopesSelected } =
+  const { dashboards, filteredFolders, isLoading, isPanelOpened, isEnabled, searchQuery, scopesSelected } =
     model.useState();
-  const styles = useStyles2(getStyles);
 
-  const [queryParams] = useQueryParams();
+  const styles = useStyles2(getStyles);
 
   if (!isEnabled || !isPanelOpened) {
     return null;
@@ -178,34 +201,25 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
 
   return (
     <div className={styles.container} data-testid="scopes-dashboards-container">
-      <div className={styles.searchInputContainer}>
-        <FilterInput
-          disabled={isLoading}
-          placeholder={t('scopes.dashboards.search', 'Search')}
-          value={searchQuery}
-          data-testid="scopes-dashboards-search"
-          onChange={(value) => model.changeSearchQuery(value)}
-        />
-      </div>
+      <ScopesDashboardsTreeSearch
+        disabled={isLoading}
+        query={searchQuery}
+        onChange={(value) => model.changeSearchQuery(value)}
+      />
 
       {isLoading ? (
         <LoadingPlaceholder
           className={styles.loadingIndicator}
           text={t('scopes.dashboards.loading', 'Loading dashboards')}
           data-testid="scopes-dashboards-loading"
         />
-      ) : filteredDashboards.length > 0 ? (
+      ) : filteredFolders[''] ? (
         <CustomScrollbar>
-          {filteredDashboards.map(({ dashboard, dashboardTitle }) => (
-            <Link
-              key={dashboard}
-              to={urlUtil.renderUrl(`/d/${dashboard}/`, queryParams)}
-              className={styles.dashboardItem}
-              data-testid={`scopes-dashboards-${dashboard}`}
-            >
-              {dashboardTitle}
-            </Link>
-          ))}
+          <ScopesDashboardsTree
+            folders={filteredFolders}
+            folderPath={['']}
+            onFolderUpdate={(path, isExpanded) => model.updateFolder(path, isExpanded)}
+          />
         </CustomScrollbar>
       ) : (
         <p className={styles.noResultsContainer} data-testid="scopes-dashboards-notFoundForFilter">
@@ -246,19 +260,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       margin: 0,
       textAlign: 'center',
     }),
-    searchInputContainer: css({
-      flex: '0 1 auto',
-    }),
     loadingIndicator: css({
       alignSelf: 'center',
     }),
-    dashboardItem: css({
-      padding: theme.spacing(1, 0),
-      borderBottom: `1px solid ${theme.colors.border.weak}`,
-
-      '& :is(:first-child)': {
-        paddingTop: 0,
-      },
-    }),
   };
 };

public/app/features/scopes/internal/ScopesDashboardsTree.tsx

@@ -0,0 +1,32 @@
+import { ScopesDashboardsTreeDashboardItem } from './ScopesDashboardsTreeDashboardItem';
+import { ScopesDashboardsTreeFolderItem } from './ScopesDashboardsTreeFolderItem';
+import { OnFolderUpdate, SuggestedDashboardsFoldersMap } from './types';
+
+export interface ScopesDashboardsTreeProps {
+  folders: SuggestedDashboardsFoldersMap;
+  folderPath: string[];
+  onFolderUpdate: OnFolderUpdate;
+}
+
+export function ScopesDashboardsTree({ folders, folderPath, onFolderUpdate }: ScopesDashboardsTreeProps) {
+  const folderId = folderPath[folderPath.length - 1];
+  const folder = folders[folderId];
+
+  return (
+    <div role="tree">
+      {Object.entries(folder.folders).map(([subFolderId, subFolder]) => (
+        <ScopesDashboardsTreeFolderItem
+          key={subFolderId}
+          folder={subFolder}
+          folders={folder.folders}
+          folderPath={[...folderPath, subFolderId]}
+          onFolderUpdate={onFolderUpdate}
+        />
+      ))}
+
+      {Object.values(folder.dashboards).map((dashboard) => (
+        <ScopesDashboardsTreeDashboardItem key={dashboard.dashboard} dashboard={dashboard} />
+      ))}
+    </div>
+  );
+}

public/app/features/scopes/internal/ScopesDashboardsTreeDashboardItem.tsx

@@ -0,0 +1,45 @@
+import { css } from '@emotion/css';
+import { Link } from 'react-router-dom';
+
+import { GrafanaTheme2, urlUtil } from '@grafana/data';
+import { Icon, useStyles2 } from '@grafana/ui';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+
+import { SuggestedDashboard } from './types';
+
+export interface ScopesDashboardsTreeDashboardItemProps {
+  dashboard: SuggestedDashboard;
+}
+
+export function ScopesDashboardsTreeDashboardItem({ dashboard }: ScopesDashboardsTreeDashboardItemProps) {
+  const styles = useStyles2(getStyles);
+
+  const [queryParams] = useQueryParams();
+
+  return (
+    <Link
+      key={dashboard.dashboard}
+      to={urlUtil.renderUrl(`/d/${dashboard.dashboard}/`, queryParams)}
+      className={styles.container}
+      data-testid={`scopes-dashboards-${dashboard.dashboard}`}
+      role="treeitem"
+    >
+      <Icon name="apps" /> {dashboard.dashboardTitle}
+    </Link>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css({
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(1),
+      padding: theme.spacing(0.5, 0),
+
+      '&:last-child': css({
+        paddingBottom: 0,
+      }),
+    }),
+  };
+};

public/app/features/scopes/internal/ScopesDashboardsTreeFolderItem.tsx

@@ -0,0 +1,71 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, useStyles2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
+
+import { ScopesDashboardsTree } from './ScopesDashboardsTree';
+import { OnFolderUpdate, SuggestedDashboardsFolder, SuggestedDashboardsFoldersMap } from './types';
+
+export interface ScopesDashboardsTreeFolderItemProps {
+  folder: SuggestedDashboardsFolder;
+  folderPath: string[];
+  folders: SuggestedDashboardsFoldersMap;
+  onFolderUpdate: OnFolderUpdate;
+}
+
+export function ScopesDashboardsTreeFolderItem({
+  folder,
+  folderPath,
+  folders,
+  onFolderUpdate,
+}: ScopesDashboardsTreeFolderItemProps) {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.container} role="treeitem" aria-selected={folder.isExpanded}>
+      <button
+        className={styles.expand}
+        data-testid={`scopes-dashboards-${folder.title}-expand`}
+        aria-label={
+          folder.isExpanded ? t('scopes.dashboards.collapse', 'Collapse') : t('scopes.dashboards.expand', 'Expand')
+        }
+        onClick={() => {
+          onFolderUpdate(folderPath, !folder.isExpanded);
+        }}
+      >
+        <Icon name={!folder.isExpanded ? 'angle-right' : 'angle-down'} />
+
+        {folder.title}
+      </button>
+
+      {folder.isExpanded && (
+        <div className={styles.children}>
+          <ScopesDashboardsTree folders={folders} folderPath={folderPath} onFolderUpdate={onFolderUpdate} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css({
+      display: 'flex',
+      flexDirection: 'column',
+      padding: theme.spacing(0.5, 0),
+    }),
+    expand: css({
+      alignItems: 'center',
+      background: 'none',
+      border: 0,
+      display: 'flex',
+      gap: theme.spacing(1),
+      margin: 0,
+      padding: 0,
+    }),
+    children: css({
+      paddingLeft: theme.spacing(4),
+    }),
+  };
+};