SentinelMesh/widgets/glance-page-example.yaml

# Exemple de page Glance complète avec les deux widgets SentinelMesh
# À intégrer dans votre glance.yml
#
# Installation :
#   1. Copier sentinelmesh.css dans votre répertoire assets Glance
#   2. Référencer le CSS dans server: custom-css-file: /assets/sentinelmesh.css
#   3. Ajouter cette page dans votre glance.yml

pages:
  - name: Infrastructure
    slug: infra
    width: wide
    columns:
      - size: small
        widgets:
          # --- Métriques système ---
          - type: custom-api
            title: Métriques systèmes
            cache: 5s
            url: http://sentinelmesh:8080/api/v1/widgets/metrics
            template: |
              <ul class="list list-gap-15">
              {{ range .JSON.Array "agents" }}
                {{- $cpu  := .Float "cpu_percent" -}}
                {{- $ram  := .Float "ram_percent" -}}
                {{- $disk := .Float "disk_percent" -}}
                {{- $temp := .Float "temperature_c" -}}
                {{- $up   := eq (.String "status") "online" -}}

                <li class="sm-agent">
                  <div class="flex justify-between items-center margin-bottom-6">
                    <span class="size-h4 {{ if $up }}color-highlight{{ else }}color-negative{{ end }}">
                      {{ .String "hostname" }}
                    </span>
                    <span class="size-h6 color-paragraph"
                      {{ .String "last_seen" | parseTime "rfc3339" | toRelativeTime }}></span>
                  </div>

                  {{ if $up }}

                  <div class="sm-metric-row">
                    <span class="sm-metric-label size-h6 color-paragraph">CPU</span>
                    <div class="sm-bar-track">
                      <div class="sm-bar {{ if ge $cpu 85.0 }}sm-bar-crit{{ else if ge $cpu 60.0 }}sm-bar-warn{{ else }}sm-bar-ok{{ end }}"
                           style="width: {{ printf "%.0f" $cpu }}%"></div>
                    </div>
                    <span class="sm-metric-val size-h6">{{ printf "%.0f" $cpu }}%</span>
                  </div>

                  <div class="sm-metric-row">
                    <span class="sm-metric-label size-h6 color-paragraph">RAM</span>
                    <div class="sm-bar-track">
                      <div class="sm-bar {{ if ge $ram 90.0 }}sm-bar-crit{{ else if ge $ram 70.0 }}sm-bar-warn{{ else }}sm-bar-ok{{ end }}"
                           style="width: {{ printf "%.0f" $ram }}%"></div>
                    </div>
                    <span class="sm-metric-val size-h6">{{ printf "%.0f" $ram }}%</span>
                  </div>

                  <div class="sm-metric-row">
                    <span class="sm-metric-label size-h6 color-paragraph">Disque</span>
                    <div class="sm-bar-track">
                      <div class="sm-bar {{ if ge $disk 90.0 }}sm-bar-crit{{ else if ge $disk 75.0 }}sm-bar-warn{{ else }}sm-bar-ok{{ end }}"
                           style="width: {{ printf "%.0f" $disk }}%"></div>
                    </div>
                    <span class="sm-metric-val size-h6">{{ printf "%.0f" $disk }}%</span>
                  </div>

                  {{ if gt $temp 0.0 }}
                  <div class="sm-metric-row">
                    <span class="sm-metric-label size-h6 color-paragraph">Temp</span>
                    <div class="sm-bar-track">
                      <div class="sm-bar {{ if ge $temp 85.0 }}sm-bar-crit{{ else if ge $temp 70.0 }}sm-bar-warn{{ else }}sm-bar-ok{{ end }}"
                           style="width: {{ printf "%.0f" (mul (div $temp 100.0) 100.0) }}%"></div>
                    </div>
                    <span class="sm-metric-val size-h6">{{ printf "%.0f" $temp }}°C</span>
                  </div>
                  {{ end }}

                  {{ else }}
                  <p class="size-h6 color-negative">Agent hors ligne</p>
                  {{ end }}
                </li>
              {{ end }}
              </ul>

      - size: full
        widgets:
          # --- Découverte réseau ---
          - type: custom-api
            title: Réseau local — 10.0.0.0/22
            cache: 30s
            url: http://sentinelmesh:8080/api/v1/widgets/network
            template: |
              {{- $online  := .JSON.Int "online" -}}
              {{- $offline := .JSON.Int "offline" -}}
              {{- $total   := .JSON.Int "total" -}}

              <div class="sm-net-header flex justify-between margin-bottom-10">
                <span class="size-h5 color-paragraph">
                  <span class="color-positive">{{ $online }} en ligne</span>
                  {{ if gt $offline 0 }}&nbsp;·&nbsp;<span class="color-negative">{{ $offline }} hors ligne</span>{{ end }}
                  &nbsp;·&nbsp; {{ $total }} total
                </span>
                {{ if .JSON.Exists "last_scan_at" }}
                <span class="size-h6 color-paragraph"
                  {{ .JSON.String "last_scan_at" | parseTime "rfc3339" | toRelativeTime }}></span>
                {{ end }}
              </div>

              <ul class="list list-gap-10 collapsible-container" data-collapse-after="15">
              {{ range .JSON.Array "devices" }}
                {{- $state  := .String "state" -}}
                {{- $host   := .String "hostname" -}}
                {{- $ip     := .String "ip" -}}
                {{- $vendor := .String "vendor" -}}
                <li class="sm-device flex gap-10 items-center">

                  <div class="sm-state-dot {{ if eq $state "online" }}sm-dot-online{{ else }}sm-dot-offline{{ end }}"></div>

                  <div class="grow min-width-0">
                    <div class="flex justify-between">
                      <span class="size-h4 {{ if eq $state "online" }}color-highlight{{ else }}color-paragraph{{ end }} text-truncate">
                        {{- if ne $host "" }}{{ $host }}{{ else }}{{ $ip }}{{ end -}}
                      </span>
                      <span class="size-h6 color-paragraph shrink-0 margin-left-10">{{ $ip }}</span>
                    </div>

                    <div class="flex gap-5 flex-wrap margin-top-3">
                      {{ if ne $vendor "" }}
                      <span class="sm-badge sm-badge-vendor size-h6">{{ $vendor }}</span>
                      {{ end }}
                      {{ range .Array "services" }}
                      <span class="sm-badge size-h6">{{ .String "" }}</span>
                      {{ end }}
                    </div>
                  </div>

                </li>
              {{ end }}
              </ul>