System Monitoring - How does yours look?

Hi @91JJ Those are the official add-ons, not separate containers or anything. But 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.

1 Like

Any way to disable this behavior in canvas-gauge-card?
Every time my CPU speed refreshes the arrow starts from bottom and this annoys me a lot. :slight_smile:

cpu_gauge

type: custom:canvas-gauge-card
entity: sensor.cpu_speed
card_height: 200
gauge:
  type: radial-gauge
  title: Processor (%)
  width: 220
  height: 220
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: 0
  maxValue: 3
  startAngle: 30
  ticksAngle: 180
  valueBox: false
  majorTicks:
    - '1'
    - '2'
    - '3'
  minorTicks: 20
  strokeTicks: true
  highlights:
    - from: 2
      to: 3
      color: rgba(200, 50, 50, .75)
  borders: false

Did you check the documentation? All Configuration Options
Tried it locally and “animation: false” solved that problem for me

I am mostly still trying to pull all the information I want to see into HA, but I have already managed to set up my Docker Monitoring Dashboard:

It is automatically showing all new docker containers(except for the Images, I have to store them on the server). Took me quite a while and I had to change the code of about 4 different HACS projects, but finally it is working as intended

1 Like

You did that with some loop function?

I am using the auto-entities card(🔹 Auto-entities - Automatically fill cards with entities) to select the docker containers by name(with a wildcard)

1 Like

A user has created a neat docker card if you’d like to revise your view:

@kamtschatka
Possible to share your source code for this card please?
thank you

I’m using PING in combination with the Uptime Card: https://smarthomepursuits.com/how-to-monitor-devices-in-home-assistant/

1 Like

Sure:

type: custom:auto-entities
card:
  type: custom:easy-layout-card
  cards:
    type: custom:config-template-card
    variables:
      getEntityId: |
        entityid => {
          return entityid.replace("switch", "sensor");
        }
    entities:
      - this.entity_id
    card:
      type: entities
      entities:
        - type: custom:fold-entity-row
          head:
            entity: this.entity_id
            type: custom:multiple-entity-row
            show_state: false
            image: >-
              "${'/local/logos/' +
              states['this.entity_id'].attributes.friendly_name + '-icon.png'}"
            entities:
              - entity: this.entity_id
                name: Off / On
                toggle: true
              - entity: ${getEntityId('this.entity_id') + '_status'}
                name: Uptime
                styles:
                  width: 200px
                  align: center
              - icon: mdi:memory
              - entity: ${getEntityId('this.entity_id') + '_cpu'}
                name: CPU
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:memory
              - entity: ${getEntityId('this.entity_id') + '_memory'}
                name: Memory
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:upload
              - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                name: Up
                default: '-'
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:download
              - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
                name: Down
                default: '-'
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:upload
              - entity: ${getEntityId('this.entity_id') + '_network_total_up'}
                name: Total Up
                default: '-'
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:download
              - entity: ${getEntityId('this.entity_id') + '_network_total_down'}
                name: Total Down
                default: '-'
                styles:
                  width: 90px
                  text-align: left
          entities:
            - entities:
                - entity: ${getEntityId('this.entity_id') + '_cpu'}
                - entity: ${getEntityId('this.entity_id') + '_memory'}
                - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
              type: custom:easy-layout-card
              layout_type: custom:horizontal-layout
              placeholder: this.entity_id1
              layout:
                width: 300
                max_width: 450
                max_cols: 4
              cards:
                entities:
                  - entity: this.entity_id1
                lower_bound: 0
                hours_to_show: 24
                points_per_hour: 60
                line_width: 1
                line_color: lightgreen
                type: custom:mini-graph-card
                show:
                  average: true
                  extrema: true
                  labels: true
                style: |
                  ha-card {
                   border-radius: 10px; 
                   background-color: rgba(0, 0, 0, 0.0);
                  }
  layout_type: vertical
  layout_options:
    width: 1400
filter:
  include:
    - entity_id: switch.docker_*
sort:
  method: friendly_name
show_empty: true
unique: true

I am using a few different cards for that, should be possible to find out which ones are used. The only thing you need to do manually is to download the icons for the docker containers and put them into the folder HA uses to serve files.

Thank you!

Some adjustments were needed:

