Merge pull request #1038 from wavefrontHQ/shavi-revamped-alert-browser

Revamped alert browser list page changes
wavefrontHQ · Apr 16, 2024 · af915b0 · af915b0
2 parents 761da56 + 965d79c
commit af915b0
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 30 deletions.
diff --git a/images/alert_firing.png b/images/alert_firing.png
diff --git a/images/alert_tag_add.png b/images/alert_tag_add.png
diff --git a/images/alert_tag_path.png b/images/alert_tag_path.png
diff --git a/images/alert_versions.png b/images/alert_versions.png
diff --git a/images/alerts_filter.png b/images/alerts_filter.png
diff --git a/images/delete_alert.png b/images/delete_alert.png
diff --git a/images/edit_alert.png b/images/edit_alert.png
diff --git a/images/select-deleted-alerts.png b/images/select-deleted-alerts.png
diff --git a/images/show_firings.png b/images/show_firings.png
diff --git a/pages/doc/alerts.md b/pages/doc/alerts.md
@@ -213,7 +213,7 @@ For each alert, the Alerts Browser includes detailed information. For example, a
 
 Follow these steps for a tour:
 1. Click the ellipsis icon to the left for a menu.
-2. Click the chart icon next to the status for alert details. If the alert is firing, click to examine the alert in Alert Viewer.
+2. Click the chart icon under the **State** column for alert details. If the alert is firing, click to examine the alert in Alert Viewer.
 3. View the alert condition and points.
 4. View details below the severity:
   - View the last affected series, including the affected sources and point tags.
@@ -255,38 +255,44 @@ Alert version history shows:
 You can revert back to a past alert version or clone a past alert version.
 <br/><br/>.
 </td>
-<td width="40%"><img src="images/alert_history.png" alt="alert history selected in menu"></td>
+<td width="40%"><img src="images/alert_versions.png" alt="alert history selected in menu."></td>
 </tr>
 </tbody>
 </table>
 
 
-
-
-
-### Step 5: Organize Related Alerts With Tags
+### Step 5: Organize Related Alerts with Tags
 
 You can use alert tags to organize related alerts into categories. Alert tags are especially useful for setting up [maintenance  windows](maintenance_windows_managing.html). You can:
 * [Search or filter](wavefront_searching.html) the list of alerts in the Alerts Browser to show only a category of alerts.
 * Suppress a category of alerts during a [maintenance window](maintenance_windows_managing.html).
 * [Reference a group of alert metrics](alerts_dependencies.html#referencing-alert-metrics) in a single expression.
 
 <table style="width: 100%;">
-<tbody>
-<tr>
-<td width="70%">
-<br/>
-To add a new or existing alert tag at any time:
-<ul>
-<li>Set the <strong>Tags</strong> property when you create or edit the alert. </li>
-<li>Click plus (<strong>+</strong>) at the bottom of the alert in the Alerts Browser.</li>
-<li>Select one or more alerts in the Alerts Browser and click <strong>+Tag</strong> or <strong>-Tag</strong></li>
-</ul>
-<p>For example, you might assign tags like networkOps, underDevelopment, and eastCoast. All users can later search for one or more of these tags to find any other alerts that are in the same category or combination of categories.</p>
-</td>
-<td width="30%"><img src="images/alert_tag_add.png" alt="Alerts Browser, + selected for single alert, Add Existing Tag and Create New Tag options"></td>
-</tr>
-</tbody>
+  <tbody>
+    <tr>
+      <td width="70%">
+        <br/>
+        To add a new or existing alert tag at any time:
+        <ul>
+          <li>
+            Set the <strong>Tags</strong> property when you create or edit the alert.
+            </li>
+          <li>
+            In the Alerts Browser, expand to get the details view of an alert, and click plus (<strong>+</strong>) under <strong>Alert Tags</strong>.
+          </li>
+          <li>
+            Select one or more alerts in the Alerts Browser and click <strong>+Tag</strong> or <strong>-Tag</strong>
+          </li>
+        </ul>
+        <p>For example, you might assign tags like networkOps, underDevelopment, and eastCoast. All users can later search for one or more of these tags to find any other alerts that are in the same category or combination of categories.</p>
+        {% include note.html content="If you want to add a new tag in the revamped Alerts Browser, enter the name of the tag and click plus icon next to the new tag name. " %}
+      </td>
+      <td width="30%">
+        <img src="images/alert_tag_add.png" alt="Alerts Browser, + selected for single alert, Add Existing Tag and Create New Tag options">
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 
@@ -296,10 +302,10 @@ To add a new or existing alert tag at any time:
 ### Step 6: (Optional) Use Multi-Level Alert Tags
 
 If your environment has a nested set of categories, you can use alert tag paths. For example, suppose you have created a group of alerts that you use as demo examples, and:
-* Within the demo group, some alerts monitor network activity, while others monitor request latency.
-* Within each subgroup, some alerts monitor production applications, while others monitor development applications.
+* Within the demo group, some alerts monitor network activity.
+* Within each subgroup, some alerts monitor production applications.
 
-To manage these alerts, you assign the tag paths `example.network.prod`, `example.network.dev`, `example.latency.prod`, and `example.latency.dev`. The Alerts Browser below shows the tag paths as a hierarchy under **Tag Paths** on the left. You can click **example** and then **network** to view all alerts that have a tag path that starts with `example.network`.
+To manage these alerts, you assign the tag paths `example.network.prod` and `example.latency.prod`. The Alerts Browser below shows the tag paths as a hierarchy under **Tag Paths** on the left. You can click **example** and then **network** to view all alerts that have a tag path that starts with `example.network`.
 
 ![Alert tag path](images/alert_tag_path.png)
 

diff --git a/pages/doc/alerts_delayed_data.md b/pages/doc/alerts_delayed_data.md
@@ -86,7 +86,6 @@ You can use either of the following techniques (or both):
 * Use the `lag()` function in the alert condition.
 * Increase the length of the alert check time window.
 
-
 ### Adjust the Alert Condition
 
 You can use the [`lag()`](ts_lag.html) function in an alert condition to shift the alert check time window back in time. Pick a time window that you think might be old enough to contain backfilled values. Without `lag()`, the alert check time window ends immediately before alert checking occurs, which is too soon for backfilling to occur.

diff --git a/pages/doc/alerts_states_lifecycle.md b/pages/doc/alerts_states_lifecycle.md
@@ -175,17 +175,15 @@ Alert checks are based on data that is summarized every minute.  Consequently, i
 
 ### Viewing Firing Alerts
 
-When you hover over **Alerting** on the toolbar, you can see how many alerts are firing.
-
 <table style="width: 100%;">
 <tbody>
 <tr>
-<td width="50%">
+<td width="70%">
 <br/>
 The filter bar at the left of the Alerts Browser shows the number of firing alerts by severity. For multi-threshold alerts, we list each alert only for the highest severity even if lower severity conditions are also met.
 <br/><br/>
-Click FIRING to filter the list of alerts</td>
-<td width="50%"><img src="/images/alerts_filter.png" alt="Alerts in different states at the top, below the filter options with FIRING selected."></td>
+Click FIRING to filter the list of alerts.</td>
+<td width="30%"><img src="/images/alerts_filter.png" alt="Alerts in different states at the top, below the filter options with FIRING selected."></td>
 </tr>
 </tbody>
 </table>