[Alerting Insights] - Use Grafana feature flag system (#74749)

Use Grafana feature flag system

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -134,6 +134,7 @@ Experimental features might be changed or removed without prior notice.
 | `sseGroupByDatasource`                      | Send query to the same datasource in a single request when using server side expressions                     |
 | `requestInstrumentationStatusSource`        | Include a status source label for request metrics and logs                                                   |
 | `wargamesTesting`                           | Placeholder feature flag for internal testing                                                                |
+| `alertingInsights`                          | Show the new alerting insights landing page                                                                  |
 
 ## Development feature toggles
 

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -124,4 +124,5 @@ export interface FeatureToggles {
   sseGroupByDatasource?: boolean;
   requestInstrumentationStatusSource?: boolean;
   wargamesTesting?: boolean;
+  alertingInsights?: boolean;
 }

pkg/services/featuremgmt/registry.go

@@ -737,5 +737,12 @@ var (
 			FrontendOnly: false,
 			Owner:        hostedGrafanaTeam,
 		},
+		{
+			Name:         "alertingInsights",
+			Description:  "Show the new alerting insights landing page",
+			FrontendOnly: true,
+			Stage:        FeatureStageExperimental,
+			Owner:        grafanaAlertingSquad,
+		},
 	}
 )

pkg/services/featuremgmt/toggles_gen.csv

@@ -105,3 +105,4 @@ newBrowseDashboards,preview,@grafana/grafana-frontend-platform,false,false,false
 sseGroupByDatasource,experimental,@grafana/observability-metrics,false,false,false,false
 requestInstrumentationStatusSource,experimental,@grafana/plugins-platform-backend,false,false,false,false
 wargamesTesting,experimental,@grafana/hosted-grafana-team,false,false,false,false
+alertingInsights,experimental,@grafana/alerting-squad,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -430,4 +430,8 @@ const (
 	// FlagWargamesTesting
 	// Placeholder feature flag for internal testing
 	FlagWargamesTesting = "wargamesTesting"
+
+	// FlagAlertingInsights
+	// Show the new alerting insights landing page
+	FlagAlertingInsights = "alertingInsights"
 )

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

@@ -6,7 +6,6 @@ export enum AlertingFeature {
   NotificationPoliciesV2MatchingInstances = 'notification-policies.v2.matching-instances',
   DetailsViewV2 = 'details-view.v2',
   ContactPointsV2 = 'contact-points.v2',
-  InsightsPage = 'insights-page',
 }
 
 const FEATURES: FeatureDescription[] = [
@@ -22,9 +21,5 @@ const FEATURES: FeatureDescription[] = [
     name: AlertingFeature.DetailsViewV2,
     defaultValue: false,
   },
-  {
-    name: AlertingFeature.InsightsPage,
-    defaultValue: false,
-  },
 ];
 export default FEATURES;

public/app/features/alerting/unified/home/Home.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
-import { Enable, Disable } from 'react-enable';
 
+import { config } from '@grafana/runtime';
 import { Tab, TabContent, TabsBar } from '@grafana/ui';
 
 import { AlertingPageWrapper } from '../components/AlertingPageWrapper';
-import { AlertingFeature } from '../features';
 
 import GettingStarted, { WelcomeHeader } from './GettingStarted';
 import Insights from './Insights';
@@ -14,36 +13,38 @@ type HomeTabs = 'insights' | 'gettingStarted';
 export default function Home() {
   const [activeTab, setActiveTab] = useState<HomeTabs>('insights');
 
+  const alertingInsightsEnabled = config.featureToggles.alertingInsights;
   return (
     <AlertingPageWrapper pageId={'alerting'}>
-      <Enable feature={AlertingFeature.InsightsPage}>
-        <WelcomeHeader />
-        <TabsBar>
-          <Tab
-            key={'insights'}
-            label={'Insights'}
-            active={activeTab === 'insights'}
-            onChangeTab={() => {
-              setActiveTab('insights');
-            }}
-          />
-          <Tab
-            key={'gettingStarted'}
-            label={'Overview'}
-            active={activeTab === 'gettingStarted'}
-            onChangeTab={() => {
-              setActiveTab('gettingStarted');
-            }}
-          />
-        </TabsBar>
-        <TabContent>
-          {activeTab === 'insights' && <Insights />}
-          {activeTab === 'gettingStarted' && <GettingStarted />}
-        </TabContent>
-      </Enable>
-      <Disable feature={AlertingFeature.InsightsPage}>
-        <GettingStarted showWelcomeHeader={true} />
-      </Disable>
+      {alertingInsightsEnabled && (
+        <>
+          <WelcomeHeader />
+          <TabsBar>
+            <Tab
+              key={'insights'}
+              label={'Insights'}
+              active={activeTab === 'insights'}
+              onChangeTab={() => {
+                setActiveTab('insights');
+              }}
+            />
+            <Tab
+              key={'gettingStarted'}
+              label={'Overview'}
+              active={activeTab === 'gettingStarted'}
+              onChangeTab={() => {
+                setActiveTab('gettingStarted');
+              }}
+            />
+          </TabsBar>
+          <TabContent>
+            {activeTab === 'insights' && <Insights />}
+            {activeTab === 'gettingStarted' && <GettingStarted />}
+          </TabContent>
+        </>
+      )}
+
+      {!alertingInsightsEnabled && <GettingStarted showWelcomeHeader={true} />}
     </AlertingPageWrapper>
   );
 }