Alerting: Integrate alerts with folders (#45763)

* Add Alert rules tab

* Add pagination and a simple name-based filtering

* Add name and label based filtering

* Improve pagination, handle the no results case

* Add tests for alerts folder view

* Add label filtering by clicking a tag

* Add tests for matcher to string method

* Add sorting, improve styles

* Use simple Select component for sorting

* Update default page size

* Remove unused code

* Use existingc thunk

* chore: update swagger spec

* Revert "chore: update swagger spec"

This reverts commit ee79ec7341.

* Code cleanup

* Fix ts

Co-authored-by: gillesdemey <gilles.de.mey@gmail.com>

public/app/features/folders/FolderAlerting.tsx

@@ -0,0 +1,33 @@
+import Page from 'app/core/components/Page/Page';
+import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { StoreState } from 'app/types';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useAsync } from 'react-use';
+import { AlertsFolderView } from '../alerting/unified/AlertsFolderView';
+import { getFolderByUid } from './state/actions';
+import { getLoadingNav } from './state/navModel';
+
+export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {}
+
+const FolderAlerting = ({ match }: OwnProps) => {
+  const dispatch = useDispatch();
+  const navIndex = useSelector((state: StoreState) => state.navIndex);
+  const folder = useSelector((state: StoreState) => state.folder);
+
+  const uid = match.params.uid;
+  const navModel = getNavModel(navIndex, `folder-alerting-${uid}`, getLoadingNav(1));
+
+  const { loading } = useAsync(async () => dispatch(getFolderByUid(uid)), [getFolderByUid, uid]);
+
+  return (
+    <Page navModel={navModel}>
+      <Page.Contents isLoading={loading}>
+        <AlertsFolderView folder={folder} />
+      </Page.Contents>
+    </Page>
+  );
+};
+
+export default FolderAlerting;

public/app/features/folders/state/actions.ts

@@ -1,14 +1,14 @@
 import { locationUtil } from '@grafana/data';
 import { getBackendSrv, locationService } from '@grafana/runtime';
+import { notifyApp, updateNavIndex } from 'app/core/actions';
+import { createSuccessNotification, createWarningNotification } from 'app/core/copy/appNotification';
 import { contextSrv } from 'app/core/core';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { FolderState, ThunkResult } from 'app/types';
 import { DashboardAcl, DashboardAclUpdateDTO, NewDashboardAclItem, PermissionLevel } from 'app/types/acl';
-import { notifyApp, updateNavIndex } from 'app/core/actions';
-import { createSuccessNotification, createWarningNotification } from 'app/core/copy/appNotification';
+import { lastValueFrom } from 'rxjs';
 import { buildNavModel } from './navModel';
 import { loadFolder, loadFolderPermissions, setCanViewFolderPermissions } from './reducers';
-import { lastValueFrom } from 'rxjs';
 
 export function getFolderByUid(uid: string): ThunkResult<void> {
   return async (dispatch) => {

public/app/features/folders/state/navModel.ts

@@ -29,6 +29,14 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
     url: `${folder.url}/library-panels`,
   });
 
+  model.children.push({
+    active: false,
+    icon: 'bell',
+    id: `folder-alerting-${folder.uid}`,
+    text: 'Alert rules',
+    url: `${folder.url}/alerting`,
+  });
+
   if (folder.canAdmin) {
     model.children.push({
       active: false,