Yaml Example for Update Notification

[cataseven]

id: sidebar
order:
  - item: overview
    name: OVERVIEW
    order: 0
  - item: studio code
    name: STUDIO CODE SERVER
    order: 1
  - item: store
    order: 2
  - new_item: true
    item: BACKUPS
    href: "/ce_hassio_google_drive_backup/ingress"
    icon: mdi:google-drive
    order: 3
  - new_item: true
    item: INTEGRATIONS
    href: "/config/integrations"
    icon: mdi:transit-connection-variant
    order: 4
  - new_item: true
    item: ENTITIES
    href: "/config/entities"
    icon: mdi:devices
    order: 5
  - new_item: true
    item: AUTOMATIONS
    href: "/config/automation"
    icon: mdi:arrow-decision
    order: 6
  - new_item: true
    item: SCRIPTS
    href: "/config/script"
    icon: mdi:script-text-play
    order: 7
  - new_item: true
    item: UPDATES
    notification: >
      {% set totalUpdates = states.update | selectattr('state', 'eq', 'on') | list | length %}
      {{ totalUpdates if totalUpdates > 0 else '' }}
    href: "/config/updates"
    icon: mdi:update
    item_background: >
      {% set totalUpdates = states.update | selectattr('state', 'eq', 'on') | list | length %}
      {% if totalUpdates > 0 %} green {% endif %}
    order: 8
  - new_item: true
    item: CHECK & RESTART
    href: "/developer-tools/yaml"
    icon: mdi:restart-alert
    order: 9
  - item: settings
    bottom: true
  - item: history
    hide: true
  - item: snapshots
    hide: true
  - item: map
    hide: true
  - item: energy
    hide: true
  - item: media
    hide: true
exceptions:
  - not_device:
    - windows
    extend_from: base
    order:
      - item: Phone
        name: PHONE
        order: 0
      - item: overview
        hide: true

;

[elchininet]

Nice! 🙌

If you want to replace the Jinja template by a JavaScript one (in that way everything is client side without performing a WebSocket call) this could be a replacement:

order:
  - new_item: true
    item: UPDATES
    notification: >
      [[[
        Object.values(states.update).filter((update) => update.state === 'on').length || ''
      ]]]

Also, you can optionally use a partial to reuse the code in multiple places:

partials:
  updates: >
    const updates = Object.values(states.update).filter((update) => update.state === 'on').length;
order:
  - new_item: true
    item: UPDATES
    notification: >
      [[[
        @partial updates
        return updates || '';
      ]]]
    item_background: >
      [[[
        @partial updates
        return updates ? 'green' : undefined;
      ]]]

[elchininet]

Hi @cataseven,

Check the latest release.

Maybe it would be interesting for you to change this item:

- new_item: true
  item: 'CHECK & RESTART'
  href: '/developer-tools/yaml'
  icon: 'mdi:restart-alert'

By:

- new_item: true
  item: 'CHECK & RESTART'
  icon: 'mdi:restart-alert'
  on_click:
    action: 'open-dialog'
    type: 'restart'

It will save you from a click and a navigation 🙂

[cataseven]

Hi @cataseven,

Check the latest release.

Maybe it would be interesting for you to change this item:

- new_item: true
  item: 'CHECK & RESTART'
  href: '/developer-tools/yaml'
  icon: 'mdi:restart-alert'

By:

- new_item: true
  item: 'CHECK & RESTART'
  icon: 'mdi:restart-alert'
  on_click:
    action: 'open-dialog'
    type: 'restart'

It will save you from a click and a navigation 🙂

Wow that's cool :) thank you, awesome!

[cataseven]

Hi @cataseven,

Check the latest release.

Maybe it would be interesting for you to change this item:

- new_item: true
  item: 'CHECK & RESTART'
  href: '/developer-tools/yaml'
  icon: 'mdi:restart-alert'

By:

- new_item: true
  item: 'CHECK & RESTART'
  icon: 'mdi:restart-alert'
  on_click:
    action: 'open-dialog'
    type: 'restart'

It will save you from a click and a navigation 🙂

Is there any chance to open directly this dialog? Sorry for being so demanding :)

[elchininet]

Is there any chance to open directly this dialog? Sorry for being so demanding :)

If you don't want to have all the options of the previous dialog and you are interested in just restarting Home Assistant, there is no need to use the restart dialog then. Just create your own dialog 😉

- new_item: true
  item: 'CHECK & RESTART'
  icon: 'mdi:restart-alert'
  on_click:
    action: 'javascript'
    code: |
      openConfirmDialog({
          title: 'Restart Home Assistant?',
          text: 'This will interrupt all running automations and scripts.',
          confirmText: 'Restart',
          dismissText: 'Cancel',
          destructive: true,
          confirm: () => {
            callService('homeassistant', 'restart');
          }
        });

