Alerting: Fixing minor styling issues (#45236)

public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx

@@ -2,6 +2,7 @@ import React, { FormEvent } from 'react';
 import { Label, Tooltip, Input, Icon, useStyles2 } from '@grafana/ui';
 import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
+import { Stack } from '@grafana/experimental';
 
 interface Props {
   className?: string;
@@ -20,6 +21,8 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString, q
   return (
     <div className={className}>
       <Label>
+        <Stack gap={0.5}>
+          <span>Search by label</span>
           <Tooltip
             content={
               <div>
@@ -28,9 +31,9 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString, q
               </div>
             }
           >
-          <Icon className={styles.icon} name="info-circle" size="xs" />
+            <Icon className={styles.icon} name="info-circle" size="sm" />
           </Tooltip>
-        Search by label
+        </Stack>
       </Label>
       <Input
         placeholder="Search"

public/app/features/alerting/unified/components/rules/RulesFilter.tsx

@@ -1,5 +1,5 @@
 import React, { FormEvent, useState } from 'react';
-import { Button, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
+import { Button, Field, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
 import { DataSourceInstanceSettings, GrafanaTheme, SelectableValue } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { debounce } from 'lodash';
@@ -9,6 +9,7 @@ import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { getFiltersFromUrlParams } from '../../utils/misc';
 import { DataSourcePicker } from '@grafana/runtime';
 import { alertStateToReadable } from '../../utils/rules';
+import { Stack } from '@grafana/experimental';
 
 const ViewOptions: SelectableValue[] = [
   {
@@ -87,8 +88,7 @@ const RulesFilter = () => {
   const searchIcon = <Icon name={'search'} />;
   return (
     <div className={styles.container}>
-      <div className={styles.inputWidth}>
+      <Field className={styles.inputWidth} label="Search by data source">
-        <Label>Search by data source</Label>
         <DataSourcePicker
           key={dataSourceKey}
           alerting
@@ -98,23 +98,29 @@ const RulesFilter = () => {
           onChange={handleDataSourceChange}
           onClear={clearDataSource}
         />
-      </div>
+      </Field>
       <div className={cx(styles.flexRow, styles.spaceBetween)}>
         <div className={styles.flexRow}>
-          <div className={styles.rowChild}>
+          <Field
+            className={styles.rowChild}
+            label={
               <Label>
+                <Stack gap={0.5}>
+                  <span>Search by label</span>
                   <Tooltip
                     content={
                       <div>
                         Filter rules and alerts using label querying, ex:
-                    <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
+                        <code>{`{severity="critical", instance=~"cluster-us-.+"}`}</code>
                       </div>
                     }
                   >
-                <Icon name="info-circle" className={styles.tooltip} />
+                    <Icon name="info-circle" size="sm" />
                   </Tooltip>
-              Search by label
+                </Stack>
               </Label>
+            }
+          >
             <Input
               key={queryStringKey}
               className={styles.inputWidth}
@@ -124,7 +130,7 @@ const RulesFilter = () => {
               placeholder="Search"
               data-testid="search-query-input"
             />
-          </div>
+          </Field>
           <div className={styles.rowChild}>
             <Label>State</Label>
             <RadioButtonGroup options={stateOptions} value={alertState} onChange={handleAlertStateChange} />
@@ -169,12 +175,8 @@ const getStyles = (theme: GrafanaTheme) => {
     container: css`
       display: flex;
       flex-direction: column;
-      border-bottom: 1px solid ${theme.colors.border1};
       padding-bottom: ${theme.spacing.sm};
-
-      & > div {
       margin-bottom: ${theme.spacing.sm};
-      }
     `,
     inputWidth: css`
       width: 340px;
@@ -191,11 +193,7 @@ const getStyles = (theme: GrafanaTheme) => {
       justify-content: space-between;
     `,
     rowChild: css`
-      margin-right: ${theme.spacing.sm};
+      margin: 0 ${theme.spacing.sm} 0 0;
-      margin-top: ${theme.spacing.sm};
-    `,
-    tooltip: css`
-      margin: 0 ${theme.spacing.xs};
     `,
     clearButton: css`
       margin-top: ${theme.spacing.sm};

public/app/features/alerting/unified/components/silences/SilencesFilter.tsx

@@ -7,6 +7,7 @@ import { getSilenceFiltersFromUrlParams } from '../../utils/misc';
 import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
 import { parseMatchers } from '../../utils/alertmanager';
 import { debounce, uniqueId } from 'lodash';
+import { Stack } from '@grafana/experimental';
 
 const stateOptions: SelectableValue[] = Object.entries(SilenceState).map(([key, value]) => ({
   label: key,
@@ -45,7 +46,9 @@ export const SilencesFilter = () => {
       <Field
         className={styles.rowChild}
         label={
-          <span className={styles.fieldLabel}>
+          <Label>
+            <Stack gap={0.5}>
+              <span>Search by matchers</span>
               <Tooltip
                 content={
                   <div>
@@ -54,10 +57,10 @@ export const SilencesFilter = () => {
                   </div>
                 }
               >
-              <Icon name="info-circle" />
+                <Icon name="info-circle" size="sm" />
-            </Tooltip>{' '}
+              </Tooltip>
-            Search by matchers
+            </Stack>
-          </span>
+          </Label>
         }
         invalid={inputInvalid}
         error={inputInvalid ? 'Query must use valid matcher syntax' : null}
@@ -72,11 +75,9 @@ export const SilencesFilter = () => {
           data-testid="search-query-input"
         />
       </Field>
-
+      <Field className={styles.rowChild} label="State">
-      <div className={styles.rowChild}>
-        <Label>State</Label>
         <RadioButtonGroup options={stateOptions} value={silenceState} onChange={handleSilenceStateChange} />
-      </div>
+      </Field>
       {(queryString || silenceState) && (
         <div className={styles.rowChild}>
           <Button variant="secondary" icon="times" onClick={clearFilters}>

public/app/features/alerting/unified/components/silences/SilencesTable.tsx

@@ -17,6 +17,7 @@ import { ActionIcon } from '../rules/ActionIcon';
 import { useDispatch } from 'react-redux';
 import { expireSilenceAction } from '../../state/actions';
 import { SilenceDetails } from './SilenceDetails';
+import { Stack } from '@grafana/experimental';
 
 export interface SilenceTableItem extends Silence {
   silencedAlerts: AlertmanagerAlert[];
@@ -221,7 +222,7 @@ function useColumns(alertManagerSourceName: string) {
         label: 'Actions',
         renderCell: function renderActions({ data: silence }) {
           return (
-            <>
+            <Stack gap={0.5}>
               {silence.status.state === 'expired' ? (
                 <Link href={makeAMLink(`/alerting/silence/${silence.id}/edit`, alertManagerSourceName)}>
                   <ActionButton icon="sync">Recreate</ActionButton>
@@ -239,10 +240,10 @@ function useColumns(alertManagerSourceName: string) {
                   tooltip="edit"
                 />
               )}
-            </>
+            </Stack>
           );
         },
-        size: '140px',
+        size: '147px',
       });
     }
     return columns;