I have a Synology DS423+ which is integrated with Home Assistant. I have developed this Dashboard to display NAS stats. Adding the code and screenshot. Feel free to tinker. All icons are 64x64
type: custom:button-card
show_state: true
tap_action:
action: none
custom_fields:
cpu_image:
card:
type: picture
image: local/cpu.png
card_mod:
style: |
ha-card {
background-color: white;
border: none;
}
ram_image:
card:
type: picture
image: local/ram.png
card_mod:
style: |
ha-card {
background-color: white;
border: none;
}
network_image:
card:
type: picture
image: local/wifi.png
card_mod:
style: |
ha-card {
background-color: white;
border: none;
}
temperature_image:
card:
type: picture
image: local/heat.png
card_mod:
style: |
ha-card {
background-color: white;
border: none;
}
cpu_usage:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.nas_cpu_utilization_total')}} %"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
mem_usage:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.nas_memory_usage_real')}} %"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
net_upload:
card:
type: custom:mushroom-template-card
primary: "{{ states('sensor.nas_upload_throughput')|round }} kB/s"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
net_download:
card:
type: custom:mushroom-template-card
primary: "{{ states('sensor.nas_download_throughput')|round }} kB/s"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
nas_temperature:
card:
type: custom:mushroom-template-card
primary: "{{ states('sensor.nas_temperature')|round }} °F"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
divider1:
card:
type: custom:text-divider-row
text: "Disks"
align: center
text-divider-color: black
drive1:
card:
type: custom:mushroom-template-card
primary: Drive 1
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: absolute;
overflow: visible !important;
text-align:center;
top: -10px;
left: 15px;
background: white;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border-color: grey;
border: 2.5px thin;
height: 500px;
width: 120px;
height: 80px !important;
}
drive2:
card:
type: custom:mushroom-template-card
primary: Drive 2
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: absolute;
overflow: visible !important;
text-align:center;
top: -10px;
left: 15px;
background: white;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border-color: grey;
border: 2.5px thin;
height: 500px;
width: 120px;
height: 80px !important;
}
drive3:
card:
type: custom:mushroom-template-card
primary: Drive 3
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: absolute;
overflow: visible !important;
text-align:center;
top: -10px;
left: 15px;
background: white;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border-color: grey;
border: 2.5px thin;
height: 500px;
width: 120px;
height: 80px !important;
}
drive1_text:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
Status: {{states('sensor.nas_drive_1_status')}}
Bad Sectors: {% if is_state('binary_sensor.nas_drive_1_exceeded_max_bad_sectors', 'off') %}None{% else %}Present{% endif %}
Temperature: {{ states('sensor.nas_drive_1_temperature') }} °F
multiline_secondary: true
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
drive2_text:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
Status: {{states('sensor.nas_drive_2_status')}}
Bad Sectors: {% if is_state('binary_sensor.nas_drive_2_exceeded_max_bad_sectors', 'off') %}None{% else %}Present{% endif %}
Temperature: {{ states('sensor.nas_drive_2_temperature') }} °F
multiline_secondary: true
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
drive3_text:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
Status: {{states('sensor.nas_drive_3_status')}}
Bad Sectors: {% if is_state('binary_sensor.nas_drive_3_exceeded_max_bad_sectors', 'off') %}None{% else %}Present{% endif %}
Temperature: {{ states('sensor.nas_drive_3_temperature') }} °F
multiline_secondary: true
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
divider2:
card:
type: custom:text-divider-row
text: "Cache"
align: center
text-divider-color: black
cache1:
card:
type: custom:mushroom-template-card
primary: M.2 Drive 1
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: absolute;
overflow: visible !important;
text-align:center;
top: -10px;
left: 15px;
background: white;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border-color: grey;
border: 2.5px thin;
height: 500px;
width: 120px;
height: 80px !important;
}
cache2:
card:
type: custom:mushroom-template-card
primary: M.2 Drive 2
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: absolute;
overflow: visible !important;
text-align:center;
top: -10px;
left: 15px;
background: white;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border-color: grey;
border: 2.5px thin;
height: 500px;
width: 120px;
height: 80px !important;
}
cache1_text:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
Status: {{states('sensor.nas_m_2_drive_1_status')}}
Bad Sectors: {% if is_state('binary_sensor.nas_m_2_drive_1_exceeded_max_bad_sectors', 'off') %}None{% else %}Present{% endif %}
Temperature: {{ states('sensor.nas_m_2_drive_1_temperature') }} °F
multiline_secondary: true
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
cache2_text:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
Status: {{states('sensor.nas_m_2_drive_2_status')}}
Bad Sectors: {% if is_state('binary_sensor.nas_m_2_drive_2_exceeded_max_bad_sectors', 'off') %}None{% else %}Present{% endif %}
Temperature: {{ states('sensor.nas_m_2_drive_2_temperature') }} °F
multiline_secondary: true
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
storage_usage:
card:
type: custom:mini-graph-card
name: Storage Usage
entities:
- sensor.nas_volume_1_used_space
line_color: teal
line_width: 2
hours_to_show: 48
show_points: true
smoothing: true
nas_image:
card:
type: picture
image: local/nas.png
card_mod:
style: |
ha-card {
background-color: white;
border: none;
}
styles:
card:
- align-self: start
- width: 432px
- height: 650px
- opacity: 1
- background-color: white
- border: none
custom_fields:
cpu_image:
- position: absolute
- top: '0px'
- left: 10px
- width: 64px
ram_image:
- position: absolute
- top: '0px'
- left: 134px
- width: 64px
network_image:
- position: absolute
- top: '0px'
- left: 258px
- width: 64px
temperature_image:
- position: absolute
- top: '0px'
- left: 352px
- width: 64px
cpu_usage:
- position: absolute
- top: '56px'
- left: 22px
mem_usage:
- position: absolute
- top: '56px'
- left: 146px
net_upload:
- position: absolute
- top: '56px'
- left: 218px
net_download:
- position: absolute
- top: '56px'
- left: 282px
nas_temperature:
- position: absolute
- top: '56px'
- left: 356px
divider1:
- position: absolute
- top: 76px
- left: 5px
- width: 400px
drive1:
- position: absolute
- top: 120px
- left: 5px
drive2:
- position: absolute
- top: 120px
- left: 145px
drive3:
- position: absolute
- top: 120px
- left: 285px
drive1_text:
- position: absolute
- top: 120px
- left: 5px
drive2_text:
- position: absolute
- top: 120px
- left: 140px
drive3_text:
- position: absolute
- top: 120px
- left: 285px
divider2:
- position: absolute
- top: 210px
- left: 5px
- width: 400px
cache1:
- position: absolute
- top: 250px
- left: 80px
cache2:
- position: absolute
- top: 250px
- left: 225px
cache1_text:
- position: absolute
- top: 250px
- left: 75px
cache2_text:
- position: absolute
- top: 250px
- left: 220px
storage_usage:
- position: absolute
- top: 350px
- left: 20px
- width: 400px
- height: 100px
nas_image:
- position: absolute
- top: 580px
- right: 20px
- width: 64px