Azure: Show resource group in picker (#110442)

* Show resource group in picker

* Trigger build

public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.test.tsx

@@ -84,4 +84,75 @@ describe('NestedRow', () => {
     const box = screen.queryByRole('checkbox');
     expect(box).toBeChecked();
   });
+
+  it('should display the resource group if available', () => {
+    render(
+      <table>
+        <tbody>
+          <NestedRow
+            {...defaultProps}
+            row={{
+              id: '1',
+              uri: '/subscriptions/1/resourceGroups/test-rg/providers/Microsoft.Compute/virtualMachines/test-vm',
+              name: '1',
+              type: ResourceRowType.Resource,
+              typeLabel: '1',
+            }}
+            selectableEntryTypes={[ResourceRowType.Resource]}
+            selectedRows={[{ ...defaultProps.row, uri: defaultProps.row.uri.toUpperCase() }]}
+          />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByText('test-rg')).toBeInTheDocument();
+  });
+
+  it('should not display the resource group if row is a subscription', () => {
+    render(
+      <table>
+        <tbody>
+          <NestedRow
+            {...defaultProps}
+            row={{
+              id: '1',
+              uri: '/subscriptions/1',
+              name: '1',
+              type: ResourceRowType.Subscription,
+              typeLabel: '1',
+            }}
+            selectableEntryTypes={[ResourceRowType.Resource]}
+            selectedRows={[{ ...defaultProps.row, uri: defaultProps.row.uri.toUpperCase() }]}
+          />
+        </tbody>
+      </table>
+    );
+
+    const rg = screen.queryByText('test-rg');
+    expect(rg).not.toBeInTheDocument();
+  });
+
+  it('should not display the resource group if row is a resource group', () => {
+    render(
+      <table>
+        <tbody>
+          <NestedRow
+            {...defaultProps}
+            row={{
+              id: '1',
+              uri: '/subscriptions/1/resourceGrops/test-rg',
+              name: '1',
+              type: ResourceRowType.ResourceGroup,
+              typeLabel: '1',
+            }}
+            selectableEntryTypes={[ResourceRowType.Resource]}
+            selectedRows={[{ ...defaultProps.row, uri: defaultProps.row.uri.toUpperCase() }]}
+          />
+        </tbody>
+      </table>
+    );
+
+    const rg = screen.queryByText('test-rg');
+    expect(rg).not.toBeInTheDocument();
+  });
 });

public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.tsx

@@ -7,7 +7,7 @@ import { FadeTransition, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 import { NestedEntry } from './NestedEntry';
 import getStyles from './styles';
 import { ResourceRow, ResourceRowGroup, ResourceRowType } from './types';
-import { findRow } from './utils';
+import { findRow, parseResourceURI } from './utils';
 
 interface NestedRowProps {
   row: ResourceRow;
@@ -36,6 +36,7 @@ const NestedRow = ({
   const isSelected = !!selectedRows.find((v) => v.uri.toLowerCase() === row.uri.toLowerCase());
   const isDisabled = !isSelected && disableRow(row, selectedRows);
   const isOpen = rowStatus === 'open';
+  const parsedURI = parseResourceURI(row.uri);
 
   const onRowToggleCollapse = async () => {
     if (rowStatus === 'open') {
@@ -63,7 +64,7 @@ const NestedRow = ({
   return (
     <>
       <tr className={cx(styles.row, isDisabled && styles.disabledRow)} key={row.id}>
-        <td className={styles.cell}>
+        <td className={styles.cell} title={row.name}>
           <NestedEntry
             level={level}
             isSelected={isSelected}
@@ -77,9 +78,23 @@ const NestedRow = ({
           />
         </td>
 
-        <td className={styles.cell}>{row.typeLabel}</td>
+        <td
+          className={styles.cell}
+          // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+          title={parsedURI.resourceGroup && row.type === ResourceRowType.Resource ? parsedURI.resourceGroup : '-'}
+        >
+          {
+            // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+            parsedURI.resourceGroup && row.type === ResourceRowType.Resource ? parsedURI.resourceGroup : '-'
+          }
+        </td>
+        <td className={styles.cell} title={row.typeLabel}>
+          {row.typeLabel}
+        </td>
 
-        <td className={styles.cell}>{row.location ?? '-'}</td>
+        <td className={styles.cell} title={row.location ?? '-'}>
+          {row.location ?? '-'}
+        </td>
       </tr>
 
       {isOpen &&

public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx

@@ -310,6 +310,9 @@ const ResourcePicker = ({
               <td className={styles.cell}>
                 <Trans i18nKey="components.resource-picker.header-scope">Scope</Trans>
               </td>
+              <td className={styles.cell}>
+                <Trans i18nKey="components.resource-picker.header-resource-group">Resource Group</Trans>
+              </td>
               <td className={styles.cell}>
                 <Trans i18nKey="components.resource-picker.header-type">Type</Trans>
               </td>

public/app/plugins/datasource/azuremonitor/locales/en-US/grafana-azure-monitor-datasource.json

@@ -231,6 +231,7 @@
       "button-apply": "Apply",
       "button-cancel": "Cancel",
       "header-location": "Location",
+      "header-resource-group": "Resource Group",
       "header-scope": "Scope",
       "header-type": "Type",
       "heading-selection": "Selection",