UI Tweaks on schedules (#1538)

# What this PR does

Adds a few display tweaks to schedules score quality display

grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css

@@ -1,31 +0,0 @@
-.root {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 3px 4px;
-}
-
-.root__type_link {
-  background: rgba(27, 133, 94, 0.15);
-  border: 1px solid var(--tag-border-success);
-  border-radius: 2px;
-}
-
-.root__type_warning {
-  background: rgba(245, 183, 61, 0.18);
-  border: 1px solid var(--tag-border-warning);
-  border-radius: 2px;
-}
-
-.text__type_link,
-.icon__type_link {
-  color: var(--tag-text-success);
-}
-
-.text__type_warning,
-.icon__type_warning {
-  color: var(--tag-text-warning);
-}
-
-.tooltip {
-  width: auto;
-}

grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.scss

@@ -0,0 +1,35 @@
+.element {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 3px 4px;
+
+  &--link {
+    background: rgba(27, 133, 94, 0.15);
+    border: 1px solid var(--tag-border-success);
+    border-radius: 2px;
+  }
+
+  &--warning {
+    background: rgba(245, 183, 61, 0.18);
+    border: 1px solid var(--tag-border-warning);
+    border-radius: 2px;
+  }
+
+  &--padding {
+    padding: 3px 10px;
+  }
+}
+
+.element__text--link,
+.element__icon--link {
+  color: var(--tag-text-success);
+}
+
+.element__text--warning,
+.element__icon--warning {
+  color: var(--tag-text-warning);
+}
+
+.tooltip {
+  width: auto;
+}

grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames/bind';
 
 import Text, { TextType } from 'components/Text/Text';
 
-import styles from './ScheduleCounter.module.css';
+import styles from './ScheduleCounter.module.scss';
 
 interface ScheduleCounterProps {
   type: Partial<TextType>;
@@ -31,7 +31,7 @@ const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
       placement="bottom-start"
       interactive
       content={
-        <div className={cx('tooltip', { [`tooltip__type_${type}`]: true })}>
+        <div className={cx('tooltip')}>
           <VerticalGroup>
             <Text type="secondary">{tooltipTitle}</Text>
             <Text type="secondary">{tooltipContent}</Text>
@@ -39,10 +39,16 @@ const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
         </div>
       }
     >
-      <div className={cx('root', { [`root__type_${type}`]: true }, { padding: addPadding })} onMouseEnter={onHover}>
+      <div
+        className={cx('root', 'element', { [`element--${type}`]: true }, { 'element--padding': addPadding })}
+        onMouseEnter={onHover}
+      >
         <HorizontalGroup spacing="xs">
-          <Icon className={cx('icon', { [`icon__type_${type}`]: true })} name={typeToIcon[type] as IconName} />
-          <Text className={cx('text', { [`text__type_${type}`]: true })}>{count}</Text>
+          <Icon
+            className={cx('element__icon', { [`element__icon--${type}`]: true })}
+            name={typeToIcon[type] as IconName}
+          />
+          <Text className={cx('element__text', { [`element__text--${type}`]: true })}>{count}</Text>
         </HorizontalGroup>
       </div>
     </Tooltip>

grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss

@@ -13,10 +13,6 @@ $score-danger: rgba(209, 14, 92, 0.15);
   line-height: 16px;
 }
 
-.link {
-  text-decoration: none !important;
-}
-
 .tag {
   font-size: 12px;
   padding: 4px 10px 3px 10px;

grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx

@@ -49,7 +49,7 @@ const ScheduleQuality: FC<ScheduleQualityProps> = ({ schedule, lastUpdated }) =>
               <VerticalGroup spacing="sm">
                 {relatedEscalationChains.map((escalationChain) => (
                   <div key={escalationChain.pk}>
-                    <PluginLink query={{ page: 'escalations', id: escalationChain.pk }} className={cx('link')}>
+                    <PluginLink query={{ page: 'escalations', id: escalationChain.pk }} className="link">
                       <Text type="link">{escalationChain.name}</Text>
                     </PluginLink>
                   </div>

grafana-plugin/src/pages/schedule/Schedule.module.css

@@ -10,6 +10,7 @@
   column-gap: 8px;
   row-gap: 8px;
   min-width: 250px;
+  align-items: center;
 }
 
 .header {

grafana-plugin/src/pages/schedules/Schedules.tsx

@@ -303,8 +303,8 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
                   relatedEscalationChains.length ? (
                     relatedEscalationChains.map((escalationChain) => (
                       <div key={escalationChain.pk}>
-                        <PluginLink query={{ page: 'escalations', id: escalationChain.pk }}>
-                          {escalationChain.name}
+                        <PluginLink query={{ page: 'escalations', id: escalationChain.pk }} className="link">
+                          <Text type="link">{escalationChain.name}</Text>
                         </PluginLink>
                       </div>
                     ))
@@ -323,7 +323,6 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
         {item.warnings?.length > 0 && (
           <ScheduleCounter
             type="warning"
-            addPadding
             count={item.warnings.length}
             tooltipTitle="Warnings"
             tooltipContent={

grafana-plugin/src/style/utils.css

@@ -1,3 +1,7 @@
+.link {
+  text-decoration: none !important;
+}
+
 .u-position-relative {
   position: relative;
 }