Portainer Glance Widget

portainer-glance.yml

        - type: custom-api
          title: Portainer
          cache: 1h
          options:
            base-url: ${PORTAINER_URL}
            api-key: ${PORTAINER_API_KEY}
            endpoint-id: "2"
          template: |
            {{ $baseURL := .Options.StringOr "base-url" "" }}
            {{ $apiKey := .Options.StringOr "api-key" "" }}
            {{ $endpointID := .Options.StringOr "endpoint-id" "1" }}
            {{ $requestURL := print $baseURL "/api/endpoints/" $endpointID }}

            {{ if or (eq $baseURL "") (eq $apiKey "") }}
              <p class="color-negative">Portainer URL or API Key not configured.</p>
            {{ else }}
              {{ $response := newRequest $requestURL
                  | withHeader "X-API-Key" $apiKey
                  | getResponse }}

              {{ if ne $response.Response.StatusCode 200 }}
                <p class="color-negative">Error: {{ $response.Response.Status }}</p>
              {{ else }}
                {{ $data := $response.JSON }}
                <div style="display: flex; align-items: center; gap: 20px;">
                  <!-- Left column: Logo + Name + Summary -->
                  <div style="display: flex; align-items: center; gap: 12px; flex-shrink: 0;">
                    <div style="width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;">
                      <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/portainer-dark.svg" width="28" height="28" style="object-fit: contain;">
                    </div>
                    <div>
                      <div class="size-h4 color-highlight" style="display: flex; align-items: center; gap: 6px;">
                        {{ $data.String "Name" }}
                        <span style="width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-positive);"></span>
                      </div>
                      <div class="size-h5 color-subdue" style="display: flex; gap: 10px;">
                        <span data-popover-type="text" data-popover-text="Containers">{{ $data.Int "Snapshots.0.ContainerCount" }} containers</span>
                        <span data-popover-type="text" data-popover-text="Volumes">{{ $data.Int "Snapshots.0.VolumeCount" }} volumes</span>
                      </div>
                    </div>
                  </div>
                  <!-- Right column: Stats in a row -->
                  <div style="display: flex; gap: 20px; margin-left: auto;">
                    <div style="text-align: center;">
                      <div class="size-h3 color-positive">{{ $data.Int "Snapshots.0.RunningContainerCount" }}</div>
                      <div class="size-h6 color-subdue">Running</div>
                    </div>
                    <div style="text-align: center;">
                      <div class="size-h3 color-highlight">{{ $data.Int "Snapshots.0.HealthyContainerCount" }}</div>
                      <div class="size-h6 color-subdue">Healthy</div>
                    </div>
                    <div style="text-align: center;">
                      <div class="size-h3 color-highlight">{{ $data.Int "Snapshots.0.StoppedContainerCount" }}</div>
                      <div class="size-h6 color-subdue">Stopped</div>
                    </div>
                    <div style="text-align: center;">
                      <div class="size-h3 color-negative">{{ $data.Int "Snapshots.0.UnhealthyContainerCount" }}</div>
                      <div class="size-h6 color-subdue">Unhealthy</div>
                    </div>
                  </div>
                </div>
              {{ end }}
            {{ end }}