diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-1.png b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-1.png index c2fa52b0..fdf7a4ef 100644 Binary files a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-1.png and b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-1.png differ diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-2.png b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-2.png index 8ddcfc95..f62000c8 100644 Binary files a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-2.png and b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-2.png differ diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-3.png b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-3.png index af52eb24..89f9208f 100644 Binary files a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-3.png and b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-3.png differ diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-4.png b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-4.png index 31736c63..b4c6c734 100644 Binary files a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-4.png and b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-4.png differ diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-5.png b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-5.png deleted file mode 100644 index 89f9208f..00000000 Binary files a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-5.png and /dev/null differ diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-6.png b/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-6.png deleted file mode 100644 index b4c6c734..00000000 Binary files a/src/content/docs/docs/aws-integration/cloudwatch-logs/images/subscribing-to-aws-cloudwatch-logs-6.png and /dev/null differ diff --git a/src/content/docs/docs/aws-integration/cloudwatch-logs/index.mdx b/src/content/docs/docs/aws-integration/cloudwatch-logs/index.mdx index 52189d18..79872744 100644 --- a/src/content/docs/docs/aws-integration/cloudwatch-logs/index.mdx +++ b/src/content/docs/docs/aws-integration/cloudwatch-logs/index.mdx @@ -19,24 +19,18 @@ Lambda logs from the connected AWS account are ingested automatically. ## Subscribe a CloudWatch Log Group 1. From the KloudMate home screen, open **Settings -> Data Sources**. +2. In the list of connected AWS accounts, click the more options (⋮) icon for the account you want to ingest CloudWatch logs from, then select **CloudWatch Logs**. ![image](./images/subscribing-to-aws-cloudwatch-logs-1.png) +3. Choose the AWS region or use search to find the log groups you want. + ![image](./images/subscribing-to-aws-cloudwatch-logs-2.png) -2. In the list of connected AWS accounts, click the **Settings** icon for the account from which you want to ingest CloudWatch logs. -3. Select **CloudWatch Logs**. +4. Click **Subscribe** for each log group that you want KloudMate to ingest. ![image](./images/subscribing-to-aws-cloudwatch-logs-3.png) -4. Choose the AWS region or use search to find the required log groups. - -![image](./images/subscribing-to-aws-cloudwatch-logs-4.png) - -5. Click **Subscribe** for each log group that you want KloudMate to ingest. - -![image](./images/subscribing-to-aws-cloudwatch-logs-5.png) - ## CloudWatch Subscription Filter Limit :::note @@ -45,7 +39,7 @@ AWS allows only two subscription filters per log group. If a log group already has two active subscription filters, KloudMate cannot add another one until an existing filter is removed. -![image](./images/subscribing-to-aws-cloudwatch-logs-6.png) +![image](./images/subscribing-to-aws-cloudwatch-logs-4.png) ## Remove an Existing Subscription Filter diff --git a/src/content/docs/docs/database-monitoring/database-integrations/mongodb-monitoring.mdx b/src/content/docs/docs/database-monitoring/database-integrations/mongodb-monitoring.mdx index 5c1c7fda..8995e223 100644 --- a/src/content/docs/docs/database-monitoring/database-integrations/mongodb-monitoring.mdx +++ b/src/content/docs/docs/database-monitoring/database-integrations/mongodb-monitoring.mdx @@ -260,7 +260,7 @@ Seeing time-series data confirms that MongoDB telemetry is flowing successfully. KloudMate provides prebuilt MongoDB dashboards through [dashboard templates](https://templates.kloudmate.com/mongo-db/index.html). These dashboards visualize MongoDB server performance, operations, storage, and resource usage. -To import and start using these templates, follow the steps described in [Import from Templates](../../../visualize-data/dashboards/create-a-dashboard/). +To import and start using these templates, follow the steps described in [Importing a Dashboard](../../../visualize-data/dashboards/#importing-a-dashboard). Alternatively, use [From Template](../../../visualize-data/dashboards/create-a-dashboard/#from-template) when creating a new dashboard to pick from KloudMate's built-in templates. ## **Default MongoDB Metrics** diff --git a/src/content/docs/docs/database-monitoring/database-integrations/mssql-monitoring.mdx b/src/content/docs/docs/database-monitoring/database-integrations/mssql-monitoring.mdx index 08070f47..866bac15 100644 --- a/src/content/docs/docs/database-monitoring/database-integrations/mssql-monitoring.mdx +++ b/src/content/docs/docs/database-monitoring/database-integrations/mssql-monitoring.mdx @@ -448,7 +448,7 @@ Seeing time-series data confirms that MSSQL telemetry is flowing successfully. KloudMate provides prebuilt MSSQL dashboards through [dashboard templates](https://templates.kloudmate.com/mssql/index.html). These dashboards visualize MSSQL database performance, query operations, connections, and resource usage. -To import and start using these templates, follow the steps described in [Import from Templates](../../../visualize-data/dashboards/create-a-dashboard/). +To import and start using these templates, follow the steps described in [Importing a Dashboard](../../../visualize-data/dashboards/#importing-a-dashboard). Alternatively, use [From Template](../../../visualize-data/dashboards/create-a-dashboard/#from-template) when creating a new dashboard to pick from KloudMate's built-in templates. ## Default Metrics diff --git a/src/content/docs/docs/database-monitoring/database-integrations/mysql-monitoring.mdx b/src/content/docs/docs/database-monitoring/database-integrations/mysql-monitoring.mdx index 6fce644e..de9606c0 100644 --- a/src/content/docs/docs/database-monitoring/database-integrations/mysql-monitoring.mdx +++ b/src/content/docs/docs/database-monitoring/database-integrations/mysql-monitoring.mdx @@ -291,7 +291,7 @@ Seeing time-series data confirms that MySQL telemetry is flowing successfully. KloudMate provides prebuilt MYSQL dashboards through [dashboard templates](https://templates.kloudmate.com/MySql/index.html). These dashboards visualize MYSQL database performance, query operations, connections, and resource usage. -To import and start using these templates, follow the steps described in [Import from Templates](../../../visualize-data/dashboards/create-a-dashboard/). +To import and start using these templates, follow the steps described in [Importing a Dashboard](../../../visualize-data/dashboards/#importing-a-dashboard). Alternatively, use [From Template](../../../visualize-data/dashboards/create-a-dashboard/#from-template) when creating a new dashboard to pick from KloudMate's built-in templates. ## Default Metrics diff --git a/src/content/docs/docs/database-monitoring/database-integrations/postgresql-monitoring.mdx b/src/content/docs/docs/database-monitoring/database-integrations/postgresql-monitoring.mdx index 58766ff0..60f9792c 100644 --- a/src/content/docs/docs/database-monitoring/database-integrations/postgresql-monitoring.mdx +++ b/src/content/docs/docs/database-monitoring/database-integrations/postgresql-monitoring.mdx @@ -281,7 +281,7 @@ Seeing time-series data confirms that PostgreSQL telemetry is flowing successful KloudMate provides prebuilt PostgreSQL dashboards through [dashboard templates](https://templates.kloudmate.com/postgress/index.html). These dashboards visualize PostgreSQL database performance, query operations, connections, and resource usage. -To import and start using these templates, follow the steps described in [Import from Templates](../../../visualize-data/dashboards/create-a-dashboard/). +To import and start using these templates, follow the steps described in [Importing a Dashboard](../../../visualize-data/dashboards/#importing-a-dashboard). Alternatively, use [From Template](../../../visualize-data/dashboards/create-a-dashboard/#from-template) when creating a new dashboard to pick from KloudMate's built-in templates. ## Default Metrics for PostgreSQL diff --git a/src/content/docs/docs/infrastructure/integrations/kafka-integration.mdx b/src/content/docs/docs/infrastructure/integrations/kafka-integration.mdx index 0a91ab3c..2f915a6d 100644 --- a/src/content/docs/docs/infrastructure/integrations/kafka-integration.mdx +++ b/src/content/docs/docs/infrastructure/integrations/kafka-integration.mdx @@ -91,7 +91,7 @@ After the Agent restarts: KloudMate provides prebuilt Kafka dashboards through [dashboard templates](https://templates.kloudmate.com/kafka/index.html). These dashboards help you visualize broker availability, topic partitions, consumer lag, offsets, and replication health. -To import and start using these templates, follow the steps described in [Import from Templates](../../../visualize-data/dashboards/create-a-dashboard/). +To import and start using these templates, follow the steps described in [Importing a Dashboard](../../../visualize-data/dashboards/#importing-a-dashboard). Alternatively, use [From Template](../../../visualize-data/dashboards/create-a-dashboard/#from-template) when creating a new dashboard to pick from KloudMate's built-in templates. ## Default Kafka Metrics diff --git a/src/content/docs/docs/infrastructure/integrations/kafka-prometheus-servicemonitor-integration.mdx b/src/content/docs/docs/infrastructure/integrations/kafka-prometheus-servicemonitor-integration.mdx new file mode 100644 index 00000000..062e2190 --- /dev/null +++ b/src/content/docs/docs/infrastructure/integrations/kafka-prometheus-servicemonitor-integration.mdx @@ -0,0 +1,121 @@ +--- +title: "Kafka Prometheus ServiceMonitor Integration" +description: "Monitor a Kafka cluster on Kubernetes (for example, Bitnami) by reusing the metrics an existing Prometheus ServiceMonitor already scrapes." +sidebar: + order: 3.6 +--- + +Use this integration when a Kafka cluster (for example, a Bitnami Helm release) runs in Kubernetes and an existing Prometheus setup already scrapes it through a `ServiceMonitor`. Instead of standing up a new scrape path, you point the KloudMate Agent's Prometheus receiver at the same metrics endpoints. + +## Prerequisites + +1. The [KloudMate Agent](../../../kloudmate-agent/) deployed and running in the cluster. +2. The scrape details from the `ServiceMonitor`(s) already collecting Kafka metrics. + +## Step 1: Gather Details from the Existing ServiceMonitor + +``` +kubectl get servicemonitor -n -o yaml +``` + +From the output, note: + +1. `spec.selector.matchLabels` → identifies which Service it targets. +2. `spec.endpoints[].port` or `targetPort` → the metrics port (Bitnami defaults: `5556` for the JMX exporter, `9308` for kafka-exporter). +3. `spec.endpoints[].path` → usually `/metrics`. +4. `spec.endpoints[].interval` → match this in your scrape config to stay consistent with the existing setup. +5. `spec.namespaceSelector` → confirms the namespace to target. + +## Step 2: Define the Prometheus Receiver + +Go to **Settings → Agents**, select the Kubernetes agent, and click **Configure**. + +- If the agent runs in managed mode, add the configuration below through the [custom config override](../../../kloudmate-agent/custom-config-override/) section for the deployment collector. +- If the agent runs in manual mode, add the configuration as-is. + +```yaml +receivers: + prometheus: + config: + scrape_configs: + - job_name: 'kafka-jmx' + scrape_interval: 30s # match the ServiceMonitor's interval + metrics_path: /metrics + static_configs: + - targets: ['-kafka-metrics..svc.cluster.local:5556'] + labels: + cluster: '' + + - job_name: 'kafka-exporter' + scrape_interval: 30s + metrics_path: /metrics + static_configs: + - targets: ['-kafka-exporter..svc.cluster.local:9308'] + labels: + cluster: '' +service: + pipelines: + metrics/kafka: + receivers: [prometheus] + processors: [batch] + exporters: [otlphttp] +``` + +Replace ``, ``, and `` with your own values, and adjust the ports and interval if your `ServiceMonitor` differs from the Bitnami defaults. + +## Step 3: Restart the Agent + +If you edited the configuration directly instead of using a custom config override, restart whichever workload runs the agent: + +```bash +kubectl rollout restart deployment -n +``` + +or + +```bash +kubectl rollout restart daemonset -n +``` + +## Step 4: Validate in KloudMate + +After the agent restarts: + +- Open [Explore](../../../visualize-data/explore/) in KloudMate. +- Query one of the scraped metrics, for example: + +``` +kafka_server_brokertopicmetrics_messagesin_total + +kafka_server_replicamanager_leadercount + +kafka_consumergroup_lag +``` + +- Build dashboards or alerts once the data is visible. + +## Standard Kafka Dashboards + +To import and start using a template, follow the steps described in [Importing a Dashboard](../../../visualize-data/dashboards/#importing-a-dashboard). Alternatively, use [From Template](../../../visualize-data/dashboards/create-a-dashboard/#from-template) when creating a new dashboard to pick from KloudMate's built-in templates. + +## Metrics Collected + +This integration collects: + +- Kafka broker metrics +- Kafka topic metrics +- Kafka consumer group metrics +- Kafka Exporter metrics +- JVM metrics +- Broker health metrics +- Replication metrics +- Network metrics +- Request metrics +- Controller metrics + +## Related + +- [Kafka Integration](../kafka-integration/) — connecting directly over the Kafka protocol instead of reusing an existing ServiceMonitor. +- [Kafka JMX Exporter Integration](../kafka-jmx-exporter-integration/) — the Strimzi-native equivalent of this setup. +- [Custom config override](../../../kloudmate-agent/custom-config-override/) — how to apply this configuration to a managed agent. +- [Explore](../../../visualize-data/explore/) — where to query the collected metrics. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/alert-list-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/alert-list-panel.mdx index 65a39b87..73bd6fc2 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/alert-list-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/alert-list-panel.mdx @@ -6,7 +6,7 @@ The Alert List Panel displays a list of configured alert rules within the select When the panel type is set to Alerts List, the following settings are available under the **General** tab: -![Alert List panel settings](./images/alarm-list-panel-1.jpeg) +![Alert List panel settings](./images/alert-list-panel-1.jpeg) ### Panel diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/bar-chart-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/bar-chart-panel.mdx index 0f02caf6..c36226d3 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/bar-chart-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/bar-chart-panel.mdx @@ -9,32 +9,43 @@ When the panel type is set to Bar Chart, the following settings are available un ![image](./images/bar-chart-panel-1.jpeg) ### Panel + - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. +- **Links:** Click **Add link** to connect the panel to related resources, such as a runbook or an external dashboard. +- **Repeat options:** Set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in this editor. -![image](./images/bar-chart-panel-2.jpeg) - -![image](./images/bar-chart-panel-3.jpeg) +![image](./images/bar-chart-panel-4.png) ### Display + Control how the bar chart is visually rendered. - **Orientation:** Choose between Vertical or Horizontal bar layout. - **Stacking:** Choose between Stacked (bars stacked on top of each other) or Grouped (bars placed side by side) to control how multiple series are displayed. +![image](./images/bar-chart-panel-2.jpeg) + ### Axes + Configure how data is represented on each axis of the chart. - **X-Axis:** Use the Date Style dropdown to choose from various date formats for the horizontal axis of the chart. - **Y-Axis:** Use the Format dropdown to choose the unit of data displayed, such as Number, Percentage, or Duration. You can also set decimal places, multiply values by a number, and add a prefix or suffix. ### Legend + Choose between Table or List mode to control how query results are displayed. Use the Values selector to pick aggregate functions to show alongside each legend entry. +Switching **Orientation** to Horizontal renders the bars sideways, useful when category labels are long or when you have many categories to compare. + +![image](./images/bar-chart-panel-3.jpeg) + ### Time Range + Configure time range behavior for this panel independently from the dashboard. - **Override Dashboard Time Range:** Individual panels can use their own time range configuration. Enable this to override the time range set at the dashboard level. -- **Time Shift:** Shift the panel’s start and end time by a specified time shift expression. Use the minus (`-`) operator to subtract time, with the same units supported by the dashboard time range expressions. +- **Time Shift:** Shift the panel's start and end time by a specified time shift expression. Use the minus (`-`) operator to subtract time, with the same units supported by the dashboard time range expressions. Refer to [Time Range Expressions and Settings](../time-range-expressions-and-settings/) for supported units and syntax. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/histogram-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/histogram-panel.mdx index 1af01105..f4f6ea1e 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/histogram-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/histogram-panel.mdx @@ -2,9 +2,9 @@ title: "Histogram Panel" description: "Learn how to configure and use this visualization feature in KloudMate." --- -The Histogram Panel displays the distribution of numerical data over a selected time range. It groups values into buckets and counts how many values fall into each one. Each bar represents a bucket, the height reflects the count of values within that range, and the x-axis represents the bucket ranges themselves. +The Histogram Panel shows how numerical data is distributed over the selected time range. It groups values into buckets and counts how many fall into each one — each bar is a bucket, its height is the count, and the x-axis is the bucket range. -The Histogram Panel is useful for understanding how your data is spread across a range of values. You can use it to visualize request durations, error rates, latency distributions, or any other numerical signal. By switching the time range, you can observe how the distribution shifts after events like a deployment or a traffic spike. +Use it to visualize request durations, error rates, or latency distributions, and switch time ranges to see how the distribution shifts after a deployment or a traffic spike. When the panel type is set to Histogram, the following settings are available under the **General** tab: @@ -13,6 +13,8 @@ When the panel type is set to Histogram, the following settings are available un ### Panel - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. +- **Links:** Click **Add link** to connect the panel to related resources, such as a runbook or an external dashboard. +- **Repeat options:** Set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in this editor. ### Axes The Axes section provides controls to adjust how the distribution is visualized after data is fetched. @@ -21,9 +23,9 @@ The Axes section provides controls to adjust how the distribution is visualized - **Bucket Offset:** Shifts all bucket ranges by a fixed value. For example, an offset of +10 transforms a bucket range of \[x, y] to \[x+10, y+10]. This is useful when you want to align bucket boundaries with a specific baseline. - **Min / Max:** Constrains the visible range by discarding buckets that fall outside the specified bounds. Use this to focus on the meaningful portion of the distribution and filter out extreme values or noise. -The goal of these controls is to improve readability and make the distribution easier to interpret depending on the context and characteristics of your data. +The Y-Axis controls the count scale: set Min and Max to fix the range instead of scaling automatically, and use Format, decimals, and a prefix or suffix to control how the numbers are displayed. -![image](./images/histogram-panel-2.jpeg) +![image](./images/histogram-panel-3.jpeg) ### Legend Choose between **Table** or **List** mode to control how the legend is displayed. Use the **Values** selector to choose which aggregate values (such as Min, Max, or Mean) appear alongside each series label. Leave Values empty to display labels only. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-1.jpeg deleted file mode 100644 index 9b116dc8..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-1.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-1.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-1.png deleted file mode 100644 index 96f43b5f..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-1.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-2.jpeg deleted file mode 100644 index b3513429..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-2.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-2.png deleted file mode 100644 index 3584f35f..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-2.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-3.jpeg deleted file mode 100644 index 845b9ad1..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-3.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-3.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-3.png deleted file mode 100644 index e90e676a..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-3.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-4.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-4.jpeg deleted file mode 100644 index 3c079c28..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-4.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-4.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-4.png deleted file mode 100644 index d8447ade..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-4.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-5.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-5.jpeg deleted file mode 100644 index 0dde2fbb..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-5.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-5.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-5.png deleted file mode 100644 index 9efab221..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-5.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-6.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-6.jpeg deleted file mode 100644 index 7ae41f8b..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-6.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-6.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-6.png deleted file mode 100644 index 0f9a1222..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-6.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-7.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-7.jpeg deleted file mode 100644 index 8bb59624..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-7.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-7.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-7.png deleted file mode 100644 index 2337514d..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-7.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-expression.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-expression.png new file mode 100644 index 00000000..32a170c2 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-expression.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-menu.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-menu.png new file mode 100644 index 00000000..3f0337a9 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-menu.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-query.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-query.png new file mode 100644 index 00000000..d5c8bb7e Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-query.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-section.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-section.png new file mode 100644 index 00000000..af768e61 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-add-section.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-datasource.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-datasource.png new file mode 100644 index 00000000..fc04a1c7 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-datasource.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-general-settings.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-general-settings.png new file mode 100644 index 00000000..56ede7fd Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-general-settings.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-import-dashboards.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-import-dashboards.png new file mode 100644 index 00000000..d513272b Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-import-dashboards.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-import-templates.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-import-templates.png new file mode 100644 index 00000000..8e512793 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-import-templates.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-name-description.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-name-description.png new file mode 100644 index 00000000..61814506 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-name-description.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-overrides.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-overrides.png new file mode 100644 index 00000000..fae662ea Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-overrides.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-panel-type.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-panel-type.png new file mode 100644 index 00000000..373e65fa Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-panel-type.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-run-query.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-run-query.png new file mode 100644 index 00000000..a9ffdb48 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-run-query.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-save.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-save.png new file mode 100644 index 00000000..ec82f732 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-save.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-table-view.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-table-view.png new file mode 100644 index 00000000..be730ddc Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-table-view.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-time-range.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-time-range.png new file mode 100644 index 00000000..82bb0ffe Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/adding-a-panel-time-range.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/alarm-list-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/alarm-list-panel-1.jpeg deleted file mode 100644 index 30fc1f48..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/alarm-list-panel-1.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/alert-list-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/alert-list-panel-1.jpeg new file mode 100644 index 00000000..d51beaf2 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/alert-list-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-1.jpeg index 52cb1598..1cbfc288 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-2.jpeg index 4e692b58..a964b9da 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-2.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-2.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-3.jpeg index 8c0ca968..c3ec1c9f 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-4.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-4.png new file mode 100644 index 00000000..94350180 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/bar-chart-panel-4.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-1.jpeg index 2982b414..b9084cd0 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-2.jpeg deleted file mode 100644 index 3b1ea3d6..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-3.jpeg new file mode 100644 index 00000000..19f64779 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/histogram-panel-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/issues-list-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/issues-list-panel-1.jpeg index 1b10e1d9..5ece1208 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/issues-list-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/issues-list-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.jpeg index 2265c208..9289980e 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.png index 8def1524..92584642 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.png and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-1.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-2.jpeg deleted file mode 100644 index 65dcdc22..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/logs-list-panel-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-1.jpeg index 1b9d1a07..e48bc16f 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-2.jpeg index f824b188..823846b8 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-2.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-2.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-3.jpeg index 7bd5f199..6f08e30a 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/pie-chart-panel-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-1.jpeg index e7f4256a..d2aff859 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-2.jpeg deleted file mode 100644 index be108798..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/spans-list-panel-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.jpeg index b73e3989..a441604e 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.png b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.png deleted file mode 100644 index 4284f47d..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-1.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-2.jpeg index 739e1560..5d08191b 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-2.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-2.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-3.jpeg index 979b3f04..9edab1f3 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-4.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-4.jpeg new file mode 100644 index 00000000..c5c8256d Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/stats-panel-4.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-1.jpeg index c66066f9..1ff09fd1 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-2.jpeg deleted file mode 100644 index 0b32b384..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-3.jpeg index 958b4b3b..c35cac57 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-4.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-4.jpeg new file mode 100644 index 00000000..585c889f Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/table-panel-4.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/text-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/text-panel-1.jpeg deleted file mode 100644 index 73bad5cb..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/text-panel-1.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/text-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/text-panel-2.jpeg new file mode 100644 index 00000000..79b72f01 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/text-panel-2.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-1.jpeg deleted file mode 100644 index 67a56009..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-1.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-2.jpeg index 2ff37aef..bbd89426 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-2.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-2.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-3.jpeg index a35286ab..955d3aff 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/time-range-expressions-and-settings-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-1.jpeg index 2a5f648e..d398fafb 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-2.jpeg deleted file mode 100644 index 08222699..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-3.jpeg index 4370b35b..7bdb0737 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-4.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-4.jpeg deleted file mode 100644 index 9d92dcf5..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-4.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-5.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-5.jpeg new file mode 100644 index 00000000..7a59362e Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-5.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-6.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-6.jpeg new file mode 100644 index 00000000..88966c94 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-6.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-7.jpeg b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-7.jpeg new file mode 100644 index 00000000..2e63a4af Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/images/timeseries-panel-7.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/index.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/index.mdx index ebaa7a11..52ec3c0d 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/index.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/index.mdx @@ -1,89 +1,109 @@ --- title: "Adding a Panel" -description: "Learn how to add, configure, and customize panels on a KloudMate dashboard." +description: "Add, configure, and customize panels on a KloudMate dashboard, or group them into sections." sidebar: order: 1 label: "Introduction" --- -Panels are the individual widgets on a dashboard. Each panel visualizes a specific metric or query result. Adding panels lets you build up a complete view of the metrics you care about in one place. -From your dashboard, click **Add Panel**. A dialog appears with two options: +import { Image } from 'astro:assets'; +import panelTypeDropdown from './images/adding-a-panel-panel-type.png'; +import overridesDropdown from './images/adding-a-panel-overrides.png'; +import generalSettings from './images/adding-a-panel-general-settings.png'; + +Panels are the individual widgets on a dashboard. Each panel visualizes a specific metric or query result. Adding panels lets you build up a complete view of the metrics you care about in one place. -![image](./images/adding-a-panel-1.jpeg) +From your dashboard, click **Add** at the top right. A menu opens with three options: **Add panel**, **Add section**, and **Import**. -- **Create from Scratch:** Build a new panel with a custom query and visualization. -- **Import from Library:** Reuse a panel from a saved template or an existing dashboard to avoid rebuilding common visualizations. +- **Add panel** opens the panel editor so you can build a new panel from scratch. +- **Add section** groups panels under a collapsible heading. +- **Import** reuses a panel from a template or an existing dashboard instead of building one from scratch. -![image](./images/adding-a-panel-1.png) +## Add a Panel -## Create from Scratch +1. Click **Add panel**. The panel editor opens with a query editor at the bottom. -1. Select **Create from Scratch.** +![image](./images/adding-a-panel-add-menu.png) -2. Configure your query in the query editor at the bottom. Queries define what data the panel displays. +2. Configure your query in the query editor. Queries define what data the panel displays. -- Select a Data Source, **OpenTelemetry** or **aws/dev** (available if an AWS account is connected). +- Select a Data Source, **OpenTelemetry** or **aws/demo** (available if an AWS account is connected). -![image](./images/adding-a-panel-2.jpeg) +![image](./images/adding-a-panel-datasource.png) -- For OpenTelemetry, select the dataset (**Traces** , **Metrics** , **Logs** , etc.) and **configure the metric** , **aggregation** , **Group by** , **filters** , and **Legend Format** using the Query Builder tab. Switch to the **PromQL** tab to write [Prometheus queries](https://prometheus.io/docs/prometheus/latest/querying/basics/) directly. +- For OpenTelemetry, select the dataset (**Traces**, **Metrics**, **Logs**, etc.) and configure the metric, aggregation, group by, filters, and legend format using the Query Builder tab. Switch to the **PromQL** tab to write [Prometheus queries](https://prometheus.io/docs/prometheus/latest/querying/basics/) directly. - Add multiple queries using **Add Query** when you want to compare or combine multiple metrics in the same panel. -![image](./images/adding-a-panel-3.jpeg) +![image](./images/adding-a-panel-add-query.png) - Add expressions using **Add Expression** to apply math, reduce, or condition logic across query results. -![image](./images/adding-a-panel-4.jpeg) +![image](./images/adding-a-panel-add-expression.png) -For more information on setting up queries, see [Creating Alerts](../../../alerts/create-alerts/). For expressions, see [Alert Expressions](../../../alerts/expressions/). +For more on setting up queries, see [Creating Alerts](../../../alerts/create-alerts/). For expressions, see [Alert Expressions](../../../alerts/expressions/). 3. Click **Run Query** to execute the query and preview the result in the visualization area. Running the query lets you verify the data looks correct before saving the panel. -![image](./images/adding-a-panel-2.png) +![image](./images/adding-a-panel-run-query.png) 4. Select a **Panel Type** from the dropdown on the right to control how the data is visualized. -Choosing the right type makes data easier to interpret, for example, use TimeSeries for trends over time or Stats for a single current value. +Choosing the right type makes data easier to interpret, for example, use TimeSeries for trends over time or Stats for a single current value. -*Available types are:* **TimeSeries** , **Stats** , **Table** , **Pie Chart** , **Bar Chart** , **Histogram** , **Logs List** , **Spans List** , **Alerts List** , **Issues List** , and **Text**. +*Available types are:* **TimeSeries**, **Stats**, **Table**, **Pie Chart**, **Bar Chart**, **Histogram**, **Logs List**, **Spans List**, **Alerts List**, **Issues List**, and **Text**. -![image](./images/adding-a-panel-5.jpeg) +Panel Type dropdown -5. In the right-side settings panel under **General** > **Panel**, enter a Name and Description so the panel is easy to identify on the dashboard. You can also add Links using Add link to connect the panel to related resources. +5. In the right-side settings panel under **General** > **Panel**, enter a Name and Description so the panel is easy to identify on the dashboard. You can also add Links using **Add link** to connect the panel to related resources. -![image](./images/adding-a-panel-3.png) +Under **Repeat options**, set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in the editor. + +![image](./images/adding-a-panel-name-description.png) 6. Customize the panel appearance using the General and Overrides tabs on the right: - **General:** Configure Panel name, Axes, Legend, Graph options, Tooltip, Standard options, Threshold, Data links & actions, and Time Range. -- **Overrides:** Click **Add Field Override** to apply custom display settings to specific fields, useful when different data series need different formatting. -![image](./images/adding-a-panel-4.png) +General settings panel + +- **Overrides:** Click **Add Field Override** to apply custom display settings to specific fields, by series name, a matching regex, or a query. Useful when different data series need different formatting. + +Overrides field override dropdown 7. Toggle **Table View** at the top of the panel editor to switch between the visual chart and a raw data table showing timestamps and values. This is helpful for inspecting exact data points. -![image](./images/adding-a-panel-6.jpeg) +![image](./images/adding-a-panel-table-view.png) 8. Use the time range picker at the top to set the time window for this panel. -![image](./images/adding-a-panel-7.jpeg) +![image](./images/adding-a-panel-time-range.png) + +9. Click **Save & Close** to save the panel and return to the dashboard, or **Save** to save without exiting the editor. + +![image](./images/adding-a-panel-save.png) + +*** + +## Add a Section + +Select **Add section** from the **Add** menu to group related panels under a collapsible heading. This keeps a busy dashboard organized, for example, separating infrastructure panels from application panels. -9. Click **Save & Close** to save the panel and return to the dashboard, or **Save** to save without exiting the editor. +![image](./images/adding-a-panel-add-section.png) -![image](./images/adding-a-panel-5.png) +A new section appears on the dashboard with an editable name. Add panels underneath it the same way you'd add any other panel. *** -## Import from Library +## Import a Panel -Select Import from Library to add a pre-built panel to your dashboard without building it from scratch. The Import Panel dialog offers two options: +Select **Import** from the **Add** menu to add a pre-built panel to your dashboard without building it from scratch. The Import Panel dialog offers two tabs: **Import from Templates:** Select a template from the dropdown to import a panel from a pre-built KloudMate template. -![image](./images/adding-a-panel-6.png) +![image](./images/adding-a-panel-import-templates.png) -**Import from My Dashboards:** Select an existing dashboard from the dropdown to reuse a panel you have already built. This saves time when the same metric needs to appear across multiple dashboards. +**Import from My Dashboards:** Select an existing dashboard from the dropdown to reuse a panel you've already built. This saves time when the same metric needs to appear across multiple dashboards. -![image](./images/adding-a-panel-7.png) +![image](./images/adding-a-panel-import-dashboards.png) -Once imported, you can **edit** , **delete** , or **duplicate** the panel using the panel’s more options menu. +Once imported, you can **edit**, **delete**, or **duplicate** the panel using the panel's more options menu. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/logs-list-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/logs-list-panel.mdx index d03b3591..89fa9000 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/logs-list-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/logs-list-panel.mdx @@ -2,10 +2,10 @@ title: "Logs List Panel" description: "Display a customized and filtered list of logs within your dashboard." --- -![image](./images/logs-list-panel-1.png) - The Logs List Panel displays a list of logs generated for the selected time range. The list can be filtered based on available attributes, and you can choose which columns to display from your log data. +![image](./images/logs-list-panel-1.png) + When the panel type is set to Logs List, the following settings are available under the **General** tab: ![image](./images/logs-list-panel-1.jpeg) @@ -14,8 +14,6 @@ When the panel type is set to Logs List, the following settings are available un - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. -![image](./images/logs-list-panel-2.jpeg) - ### Columns Configure the appearance and formatting of each column in the log table individually. Each column detected from your query result appears here and can be expanded to access its settings. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/pie-chart-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/pie-chart-panel.mdx index 0dd38443..a0d61f24 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/pie-chart-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/pie-chart-panel.mdx @@ -12,10 +12,10 @@ When the panel type is set to Pie Chart, the following settings are available un - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. +- **Links:** Click **Add link** to connect the panel to related resources, such as a runbook or an external dashboard. +- **Repeat options:** Set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in this editor. -![image](./images/pie-chart-panel-2.jpeg) - -### **Value Options:** +### Value Options Configure how values from your query are calculated and represented in the chart. @@ -26,17 +26,19 @@ Configure how values from your query are calculated and represented in the chart Choose between **Pie** and **Donut** as the chart style. Use the **Labels** setting to control what is shown on the chart slices, including Value, Percentage, and Name. +![image](./images/pie-chart-panel-2.jpeg) + ### Legend Toggle the legend on or off using the **Show legend** option. When enabled, choose between **List** or **Table** mode, set the placement to **Right** or **Bottom** , and use the **Legend Values** dropdown to select what is shown alongside each legend entry, such as Percentage. -![image](./images/pie-chart-panel-3.jpeg) - -### **Format:** +### Format Use the Format dropdown to choose how values are displayed. Available options include Number, Bytes (SI), Bytes (IEC), Percentage, Duration (Milliseconds), Duration (Nanoseconds), and Unformatted. You can also set the maximum number of decimal places, multiply values by a number, and add a prefix or suffix. -### **Time Range:** +![image](./images/pie-chart-panel-3.jpeg) + +### Time Range Configure time range behavior for this panel independently from the dashboard. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/spans-list-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/spans-list-panel.mdx index fc6c5f29..a787fcb2 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/spans-list-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/spans-list-panel.mdx @@ -12,8 +12,6 @@ When the panel type is set to Spans List, the following settings are available u - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. -![image](./images/spans-list-panel-2.jpeg) - ### Columns Configure the appearance of each column in the spans table. Each column selected in the query can be expanded to set a custom display name using Rename to, and a Width with alignment options (Auto, Left, Center, or Right). For numeric columns such as duration, you can also set a Format, maximum number of decimal places, a multiplier, and a prefix or suffix. Columns correspond to the fields selected in the query, such as serviceName, spanId, duration, and status.code. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/stats-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/stats-panel.mdx index dc057e78..d02beb96 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/stats-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/stats-panel.mdx @@ -4,8 +4,6 @@ description: "Learn how to configure and use this visualization feature in Kloud --- The Stats Panel displays your data as a single prominent value. It includes a query box to define the data and a set of settings to control how that value is calculated and visually presented. -![image](./images/stats-panel-1.png) - When the panel type is set to Stats, the following settings are available under the **General tab**: ![image](./images/stats-panel-1.jpeg) @@ -13,14 +11,14 @@ When the panel type is set to Stats, the following settings are available under ### Panel - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. - -![image](./images/stats-panel-2.jpeg) +- **Links:** Click **Add link** to connect the panel to related resources, such as a runbook or an external dashboard. +- **Repeat options:** Set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in this editor. ### Calculations Select the aggregate calculation you want the panel to display. Available options include Count, Mean, Max, Min, Total, and others. This determines the single value shown prominently in the panel. -### Rename: -Rename the label displayed alongside the stat value in the panel. This is useful when the default query label is too technical or not meaningful to the viewer. +### Rename +Click **Add** to rename a field for display, mapping its raw name to the label you want shown in the panel. ### Stat Config Control the formatting of the value displayed in the panel. @@ -29,17 +27,18 @@ Control the formatting of the value displayed in the panel. - Set the maximum number of decimal places to control precision. - Optionally multiply the value by a number, or add a prefix and suffix to the displayed value. -![image](./images/stats-panel-3.jpeg) +![image](./images/stats-panel-2.jpeg) ### Standard options Configure the visual presentation of the stat panel. - **Display Mode:** Choose between Grid view, which presents multiple values in a grid layout, or Table view, which displays values in a sortable table format. +- **Graph mode:** Show the value alone (None) or with a small area chart behind it (Area). - **Text mode:** Choose what information appears in the panel: the label only, the value only, or both together. - **Color mode:** Choose whether the color is applied to the value text only, or to the entire panel background. - **Color scheme:** Select a single color to apply uniformly to all values, or use threshold-based coloring so the color automatically changes when a value crosses a defined threshold. -### Threshold: +### Threshold Define threshold values to visually indicate when a stat crosses an important boundary. - A default color is shown for values that do not cross any threshold. @@ -47,17 +46,20 @@ Define threshold values to visually indicate when a stat crosses an important bo - **Threshold Mode:** Choose between Absolute Value (based on the actual data value) or Relative Percentage (based on a percentage of the range). - When the stat value crosses a threshold, the panel color updates to the corresponding threshold color. -### Data links & actions: +![image](./images/stats-panel-3.jpeg) + +### Data links & actions Add URL links that users can access from within the panel. -### Value Mappings: +### Value Mappings Map specific data values to custom display text and colors based on defined conditions. When a value meets a condition, it is replaced with the mapped text and displayed in the mapped color. Click Edit to add or modify mappings. -### Time Range: +![image](./images/stats-panel-4.jpeg) + +### Time Range Configure time range behavior for this panel independently from the dashboard. - **Override Dashboard Time Range:** Enable this to allow the panel to use its own time range instead of the one selected at the dashboard level. - **Time Shift:** Shift the panel’s start and end time by a specified expression. Use the minus (`-`) operator to subtract time, with the same units supported by the dashboard time range expressions. Refer to [Time Range Expressions and Settings](../time-range-expressions-and-settings/) for supported units and syntax. - diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/table-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/table-panel.mdx index 13c84f43..1d5897fd 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/table-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/table-panel.mdx @@ -12,8 +12,8 @@ When the panel type is set to Table, the following settings are available under - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. - -![image](./images/table-panel-2.jpeg) +- **Links:** Click **Add link** to connect the panel to related resources, such as a runbook or an external dashboard. +- **Repeat options:** Set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in this editor. ### Columns Configure the appearance and formatting of each column in the table individually. Each column detected from your query result appears here and can be expanded to access its settings. @@ -31,19 +31,21 @@ Control the visual style applied to table cells. - **Cell style:** Choose a display style for the cells. - **Color scheme:** Apply a color scheme to the cells for visual emphasis. -### Value Mappings: +### Value Mappings Map specific data values to custom display text and colors based on defined conditions. When a value meets a condition, it is replaced with the mapped text and displayed in the mapped color. Click Edit to add or modify mappings. -### Threshold: +### Threshold Add thresholds to highlight values that cross important boundaries. - Click **Add Threshold** to define a threshold value and assign a color to it. - **Threshold Mode:** Choose between Absolute Value (based on the actual data value) or Relative Percentage (based on a percentage of the range). -### Data links & actions: +![image](./images/table-panel-4.jpeg) + +### Data links & actions Add URL links that users can access from within the panel. -### Time Range: +### Time Range Configure time range behavior for this panel independently from the dashboard. - **Override Dashboard Time Range:** Individual panels can use their own time range configuration. Enable this to override the time range set at the dashboard level. @@ -51,7 +53,6 @@ Configure time range behavior for this panel independently from the dashboard. Refer to [Time Range Expressions and Settings](../time-range-expressions-and-settings/) for supported units and syntax. -***At the** query level**, the Table panel also includes: - -- **Order By:** Sort the query results by a selected field in ascending or descending order. -- **Limit:** restrict the number of rows displayed in the table. +:::info +At the query level, the Table panel also includes **Order By** to sort results by a selected field in ascending or descending order, and **Limit** to restrict the number of rows displayed. +::: diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/text-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/text-panel.mdx index b9e30ba3..76baf31a 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/text-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/text-panel.mdx @@ -6,11 +6,13 @@ The Text Panel lets you add custom text, descriptions, or notes directly to your When the panel type is set to Text, the following settings are available under the **General** tab: -![image](./images/text-panel-1.jpeg) +![image](./images/text-panel-2.jpeg) ### Panel - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. ### Content -Use the text editor to enter the content you want to display in the panel. Markdown syntax is supported, allowing you to format your content with headers, lists, links, and more. +Use the text editor to enter the content you want to display in the panel. Markdown is supported, including GitHub-flavored tables, so you can format your content with headers, lists, links, and tabular data. + +Type `${` to insert a query value, a variable, or the time range, with a live preview as you type. Format inline with `${value:bytes}` or `${value:number(1)}`, and set a fallback with `${value ?? "—"}`. Loop over a query's series with `${#each A.series} … ${/each}` (`${item.value.text}`). diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/time-range-expressions-and-settings.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/time-range-expressions-and-settings.mdx index 2966a817..da80b6ea 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/time-range-expressions-and-settings.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/time-range-expressions-and-settings.mdx @@ -1,10 +1,10 @@ --- - title: "Time Range Expressions and Settings" description: "Configure dynamic time windows and panel-specific time overrides." sidebar: order: 99 --- + ## Time Range Expressions Time range expressions let you manually configure the time range of dashboards and panels using a simple syntax instead of selecting fixed dates. This is useful when you want dynamic time windows that always stay relative to the current time. @@ -37,11 +37,9 @@ Time range expressions let you manually configure the time range of dashboards a You can enter the **From** and **To** expressions in the time picker’s **Start & End time** fields. Click **Apply** to apply the custom range to the panel or dashboard. ::: -![image](./images/time-range-expressions-and-settings-1.jpeg) - ## Time Range Settings -Access panel-level time range settings by going to **Panel Settings** > **Time Range** in the right-side panel editor. These settings let you configure the time range independently for individual panels. +Access panel-level time range settings from the **General** tab's **Time Range** section in the right-side panel editor. These settings let you configure the time range independently for individual panels. ### 1. Override Dashboard Time Range @@ -55,7 +53,7 @@ This is useful when you want to visualize and compare data across different time Time Shift moves a panel’s start and end time forward or backward by a specified amount. This lets you view historical data offset from the current time range without changing the dashboard’s global range. -- **Supported operators:** `-` (subtract time required) +- **Supported operators:** `-` (subtract time) - **Supported units:** Same as Dashboard time range expressions **Examples:** diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/timeseries-panel.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/timeseries-panel.mdx index 487d8a4a..762569dd 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/timeseries-panel.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-a-panel/timeseries-panel.mdx @@ -1,6 +1,8 @@ --- title: "TimeSeries Panel" description: "Learn how to configure and use this visualization feature in KloudMate." +sidebar: + order: 100 --- The TimeSeries Panel displays your data as a time-based graph. It includes a query box to define the data you want to visualize, and a set of settings to customize how that data is presented. @@ -8,49 +10,53 @@ When the panel type is set to TimeSeries, the following settings are available u ![image](./images/timeseries-panel-1.jpeg) -### Panel: +### Panel - **Name:** Enter a name for your panel. This appears as the panel title on the dashboard. - **Description:** Enter a description to provide additional context about what the panel displays. +- **Links:** Click **Add link** to connect the panel to related resources, such as a runbook or an external dashboard. +- **Repeat options:** Set **Repeat by variable** to render one copy of this panel for each value of the selected variable. Only the first 20 values are used, and the copies show on the dashboard, not in this editor. -![image](./images/timeseries-panel-2.jpeg) +![image](./images/timeseries-panel-7.jpeg) ### Axes Configure how data is represented on each axis of the graph. - **X-Axis:** Use the Date Style dropdown to choose from various date formats for the horizontal axis of the graph. The default is Auto. - **Y-Axis:** Set a Min and Max value to control the visible range of the vertical axis. Use the Format dropdown to choose the unit of data displayed, such as Number, Percentage, or Duration. You can also set the maximum number of decimal places, multiply values by a number, and add a prefix or suffix to the displayed values. -- **Y-Axis (Right):** ou can add a second Y-axis on the right side of the graph and configure it with the same options as the left Y-axis. +- **Y-Axis (Right):** You can add a second Y-axis on the right side of the graph and configure it with the same options as the left Y-axis. ![image](./images/timeseries-panel-3.jpeg) -### Legend: +### Legend Choose between Table or List mode to control how query results are displayed. Use the Values selector to pick aggregate functions such as Min, Max, or Total to show alongside each legend entry. -### Graph options: +### Graph options Adjust the visual appearance of the graph using Line width and Fill opacity controls. -### Tooltip: +### Tooltip Choose what information appears when hovering over the graph. -### Standard options: +### Standard options Set a Color scheme to apply a consistent color palette across all series in the panel. -![image](./images/timeseries-panel-4.jpeg) - -### Threshold: +### Threshold Add one or more threshold lines on the graph to visually mark important value boundaries. -- Click **Add Threshold** to define a threshold value and assign a color to it. +- Click **Add Threshold** to define a threshold value, assign it to the left or right Y-axis, and give it a color. - **Threshold Mode:** Choose between Absolute Value (based on the actual data value) or Relative Percentage (based on a percentage of the data range). - **Line Type:** Choose how the threshold line is rendered on the graph. -### Data links & actions: +![image](./images/timeseries-panel-5.jpeg) + +### Data links & actions Add URL links that users can access by interacting with the panel data points. -### Time Range: +### Time Range Configure time range behavior for this panel independently from the dashboard. - **Override Dashboard Time Range:** Individual panels can use their own time range configuration. Enable this to override the time range set at the dashboard level. - **Time Shift:** Shift the panel’s start and end time by a specified time shift expression. Use the minus (`-`) operator to subtract time, with the same units supported by the dashboard time range expressions. +![image](./images/timeseries-panel-6.jpeg) + Refer to [Time Range Expressions and Settings](../time-range-expressions-and-settings/) for supported units and syntax. diff --git a/src/content/docs/docs/visualize-data/dashboards/adding-links-to-dashboards.mdx b/src/content/docs/docs/visualize-data/dashboards/adding-links-to-dashboards.mdx index 8add4da1..ef6adb0a 100644 --- a/src/content/docs/docs/visualize-data/dashboards/adding-links-to-dashboards.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/adding-links-to-dashboards.mdx @@ -1,63 +1,57 @@ --- - title: "Adding Links to Dashboards" description: "Learn how to add internal dashboard links and external URLs to dashboards and panels." sidebar: order: 7 --- -KloudMate dashboards allow adding both internal dashboard links and external URLs, helping you quickly navigate to related resources for streamlined data analysis and correlation. -## Add a Dashboard Link +KloudMate dashboards support two kinds of links: internal links to other dashboards, and external URLs. Use either to jump straight to a related view instead of hunting for it. -To add a link to another KloudMate dashboard: +## Add a Dashboard Link 1. Navigate to the dashboard where the link will be added. -2. Open **Dashboard Settings** and click on the **General** tab. +2. Open **Dashboard Settings** and click the **General** tab. -![image](./images/adding-links-to-dashboards-1.jpeg) + ![image](./images/adding-links-to-dashboards-1.jpeg) 3. Click **Add Link**. -![image](./images/adding-links-to-dashboards-1.png) + ![image](./images/adding-links-to-dashboards-1.png) 4. Enter a **Title** for your link. -5. Select **Dashboard** as the link type from the dropdown. +5. Select **Dashboard** as the link type. 6. Optionally, add a **Tag** to reference the target dashboard. 7. Select from the available options: -- **Open in new tab:** Opens the linked dashboard in a separate browser tab. -- **Add time range:** Transfers the time range selected in the main dashboard to the linked dashboard. -- **Add variables:** Transfers variables from the main dashboard to the linked dashboard if the same variables are available. -- **Show as dropdown:** Displays multiple dashboard links as a dropdown, useful when several links are added to the same dashboard. + - **Open in new tab:** Opens the linked dashboard in a separate browser tab. + - **Add time range:** Transfers the time range selected in the main dashboard to the linked dashboard. + - **Add variables:** Transfers variables from the main dashboard to the linked dashboard if the same variables are available. + - **Show as dropdown:** Displays multiple dashboard links as a dropdown, useful when several links are added to the same dashboard. 8. Click **Save**. Once saved, the link appears as a button in the top-right corner of the dashboard. -![image](./images/adding-links-to-dashboards-2.jpeg) - *** ## Add a URL Link to a Dashboard -To add an external URL as a dashboard link: - -1. Follow steps 1–4 from Add a Dashboard Link. +1. Follow steps 1–4 from [Add a Dashboard Link](#add-a-dashboard-link). -![image](./images/adding-links-to-dashboards-2.png) + ![image](./images/adding-links-to-dashboards-2.png) -2. Select **URL** as the link type from the dropdown. +2. Select **URL** as the link type. -3. Enter the desired URL in the URL field. +3. Enter the destination in the **URL** field. 4. Select from the available options: -- **Add time range:** Transfers the dashboard’s selected time range to the linked URL if that URL supports time range filtering. -- **Open in new tab:** Opens the URL in a new browser tab. + - **Add time range:** Transfers the dashboard's selected time range to the linked URL if that URL supports time range filtering. + - **Open in new tab:** Opens the URL in a new browser tab. 5. Click **Save**. @@ -65,20 +59,18 @@ To add an external URL as a dashboard link: ## Add a Data Link to a Panel -To add a URL link to an individual panel: - 1. Navigate to the dashboard containing the panel and open it for editing. -2. On the right-hand panel settings, scroll down to **Data links & actions**. +2. In the right-hand panel settings, scroll down to **Data links & actions**. -![image](./images/adding-links-to-dashboards-3.jpeg) + ![image](./images/adding-links-to-dashboards-3.jpeg) -3. Under Data links, click **Add link**. +3. Under **Data links**, click **Add link**. 4. Enter a **Title** and the **URL** for the link. -5. Toggle Open in new tab if needed. +5. Toggle **Open in new tab** if needed. -![image](./images/adding-links-to-dashboards-3.png) + ![image](./images/adding-links-to-dashboards-3.png) 6. Click **Save**. diff --git a/src/content/docs/docs/visualize-data/dashboards/create-a-dashboard.mdx b/src/content/docs/docs/visualize-data/dashboards/create-a-dashboard.mdx index 9145d027..683c537b 100644 --- a/src/content/docs/docs/visualize-data/dashboards/create-a-dashboard.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/create-a-dashboard.mdx @@ -1,35 +1,40 @@ --- - title: "Create a Dashboard" -description: "Learn how to create a custom metrics dashboard from scratch or using a template." +description: "Create a custom metrics dashboard from a template, from scratch, or by describing it to AI." sidebar: order: 2 --- -Creating a dashboard lets you build a personalized view of the metrics that matter most to your application. You can start from a pre-built template for common services or build one from scratch with custom queries. + +Creating a dashboard lets you build a personalized view of the metrics that matter most to your application. Start from a pre-built template, build one from scratch with custom queries, or describe what you want and let AI build the first draft. 1. From the Dashboards screen, click **Create Dashboard**. ![image](./images/create-a-dashboard-1.jpeg) -2. Choose how you want to create the dashboard: - +2. Choose how you want to create the dashboard: **From Template**, **From Scratch**, or **Using AI**. ### From Template - -Use a pre-built dashboard for common use cases. This is the fastest way to get started if you are monitoring a known service. +Use a pre-built dashboard for common use cases. This is the fastest way to get started if you're monitoring a known service, such as a web server, a database, or a Kubernetes cluster. ![image](./images/create-a-dashboard-1.png) -Select a **Template** from the dropdown. Then select a **Datasource** and click Create Dashboard. +Select a **Template** from the dropdown. ![image](./images/create-a-dashboard-2.png) +Then select a **Datasource** and click **Create Dashboard**. ### From Scratch - -Build a fully custom dashboard. Enter a **Dashboard Name** and click **Create Dashboard**. You will be taken to an empty dashboard where you can start adding panels. +Build a fully custom dashboard. Enter a **Dashboard Name** and click **Create Dashboard**. You land on an empty dashboard where you can start adding panels. ![image](./images/create-a-dashboard-3.png) +### Using AI + +Describe the dashboard you want in plain English and let the KloudMate Builder generate the panels for you. For example: *"Create a dashboard for checkout performance with latency, error rate, throughput, and recent alert panels."* + +![image](./images/create-a-dashboard-4.png) + +Click **Create Dashboard**. The KloudMate Builder opens with a dashboard already built from your description, ready to review and adjust. diff --git a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.jpeg index 526f941e..19322ea4 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.png b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.png index 4a8789b6..67f93b87 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.png and b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-1.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.jpeg deleted file mode 100644 index 6dbb372b..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.png b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.png index 5f00ed9f..c1cf7ce9 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.png and b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-2.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.jpeg index ee435962..883de504 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.png b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.png index 02eb2985..5200dc01 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.png and b/src/content/docs/docs/visualize-data/dashboards/images/adding-links-to-dashboards-3.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.jpeg index 1b596a88..f90dec38 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.png b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.png index ffb21d59..8c21746e 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.png and b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-1.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-2.png b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-2.png index 687b01d5..cbea5501 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-2.png and b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-2.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-3.png b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-3.png index 02c1e200..bbc2eb54 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-3.png and b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-3.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-4.png b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-4.png new file mode 100644 index 00000000..8cad39c9 Binary files /dev/null and b/src/content/docs/docs/visualize-data/dashboards/images/create-a-dashboard-4.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.jpeg index d0ddc5aa..8686dcc8 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.png b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.png index d9964b23..9864bc15 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.png and b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-1.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-2.png b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-2.png index 9c082ff0..f8f9c53e 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-2.png and b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-2.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.jpeg deleted file mode 100644 index 012ee037..00000000 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.png b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.png index f3326de7..95bdc0eb 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.png and b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-3.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-4.png b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-4.png index 432498d8..63f6aa4f 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-4.png and b/src/content/docs/docs/visualize-data/dashboards/images/dashboards-overview-4.png differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-1.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-1.jpeg index 56c9dddd..03673325 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-1.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-1.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-2.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-2.jpeg index a9b6e0ba..5d5c8b31 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-2.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-2.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-3.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-3.jpeg index 9a372610..d2eaae60 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-3.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-3.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-4.jpeg b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-4.jpeg index 3b2b97a6..1f23e3ad 100644 Binary files a/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-4.jpeg and b/src/content/docs/docs/visualize-data/dashboards/images/managing-panels-4.jpeg differ diff --git a/src/content/docs/docs/visualize-data/dashboards/index.mdx b/src/content/docs/docs/visualize-data/dashboards/index.mdx index 3a2ca8a0..63152b1e 100644 --- a/src/content/docs/docs/visualize-data/dashboards/index.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/index.mdx @@ -11,7 +11,7 @@ Navigate to **Dashboards** from the left navigation menu to view all your existi ![image](./images/dashboards-overview-1.png) -The Dashboards screen lists all dashboards and folders by name and description. You can search for a specific dashboard using the search bar. Use the view toggle at the top-right to switch between list and grid view. +The Dashboards screen lists every dashboard and folder with its name, folder, description, and tags. Search for a specific dashboard using the search bar. Use the view toggle at the top-right to switch between the flat list and a folder view. From the more options (⋯) icon on any dashboard or folder, you can **edit**, **delete**, or **share** it. Sharing offers both a copyable public link and a copy of the dashboard's JSON — see [Sharing a Dashboard](./dashboard-details/#sharing-a-dashboard). @@ -33,7 +33,7 @@ Folders help you organize related dashboards in one place, making it easier to n 2. Enter a **Folder Name** and an optional **Description** , then click **Create**. -The folder will appear in the Dashboards list. Click the arrow to expand it and view the dashboards inside. +Switch to the folder view to see the new folder. Click the arrow next to it to expand and view the dashboards inside. ![image](./images/dashboards-overview-1.jpeg) @@ -71,11 +71,7 @@ KloudMate provides standard monitoring dashboards as reusable templates on the K 2. Click the **Copy** button next to the Template JSON block to copy the full JSON definition. -3. In KloudMate, click the **Import** button at the top-right of the Dashboards screen. - -![image](./images/dashboards-overview-3.jpeg) - -4. Paste the copied JSON into the Import Dashboard dialog and click **Submit**. +3. In KloudMate, click the **Import** button at the top-right of the Dashboards screen, paste the copied JSON into the Import Dashboard dialog, and click **Submit**. ![image](./images/dashboards-overview-4.png) diff --git a/src/content/docs/docs/visualize-data/dashboards/managing-panels.mdx b/src/content/docs/docs/visualize-data/dashboards/managing-panels.mdx index 90d5e6dd..88b357d6 100644 --- a/src/content/docs/docs/visualize-data/dashboards/managing-panels.mdx +++ b/src/content/docs/docs/visualize-data/dashboards/managing-panels.mdx @@ -1,13 +1,14 @@ --- - title: "Managing Panels" description: "View, edit, duplicate, resize, and delete individual dashboard panels." sidebar: order: 5 --- + Panel management actions are available in two modes, view mode and edit mode. Some actions are only available once you enter edit mode by clicking the **Edit** icon in the dashboard toolbar. -### View Mode +### View Mode + ![image](./images/managing-panels-1.jpeg) In view mode, click the more options (⋯) icon on any panel to access: @@ -15,7 +16,8 @@ In view mode, click the more options (⋯) icon on any panel to access: - **View:** Opens the panel in a focused full view for a closer look at the data. - **Edit:** Opens the panel editor to modify the query, visualization, or settings. -### Edit Mode +### Edit Mode + ![image](./images/managing-panels-2.jpeg) In edit mode, click the more options (⋯) icon on any panel to access: diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-filters.jpeg b/src/content/docs/docs/visualize-data/explore/images/explore-filters.jpeg deleted file mode 100644 index 383b988e..00000000 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-filters.jpeg and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-filters.png b/src/content/docs/docs/visualize-data/explore/images/explore-filters.png new file mode 100644 index 00000000..51501e5d Binary files /dev/null and b/src/content/docs/docs/visualize-data/explore/images/explore-filters.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-general.png b/src/content/docs/docs/visualize-data/explore/images/explore-general.png index b325afcd..4865829e 100644 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-general.png and b/src/content/docs/docs/visualize-data/explore/images/explore-general.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-groupby.png b/src/content/docs/docs/visualize-data/explore/images/explore-groupby.png index 2c12c3f8..eb4e1ee6 100644 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-groupby.png and b/src/content/docs/docs/visualize-data/explore/images/explore-groupby.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-nav.png b/src/content/docs/docs/visualize-data/explore/images/explore-nav.png deleted file mode 100644 index 811f5103..00000000 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-nav.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-overrides.png b/src/content/docs/docs/visualize-data/explore/images/explore-overrides.png index c77a8264..ef0af309 100644 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-overrides.png and b/src/content/docs/docs/visualize-data/explore/images/explore-overrides.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-panel-type.png b/src/content/docs/docs/visualize-data/explore/images/explore-panel-type.png new file mode 100644 index 00000000..1a7199d9 Binary files /dev/null and b/src/content/docs/docs/visualize-data/explore/images/explore-panel-type.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-queries.png b/src/content/docs/docs/visualize-data/explore/images/explore-queries.png deleted file mode 100644 index 69ce4602..00000000 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-queries.png and /dev/null differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-query-builder.png b/src/content/docs/docs/visualize-data/explore/images/explore-query-builder.png new file mode 100644 index 00000000..12bf8b56 Binary files /dev/null and b/src/content/docs/docs/visualize-data/explore/images/explore-query-builder.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-ranking.png b/src/content/docs/docs/visualize-data/explore/images/explore-ranking.png index eafdb919..f2712f5b 100644 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-ranking.png and b/src/content/docs/docs/visualize-data/explore/images/explore-ranking.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-run.png b/src/content/docs/docs/visualize-data/explore/images/explore-run.png index d4226198..6300c4aa 100644 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-run.png and b/src/content/docs/docs/visualize-data/explore/images/explore-run.png differ diff --git a/src/content/docs/docs/visualize-data/explore/images/explore-save.png b/src/content/docs/docs/visualize-data/explore/images/explore-save.png index 121c6088..85eb671a 100644 Binary files a/src/content/docs/docs/visualize-data/explore/images/explore-save.png and b/src/content/docs/docs/visualize-data/explore/images/explore-save.png differ diff --git a/src/content/docs/docs/visualize-data/explore/index.mdx b/src/content/docs/docs/visualize-data/explore/index.mdx index 21313c64..d29af0f6 100644 --- a/src/content/docs/docs/visualize-data/explore/index.mdx +++ b/src/content/docs/docs/visualize-data/explore/index.mdx @@ -7,17 +7,11 @@ sidebar: --- import { Image } from 'astro:assets'; -import exploreNav from './images/explore-nav.png'; +import explorePanelType from './images/explore-panel-type.png'; import exploreGeneral from './images/explore-general.png'; import exploreOverrides from './images/explore-overrides.png'; -import exploreFilters from './images/explore-filters.jpeg'; -import exploreGroupby from './images/explore-groupby.png'; -import exploreRanking from './images/explore-ranking.png'; -import exploreQueries from './images/explore-queries.png'; -import exploreRun from './images/explore-run.png'; -import exploreSave from './images/explore-save.png'; -Explore is the ad hoc query workspace in KloudMate. It lets you build and validate queries before saving them to a dashboard, with support for metrics, logs, and traces. +Explore is the ad hoc query workspace in KloudMate. Build and validate a query — metrics, logs, or traces — before you commit it to a dashboard. This walkthrough focuses on metrics. @@ -26,19 +20,19 @@ This walkthrough focuses on metrics. 1. **Navigate to Explore** Open the Explore section from the left-hand navigation menu. A new untitled panel opens immediately. -Navigate to Explore - 2. **Configure the Visualization** - Use the settings panel to choose how results are displayed. Common options include `TimeSeries`, `Table`, and `Stat`. + Use the **Panel Type** dropdown to choose how results are displayed: `TimeSeries`, `Stats`, `Table`, `Pie Chart`, `Bar Chart`, `Histogram`, `Logs List`, `Spans List`, `Alerts List`, `Issues List`, or `Text`. + + Panel Type options - The settings panel has two tabs: + Below it, the settings panel splits into tabs: - - **General:** Configure panel appearance and behavior. - - **Overrides:** Apply field-level customizations to specific series or fields. + - **General** controls panel appearance and behavior — axes, legend, graph options, thresholds. + - **Overrides** applies a field-level customization to one series, by name, a matching regex, or a query. -General Settings + General Settings -Overrides Settings + Overrides Settings 3. **Choose the Data Source and Signal Type** At the top of the query editor, select the data source and set the signal type to `Metrics`. Keep the query interval on `Auto` unless you need a specific rollup interval. @@ -46,40 +40,40 @@ This walkthrough focuses on metrics. 4. **Build the Query** In the Query Builder, select a metric name and choose an aggregation function such as `Avg`, `Sum`, `Min`, or `Max`. + ![Query Builder](./images/explore-query-builder.png) + - Click **Customize aggregation** to access advanced temporal and spatial aggregation controls. See [Metrics Aggregations](./metrics-aggregations/) for details. - - Use **Add filters** to narrow the results by attributes. + - Use **Group by** to break down the metric by one or more attributes, such as `host_id` or `host_name`. -Add Filters + ![Group By](./images/explore-groupby.png) - - Use **Group by** to break down the metric by a dimension such as `k8s_replicaset_name`. + - Use **Add filters** to narrow the results by attributes. Each filter needs a field, an operator, and a value, for example `service_name = raspberry-pi`. -Group By + ![Add Filters](./images/explore-filters.png) - Use **Ranking** to control how series are ordered. -Ranking + ![Ranking](./images/explore-ranking.png) - Use **Legend Format** to customize series labels. - - Switch to the **PromQL** tab if you prefer raw query expressions. Its search bar is now easier to spot, so finding a keyword in a long query takes fewer clicks. + - Switch to the **PromQL** tab to write a raw query expression instead. Its search bar makes it easy to jump to a keyword in a long query. 5. **Add Queries and Expressions** Use **Add Query** to compare multiple metric series in one panel. Use **Add Expression** to derive values from existing queries, including math, reduce, and condition expressions. See [Alert Expressions](../../alerts/expressions/) for the full expression syntax. -Queries and Expressions - 6. **Run the Query** Click **Run Query** to execute the query and render the result. -Run Query + ![Run Query](./images/explore-run.png) 7. **Save to a Dashboard** When the query looks right, use **Save to Dashboard** to add the panel to an existing dashboard or create a new one. -Save to Dashboard + ![Save to Dashboard](./images/explore-save.png) -## Related Paths +## Related - [Metrics Aggregations](./metrics-aggregations/) - [Create a Dashboard](../../visualize-data/dashboards/create-a-dashboard/)