Alerting: Make nested folders work in Alert List Panel (#103550)

public/app/features/alerting/unified/utils/rules.ts

@@ -293,7 +293,13 @@ export const flattenCombinedRules = (rules: CombinedRuleNamespace[]) => {
     groups.forEach(({ name: groupName, rules }) => {
       rules.forEach((rule) => {
         if (rule.promRule && isAlertingRule(rule.promRule)) {
-          acc.push({ dataSourceName: getRulesSourceName(rulesSource), namespaceName, groupName, ...rule });
+          acc.push({
+            dataSourceName: getRulesSourceName(rulesSource),
+            namespaceName,
+            groupName,
+            ...rule,
+            namespace: { ...rule.namespace, uid: rule.promRule.folderUid },
+          });
         }
       });
     });

public/app/plugins/panel/alertlist/UnifiedAlertList.tsx

@@ -309,9 +309,9 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: Combined
     );
   });
 
-  if (options.folder) {
+  if (options.folder && options.folder.uid) {
     filteredRules = filteredRules.filter((rule) => {
-      return rule.namespaceName === options.folder.title;
+      return rule.namespace.uid === options.folder.uid;
     });
   }
   if (options.datasource) {

public/app/plugins/panel/alertlist/UnifiedalertList.test.tsx

@@ -108,7 +108,7 @@ const defaultOptions: UnifiedAlertListOptions = {
   groupBy: [''],
   alertName: 'test',
   showInstances: false,
-  folder: { id: 1, title: 'test folder' },
+  folder: { uid: 'abc', title: 'test folder' },
   stateFilter: { firing: true, pending: false, noData: false, normal: true, error: false, recovering: false },
   alertInstanceLabelFilter: '',
   datasource: 'grafana',

public/app/plugins/panel/alertlist/module.tsx

@@ -1,8 +1,7 @@
 import { DataSourceInstanceSettings, PanelPlugin } from '@grafana/data';
 import { Button, Stack } from '@grafana/ui';
-import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
+import { NestedFolderPicker } from 'app/core/components/NestedFolderPicker/NestedFolderPicker';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
-import { PermissionLevelString } from 'app/types';
 
 import {
   GRAFANA_DATASOURCE_NAME,
@@ -118,7 +117,14 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
               type={SUPPORTED_RULE_SOURCE_TYPES}
               noDefault
               current={props.value}
-              onChange={(ds: DataSourceInstanceSettings) => props.onChange(ds.name)}
+              onChange={(ds: DataSourceInstanceSettings) => {
+                // If we're changing the datasource, clear the folder selection
+                // as otherwise we might still be accidentally filtering out alerts
+                if (ds.uid !== 'grafana') {
+                  props.context.options.folder = null;
+                }
+                return props.onChange(ds.name);
+              }}
             />
             <Button variant="secondary" onClick={() => props.onChange(null)}>
               Clear
@@ -137,15 +143,13 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       defaultValue: null,
       editor: function RenderFolderPicker(props) {
         return (
-          <OldFolderPicker
-            enableReset={true}
-            showRoot={false}
-            allowEmpty={true}
-            initialTitle={props.value?.title}
-            initialFolderUid={props.value?.uid}
-            permissionLevel={PermissionLevelString.View}
-            onClear={() => props.onChange('')}
+          <NestedFolderPicker
+            clearable
+            showRootFolder={false}
             {...props}
+            onChange={(uid, title) => props.onChange({ uid, title })}
+            value={props.value?.uid}
+            permission="view"
           />
         );
       },

public/app/plugins/panel/alertlist/types.ts

@@ -34,7 +34,7 @@ export interface UnifiedAlertListOptions {
   groupBy: string[];
   alertName: string;
   showInstances: boolean;
-  folder: { id: number; title: string };
+  folder: { uid: string; title: string };
   stateFilter: StateFilter;
   alertInstanceLabelFilter: string;
   datasource: string;

public/app/plugins/panel/alertlist/util.test.tsx

@@ -13,7 +13,7 @@ const defaultOption: UnifiedAlertListOptions = {
   groupBy: [''],
   alertName: 'test',
   showInstances: false,
-  folder: { id: 1, title: 'test folder' },
+  folder: { uid: 'abc', title: 'test folder' },
   stateFilter: { firing: true, pending: true, noData: true, normal: true, error: true, recovering: false },
   alertInstanceLabelFilter: '',
   datasource: 'Alertmanager',

public/app/types/unified-alerting.ts

@@ -39,6 +39,7 @@ interface RuleBase {
   evaluationTime?: number;
   lastError?: string;
   uid?: string;
+  folderUid?: string;
 }
 
 export interface AlertingRule extends RuleBase {