136 lines
9.1 KiB
HTML
136 lines
9.1 KiB
HTML
{{ define "operator_tools_pattern.html" }}
|
|
{{ template "demo_doc_start" . }}
|
|
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Universal operator/admin dashboard pattern: tool queue, batch actions, safety checks, import/export shortcuts, and explicit confirmation paths." "back_url" "/" "back_text" "← Back to catalog") }}
|
|
|
|
<section class="panel panel-composite" id="operator-workbench">
|
|
<div class="panel-subsection" id="operator-filters">
|
|
<div class="panel-head">
|
|
<h2>Tool Scope Tabs</h2>
|
|
<div class="meta">{{ .VisibleCount }} visible jobs · {{ .SelectedCount }} selected</div>
|
|
</div>
|
|
<div class="operator-toolbar operator-scope-toolbar" role="toolbar" aria-label="Scope and queue filters">
|
|
<div class="tool-group" role="group" aria-label="Tool scope">
|
|
<a class="tool-btn tool-tab {{ if eq .Scope "assets" }}active{{ end }}" href="{{ index .ScopeURLs "assets" }}">Assets</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Scope "components" }}active{{ end }}" href="{{ index .ScopeURLs "components" }}">Components</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Scope "imports" }}active{{ end }}" href="{{ index .ScopeURLs "imports" }}">Imports</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Scope "maintenance" }}active{{ end }}" href="{{ index .ScopeURLs "maintenance" }}">Maintenance</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Scope "all" }}active{{ end }}" href="{{ index .ScopeURLs "all" }}">All</a>
|
|
</div>
|
|
<div class="tool-group" role="group" aria-label="Queue status">
|
|
<a class="tool-btn tool-tab {{ if eq .Queue "all" }}active{{ end }}" href="{{ index .QueueURLs "all" }}">All queue states</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Queue "queued" }}active{{ end }}" href="{{ index .QueueURLs "queued" }}">Queued</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Queue "running" }}active{{ end }}" href="{{ index .QueueURLs "running" }}">Running</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Queue "failed" }}active{{ end }}" href="{{ index .QueueURLs "failed" }}">Failed</a>
|
|
<a class="tool-btn tool-tab {{ if eq .Queue "done" }}active{{ end }}" href="{{ index .QueueURLs "done" }}">Done</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-subsection panel-subsection-divider" id="operator-queue">
|
|
<div class="panel-head">
|
|
<h2>Operations Queue</h2>
|
|
<div class="meta">Complex dashboards may include multiple tables; standardize row actions and statuses first.</div>
|
|
</div>
|
|
{{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
|
|
<p class="meta" style="margin-bottom:12px;">
|
|
Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }}
|
|
</p>
|
|
<div class="meta" style="margin-bottom:12px;">Batch controls must keep scope/filter context explicit.</div>
|
|
<div class="table-toolbar" role="toolbar" aria-label="Operator tooling actions">
|
|
<div class="toolbar-group" role="group" aria-label="Selection">
|
|
<div class="toolbar-group-title">Selection</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ .SelectVisibleURL }}" title="Select visible" aria-label="Select visible"><svg class="tool-svg" aria-hidden="true"><use href="#ico-select-visible"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .ClearVisibleURL }}" title="Clear visible" aria-label="Clear visible"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-visible"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .ClearSelectionURL }}" title="Clear selection" aria-label="Clear selection"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-selection"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Actions">
|
|
<div class="toolbar-group-title">Actions</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn tool-icon-btn-primary" href="{{ .RunSelectedURL }}" title="Run selected" aria-label="Run selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-run"></use></svg></a>
|
|
<a class="tool-icon-btn tool-icon-btn-danger" href="{{ .CancelSelectedURL }}" title="Cancel selected" aria-label="Cancel selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-cancel"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Import and export">
|
|
<div class="toolbar-group-title">Import/Export</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ .ImportPreviewURL }}" title="Import batch preview" aria-label="Import batch preview"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .ExportFilteredURL }}" title="Export filtered" aria-label="Export filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-filtered"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .ExportSelectedURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-selected"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Task actions">
|
|
<div class="toolbar-group-title">Task Actions</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ .RetrySelectedURL }}" title="Retry selected" aria-label="Retry selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .OpenReviewModalURL }}" title="Open confirm modal" aria-label="Open confirm modal"><svg class="tool-svg" aria-hidden="true"><use href="#ico-confirm"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Misc">
|
|
<div class="toolbar-group-title">Misc</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ index .ScopeURLs "all" }}" title="All scope" aria-label="All scope"><svg class="tool-svg" aria-hidden="true"><use href="#ico-scope"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ index .QueueURLs "all" }}" title="All queue states" aria-label="All queue states"><svg class="tool-svg" aria-hidden="true"><use href="#ico-queue"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="ui-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="select-col" aria-label="Select"></th>
|
|
<th>Job ID</th>
|
|
<th>Tool</th>
|
|
<th>Scope</th>
|
|
<th>Mode</th>
|
|
<th>Status</th>
|
|
<th>Owner</th>
|
|
<th>Started</th>
|
|
<th class="actions-col" aria-label="Actions"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range .Rows }}
|
|
<tr>
|
|
<td class="select-col"><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
|
<td class="job-id-cell"><code>{{ .ID }}</code></td>
|
|
<td>{{ .Tool }}</td>
|
|
<td>{{ .Scope }}</td>
|
|
<td>{{ .Mode }}</td>
|
|
<td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
|
|
<td>{{ .Owner }}</td>
|
|
<td>{{ .StartedAt }}</td>
|
|
<td class="action-cell action-icons actions-col">
|
|
<a class="icon-link" href="{{ .RetryURL }}" title="Retry" aria-label="Retry"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
|
|
<a class="icon-link icon-link-danger" href="{{ .CancelURL }}" title="Cancel" aria-label="Cancel"><svg class="tool-svg" aria-hidden="true"><use href="#ico-cancel"></use></svg></a>
|
|
<a class="icon-link" href="{{ .ExportURL }}" title="Export" aria-label="Export"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
|
|
<a class="icon-link" href="{{ .InspectURL }}" title="Inspect" aria-label="Inspect"><svg class="tool-svg" aria-hidden="true"><use href="#ico-inspect"></use></svg></a>
|
|
</td>
|
|
</tr>
|
|
{{ else }}
|
|
<tr><td colspan="9"><span class="meta">No queued items for this scope/filter combination.</span></td></tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" id="operator-safety">
|
|
<div class="panel-head"><h2>Safety Checklist</h2></div>
|
|
<ul class="meta">
|
|
{{ range .SafetyChecklist }}
|
|
<li>{{ . }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
<div class="panel-head" style="margin-top:14px;"><h2>Recent Operator Notes</h2></div>
|
|
<ul class="meta">
|
|
{{ range .RecentActivityNotes }}
|
|
<li>{{ . }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
</section>
|
|
{{ template "demo_doc_end" . }}
|
|
{{ end }}
|