[cataseven]

Thank you so much.

So for those who want to restart in one click and to reload all config (without restarting HA) in one click here is the code

  - new_item: true
    item: 'RELOAD ALL'
    icon: 'mdi:reload'
    on_click:
      action: 'javascript'
      code: |
        openConfirmDialog({
            title: 'Reload All Configurations?',
            text: 'This will reload all configurations without restarting.',
            confirmText: 'Reload',
            dismissText: 'Cancel',
            destructive: true,
            confirm: () => {
              callService('homeassistant', 'reload_all');
            }
          });
    order: 9
  - new_item: true
    item: 'CHECK & RESTART'
    icon: 'mdi:restart-alert'
    on_click:
      action: 'javascript'
      code: |
        openConfirmDialog({
            title: 'Restart Home Assistant?',
            text: 'This will interrupt all running automations and scripts.',
            confirmText: 'Restart',
            dismissText: 'Cancel',
            destructive: true,
            confirm: () => {
              callService('homeassistant', 'restart');
            }
          });
    order: 10

If you don't want any! confirmation then...

  - new_item: true
    item: 'RELOAD ALL'
    icon: 'mdi:reload'
    on_click:
      action: 'javascript'
      code: |
        callService('homeassistant', 'reload_all');
    order: 9
  - new_item: true
    item: 'CHECK & RESTART'
    icon: 'mdi:restart-alert'
    on_click:
      action: 'javascript'
      code: |
        callService('homeassistant', 'restart');
    order: 10

[elchininet]

If you don't want any! confirmation then...

Dangerous for those with fat fingers 😅

[elchininet]

By the way, if you are not using any dialogs, you can just use a call-service action on each one of those items:

- new_item: true
    item: 'RELOAD ALL'
    icon: 'mdi:reload'
    on_click:
      action: 'call-service'
      service: 'homeassistant.reload_all'
    order: 9
  - new_item: true
    item: 'CHECK & RESTART'
    icon: 'mdi:restart-alert'
    on_click:
      action: 'call-service'
      service: 'homeassistant.restart'
    order: 10

[cataseven]

For those who interested in here is my dashboard and its code

id: sidebar
order:
  - item: overview
    name: OVERVIEW
    order: 0
  - item: studio code
    name: STUDIO CODE SERVER
    order: 1
  - item: store
    order: 2
  - new_item: true
    item: BACKUPS
    href: "/cebe7a76_hassio_google_drive_backup/ingress"
    icon: mdi:google-drive
    order: 3
  - new_item: true
    item: INTEGRATIONS
    href: "/config/integrations"
    icon: mdi:transit-connection-variant
    order: 4
  - new_item: true
    item: ENTITIES
    href: "/config/entities"
    icon: mdi:devices
    order: 5
  - new_item: true
    item: AUTOMATIONS
    href: "/config/automation"
    icon: mdi:arrow-decision
    order: 6
  - new_item: true
    item: SCRIPTS
    href: "/config/script"
    icon: mdi:script-text-play
    order: 7
  - new_item: true
    item: UPDATES
    notification: >
      {% set totalUpdates = states.update | selectattr('state', 'eq', 'on') | list | length %}
      {{ totalUpdates if totalUpdates > 0 else '' }}
    href: "/config/updates"
    icon: mdi:download
    item_background: >
      {% set totalUpdates = states.update | selectattr('state', 'eq', 'on') | list | length %}
      {% if totalUpdates > 0 %} green {% endif %}
    order: 8
  - new_item: true
    item: DEVELOPER TOOLS
    href: "/developer-tools/yaml"
    icon: mdi:hammer-screwdriver
    order: 9
  - new_item: true
    item: 'RESTART'
    icon: 'mdi:restart-alert'
    on_click:
      action: 'javascript'
      code: |
        callService('homeassistant', 'restart');
    bottom: true
  - new_item: true
    item: 'RELOAD'
    icon: 'mdi:reload'
    on_click:
      action: 'javascript'
      code: |
        callService('homeassistant', 'reload_all');
    bottom: true
  - item: settings
    bottom: true
  - item: history
    hide: true
  - item: snapshots
    hide: true
  - item: map
    hide: true
  - item: energy
    hide: true
  - item: media
    hide: true
exceptions:
  - not_device:
    - windows
    extend_from: base
    order:
      - item: Phone
        name: PHONE
        order: 0
      - item: overview
        hide: true