System Monitoring - How does yours look?

Finally managed to knock up a dashboard for my ESXi server and a few other devices …

1 Like

Posting over Iridium ? Expensive posts :grinning:

VSAT terminal. Still not cheap but I’m not paying :slight_smile:

1 Like

@duncan86 Hi! What are u using for checking component/integration update pls?

Hi @Djal I have just followed some steps in another post in this forum: Get notified of Available Hassio Addon Updates

Then to show them in the dashboard I made a vertical stack inside a grid-layout for every addon like this:

    - type: vertical-stack
      view_layout:
        grid-column: 3/3
        grid-row: 1/1
      cards:
        - type: markdown
          content: >-
            <center><img src="/local/Pictures/addons/duckdns-ico.png"
            width="52"/> <center>DuckDNS</center>   <center>Installed: {{
            state_attr('sensor.duckdns', 'version') }}</center> <center>Newest:
            {{ state_attr('sensor.duckdns', 'version_latest') }}</center>
          style: |
            ha-card{
              background: none;
              box-shadow: none;
              font-size: 11px;
            }
        - color: green
          decimal: '1'
          entity_row: true
          height: 12px
          name: CPU Temperature
          positions:
            icon: 'off'
            indicator: 'off'
            name: 'off'
            value: 'off'
          type: 'custom:bar-card'
          width: 50%
          tap_action:
            action: navigate
            navigation_path: >-
              https://bloomassistant.duckdns.org:8123/hassio/addon/core_duckdns/info
          min: 0
          max: 50
          severity:
            - color: '#ff4d4d'
              from: 0
              to: 50
            - color: '#00e64d'
              from: 51
              to: 100
          style: |
            ha-card {
              top: -10px;
              width: 80%;
              left: 10%;            
            }
          entities:
            - entity: sensor.duckdns_update_available

Hope this helps.

Thxs a lot will give it a look.

Looking nice and clean! How did you do that with te blue bars on the left and right side of each header with the title in the middle of each card? Can you post your config from your “Energie vebruik” as an example?

Here’s mine.

1 Like

Hi @the_cyberspace,

Here’s the config for my “Energy Verbruik” card

type: entities
entities:
  - type: 'custom:text-divider-row'
    text: Energie Verbruik
  - entity: sensor.kosten
  - entity: sensor.energy_cost_today
  - entity: sensor.gas_cost_today
  - entity: sensor.total_cost_today
  - entity: sensor.energy_cost_this_month
  - entity: sensor.gas_cost_this_month
  - entity: sensor.total_cost_this_month
  - type: divider
  - entity: sensor.daily_usage
  - entity: sensor.daily_energy_low
    name: Energie Vandaag Laag
  - entity: sensor.daily_energy_high
    name: Energie Vandaag Hoog
  - entity: sensor.daily_gas
    name: Gas Vandaag
  - type: divider
  - entity: sensor.monthly_usage
  - entity: sensor.monthly_energy_low
    name: Energie deze maand Laag
  - entity: sensor.monthly_energy_high
    name: Energie deze maand Hoog
  - entity: sensor.monthly_gas
    name: Gas deze maand
  - type: divider
  - entity: sensor.toon_p1_power_use_cnt_low
    name: Meterstand Elektra Laag
    icon: 'mdi:counter'
  - entity: sensor.toon_p1_power_use_cnt_high
    name: Meterstand Elektra Hoog
    icon: 'mdi:counter'
  - entity: sensor.toon_gas_used_cnt
    name: Meterstand Gas
    icon: 'mdi:counter'
  - type: 'custom:fold-entity-row'
    head:
      type: section
      label: Tarieven
    entities:
      - entity: input_number.energy_cost_daily
      - entity: input_number.energy_cost
      - entity: input_number.gas_cost_daily
      - entity: input_number.gas_cost
    style: |
      :host div#items {
        margin: 0px 0px 0px -25px
      }
style:
  .: |
    #states > * {
      margin: -5px 0px !important;
    }
    ha-card {
      border: solid 2px var(--primary-color);
      background-color: var(--ha-card-background);
    }

The colors of these lines are set in my theme.

Sick config. Can you share your Afvalwijzer yaml?

1 Like

@duncan86 very cool!! can you share the YAML for your home assistant page?

1 Like

How are you monitoring ESXi? exsi_stats integration?

Thanks for your answer!

