System Monitoring - How does yours look?

Share your Projects! Dashboards & Frontend
1120

Thanks again for the reply. But i’m afraid I will need some hand holding with this.

Can you advise how to do this?

1121

Thank you all for the inspiration, finally took care off it and made a system monitoring dashboard and this is what i decided on

Screenshot_20240426_010529_Home Assistant
Screenshot_20240426_010529_Home Assistant1200×2481 331 KB

3 Likes
1122

how to make a graph like this?
interposes the elements shown above and below

2024-05-04_08-38-20 (2)
2024-05-04_08-38-20 (2)922×530 62.2 KB

1123

I use for similar chart Apex Charts card:

Screenshot 2024-05-04 at 10.30.03
Screenshot 2024-05-04 at 10.30.03711×291 16.7 KB

Here is slightly modified code Iuse to show column chart:

  - type: custom:apexcharts-card
    update_interval: 5s
    graph_span: 5m
    show:
      loading: false
    apex_config:
      chart:
        height: 250px
      grid:
        show: true
        strokeDashArray: 0
        borderColor: '#444444'
        position: back
        xaxis:
          lines:
            show: true
        yaxis:
          lines:
            show: true
      yaxis:
        forceNiceScale: true
      xaxis:
        type: datetime
        axisTicks:
          show: true
        tickAmount: 6
        labels:
          format: HH:mm
        lines:
          show: true
      fill:
        type: gradient
        gradient:
          type: vertical
          shade: dark
          stops:
            - 0
            - 90
          opacityFrom:
            - 1
            - 0.2
          opacityTo:
            - 0.2
            - 1
    series:
      - entity: sensor.lan_speed_ap_f_in
        type: column
        color: var(--lightblue1)
        name: IN
      - entity: sensor.lan_speed_ap_f_out
        type: column
        color: var(--lightblue3)
        name: OUT
        invert: true # here axis inversion goes
      - entity: input_number.zero_value
        color: var(--lightblue3)
        name: ' '
    all_series_config:
      stroke_width: 1.5
      type: area

It is not perfect, But for sure you can play with some configuration parameters to get better results.

1 Like
1124

thanks this works well

1125

Screenshot 2024-05-30 at 11.47.30

For those interested i figured out how to make the date / time format as displayed above.

Here is the code for those that are interested for this card.

type: custom:button-card
entity: binary_sensor.rpi_power_status
aspect_ratio: 1/1
name: Raspberry <br>Pi
styles:
  card:
    - border-radius: 10%
    - padding: 7%
    - font-size: 13px
    - text-transform: capitalize
  grid:
    - grid-template-areas: '"i n" "temp temp" "ip ip" "boot boot"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content
  name:
    - font-weight: null
    - font-size: 14px
    - color: '#00000'
    - text-align: left
    - margin-top: 5px
    - justify-self: start
    - padding-bottom: 4px
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon:
    - align-self: start
    - color: ''
    - width: 80%
    - overflow: visible
    - margin-top: 0%
  custom_fields:
    temp:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    boot:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    ip:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
custom_fields:
  ip: |
    [[[
       return `<ha-icon
                icon="mdi:ip"
                style="width: 20px; height: 20px; color: #00000;">
                </ha-icon><span>  &nbsp  <span style="color: var(--text-color-sensor);">${states['sensor.system_monitor_ipv4_address_eth0'].state}</span></span>` 
    ]]]
  boot: |
    [[[
       const date = new Date(states['sensor.system_monitor_last_boot'].state);
       const formattedDate = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })} ${date.getFullYear()} :  ${date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}`;
       return `<ha-icon
                icon="mdi:clock"
                style="width: 20px; height: 20px; color: #00000;">
                </ha-icon><span> &nbsp <span style="color: var(--text-color-sensor);">${formattedDate}</span></span>` 
    ]]]  
  temp: |
    [[[
       return `<ha-icon
                icon="mdi:temperature-celsius"
                style="width: 20px; height: 20px; color: #00000;">
                </ha-icon><span>  &nbsp <span style="color: var(--text-color-sensor);">${states['sensor.system_monitor_processor_temperature'].state}</span></span>` 
    ]]]

This is the code for the date / time format :

boot: |
    [[[
       const date = new Date(states['sensor.system_monitor_last_boot'].state);
       const formattedDate = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })} ${date.getFullYear()} :  ${date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}`;
       return `<ha-icon
                icon="mdi:clock"
                style="width: 20px; height: 20px; color: #00000;">
                </ha-icon><span> &nbsp <span style="color: var(--text-color-sensor);">${formattedDate}</span></span>` 
    ]]]
1126

Nice monitor
Can you share code Raspberry Pi card @Kabala

1127

@fraintt … Really nice dashboard. Thanks for sharing

