Provisioning: Display manager kind (#112831)

* Provisioning: Display manager kind

* Show repo id

* Show repository name

public/app/features/dashboard-scene/scene/ManagedDashboardNavBarBadge.tsx

@@ -1,26 +1,46 @@
-import { Badge } from '@grafana/ui';
-import { AnnoKeyManagerIdentity, AnnoKeyManagerKind, ManagerKind } from 'app/features/apiserver/types';
-import { DashboardMeta } from 'app/types/dashboard';
+import { skipToken } from '@reduxjs/toolkit/query';
 
-export default function ManagedDashboardNavBarBadge({ meta }: { meta: DashboardMeta }) {
-  const obj = meta.k8s;
-  if (!obj?.annotations) {
-    return;
+import { t } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
+import { Badge } from '@grafana/ui';
+import { useGetRepositoryQuery } from 'app/api/clients/provisioning/v0alpha1';
+import { ManagerKind } from 'app/features/apiserver/types';
+
+import { DashboardScene } from './DashboardScene';
+
+export const ManagedDashboardNavBarBadge = ({ dashboard }: { dashboard: DashboardScene }) => {
+  const kind = dashboard.getManagerKind();
+  const id = dashboard.getManagerIdentity();
+
+  const shouldSkipQuery = !config.featureToggles.provisioning || kind !== ManagerKind.Repo || !id;
+  const { data: repoData } = useGetRepositoryQuery(shouldSkipQuery ? skipToken : { name: id });
+
+  if (!kind) {
+    return null;
   }
 
-  let text = 'Provisioned';
-  const kind = obj.annotations?.[AnnoKeyManagerKind];
-  const id = obj.annotations?.[AnnoKeyManagerIdentity];
+  let text;
+
   switch (kind) {
     case ManagerKind.Terraform:
-      text = 'Terraform';
+      text = t('dashboard-scene.managed-badge.terraform', 'Managed by: Terraform');
       break;
     case ManagerKind.Kubectl:
-      text = 'Kubectl';
+      text = t('dashboard-scene.managed-badge.kubectl', 'Managed by: Kubectl');
       break;
     case ManagerKind.Plugin:
-      text = `Plugin: ${id}`;
+      text = t('dashboard-scene.managed-badge.plugin', 'Managed by: Plugin {{id}}', { id });
       break;
+    case ManagerKind.Repo:
+      text = t('dashboard-scene.managed-badge.repository', 'Managed by: Repository {{title}}', {
+        title: repoData?.spec?.title || id,
+        interpolation: { escapeValue: false },
+      });
+      break;
+    default:
+      console.error('Unknown kind ' + kind);
+      return null;
   }
+
   return <Badge color="purple" icon="exchange-alt" tooltip={text} key="provisioned-dashboard-button-badge" />;
-}
+};

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -38,7 +38,7 @@ import { isLibraryPanel } from '../utils/utils';
 
 import { DashboardScene } from './DashboardScene';
 import { GoToSnapshotOriginButton } from './GoToSnapshotOriginButton';
-import ManagedDashboardNavBarBadge from './ManagedDashboardNavBarBadge';
+import { ManagedDashboardNavBarBadge } from './ManagedDashboardNavBarBadge';
 import { LeftActions } from './new-toolbar/LeftActions';
 import { RightActions } from './new-toolbar/RightActions';
 import { PublicDashboardBadge } from './new-toolbar/actions/PublicDashboardBadge';
@@ -145,7 +145,7 @@ export function ToolbarActions({ dashboard }: Props) {
       group: 'icon-actions',
       condition: true,
       render: () => {
-        return <ManagedDashboardNavBarBadge meta={meta} key="managed-dashboard-badge" />;
+        return <ManagedDashboardNavBarBadge dashboard={dashboard} key="managed-dashboard-badge" />;
       },
     });
   }

public/app/features/dashboard-scene/scene/new-toolbar/LeftActions.tsx

@@ -2,8 +2,8 @@ import { ToolbarButtonRow } from '@grafana/ui';
 
 import { dynamicDashNavActions } from '../../utils/registerDynamicDashNavAction';
 import { DashboardScene } from '../DashboardScene';
+import { ManagedDashboardNavBarBadge } from '../ManagedDashboardNavBarBadge';
 
-import { ManagedDashboardBadge } from './actions/ManagedDashboardBadge';
 import { OpenSnapshotOriginButton } from './actions/OpenSnapshotOriginButton';
 import { PublicDashboardBadge } from './actions/PublicDashboardBadge';
 import { StarButton } from './actions/StarButton';
@@ -40,7 +40,7 @@ export const LeftActions = ({ dashboard }: { dashboard: DashboardScene }) => {
       },
       {
         key: 'managed-dashboard-badge',
-        component: ManagedDashboardBadge,
+        component: ManagedDashboardNavBarBadge,
         group: 'actions',
         condition: dashboard.isManaged() && canEdit,
       },

public/app/features/dashboard-scene/scene/new-toolbar/actions/ManagedDashboardBadge.tsx

@@ -1,31 +0,0 @@
-import { Badge } from '@grafana/ui';
-import { AnnoKeyManagerIdentity, AnnoKeyManagerKind, ManagerKind } from 'app/features/apiserver/types';
-
-import { ToolbarActionProps } from '../types';
-
-export const ManagedDashboardBadge = ({ dashboard }: ToolbarActionProps) => {
-  if (!dashboard.state.meta.k8s?.annotations) {
-    return null;
-  }
-
-  let text = 'Provisioned';
-  const kind = dashboard.state.meta.k8s.annotations[AnnoKeyManagerKind];
-  const id = dashboard.state.meta.k8s.annotations[AnnoKeyManagerIdentity];
-
-  switch (kind) {
-    case ManagerKind.Terraform:
-      text = 'Terraform';
-      break;
-    case ManagerKind.Kubectl:
-      text = 'Kubectl';
-      break;
-    case ManagerKind.Plugin:
-      text = `Plugin: ${id}`;
-      break;
-    case ManagerKind.Repo:
-      text = 'Repository';
-      break;
-  }
-
-  return <Badge color="purple" icon="exchange-alt" tooltip={text} key="provisioned-dashboard-button-badge" />;
-};

public/locales/en-US/grafana.json

@@ -5986,6 +5986,12 @@
       "usage-count_one": "Used on {{count}} dashboards",
       "usage-count_other": "Used on {{count}} dashboards"
     },
+    "managed-badge": {
+      "kubectl": "Managed by: Kubectl",
+      "plugin": "Managed by: Plugin {{id}}",
+      "repository": "Managed by: Repository {{title}}",
+      "terraform": "Managed by: Terraform"
+    },
     "move-provisioned-dashboard-form": {
       "api-error": "Failed to move dashboard",
       "cancel-action": "Cancel",