Sure thing! This is the card:

entities:
  - type: 'custom:text-divider-row'
    text: Afvalwijzer
  - card_type: markdown
    content: >
      <ha-icon icon= {{'mdi:delete-alert' if
      states('sensor.circulus_berkel_afval_vandaag') != 'Geen' else
      'mdi:delete-outline'}}> </ha-icon> Vandaag,
      {{states('sensor.simple_date')}}: <font color = {% if
      states('sensor.circulus_berkel_afval_vandaag') == 'pmd' %}'#ff944d'
                  {% elif states('sensor.circulus_berkel_afval_vandaag') == 'gft' %}'#00e64d'
                  {% elif states('sensor.circulus_berkel_afval_vandaag') == 'papier' %}'#3399ff'
                  {% else %}'grey'
                  {% endif %}> **{{states('sensor.circulus_berkel_afval_vandaag')}}</font>**      
            
                  
      <ha-icon icon= {{'mdi:delete-alert' if
      states('sensor.circulus_berkel_afval_morgen') != 'Geen' else
      'mdi:delete-outline'}}> </ha-icon>  Morgen,
      {{states('sensor.simple_tomorrow')}}:  <font color = {% if
      states('sensor.circulus_berkel_afval_morgen') == 'pmd' %}'#ff944d'
                  {% elif states('sensor.circulus_berkel_afval_morgen') == 'gft' %}'#00e64d'
                  {% elif states('sensor.circulus_berkel_afval_morgen') == 'papier' %}'#3399ff'
                  {% else %}'grey'
                  {% endif %}> **{{states('sensor.circulus_berkel_afval_morgen')}}</font>**  
    style: |
      ha-card {
        box-shadow: none;
        border-radius: 10px;
        background: none;
      }
    type: 'custom:hui-element'
  - type: divider
  - card: null
    card_type: glance
    entities:
      - entity: sensor.circulus_berkel_afval_gft
        name: GFT
      - entity: sensor.circulus_berkel_afval_papier
        name: Papier
      - entity: sensor.circulus_berkel_afval_pmd
        name: PMD
    style: |
      ha-card {
        box-shadow: none;
        border-radius: 10px;
        background: none;
        }
    type: 'custom:hui-element'
style:
  .: |
    #states > * {
      margin: 2px 0px !important;
    }
    ha-card {
      border: solid 2px var(--primary-color);
      background-color: var(--ha-card-background);
    }
type: entities

It is the HACS “Afvalbeheer” intergration. And this is the config for it:

  #================================
  # Afvalkalender
  #================================      
  - platform: afvalbeheer
    wastecollector: Circulus-Berkel
    resources:
      - gft
      - papier
      - pmd
    postcode: 7327GD 
    streetnumber: 111
    upcomingsensor: 1 
    dateformat: '%d %B %Y' 
    dateonly: 1
    name: "afval" 
    nameprefix: 1
    builtinicons: 0       
    dutch: 1
    disableicons: 0
    
  - platform: template
    sensors:
      trash_color:
        friendly_name: afvalkleur
        value_template: >-
            {% if (states.sensor.circulus_berkel_afval_vandaag == "gft") %}
                green
            {% elif (states.sensor.circulus_berkel_afval_vandaag == "papier") %}
                blue
            {% elif (states.sensor.circulus_berkel_afval_vandaag == "pmd") %}
                orange
            {% else %}
                grey
            {% endif %}
            
  - platform: template
    sensors:
      trash_color_tomorrow:
        friendly_name: afvalkleur
        value_template: >-
            {% if (states.sensor.circulus_berkel_afval_morgen == "gft") %}
                green
            {% elif (states.sensor.circulus_berkel_afval_morgen == "papier") %}
                blue
            {% elif (states.sensor.circulus_berkel_afval_morgen == "pmd") %}
                orange
            {% else %}
                grey
            {% endif %}           

The pictures I set in my customize.yaml

That is actually all there is.