1128

Hi. Can I ask how to enable having a sensor.processor_use or sensor.disk_use_percent_home? These do not exist in my installation of HA. Thank you.

1129
1132

@gdreelin Would be able to share your Ubiquiti card config?

1133

Any idea what the difference is between the system monitor processor and command line cpu temp sensors on a raspberry pi?, they both provide different readings.

image

1135

Work in progress, but coming along. Mostly using custom button card and default cards

image
image1522×1048 159 KB

3 Likes
1136

Hello, nice dashboard voor the synology can you share the code?

1137

Sure:

type: vertical-stack
cards:
  - type: custom:button-card
    entity: update.synstor_dsm_update
    name: synstor
    icon: mdi:nas
    aspect_ratio: 3/2
    styles:
      card:
        - background-color: "#55555544"
        - background: url(/local/DS920plus.png) round
        - background-position: center top
        - background-repeat: no-repeat
        - background-size: 35%
        - border-radius: 3%
        - padding: 5%
        - color: ivory
        - font-size: 14px
        - text-shadow: 0px 0px 5px black
        - text-transform: capitalize
      grid:
        - grid-template-areas: "\"i up\" \"n n\" \"cpu cpu\" \"temp temp\" \"ip ip\" \"ds ds\""
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content min-content
      name:
        - font-weight: bold
        - font-size: 20px
        - color: white
        - align-self: middle
        - justify-self: start
        - padding-bottom: 14px
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - color: |-
            [[[
              if (entity.state == "on") return 'orange';
              else if (states["sensor.synstor_temperature"].state > 60) return 'orange';
              else return 'lime';
            ]]]
        - width: 30%
        - margin-top: "-10%"
      custom_fields:
        up:
          - align-self: start
          - justify-self: end
        cpu:
          - padding-bottom: 8px
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if (states["sensor.synstor_cpu_utilization_total"].state > 50)
              return "red"; ]]]
        temp:
          - padding-bottom: 8px
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if (states["sensor.synstor_memory_usage_real"].state > 60)
              return "red"; ]]]
        ds:
          - padding-bottom: 8px
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": >-
              [[[ if (states["sensor.synstor_temperature"].state > 60) return
              "red"; ]]]
    custom_fields:
      up: |
        [[[
          var ustate = (entity.state == 'on') ? 'Update Available' : 'Up-To-Date';
          return `<ha-icon
          icon="mdi:update"
          style="width: 24px; height: 24px; color: deepskyblue;">
           </ha-icon> <span>${ ustate }</span>`
        ]]]
      cpu: |
        [[[
          return `<ha-icon
          icon="mdi:chip"
          style="width: 24px; height: 24px; color: deepskyblue;">
          </ha-icon> <span>CPU: <span style="color:var(--text-color-sensor);">${ states['sensor.synstor_cpu_utilization_total'].state }%</span></span>`
        ]]]
      temp: |
        [[[
          return `<ha-icon
          icon="mdi:memory"
          style="width: 24px; height: 24px; color: deepskyblue;">
          </ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">${ states['sensor.synstor_memory_usage_real'].state}% </span></span>`
        ]]]
      ds: |
        [[[
          return `<ha-icon
          icon="mdi:thermometer"
          style="width: 24px; height: 24px; color: deepskyblue;">
          </ha-icon> <span>Temperature: <span style="color: var(--text-color-sensor);">${ states['sensor.synstor_temperature'].state }°C&nbsp;&nbsp;&nbsp;&nbsp;</span>`
        ]]]
  - type: custom:bar-card
    max: "5.26"
    unit_of_measurement: / 5.26TB
    entities:
      - entity: sensor.synstor_volume_1_used_space
        icon: mdi:library-shelves
        name: Storage (Volume 1)
    card_mod:
      style: |
        ha-icon {
          color:
            {% if is_state('sensor.synstor_volume_1_status', 'normal') %}
              lime
            {% else %}
              red
            {% endif %}
            ;
          --mdc-icon-size: 45px
        }
        bar-card-value {

        }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.synstor_drive_1_temperature
        name: Drive 1
        icon: mdi:harddisk
        aspect_ratio: 1/1.3
        styles:
          card:
            - background-color: "#55555544"
            - border-radius: 10%
            - padding: 10%
            - color: ivory
            - font-size: 8.5px
            - text-shadow: 0px 0px 5px black
            - text-transform: capitalize
          grid:
            - grid-template-areas: "\"i n\" \"stat stat\" \"smart smart\" \"graph graph\""
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content 1fr
          name:
            - font-weight: bold
            - font-size: 12px
            - color: white
            - align-self: start
            - justify-self: end
            - margin-top: 13%
          img_cell:
            - justify-content: start
            - align-items: start
            - margin-left: "-35%"
          icon:
            - width: 80%
            - margin-top: "-20%"
            - margin-left: "-2%"
            - color: |
                [[[ 
                  if (entity.state > 50) return "red";
                  if (states['sensor.synstor_drive_1_status'].state != 'normal') {
                    return "red"
                  }
                  if (entity.state >= 35) return "orange";
                  else return "lime";
                ]]]
          custom_fields:
            stat:
              - padding-bottom: 1px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-top: "-10%"
            smart:
              - padding-bottom: 2px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-bottom: "-15%"
            graph:
              - align-self: bottom
              - margin-left: "-12%"
              - margin-right: "-12%"
              - height: 50%
        custom_fields:
          stat: |
            [[[
              var nas = states['sensor.synstor_drive_1_status'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              if (nas == 'not_use') {
                staticon = 'width: 14px; height: 14px; color: orange;';
                var nas = 'Hot-Spare'
              }
              return `<ha-icon
              icon="mdi:power-standby"
              style="${staticon}">
              </ha-icon> <span style="color: white;">${nas}</span>`
            ]]]
          smart: |
            [[[
              var nas = states['sensor.synstor_drive_1_status_smart'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              return `<ha-icon
              icon="mdi:memory"
              style="${staticon}">
              </ha-icon> S.M.A.R.T`
            ]]]
          graph:
            card:
              type: custom:mini-graph-card
              group: true
              font_size: 30
              height: 140
              align_state: right
              lower_bound: 24
              show:
                points: false
                name: false
                icon: false
              entities:
                - entity: "[[[ return entity.entity_id ]]]"
              style: |
                ha-card {
                  box-shadow: none;
                }
      - type: custom:button-card
        entity: sensor.synstor_drive_2_temperature
        name: Drive 2
        icon: mdi:harddisk
        aspect_ratio: 1/1.3
        styles:
          card:
            - background-color: "#55555544"
            - border-radius: 10%
            - padding: 10%
            - color: ivory
            - font-size: 8.5px
            - text-shadow: 0px 0px 5px black
            - text-transform: capitalize
          grid:
            - grid-template-areas: "\"i n\" \"stat stat\" \"smart smart\" \"graph graph\""
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content 1fr
          name:
            - font-weight: bold
            - font-size: 12px
            - color: white
            - align-self: start
            - justify-self: end
            - margin-top: 13%
          img_cell:
            - justify-content: start
            - align-items: start
            - margin-left: "-35%"
          icon:
            - width: 80%
            - margin-top: "-20%"
            - margin-left: "-2%"
            - color: |
                [[[ 
                  if (entity.state > 50) return "red";
                  if (entity.state >= 35) return "orange";
                  else return "lime";
                ]]]
          custom_fields:
            stat:
              - padding-bottom: 1px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-top: "-10%"
            smart:
              - padding-bottom: 2px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-bottom: "-15%"
            graph:
              - align-self: bottom
              - margin-left: "-12%"
              - margin-right: "-12%"
              - height: 50%
        custom_fields:
          stat: |
            [[[
              var nas = states['sensor.synstor_drive_2_status'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              if (nas == 'not_use') {
                staticon = 'width: 14px; height: 14px; color: orange;';
                var nas = 'Hot-Spare'
              }
              return `<ha-icon
              icon="mdi:power-standby"
              style="${staticon}">
              </ha-icon> <span style="color: white;">${nas}</span>`
            ]]]
          smart: |
            [[[
              var nas = states['sensor.synstor_drive_2_status_smart'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              return `<ha-icon
              icon="mdi:memory"
              style="${staticon}">
              </ha-icon> S.M.A.R.T`
            ]]]
          graph:
            card:
              type: custom:mini-graph-card
              group: true
              font_size: 30
              height: 140
              align_state: right
              lower_bound: 24
              show:
                points: false
                name: false
                icon: false
              entities:
                - entity: "[[[ return entity.entity_id ]]]"
              style: |
                ha-card {
                  box-shadow: none;
                }
      - type: custom:button-card
        entity: sensor.synstor_drive_3_temperature
        name: Drive 3
        icon: mdi:harddisk
        aspect_ratio: 1/1.3
        styles:
          card:
            - background-color: "#55555544"
            - border-radius: 10%
            - padding: 10%
            - color: ivory
            - font-size: 8.5px
            - text-shadow: 0px 0px 5px black
            - text-transform: capitalize
          grid:
            - grid-template-areas: "\"i n\" \"stat stat\" \"smart smart\" \"graph graph\""
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content 1fr
          name:
            - font-weight: bold
            - font-size: 12px
            - color: white
            - align-self: start
            - justify-self: end
            - margin-top: 13%
          img_cell:
            - justify-content: start
            - align-items: start
            - margin-left: "-35%"
          icon:
            - width: 80%
            - margin-top: "-20%"
            - margin-left: "-2%"
            - color: |
                [[[ 
                  if (entity.state > 50) return "red";
                  if (entity.state >= 35) return "orange";
                  else return "lime";
                ]]]
          custom_fields:
            stat:
              - padding-bottom: 1px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-top: "-10%"
            smart:
              - padding-bottom: 2px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-bottom: "-15%"
            graph:
              - align-self: bottom
              - margin-left: "-12%"
              - margin-right: "-12%"
              - height: 50%
        custom_fields:
          stat: |
            [[[
              var nas = states['sensor.synstor_drive_3_status'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              if (nas == 'not_use') {
                staticon = 'width: 14px; height: 14px; color: orange;';
                var nas = 'Hot-Spare'
              }
              return `<ha-icon
              icon="mdi:power-standby"
              style="${staticon}">
              </ha-icon> <span style="color: white;">${nas}</span>`
            ]]]
          smart: |
            [[[
              var nas = states['sensor.synstor_drive_3_status_smart'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              return `<ha-icon
              icon="mdi:memory"
              style="${staticon}">
              </ha-icon> S.M.A.R.T`
            ]]]
          graph:
            card:
              type: custom:mini-graph-card
              group: true
              font_size: 30
              height: 140
              align_state: right
              lower_bound: 24
              show:
                points: false
                name: false
                icon: false
              entities:
                - entity: "[[[ return entity.entity_id ]]]"
              style: |
                ha-card {
                  box-shadow: none;
                }
      - type: custom:button-card
        entity: sensor.synstor_drive_4_temperature
        name: Drive 4
        icon: mdi:harddisk
        aspect_ratio: 1/1.3
        styles:
          card:
            - background-color: "#55555544"
            - border-radius: 10%
            - padding: 10%
            - color: ivory
            - font-size: 8.5px
            - text-shadow: 0px 0px 5px black
            - text-transform: capitalize
          grid:
            - grid-template-areas: "\"i n\" \"stat stat\" \"smart smart\" \"graph graph\""
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content 1fr
          name:
            - font-weight: bold
            - font-size: 12px
            - color: white
            - align-self: start
            - justify-self: end
            - margin-top: 13%
          img_cell:
            - justify-content: start
            - align-items: start
            - margin-left: "-35%"
          icon:
            - width: 80%
            - margin-top: "-20%"
            - margin-left: "-2%"
            - color: |
                [[[ 
                  if (entity.state > 50) return "red";
                  if (entity.state >= 35) return "orange";
                  else return "lime";
                ]]]
          custom_fields:
            stat:
              - padding-bottom: 1px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-top: "-10%"
            smart:
              - padding-bottom: 2px
              - align-self: end
              - justify-self: start
              - margin-left: "-5%"
              - margin-bottom: "-15%"
            graph:
              - align-self: bottom
              - margin-left: "-12%"
              - margin-right: "-12%"
              - height: 50%
        custom_fields:
          stat: |
            [[[
              var nas = states['sensor.synstor_drive_4_status'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              if (nas == 'not_use') {
                staticon = 'width: 14px; height: 14px; color: orange;';
                var nas = 'Hot-Spare'
              }
              return `<ha-icon
              icon="mdi:power-standby"
              style="${staticon}">
              </ha-icon> <span style="color: white;">${nas}</span>`
            ]]]
          smart: |
            [[[
              var nas = states['sensor.synstor_drive_4_status_smart'].state;
              var staticon = 'width: 14px; height: 14px; color: red;'
              if (nas == 'normal') {
                staticon = 'width: 14px; height: 14px; color: lime;';
              }
              return `<ha-icon
              icon="mdi:memory"
              style="${staticon}">
              </ha-icon> S.M.A.R.T`
            ]]]
          graph:
            card:
              type: custom:mini-graph-card
              group: true
              font_size: 30
              height: 140
              align_state: right
              lower_bound: 24
              show:
                points: false
                name: false
                icon: false
              entities:
                - entity: "[[[ return entity.entity_id ]]]"
              style: |
                ha-card {
                  box-shadow: none;
                }

I think this should be enough:

  • It uses Button-Card and Mini-Graph-Card from HACS.
  • .png files need to be transparent
  • Obviously you need the Synology integration installed and amend entities as required
1 Like
1138

Thank you, the one from synology works fine for me now. Do you also have the esxi for me?

1139

Work in progress, swipe-card used between them (I like the tall vertical panels, works well on mobile).
And yes there are a lot of different colours at the moment lol:

image
image467×1217 70 KB
image
image486×1283 76.7 KB
image
image488×1265 41.1 KB

2 Likes