Refactor Home Assistant dashboard configuration by enhancing grid layouts for various sections, including Docker containers and Proxmox views. Removed obsolete vacuum-related files and updated button card templates for improved functionality. Added responsive design rules for dense tile lists in sections. #1560

pull/1581/head
Carlo Costanzo 1 month ago
parent 763886a613
commit 8613aaaf44

@ -77,6 +77,7 @@ Tier 2 (fallback, must justify in comments):
- No `horizontal-stack` inside grid cells (prefer: more grid columns, or vertical-stack)
- No freeform positioning
- No layout logic embedded in `card-mod`
- For dense tile lists in `type: sections` views, keep the outer panel full-width (`column_span: 4`) and make the inner tile grid responsive using `custom:layout-card` (`4` desktop / `2` mobile unless the user asks otherwise).
Note: If the repo/view uses Home Assistant `type: sections`, treat `sections` as the top-level structure and enforce the same container rules inside each section (sections should contain only `grid`/`vertical-stack` cards and their children).

@ -24,6 +24,7 @@ Tier 2 (fallback, only when Tier 1 cannot satisfy the requirement; justify inlin
- No `horizontal-stack` inside grid cells
- No freeform positioning
- No layout logic embedded in `card-mod`
- For dense status/container lists in `type: sections` views, keep the panel full-width (`column_span: 4`) and use a responsive inner grid (`4` desktop / `2` mobile by default).
Sections-mode note:
- If a view uses `type: sections`, treat `sections` as the top-level structure and enforce the same container rules inside each section.

@ -6,26 +6,17 @@
# Infrastructure Partial - Activity sections
# Activity feed wrapped in the standard Infrastructure layout.
# -------------------------------------------------------------------
# Notes: Uses Logbook card targeted at `sensor.activity_feed`.
# Notes: Full-width logbook view targeted at `sensor.activity_feed`.
######################################################################
- !include /config/dashboards/infrastructure/partials/infra_top_chips_section.yaml
- type: grid
column_span: 4
columns: 1
square: false
cards:
- type: custom:vertical-stack-in-card
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_panel.yaml
cards:
- type: custom:button-card
template: bearstone_infra_panel_header
name: Activity Feed
- type: logbook
target:
entity_id:
- sensor.activity_feed
grid_options:
columns: full
- type: logbook
target:
entity_id:
- sensor.activity_feed
grid_options:
columns: full

@ -4,6 +4,7 @@
# Original Repo : https://github.com/CCOSTAN/Home-AssistantConfig
# -------------------------------------------------------------------
# Infrastructure Partial - Docker containers sections
# Related Issue: 1560
# Sections layout for the Docker containers view.
# -------------------------------------------------------------------
# Notes: Uses Portainer entities (`binary_sensor.*_status`, `button.*_restart_container`).
@ -11,26 +12,87 @@
- !include /config/dashboards/infrastructure/partials/infra_top_chips_section.yaml
- type: grid
column_span: 4
columns: 3
square: false
cards:
- type: custom:button-card
template: bearstone_infra_kpi
entity: sensor.garage_ups_load
name: UPS Load
icon: mdi:battery-charging-60
- type: custom:button-card
template: bearstone_infra_kpi
entity: sensor.carlo_nvr_volume_1_volume_used
name: NVR Used
icon: mdi:harddisk
- type: custom:button-card
template: bearstone_infra_kpi
entity: sensor.carlo_nas01_volume_1_volume_used
name: NAS Used
icon: mdi:nas
- type: grid
column_span: 4
columns: 3
square: false
cards:
- type: custom:button-card
template: bearstone_infra_apt_prune_tile
name: docker_10
entity: sensor.docker_10_apt_status
variables:
last_update_sensor: sensor.docker_10_apt_last_update
reboot_status_sensor: sensor.docker_10_apt_reboot_status
prune_button: button.carlo_hass_prune_unused_images
name: docker_10
- type: custom:button-card
template: bearstone_infra_apt_prune_tile
name: docker_69
entity: sensor.docker_69_apt_status
variables:
last_update_sensor: sensor.docker_69_apt_last_update
reboot_status_sensor: sensor.docker_69_apt_reboot_status
prune_button: button.docker69_prune_unused_images
name: docker_69
- type: custom:button-card
template: bearstone_infra_apt_prune_tile
name: docker_14
entity: sensor.docker_14_apt_status
variables:
last_update_sensor: sensor.docker_14_apt_last_update
reboot_status_sensor: sensor.docker_14_apt_reboot_status
prune_button: button.docker2_prune_unused_images
name: docker_14
- type: grid
column_span: 4
columns: 1
square: false
cards:
- type: custom:vertical-stack-in-card
grid_options:
columns: full
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_panel.yaml
cards:
- type: custom:button-card
template: bearstone_infra_panel_header
name: Docker Containers
- type: custom:auto-entities
show_empty: true
grid_options:
columns: full
card:
type: grid
columns: 4
square: false
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-auto-flow: row
grid-auto-rows: min-content
grid-gap: 12px
margin: 0
mediaquery:
"(max-width: 900px)":
grid-template-columns: repeat(2, minmax(0, 1fr))
card_param: cards
filter:
include: !include /config/dashboards/infrastructure/partials/docker_container_rows_include.yaml

@ -13,7 +13,7 @@
- type: grid
column_span: 4
columns: 4
columns: 1
square: false
cards:
- type: custom:button-card
@ -21,21 +21,6 @@
entity: sensor.total_wifi_clients
name: Wi-Fi Clients
icon: mdi:wifi
- type: custom:button-card
template: bearstone_infra_kpi
entity: sensor.garage_ups_load
name: UPS Load
icon: mdi:battery-charging-60
- type: custom:button-card
template: bearstone_infra_kpi
entity: sensor.carlo_nvr_volume_1_volume_used
name: NVR Used
icon: mdi:harddisk
- type: custom:button-card
template: bearstone_infra_kpi
entity: sensor.carlo_nas01_volume_1_volume_used
name: NAS Used
icon: mdi:nas
- type: grid
column_span: 3
@ -156,140 +141,7 @@
- type: grid
column_span: 4
columns: 4
square: false
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.proxmox_garage_average_temperature
name: Garage
- entity: sensor.pirateweather_temperature
name: Outside
name: Garage Temp
hours_to_show: 96
color_thresholds:
- value: 50
color: '#f39c12'
- value: 120
color: '#d35400'
- value: 145
color: '#c0392b'
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_card.yaml
- type: custom:mini-graph-card
name: Garage UPS Load
icon: mdi:transmission-tower
entities:
- entity: sensor.garage_ups_load
name: Load
unit: '%'
hours_to_show: 24
points_per_hour: 4
line_width: 2
animate: true
color_thresholds:
- value: 20
color: '#43a047'
- value: 50
color: '#ffa000'
- value: 80
color: '#e53935'
show:
fill: true
icon: true
name: true
state: true
graph: line
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_card.yaml
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.carlo_nvr_volume_1_volume_used
name: NVR Used
decimals: 1
unit: '%'
- entity: sensor.carlo_nvr_volume_1_total_size
name: Total
decimals: 2
unit: TiB
layout:
names:
- entity_index: 0
xpos: 50
ypos: 22
styles:
- font-size: 0.9em;
- opacity: 0.75;
states:
- entity_index: 0
xpos: 50
ypos: 54
styles:
- font-size: 2.2em;
- font-weight: 800;
- entity_index: 1
xpos: 50
ypos: 76
styles:
- font-size: 0.95em;
- opacity: 0.75;
show:
horseshoe_style: colorstopgradient
horseshoe_scale:
min: 0
max: 100
color_stops:
'0': '#43a047'
'50': '#fbc02d'
'80': '#e53935'
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_card.yaml
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.carlo_nas01_volume_1_volume_used
name: NAS Used
decimals: 1
unit: '%'
- entity: sensor.carlo_nas01_volume_1_total_size
name: Total
decimals: 2
unit: TiB
layout:
names:
- entity_index: 0
xpos: 50
ypos: 22
styles:
- font-size: 0.9em;
- opacity: 0.75;
states:
- entity_index: 0
xpos: 50
ypos: 54
styles:
- font-size: 2.2em;
- font-weight: 800;
- entity_index: 1
xpos: 50
ypos: 76
styles:
- font-size: 0.95em;
- opacity: 0.75;
show:
horseshoe_style: colorstopgradient
horseshoe_scale:
min: 0
max: 100
color_stops:
'0': '#43a047'
'50': '#fbc02d'
'80': '#e53935'
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_card.yaml
- type: grid
column_span: 4
columns: 2
columns: 1
square: false
cards:
- type: custom:vertical-stack-in-card
@ -365,36 +217,3 @@
variables:
button_entity: button.unifi_ap_study_restart
name: Study AP
- type: custom:vertical-stack-in-card
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_panel.yaml
cards:
- type: custom:button-card
template: bearstone_infra_panel_header
name: APT Status
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
template: bearstone_infra_tile
name: docker_10
icon: mdi:server
entity: sensor.docker_10_apt_status
label: >
[[[ return "Last update: " + (states['sensor.docker_10_apt_last_update']?.state ?? 'unknown') + " | " + (states['sensor.docker_10_apt_reboot_status']?.state ?? ''); ]]]
- type: custom:button-card
template: bearstone_infra_tile
name: docker_69
icon: mdi:server
entity: sensor.docker_69_apt_status
label: >
[[[ return "Last update: " + (states['sensor.docker_69_apt_last_update']?.state ?? 'unknown') + " | " + (states['sensor.docker_69_apt_reboot_status']?.state ?? ''); ]]]
- type: custom:button-card
template: bearstone_infra_tile
name: docker_14
icon: mdi:server
entity: sensor.docker_14_apt_status
label: >
[[[ return "Last update: " + (states['sensor.docker_14_apt_last_update']?.state ?? 'unknown') + " | " + (states['sensor.docker_14_apt_reboot_status']?.state ?? ''); ]]]

@ -185,3 +185,26 @@
variables:
button_entity: button.qemu_docker2_101_reboot
name: Frigate
- type: grid
column_span: 4
columns: 1
square: false
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.proxmox_garage_average_temperature
name: Garage
- entity: sensor.pirateweather_temperature
name: Outside
name: Garage Temp
hours_to_show: 96
color_thresholds:
- value: 50
color: '#f39c12'
- value: 120
color: '#d35400'
- value: 145
color: '#c0392b'
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_card.yaml

@ -1,16 +0,0 @@
######################################################################
# @CCOSTAN - Follow Me on X
# For more info visit https://www.vcloudinfo.com/click-here
# Original Repo : https://github.com/CCOSTAN/Home-AssistantConfig
# -------------------------------------------------------------------
# Infrastructure Partial - vacuum badges
# Reusable list extracted from a view for smaller diffs and safer edits.
# -------------------------------------------------------------------
# Notes: Extracted from config/dashboards/infrastructure/views/03_vacuum.yaml key `badges`.
######################################################################
- type: entity
show_name: true
show_state: true
show_icon: true
entity: input_boolean.l10s_vacuum_on_demand

@ -1,367 +0,0 @@
######################################################################
# @CCOSTAN - Follow Me on X
# For more info visit https://www.vcloudinfo.com/click-here
# Original Repo : https://github.com/CCOSTAN/Home-AssistantConfig
# -------------------------------------------------------------------
# Infrastructure Partial - vacuum sections
# Reusable list extracted from a view for smaller diffs and safer edits.
# -------------------------------------------------------------------
# Notes: Extracted from config/dashboards/infrastructure/views/04_vacuum.yaml key `sections`.
######################################################################
- !include /config/dashboards/infrastructure/partials/infra_top_chips_section.yaml
- type: grid
column_span: 4
columns: 4
square: false
cards:
- type: custom:vertical-stack-in-card
grid_options:
columns: 2
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_panel.yaml
cards:
- type: custom:button-card
template: bearstone_infra_panel_header
name: Vacuum
- type: custom:button-card
template: bearstone_infra_list_row
entity: vacuum.l10s_vacuum
name: L10s
icon: mdi:robot-vacuum
state_display: >
[[[ return String(entity.state || 'unknown').toUpperCase(); ]]]
- type: tile
entity: input_select.l10s_vacuum_phase
vertical: false
features_position: bottom
- type: custom:button-card
template: bearstone_infra_list_row
entity: sensor.l10s_vacuum_current_room
name: Current Room
icon: mdi:map-marker
- type: custom:button-card
template: bearstone_infra_list_row
entity: input_text.l10s_vacuum_rooms_cleaned_today
name: Rooms Cleaned (Today)
icon: mdi:check-circle-outline
- type: custom:button-card
template: bearstone_infra_list_row
entity: input_text.l10s_vacuum_room_queue
name: Room Queue
icon: mdi:format-list-bulleted
- type: custom:button-card
template: bearstone_infra_list_row
entity: input_text.l10s_vacuum_room_catalog
name: Room Catalog
icon: mdi:book-open-variant
- type: custom:vertical-stack-in-card
grid_options:
columns: 2
card_mod:
style: !include /config/dashboards/infrastructure/card_mod/infra_panel.yaml
cards:
- type: custom:button-card
template: bearstone_infra_panel_header
name: Map
- type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.l10s_vacuum_map
calibration_source:
camera: true
entity: vacuum.l10s_vacuum
vacuum_platform: Tasshack/dreame-vacuum
map_modes:
- template: vacuum_clean_zone
- template: vacuum_clean_point
- template: vacuum_clean_segment
predefined_selections:
- id: '1'
icon:
name: mdi:home-outline
x: -8100
y: 12400
label:
text: Pool-Bath
x: -8100
y: 12400
offset_y: 35
outline:
- - -9950
- 11350
- - -6650
- 11350
- - -6650
- 12900
- - -9950
- 12900
- id: '2'
icon:
name: mdi:monitor-shimmer
x: -4650
y: 10900
label:
text: Office
x: -4650
y: 10900
offset_y: 35
outline:
- - -6650
- 7400
- - -2800
- 7400
- - -2800
- 12850
- - -6650
- 12850
- id: '3'
icon:
name: mdi:home-outline
x: -5600
y: 5250
label:
text: Kids-Bathroom
x: -5600
y: 5250
offset_y: 35
outline:
- - -6450
- 4250
- - -4750
- 4250
- - -4750
- 6150
- - -6450
- 6150
- id: '4'
icon:
name: mdi:home-outline
x: 7300
y: 4100
label:
text: Master-Bathroom
x: 7300
y: 4100
offset_y: 35
outline:
- - 5450
- 250
- - 9400
- 250
- - 9400
- 7850
- - 5450
- 7850
- id: '6'
icon:
name: mdi:home-outline
x: -8450
y: 4200
label:
text: Paige-Bedroom
x: -8450
y: 4200
offset_y: 35
outline:
- - -9900
- 1600
- - -6600
- 1600
- - -6600
- 6100
- - -9900
- 6100
- id: '7'
icon:
name: mdi:home-outline
x: 6450
y: 10400
label:
text: Master-Bedroom
x: 6450
y: 10400
offset_y: 35
outline:
- - 3450
- 7850
- - 9550
- 7850
- - 9550
- 12850
- - 3450
- 12850
- id: '8'
icon:
name: mdi:home-outline
x: -8300
y: 9300
label:
text: Justin-Bedroom
x: -8300
y: 9300
offset_y: 35
outline:
- - -9950
- 6250
- - -6650
- 6250
- - -6650
- 11150
- - -9950
- 11150
- id: '9'
icon:
name: mdi:home-outline
x: 7250
y: -2200
label:
text: Stacey-Office
x: 7250
y: -2200
offset_y: 35
outline:
- - 5450
- -4700
- - 9450
- -4700
- - 9450
- 350
- - 5450
- 350
- id: '10'
icon:
name: mdi:sofa-outline
x: 2500
y: 4800
label:
text: Living Room
x: 2500
y: 4800
offset_y: 35
outline:
- - -650
- 750
- - 5300
- 750
- - 5300
- 8800
- - -650
- 8800
- id: '11'
icon:
name: mdi:home-outline
x: -5350
y: 2600
label:
text: Garage-Hallway
x: -5350
y: 2600
offset_y: 35
outline:
- - -6600
- 1100
- - -4050
- 1100
- - -4050
- 4200
- - -6600
- 4200
- id: '12'
icon:
name: mdi:home-outline
x: 700
y: 8900
label:
text: Dining-Room
x: 700
y: 8900
offset_y: 35
outline:
- - -4350
- 6000
- - 2650
- 6000
- - 2650
- 12650
- - -4350
- 12650
- id: '13'
icon:
name: mdi:home-outline
x: -6200
y: 6800
label:
text: Hallway
x: -6200
y: 6800
offset_y: 35
outline:
- - -7550
- 6100
- - -4350
- 6100
- - -4350
- 7700
- - -7550
- 7700
- id: '14'
icon:
name: mdi:chef-hat
x: -1700
y: 3350
label:
text: Kitchen
x: -1700
y: 3350
offset_y: 35
outline:
- - -4200
- 950
- - -300
- 950
- - -300
- 6100
- - -4200
- 6100
- id: '15'
icon:
name: mdi:home-outline
x: 4050
y: -1350
label:
text: Foyer
x: 4050
y: -1350
offset_y: 35
outline:
- - 2850
- -3500
- - 5450
- -3500
- - 5450
- 800
- - 2850
- 800
- id: '17'
icon:
name: mdi:home-outline
x: 750
y: -1250
label:
text: Formal-Dining
x: 750
y: -1250
offset_y: 35
outline:
- - -1500
- -3500
- - 2950
- -3500
- - 2950
- 950
- - -1500
- 950
map_locked: true
two_finger_pan: true

@ -4,6 +4,7 @@
# Original Repo : https://github.com/CCOSTAN/Home-AssistantConfig
# -------------------------------------------------------------------
# Infrastructure Templates - custom:button-card
# Related Issue: 1560
# Shared `button_card_templates` used across Infrastructure views.
# -------------------------------------------------------------------
# Notes: Keep templates generic; view-specific tuning stays in the view partials.
@ -136,6 +137,41 @@ bearstone_infra_device_tile:
state:
- font-weight: 700
bearstone_infra_prune_tile:
template: bearstone_infra_tile
show_state: true
icon: mdi:image-sync
label: >-
[[[
return variables.subtitle ? variables.subtitle : "Hold to prune unused images";
]]]
hold_action:
action: call-service
service: button.press
service_data:
entity_id: '[[[ return variables.prune_button ]]]'
confirmation:
text: '[[[ return "Prune unused images on " + (variables.name ? variables.name : "host") + "?" ]]]'
styles:
icon:
- color: var(--secondary-text-color)
state:
- font-weight: 700
bearstone_infra_apt_prune_tile:
template: bearstone_infra_prune_tile
show_state: true
icon: mdi:server
label: >-
[[[
const lastSensor = variables.last_update_sensor ? variables.last_update_sensor : '';
const rebootSensor = variables.reboot_status_sensor ? variables.reboot_status_sensor : '';
const lastValue = lastSensor ? (states[lastSensor]?.state ?? 'unknown') : 'unknown';
const rebootValue = rebootSensor ? (states[rebootSensor]?.state ?? '') : '';
const rebootText = rebootValue ? (" | " + rebootValue) : '';
return "Last update: " + lastValue + rebootText + " | Hold to prune";
]]]
bearstone_infra_container_row:
template: bearstone_infra_list_row
show_label: false
@ -151,6 +187,17 @@ bearstone_infra_container_row:
text: '[[[ return "Restart container " + entity.attributes.friendly_name + "?" ]]]'
icon: mdi:docker
custom_fields:
image: >
[[[
const imageEntity = variables.image_sensor
? variables.image_sensor
: entity.entity_id.replace('binary_sensor.', 'sensor.').replace(/_status$/, '_image');
const imageValue = states[imageEntity]?.state;
if (!imageValue || ['unknown', 'unavailable', 'none', ''].includes(String(imageValue).toLowerCase())) {
return 'image: n/a';
}
return imageValue;
]]]
status: >
[[[
const s = String(entity.state || '').toLowerCase();
@ -162,8 +209,9 @@ bearstone_infra_container_row:
]]]
styles:
grid:
- grid-template-areas: "\"i n status\""
- grid-template-areas: "\"i n status\" \"i image status\""
- grid-template-columns: 24px 1fr auto
- grid-template-rows: min-content min-content
- align-items: center
- column-gap: 12px
name:
@ -172,6 +220,17 @@ bearstone_infra_container_row:
- text-overflow: ellipsis
- white-space: nowrap
custom_fields:
image:
- grid-area: image
- justify-self: start
- align-self: start
- font-size: 11px
- opacity: 0.72
- line-height: 1.1
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
- max-width: 100%
status:
- justify-self: end
- align-self: center

@ -4,6 +4,7 @@
# Original Repo : https://github.com/CCOSTAN/Home-AssistantConfig
# -------------------------------------------------------------------
# Infrastructure View - Docker containers
# Related Issue: 1560
# Container status + restart controls (Portainer integration).
# -------------------------------------------------------------------
# Notes: Uses `binary_sensor.*_status` and `button.*_restart_container` entities (Portainer integration).

@ -1,24 +0,0 @@
######################################################################
# @CCOSTAN - Follow Me on X
# For more info visit https://www.vcloudinfo.com/click-here
# Original Repo : https://github.com/CCOSTAN/Home-AssistantConfig
# -------------------------------------------------------------------
# Infrastructure View - Vacuum
# YAML-exported Lovelace dashboard (split into view files).
# -------------------------------------------------------------------
# Notes: Exported from config/.storage/lovelace.dashboard_infrastructure view index 3.
######################################################################
title: Vacuum
icon: mdi:robot-vacuum
theme: default
type: sections
cards: []
visible:
- user: be280a93c9d7416e98d25d0470f414be
- user: 46a8d15eb20e4a1daf2d1d1f63180ec5
- user: 8fc5ba22cb32430a9143beb4df70541b
- user: 19970706e7e4492c844ea2fc94a4599a
sections: !include /config/dashboards/infrastructure/partials/vacuum_sections.yaml
max_columns: 4
badges: !include /config/dashboards/infrastructure/partials/vacuum_badges.yaml

@ -42,7 +42,6 @@ $targets = @(
'/dashboard-infrastructure/home',
'/dashboard-infrastructure/activity',
'/dashboard-infrastructure/docker',
'/dashboard-infrastructure/vacuum',
'/dashboard-kiosk'
)

Loading…
Cancel
Save

Powered by TurnKey Linux.