diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-comfortable-light.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-comfortable-light.png new file mode 100644 index 0000000000..fbfbde4988 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-comfortable-light.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-comfortable.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-comfortable.png new file mode 100644 index 0000000000..bb0009fe6d Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-comfortable.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-hover-light.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-hover-light.png new file mode 100644 index 0000000000..d748ca2015 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-hover-light.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-hover.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-hover.png new file mode 100644 index 0000000000..725b818295 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-hover.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-light.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-light.png new file mode 100644 index 0000000000..bbe4068fa5 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact-light.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-compact.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact.png new file mode 100644 index 0000000000..65d3a9c6df Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-compact.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-settings-light.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-settings-light.png new file mode 100644 index 0000000000..143d71b8d4 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-settings-light.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-settings.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-settings.png new file mode 100644 index 0000000000..7f5086632d Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-settings.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-spacious-light.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-spacious-light.png new file mode 100644 index 0000000000..4be2c2d8c7 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-spacious-light.png differ diff --git a/src/frontend/src/assets/dashboard/explore/resource-list-density-spacious.png b/src/frontend/src/assets/dashboard/explore/resource-list-density-spacious.png new file mode 100644 index 0000000000..40209daa89 Binary files /dev/null and b/src/frontend/src/assets/dashboard/explore/resource-list-density-spacious.png differ diff --git a/src/frontend/src/content/docs/dashboard/explore.mdx b/src/frontend/src/content/docs/dashboard/explore.mdx index a1c5cbf3c5..9a89f46855 100644 --- a/src/frontend/src/content/docs/dashboard/explore.mdx +++ b/src/frontend/src/content/docs/dashboard/explore.mdx @@ -22,6 +22,16 @@ import projects from '@assets/dashboard/explore/projects-dark.png'; import projectsLight from '@assets/dashboard/explore/projects-light.png'; import projectGraphs from '@assets/dashboard/explore/project-graphs.png'; import projectGraphsLight from '@assets/dashboard/explore/project-graphs-light.png'; +import resourceListDensitySettings from '@assets/dashboard/explore/resource-list-density-settings.png'; +import resourceListDensitySettingsLight from '@assets/dashboard/explore/resource-list-density-settings-light.png'; +import resourceListDensityCompact from '@assets/dashboard/explore/resource-list-density-compact.png'; +import resourceListDensityCompactLight from '@assets/dashboard/explore/resource-list-density-compact-light.png'; +import resourceListDensityCompactHover from '@assets/dashboard/explore/resource-list-density-compact-hover.png'; +import resourceListDensityCompactHoverLight from '@assets/dashboard/explore/resource-list-density-compact-hover-light.png'; +import resourceListDensityComfortable from '@assets/dashboard/explore/resource-list-density-comfortable.png'; +import resourceListDensityComfortableLight from '@assets/dashboard/explore/resource-list-density-comfortable-light.png'; +import resourceListDensitySpacious from '@assets/dashboard/explore/resource-list-density-spacious.png'; +import resourceListDensitySpaciousLight from '@assets/dashboard/explore/resource-list-density-spacious-light.png'; import resourceStopAction from '@assets/dashboard/explore/resource-stop-action.png'; import resourceStopActionLight from '@assets/dashboard/explore/resource-stop-action-light.png'; import resourceStoppedAction from '@assets/dashboard/explore/resource-stopped-action.png'; @@ -225,6 +235,38 @@ You can interact with the graph by selecting a resource to view its details. The Select **Export as Mermaid** to open the currently visible resource graph as [Mermaid](https://mermaid.js.org) diagram source in the [text visualizer](#copy-or-open-in-text-visualizer). +### Resource list density + + + +The resource list supports three densities that control how many lines each resource uses. To change the density, select **Settings** in the dashboard header, and then choose **Spacious**, **Comfortable**, or **Compact** under **Resource list density**. The default density is **Compact**. + + + +The available densities are: + +- **Compact**: One line per resource. The icon and name are followed by aligned type and state columns. In the sidebar, a row's actions replace those columns while a user hovers over or focuses on that row. On touch screens, the actions are always shown. Availability badges, such as "No logs", aren't shown on one line. Instead, an unavailable row is muted and the reason is available in its tooltip. +- **Comfortable**: Two lines per resource. +- **Spacious**: Three lines per resource in the sidebar. The third line shows an unhealthy health status if there is one, otherwise the primary endpoint, otherwise the source. Endpoint query values are masked. + +The following screenshot shows the sidebar resource list at the **Compact** density: + + + +When you hover over a **Compact** row in the sidebar, the row's actions replace its type and state columns: + + + +The following screenshot shows the same list at the **Comfortable** density: + + + +The following screenshot shows the same list at the **Spacious** density, with the primary endpoint on the third line: + + + ### Resource actions Each resource has a set of available actions based on its current state, capabilities, and telemetry. For example, if a resource is running, the **Stop** action is enabled. If the resource is stopped, the **Start** action is enabled. Actions that don't apply to a resource may be omitted from its menu.