type: custom:auto-entities
filter:
  include:
    - entity_id: switch.docker*
      options:
        type: custom:config-template-card
        variables:
          getEntityId: |
            entityid => {
              return entityid.replace("switch", "sensor");
            }
        entities:
          - this.entity_id
        card:
          type: entities
          entities:
            - type: custom:fold-entity-row
              open: true
              head:
                entity: this.entity_id
                type: custom:multiple-entity-row
                show_state: false
                image: >-
                  "${'/local/assets/img/logos/' +
                  states['this.entity_id'].attributes.friendly_name + '.png'}"
                entities:
                  - entity: this.entity_id
                    name: Off / On
                    toggle: true
                  - entity: ${getEntityId('this.entity_id') + '_status'}
                    name: Uptime
                    styles:
                      width: 200px
                      align: center
                  - icon: mdi:memory
                  - entity: ${getEntityId('this.entity_id') + '_cpu'}
                    name: CPU
                    styles:
                      width: 90px
                      text-align: left
                  - icon: mdi:memory
                  - entity: ${getEntityId('this.entity_id') + '_memory'}
                    name: Memory
                    styles:
                      width: 90px
                      text-align: left
                  - icon: mdi:upload
                  - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                    name: Up
                    default: '-'
                    styles:
                      width: 90px
                      text-align: left
                  - icon: mdi:download
                  - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
                    name: Down
                    default: '-'
                    styles:
                      width: 90px
                      text-align: left
                  - icon: mdi:upload
                  - entity: ${getEntityId('this.entity_id') + '_network_total_up'}
                    name: Total Up
                    default: '-'
                    styles:
                      width: 90px
                      text-align: left
                  - icon: mdi:download
                  - entity: ${getEntityId('this.entity_id') + '_network_total_down'}
                    name: Total Down
                    default: '-'
                    styles:
                      width: 90px
                      text-align: left
              entities:
                - type: custom:layout-card
                  layout_type: custom:horizontal-layout
                  layout:
                    width: 300
                    max_width: 450
                    max_cols: 4
                  entities:
                    - entity: ${getEntityId('this.entity_id') + '_cpu'}
                    - entity: ${getEntityId('this.entity_id') + '_memory'}
                    - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                    - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
                  placeholder: this.entity_id1
                  cards:
                    entities:
                      - entity: this.entity_id1
                    lower_bound: 0
                    hours_to_show: 24
                    points_per_hour: 60
                    line_width: 1
                    line_color: lightgreen
                    type: custom:mini-graph-card
                    show:
                      average: true
                      extrema: true
                      labels: true
                    style: |
                      ha-card {
                       border-radius: 10px; 
                       background-color: rgba(0, 0, 0, 0.0);
                      }
sort:
  method: friendly_name
show_empty: true
unique: true
card_param: cards
card:
  type: custom:layout-card
  layout_type: vertical
  layout_options:
    width: 1400

Last point I don’t understand is:

entities:
                - type: custom:layout-card
                  layout_type: custom:horizontal-layout
                  layout:
                    width: 300
                    max_width: 450
                    max_cols: 4
                  entities:
                    - entity: ${getEntityId('this.entity_id') + '_cpu'}
                    - entity: ${getEntityId('this.entity_id') + '_memory'}
                    - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                    - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
                  placeholder: this.entity_id2
                  cards:
                    entities:
                      - entity: this.entity_id2
                    lower_bound: 0
                    hours_to_show: 24
                    points_per_hour: 60
                    line_width: 1
                    line_color: lightgreen
                    type: custom:mini-graph-card
                    show:
                      average: true
                      extrema: true
                      labels: true
                    style: |
                      ha-card {
                       border-radius: 10px; 
                       background-color: rgba(0, 0, 0, 0.0);
                      }

First time I see “placeholder” here. I understand how it should work but it doesn’t…

Well, you have completely exchanged a card for another one, so it is not surprising that it doesn’t work :wink:
I am using the easy-layout-card: Easy-Layout-Card: Duplicate cards for multiple entities
You have used the layout-card, which does not have this possibility(which is why I created the easy-layout-card)

OK! understood.
Sorry, I did a search on Google about this easy-layout-card and didn’t find it. I thought it was linked to an old version of layout-card.
Thank you for sharing and explanation.
I really like the result of this dashboard. What a nice job :wink:

Already in need of three tabs :slight_smile:

Not looking really professional, but hey, I’ve started from scratch about two years ago, not knowing a bit about HA, Linux and so… :slight_smile:

1 Like

Are you with Aussie Broadband? How did you get to pull the internet data usage information?

I just use the stats from my router now. I used to use this:

The developer is no longer with them so it may no longer be maintained.

I’m looking into netdata. Is that the one you use currently?
Here’s my setup for reference.

No I have a Ubiquiti ERX and use SNMP.

Im trying to set this up.

I have this info under system. But cant find any entitys to suface this to a dashboard. What am I missing?

Im also trying to make the SNMP sensors a little more readable and relevant,

Is there a way to do that? convert bytes to show gigabytes and have it show some weekly stats or something?

image

Thanks guys :slight_smile:

1 Like