app/vmui: improve alert styles for better readability (#10012)

### Describe Your Changes

This PR improves vmui alert styles by adding borders between rows,
introducing a hover state for easier row identification, and aligning
badges to the left.

Related issue: #9856

| Before | After |
|--------|--------|
| <img width="1427" height="1310" alt="image"
src="https://github.com/user-attachments/assets/68f3469e-95df-449f-a85d-1c0285520e2d"
/> | <img width="1427" height="1310" alt="Image"
src="https://github.com/user-attachments/assets/89501efb-c66f-402a-9d14-01c86930a5e2"
/> |

### Checklist

The following checks are **mandatory**:

- [x] My change adheres to [VictoriaMetrics contributing
guidelines](https://docs.victoriametrics.com/victoriametrics/contributing/#pull-request-checklist).
- [x] My change adheres to [VictoriaMetrics development
goals](https://docs.victoriametrics.com/victoriametrics/goals/).

---------

Signed-off-by: Yury Molodov <yurymolodov@gmail.com>
Co-authored-by: Max Kotliar <mkotlyar@victoriametrics.com>

app/vmui/packages/vmui/src/components/ExploreAlerts/BaseRule/index.tsx

@@ -154,7 +154,7 @@ const BaseRule = ({ item }: BaseRuleProps) => {
       {!!item?.alerts?.length && (
         <>
           <span className="vm-alerts-title">Alerts</span>
-          <table>
+          <table className="vm-alerts-table">
             <colgroup>
               <col className="vm-col-sm"/>
               <col className="vm-col-sm"/>
@@ -190,7 +190,7 @@ const BaseRule = ({ item }: BaseRuleProps) => {
                   </td>
                   <td>
                     <Badges
-                      align="center"
+                      align="start"
                       items={Object.fromEntries(Object.entries(alert.labels || {}).map(([name, value]) => [name, {
                         color: "passive",
                         value: value,

app/vmui/packages/vmui/src/components/ExploreAlerts/BaseRule/style.scss

@@ -44,6 +44,7 @@
     word-break: break-word;
     table-layout: fixed;
     width: 100%;
+
     td, th {
       line-height: 30px;
       padding: 4px $padding-small;
@@ -52,15 +53,33 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     th {
       white-space: nowrap;
     }
+
     td.align-center {
       text-align: center
     }
+
     th {
       font-weight: bold;
       padding: 0 $padding-small;
     }
   }
+
+  .vm-alerts-table {
+    tr {
+      border-bottom: $border-divider;
+
+      &:hover {
+        background: $color-background-hover;
+      }
+    }
+
+    td {
+      vertical-align: top;
+      padding-block: $padding-small;
+    }
+  }
 }

docs/victoriametrics/changelog/CHANGELOG.md

@@ -27,6 +27,7 @@ See also [LTS releases](https://docs.victoriametrics.com/victoriametrics/lts-rel
 ## tip
 
 * FEATURE: [vmbackupmanager](https://docs.victoriametrics.com/victoriametrics/vmbackupmanager/): add `-backupTypeTagName` flag that sets tag to each backup object with a name equal to flag value and value, that equals to backup type (`hourly`, `daily`, `monthly`, `latest`, `weekly`). Useful for [AWS S3 lifecycle policy management](https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-lifecycle-mgmt.html).
+* FEATURE: [vmui](https://docs.victoriametrics.com/victoriametrics/single-server-victoriametrics/#vmui): improve Alerting page styling so rule labels are clearly separated. See [#9856](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/9856).
 
 * BUGFIX: [vmalert](https://docs.victoriametrics.com/victoriametrics/vmalert/): don't increase `vmalert_alerts_send_errors_total` for request context cancellation, which may occur during graceful shutdown or group configuration update. See [#10027](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/10027).
 * BUGFIX: `vmstorage` in [VictoriaMetrics cluster](https://docs.victoriametrics.com/victoriametrics/cluster-victoriametrics/) and [vmsingle](https://docs.victoriametrics.com/victoriametrics/single-server-victoriametrics/): properly increment `vm_missing_metric_names_for_metric_id_total` metric.