Overlays

Modal dialogs and drawers, built on the native <dialog> element — showModal() supplies the backdrop, Escape handling, and focus trap; a thin Stimulus controller opens and closes. These are live: click the buttons.

Modal dialogs

Decommission site?

All controllers will be unpaired and the device history archived. Operators lose access immediately. This cannot be undone.

Backup restored

cloud-db-primary was restored from the 02:00 snapshot.

Edit site details

 
<div data-controller="dialog">
  <button class="btn btn-secondary" data-action="dialog#open">Open</button>
  <dialog class="modal" data-dialog-target="dialog"
          data-action="click->dialog#backdropClose keydown.esc->dialog#close">
    <div class="dialog-header">…</div>
    <div class="dialog-body">…</div>
    <div class="dialog-footer">
      <button class="btn btn-primary" data-action="dialog#close">Save</button>
    </div>
  </dialog>
</div>

Drawers

New work order

Dispatched to the site's on-call technician.

LEVEL2-MFP

Kyocera TASKalfa 4054ci

Status
degraded
IP address
10.2.14.61
Location
Level 2 — print room
Serial
VLK9401877
Toner (K)
34%
Page count
182,441

Recent faults

#2231 Toner sensor mismatch 2 days ago
#2214 Paper jam — tray 3 last week
#2198 Offline > 30 minutes 3 weeks ago 
<dialog class="drawer" data-dialog-target="dialog"
        data-action="click->dialog#backdropClose keydown.esc->dialog#close">
  <div class="drawer-layout">
    <div class="dialog-header">…</div>
    <div class="dialog-body">scrolls</div>
    <div class="dialog-footer">pinned</div>
  </div>
</dialog>