@cdrom1028 No problem here it is ( I left some vertical stacks out for the addons, since the total characters is more than allowed in 1 post. But you will get the idea.:

  - panel: true
    type: 'custom:grid-layout'
    badges: []
    cards:
      - type: 'custom:layout-card'
        layout: vertical
        column_width: 100%
        cards:
          - type: 'custom:stack-in-card'
            mode: horizontal
            cards:
              - type: picture
                image: \local\Pictures\home-assistant.png
                style: |
                  ha-card{
                    width: 200px;
                    background: none;
                    box-shadow: none;
                    top: 20px;
                    left: 20px;
                  }
              - type: markdown
                content: >-
                  **HOMEASSISTANT SERVER

                  RESOURCES

                  RASPBERRY PI 4B

                  Hassio Cli:** {{ state_attr('sensor.version_available', 'cli')
                  }}

                  **Uptime:** {{ states('sensor.rpi_uptime')}}
                style: |
                  ha-card{
                    left: -80px;
                    top: 20px;
                    background: none;
                    box-shadow: none;
                  }
              - type: entities
                entities:
                  - decimal: '1'
                    entity: sensor.processor_use
                    entity_row: true
                    height: 20px
                    max: '100'
                    min: '0'
                    name: CPU Load
                    icon: 'mdi:memory'
                    positions:
                      icon: outside
                      indicator: outside
                      name: outside
                      value: outside
                    severity:
                      - color: '#00e64d'
                        from: 0
                        to: 30
                      - color: '#ff944d'
                        from: 30
                        to: 50
                      - color: '#ff4d4d'
                        from: 50
                        to: 100
                    type: 'custom:bar-card'
                    width: 70%
                  - color: green
                    decimal: '1'
                    entity: sensor.cpu_temperature
                    entity_row: true
                    height: 20px
                    max: '110'
                    min: '0'
                    name: CPU Temp
                    icon: 'mdi:thermometer'
                    positions:
                      icon: outside
                      indicator: outside
                      name: outside
                      value: outside
                    severity:
                      - color: '#00e64d'
                        from: 0
                        to: 66
                      - color: '#ff944d'
                        from: 66
                        to: 80
                      - color: '#ff4d4d'
                        from: 80
                        to: 100
                    type: 'custom:bar-card'
                    width: 70%
                  - color: green
                    decimal: '1'
                    entity: sensor.memory_use_percent
                    entity_row: true
                    height: 20px
                    max: '100'
                    min: '0'
                    name: Memory
                    icon: 'mdi:memory'
                    positions:
                      icon: outside
                      indicator: outside
                      name: outside
                      value: outside
                    severity:
                      - color: '#00e64d'
                        from: 0
                        to: 75
                      - color: '#ff944d'
                        from: 80
                        to: 90
                      - color: '#ff4d4d'
                        from: 90
                        to: 100
                    type: 'custom:bar-card'
                    width: 70%
                  - color: green
                    decimal: '1'
                    entity: sensor.disk_use_percent
                    entity_row: true
                    height: 20px
                    max: '100'
                    min: '0'
                    name: Disk Usage
                    icon: 'mdi:harddisk'
                    positions:
                      icon: outside
                      indicator: outside
                      name: outside
                      value: outside
                    severity:
                      - color: '#00e64d'
                        from: 0
                        to: 65
                      - color: '#ff944d'
                        from: 65
                        to: 90
                      - color: '#ff4d4d'
                        from: 90
                        to: 100
                    type: 'custom:bar-card'
                    width: 70%
                  - color: green
                    decimal: '1'
                    entity: sensor.swap_use_percent
                    entity_row: true
                    height: 20px
                    max: '100'
                    min: '0'
                    name: Swap
                    icon: 'mdi:file-swap-outline'
                    positions:
                      icon: outside
                      indicator: outside
                      name: outside
                      value: outside
                    severity:
                      - color: '#00e64d'
                        from: 0
                        to: 65
                      - color: '#ff944d'
                        from: 65
                        to: 90
                      - color: '#ff4d4d'
                        from: 90
                        to: 100
                    type: 'custom:bar-card'
                    width: 70%
                style:
                  .: |
                    #states > * {
                      margin: -8px 0px !important;
                    }
                    ha-card {
                      bar-card-border-radius: 5px;
                      left: -135px;
                      width: 120%;
                      background: none;
                      box-shadow: none;
                    }
              - align_icon: right
                align_state: left
                name: Server Throughput
                icon: 'mdi:upload-network-outline'
                entities:
                  - color: '#00e64d'
                    entity: sensor.network_throughput_in_eth0
                    name: Download
                  - color: '#3399ff'
                    entity: sensor.network_throughput_out_eth0
                    name: Upload
                font_size: 75
                font_size_header: 14
                hour24: true
                hours_to_show: 24
                line_width: 2
                points_per_hour: 4
                height: 100
                show:
                  extrema: false
                  icon: true
                  labels: false
                  name: true
                  points: false
                  legend: false
                  average: false
                  state: false
                style: |
                  ha-card {
                    border-radius: 5px;
                    box-shadow: none;
                    background: none;
                    left: -30px;
                   }
                type: 'custom:mini-graph-card'
            style: |
              ha-card {
                border: solid 2px var(--primary-color);
                height: 100%;
              }
          - type: 'custom:mod-card'
            style: |
              ha-card {
                border: solid 2px var(--primary-color);
                background-color: var(--ha-card-background);
              }
            card:
              type: 'custom:layout-card'
              layout_type: grid
              layout: {}
              cards:
                - type: vertical-stack
                  view_layout:
                    grid-column: 1/1
                    grid-row: 1/3
                  cards:
                    - type: picture
                      image: /local/Custom_Icons/home-assistant-ico.png
                      style: |
                        ha-card {
                          width: 150px;
                          left: 10px;
                          top:10%;
                          background: none;
                          box-shadow: none;
                        }
                    - type: markdown
                      content: >-
                        **BLOOMASSISTANT**

                        **RESOURCES**

                        **Uptime:** {{states('sensor.ha_uptime')}} 

                        **Database Size:** {{states('sensor.database_size')}} MB

                        **Local Backups:** {{states('sensor.local_snapshots')}} 

                        **Remote Backups:**
                        {{states('sensor.remote_snapshots')}}

                        **Latest Backup:** {{states('sensor.latest_snapshot')}}

                        **Certificate Expiration:**
                        {{states('sensor.cert_expiry_days_bloomassistant')}}
                        Days
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                        }
                - type: vertical-stack
                  view_layout:
                    grid-column: 2/2
                    grid-row: 1/1
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/core_check_config-ico.png"
                        width="52"/> <center>Check HA Config</center>  
                        <center>Installed: {{
                        state_attr('sensor.check_home_assistant_configuration',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.check_home_assistant_configuration',
                        'version_latest') }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      min: 0
                      max: 50
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/core_check_config/info
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;
                        }
                      entities:
                        - entity: sensor.check_config_update_available
                - type: vertical-stack
                  view_layout:
                    grid-column: 3/3
                    grid-row: 1/1
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/duckdns-ico.png"
                        width="52"/> <center>DuckDNS</center>  
                        <center>Installed: {{ state_attr('sensor.duckdns',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.duckdns', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/core_duckdns/info
                      min: 0
                      max: 50
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;            
                        }
                      entities:
                        - entity: sensor.duckdns_update_available
                - type: vertical-stack
                  view_layout:
                    grid-column: 4/4
                    grid-row: 1/1
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/glances-ico.png"
                        width="52"/> <center>Glances</center>  
                        <center>Installed: {{ state_attr('sensor.glances',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.glances', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/a0d7b954_glances/info
                      min: 0
                      max: 50
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;            
                        }
                      entities:
                        - entity: sensor.duckdns_update_available
##Vertical stacks removed here
                - type: vertical-stack
                  view_layout:
                    grid-column: 8/8
                    grid-row: 1/1
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/mosquitto_broker-ico.png"
                        width="52"/> <center>Mosquitto</center>  
                        <center>Installed: {{ state_attr('sensor.mosquitto',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.mosquitto', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity: sensor.mosquitto_update_available
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      min: 0
                      max: 50
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/core_mosquitto/info
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;
                        }                                
                - type: vertical-stack
                  view_layout:
                    grid-column: 9/9
                    grid-row: 1/1
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/nodered-ico.png"
                        width="52"/> <center>Node-Red</center>  
                        <center>Installed: {{ state_attr('sensor.node_red',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.node_red', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity: sensor.nodered_update_available
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/a0d7b954_nodered/info
                      min: 0
                      max: 50
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;            
                        }
                - type: vertical-stack
                  view_layout:
                    grid-column: 2/2
                    grid-row: 2/2
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/phpmyadmin-ico.png"
                        width="52"/> <center>PHP MyAdmin</center>  
                        <center>Installed: {{ state_attr('sensor.phpmyadmin',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.phpmyadmin', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity: sensor.phpmyadmin_update_available
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      min: 0
                      max: 50
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/a0d7b954_phpmyadmin/info
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;
                        }
                - type: vertical-stack
                  view_layout:
                    grid-column: 3/3
                    grid-row: 2/2
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/samba_backup-ico.png"
                        width="52"/> <center>Samba Backup</center>  
                        <center>Installed: {{
                        state_attr('sensor.samba_backup_version', 'version')
                        }}</center> <center>Newest: {{
                        state_attr('sensor.samba_backup_version',
                        'version_latest') }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity: sensor.samba_backup_update_available
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      min: 0
                      max: 50
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/15d21743_samba_backup/info
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;
                        }
##vertical stacks removed here
                - type: vertical-stack
                  view_layout:
                    grid-column: 8/8
                    grid-row: 2/2
                  cards:
                    - type: markdown
                      content: >-
                        <center><img
                        src="/local/Pictures/addons/visual_studio-ico.png"
                        width="52"/> <center>Visual Studio</center>  
                        <center>Installed: {{
                        state_attr('sensor.visualstudiocode', 'version')
                        }}</center> <center>Newest: {{
                        state_attr('sensor.visualstudiocode', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity: sensor.visualstudiocode_update_available
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      min: 0
                      max: 50
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/a0d7b954_vscode/info
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;
                        }         
                - type: vertical-stack
                  view_layout:
                    grid-column: 9/9
                    grid-row: 2/2
                  cards:
                    - type: markdown
                      content: >-
                        <center><img src="/local/Pictures/addons/zwave-ico.png"
                        width="52"/> <center>Z-Wave JS</center>  
                        <center>Installed: {{ state_attr('sensor.zwavejs',
                        'version') }}</center> <center>Newest: {{
                        state_attr('sensor.zwavejs', 'version_latest')
                        }}</center>
                      style: |
                        ha-card{
                          background: none;
                          box-shadow: none;
                          font-size: 11px;
                        }
                    - color: green
                      decimal: '1'
                      entity: sensor.zwavejs_update_available
                      entity_row: true
                      height: 12px
                      name: CPU Temperature
                      positions:
                        icon: 'off'
                        indicator: 'off'
                        name: 'off'
                        value: 'off'
                      type: 'custom:bar-card'
                      width: 50%
                      min: 0
                      max: 50
                      tap_action:
                        action: navigate
                        navigation_path: >-
                          https://homeassistant/hassio/addon/core_zwave_js/info
                      severity:
                        - color: '#ff4d4d'
                          from: 0
                          to: 50
                        - color: '#00e64d'
                          from: 51
                          to: 100
                      style: |
                        ha-card {
                          top: -10px;
                          width: 80%;
                          left: 10%;
                        }   
              layout_options:
                grid-tempalte-columns: 250px auto auto
                grid-template-rows: 250px 250px
              view_layout: {}
          - type: 'custom:stack-in-card'
            mode: horizontal
            cards:
              - type: picture
                image: /local/Custom_Icons/HACS-3d-icon.png
                style: |
                  ha-card {
                    width: 150px;
                    left: 10px;
                    top: 10px;
                    background: none;
                    box-shadow: none;
                  }
              - type: markdown
                content: >-
                  ### HACS updates available: {{ states.sensor.hacs.state }} {%
                  for repo in states.sensor.hacs.attributes.repositories %}

                  **{{repo.display_name }}** {{ repo["installed_version"] }} ->
                  {{ repo["available_version"] }} {% endfor %}
                style: |
                  ha-card{
                    background: none;
                    box-shadow: none;
                    font-size: 12px;
                    left: -75%;
                  }
            style: |
              ha-card {
                border: solid 2px var(--primary-color);
                height: 100%;
              }
        layout_options: {}
        layout_type: grid
        view_layout: vertical

How does the YAML look for the other variables i.e. Up Time, CPU load etc?

it really depends on a lot of thjings like where you get the data and what internal integrations you use. Also what platform you use, like NUC vs RPi vs Docker. You can get a lot from the Glances integration and Uptime is a native integration. You really need to get to know your system to know where to get the most accurate data.

Here’s my Server Monitoring overview so far. Please leave me any feedback or tips that can help me improve it!

Normal view:

Some of the detail information expanded:

11 Likes

This looks great. Please post the code for your “Server Info” card. I like the expansion to gain additional details.

We need more details :rofl: (the yaml code)