feat: Add docs for tagging and saved searches

Author: teeohhem

docs/_snippets/_clickstack_tagging.mdx

@@ -0,0 +1,28 @@
+import Image from '@theme/IdealImage';
+import clickstackTagsSearch from '@site/static/images/use-cases/observability/clickstack-tags-search.png';
+import clickstackTagsDashboard from '@site/static/images/use-cases/observability/clickstack-tags-dashboard.png';
+
+You can add tags to dashboards and saved searches to help organize them. Tags provide a flexible way to categorize and filter based on your needs.
+
+#### How tags work
+
+- **Organization**: Tags appear in the left sidebar, where dashboards and saved searches are grouped by their assigned tags
+- **Multiple tags**: You can add one or more tags to a single item for better categorization
+- **Auto-creation**: If you assign a tag that doesn't exist yet, it will be automatically created
+- **Easy management**: You can add or remove tags at any time to adjust your organization structure
+
+This makes it easy to find related items and maintain an organized workspace as your collection grows.
+
+<div style={{display: 'flex', justifyContent: 'flex-start', marginTop: '-20px'}}>
+  <div style={{maxWidth: '600px'}}>
+    <Image img={clickstackTagsSearch} alt="Tags in saved search" size="md" border />
+  </div>
+</div>
+
+You can also select multiple tags to filter and view items across different categories:
+
+<div style={{display: 'flex', justifyContent: 'flex-start', marginTop: '-20px'}}>
+  <div style={{maxWidth: '600px'}}>
+    <Image img={clickstackTagsDashboard} alt="Multiple tags selected in dashboard" size="md" border />
+  </div>
+</div>

docs/use-cases/observability/clickstack/dashboards.md

@@ -25,6 +25,7 @@ import dashboard_edit from '@site/static/images/use-cases/observability/hyperdx-
 import dashboard_clickhouse from '@site/static/images/use-cases/observability/hyperdx-dashboard-clickhouse.png';
 import dashboard_services from '@site/static/images/use-cases/observability/hyperdx-dashboard-services.png';
 import dashboard_kubernetes from '@site/static/images/use-cases/observability/hyperdx-dashboard-kubernetes.png';
+import Tagging from '@site/docs/_snippets/_clickstack_tagging.mdx';
 
 ClickStack supports visualizing events, with built-in support for charting in HyperDX. These charts can be added to dashboards for sharing with other users.
 
@@ -151,18 +152,20 @@ The dashboard will be auto-saved. To set the dashboard name, select the title an
 
 </VerticalStepper>
 
-## Dashboards - editing visualizations {#dashboards-editing-visualizations}
+## Dashboards - Editing visualizations {#dashboards-editing-visualizations}
 
 To remove, edit, or duplicate a visualization, hover over it and use the corresponding action buttons.
 
 <Image img={dashboard_edit} alt="Dashboard edit" size="lg"/>
 
-## Dashboard listing and search {#dashboard-listing-search}
+## Dashboard - Listing and search {#dashboard-listing-search}
 
 Dashboards are accessible from the left-hand menu, with built-in search to quickly locate specific dashboards.
-
 <Image img={dashboard_search} alt="Dashboard search" size="sm"/>
 
+## Dashboards - Tagging {#tagging}
+<Tagging />
+
 ## Presets {#presets}
 
 HyperDX is deployed with out-of-the-box dashboards.

docs/use-cases/observability/clickstack/search.md

@@ -11,13 +11,17 @@ keywords: ['clickstack', 'search', 'logs', 'observability', 'full-text search']
 
 import Image from '@theme/IdealImage';
 import hyperdx_27 from '@site/static/images/use-cases/observability/hyperdx-27.png';
+import saved_search from '@site/static/images/use-cases/observability/clickstack-saved-search.png';
+import Tagging from '@site/docs/_snippets/_clickstack_tagging.mdx';
 
 ClickStack allows you to do a full-text search on your events (logs and traces). You can get started searching by just typing keywords that match your events. For example, if your log contains "Error", you can find it by just typing in "Error" in the search bar.
 
 This same search syntax is used for filtering events with Dashboards and Charts
 as well.
 
-## Natural language search syntax {#natural-language-syntax}
+## Search Features {#search-features}
+
+### Natural language search syntax {#natural-language-syntax}
 
 - Searches are not case sensitive
 - Searches match by whole word by default (ex. `Error` will match `Error here`
@@ -33,7 +37,7 @@ as well.
 
 <Image img={hyperdx_27} alt="Search" size="md"/>
 
-### Column/property search {#column-search}
+#### Column/property search {#column-search}
 
 - You can search columns and JSON/map properties by using `column:value` (ex. `level:Error`,
   `service:app`)
@@ -42,7 +46,7 @@ as well.
 - You can search for the existence of a property by using `property:*` (ex.
   `duration:*`)
 
-## Time input {#time-input}
+### Time input {#time-input}
 
 - Time input accepts natural language inputs (ex. `1 hour ago`, `yesterday`,
   `last week`)
@@ -52,14 +56,31 @@ as well.
   easy debugging of time queries.
 - You can highlight a histogram bar to zoom into a specific time range as well.
 
-## SQL search syntax {#sql-syntax}
+### SQL search syntax {#sql-syntax}
 
 You can optionally toggle search inputs to be in SQL mode. This will accept any valid
 SQL WHERE clause for searching. This is useful for complex queries that cannot be
 expressed in Lucene syntax.
 
-## Select statement  {#select-statement}
+### Select statement  {#select-statement}
 
 To specify the columns to display in the search results, you can use the `SELECT`
 input. This is a SQL SELECT expression for the columns to select in the search page.
 Aliases are not supported at this time (ex. you can not use `column as "alias"`).
+
+## Saved searches {#saved-searches}
+
+You can save your searches for quick access later. Once saved, your searches will appear in the left sidebar, making it easy to revisit frequently used search queries without having to reconstruct them.
+
+To save a search, simply configure your search query and click the save button. You can give your saved search a descriptive name to help identify it later.
+
+<Image img={saved_search} alt="Saving a Search" size="md" />
+
+### Adding alerts to saved searches {#alerts-on-saved-searches}
+
+Saved searches can be monitored with alerts to notify you when certain conditions are met. You can set up alerts to trigger when the number of events matching your saved search exceeds or falls below a specified threshold. 
+
+For more information on setting up and configuring alerts, see the [Alerts documentation](/use-cases/observability/clickstack/alerts).
+
+### Tagging {#tagging}
+<Tagging />