{% extends "base.html" %}
{% from "_monitoring_widgets.html" import context_help, normalized_widget with context %}
{% block content %}
{% set check_state_badges = {"ok": "status-success", "warning": "status-warning", "high": "status-warning", "critical": "status-danger", "down": "status-danger", "error": "status-danger", "affected": "status-warning", "unknown": "status-warning", "no_checks": "status-neutral"} %}
{% set capability_state_badges = {"supported_active": "status-success", "not_collected": "status-warning", "supported_not_configured": "status-neutral", "unsupported": "status-neutral"} %}
{% macro observation_list(observations) %}
<ul class="metric-list">
  {% for observation in observations %}
  <li><span><strong>{{ observation.label }}</strong>{% if observation.asset_name %}<span class="metric-context">{{ observation.asset_name }}</span>{% endif %}<span class="metric-context">Captured <time datetime="{{ observation.captured_at }}">{{ observation.display_captured_at }}</time></span></span><span class="metric-value">{{ observation.display_value }}{% if observation.stale %}<span class="status-badge status-warning">Stale · {{ '%.1f'|format(observation.age_seconds) }}s old</span>{% else %}<span class="metric-age">{{ '%.1f'|format(observation.age_seconds) }}s old</span>{% endif %}</span></li>
  {% endfor %}
</ul>
{% endmacro %}
{% macro topology_resource_group(branch, group) %}
<section class="resource-group resource-group-summary" aria-label="{{ group.label }}">
  <div class="resource-summary-heading"><h4>{{ group.label }}</h4>{% if group.partially_collected %}<span class="status-badge status-warning">Partial</span>{% elif group.id == "traffic" and group.collected_asset_count %}<span class="status-badge status-success">Cumulative totals</span>{% elif group.collected %}<span class="status-badge status-success">Observed</span>{% else %}<span class="status-badge status-neutral">Not collected</span>{% endif %}</div>
  {% if group.id == "traffic" %}
  <p class="resource-summary-value"><strong>{{ group.collected_asset_count }}</strong> active · <strong>{{ group.observed_interface_count }}</strong> observed interfaces</p>
  <p class="metric-context">{{ group.nonzero_total_count }} non-zero · {{ group.zero_total_count }} all-zero cumulative RX/TX pairs</p>
  {% else %}
  <p class="resource-summary-value"><strong>{{ group.collected_asset_count }}</strong> of {{ group.asset_count }} assets observed</p>
  <p class="metric-context">{{ group.observation_count }} latest values</p>
  {% endif %}
  <details class="topology-resource-disclosure data-disclosure" data-topology-disclosure-key="resource|{{ branch.id|urlencode }}|{{ group.id|urlencode }}">
    <summary>View complete {{ group.label }} detail</summary>
    <div class="topology-resource-detail">
      {% for asset_state in group.asset_states %}
      <section class="resource-asset">
        <div class="resource-asset-heading"><a href="{{ asset_state.href }}">{{ asset_state.name }}</a>{% if group.id == "traffic" %}<span class="status-badge {{ capability_state_badges.get(asset_state.state, 'status-neutral') }}">{{ asset_state.state }}</span>{% endif %}</div>
        {% if group.id == "traffic" and asset_state.widget %}{{ normalized_widget(asset_state.widget, asset_state.id ~ '-router-traffic-widget-title', (branch.id|urlencode) ~ '|' ~ (group.id|urlencode) ~ '|' ~ (asset_state.id|urlencode)) }}{% elif asset_state.collected %}{{ observation_list(asset_state.observations) }}{% else %}<p class="not-collected">{{ asset_state.state_description if group.id == "traffic" else 'Not collected' }}</p>{% endif %}
      </section>
      {% endfor %}
    </div>
  </details>
</section>
{% endmacro %}
<div class="page-heading"><div><p class="eyebrow">Live monitoring</p><h1>Operations overview</h1><p class="muted">Current estate, topology branch, alert, and observation status.</p></div><a class="button button-secondary button-compact" href="/inventory">Browse inventory</a></div>
{% call context_help("How to use Operations") %}
<p>Start with overall health and current alerts, then use the asset and topology summaries to locate attention. Complete check observations remain available in the check details disclosure below.</p>
{% endcall %}

{% macro estate_summary() %}
<section id="estate-summary" aria-labelledby="estate-title">
  <div class="section-heading"><div><h2 id="estate-title">Estate summary</h2><p class="field-help" data-estate-attention-message>{{ snapshot.estate.attention_message }}</p></div><span class="status-badge {{ 'status-danger' if snapshot.estate.attention_kind == 'operational_fault' else 'status-warning' if snapshot.estate.attention_kind != 'healthy' else 'status-success' }}" data-estate-state>{{ snapshot.estate.attention_label }}</span></div>
  <div class="card-grid summary-grid">
    <a class="card card-interactive" href="/inventory"><p class="eyebrow">Active assets</p><h3 data-estate-assets>{{ snapshot.estate.asset_count }}</h3><p class="muted">Across <span data-estate-topology-roots>{{ snapshot.estate.topology_root_count }}</span> topology roots</p></a>
    <a class="card card-interactive" href="/inventory"><p class="eyebrow">Active locations</p><h3 data-estate-locations>{{ snapshot.estate.location_count }}</h3><p class="muted">Physical inventory locations</p></a>
    <div class="card"><p class="eyebrow">Enabled checks</p><h3 data-estate-checks>{{ snapshot.estate.enabled_check_count }}</h3><p class="muted"><span data-estate-observed>{{ snapshot.estate.observed_check_count }}</span> with current observations · <span data-estate-uncollected>{{ snapshot.estate.not_collected_check_count }}</span> not collected</p></div>
    <div class="card"><p class="eyebrow">Checks by state</p><div class="badge-row state-counts" data-estate-state-counts>{% if snapshot.estate.enabled_check_count %}{% for state, count in snapshot.estate.check_state_counts.items() %}{% if count %}<span class="status-badge {{ check_state_badges.get(state, 'status-neutral') }}">{{ state }} {{ count }}</span>{% endif %}{% endfor %}{% else %}<span class="muted">No enabled checks</span>{% endif %}</div></div>
    <div class="card"><p class="eyebrow">Stale observations</p><h3 data-estate-stale>{{ snapshot.estate.stale_check_count }}</h3><p class="muted">Age exceeds the check interval × 2</p></div>
    <div class="card"><p class="eyebrow">Current alerts</p><h3 data-estate-alerts>{{ snapshot.estate.current_alert_count }}</h3><p class="muted">Read-only unacknowledged alerts</p></div>
  </div>
</section>
{% endmacro %}

{% macro root_causes() %}
<section id="root-causes" class="roots page-section"{% if not snapshot.root_causes %} hidden{% endif %} aria-labelledby="root-causes-title">
  <div class="section-heading"><div><h2 id="root-causes-title">Attention required</h2><p class="field-help">What is affected, whether it is an operational fault or monitoring issue, and what action is required.</p></div></div>
  <div id="root-cause-list" class="root-cause-grid">{% for root in snapshot.root_causes %}<article class="root-cause-card" data-classification="{{ root.classification }}"><div class="root-cause-heading"><div><h3>{{ root.title }} — {{ root.state_label }}</h3><p class="metadata"><a href="{{ root.asset_href }}">{{ root.asset_name }}</a></p></div><span class="status-badge {{ 'status-danger' if root.classification == 'operational_fault' else 'status-warning' }}">{{ root.classification_label }}</span></div><p>{{ root.reason }}</p><div class="root-cause-facts"><span>First seen {{ root.first_seen_display }}</span><span>Last seen {{ root.last_seen_display }}</span><span>{{ root.affected_count }} affected dependents</span></div><p class="root-cause-action"><strong>Action:</strong> {{ root.action }} <a href="{{ root.detail_href }}">Open Asset monitoring</a></p><details class="context-help root-cause-technical"><summary>Technical details</summary><div class="context-help-body"><p>Check ID: <span class="identifier">{{ root.check_id }}</span></p><p>Raw state: {{ root.state }}</p></div></details></article>{% endfor %}</div>
</section>
{% endmacro %}

{% macro operational_groups() %}
<section class="page-section" aria-labelledby="operational-groups-title">
  <div class="section-heading"><div><h2 id="operational-groups-title">Check coverage by asset</h2><p class="field-help">Attention-first grouping from enabled checks and their current server-derived state.</p></div><span class="status-badge status-neutral" data-operational-group-count>{{ snapshot.operational_groups|length }} assets</span></div>
  <div id="operational-groups" class="card-grid operations-group-grid">
    {% for group in snapshot.operational_groups %}
    <article class="card operations-group-card"><div class="card-heading"><div><h3>{% if group.asset_href %}<a href="{{ group.asset_href }}">{{ group.asset_name }}</a>{% else %}{{ group.asset_name }}{% endif %}</h3>{% if group.application_service_state_label %}<p class="metadata">Application / service availability: <strong>{{ group.application_service_state_label }}</strong></p>{% endif %}</div><span class="status-badge {{ 'status-danger' if group.attention_kind == 'operational_fault' else 'status-warning' if group.attention_kind != 'healthy' else 'status-success' }}">{{ group.attention_label }}</span></div><p>{{ group.attention_message }}</p><p class="metadata">{{ group.check_count }} checks · {{ group.alert_count }} alerts · {{ group.configuration_required_count }} configuration required · {{ group.monitoring_issue_count }} monitoring issues · {{ group.stale_check_count }} stale · {{ group.not_collected_check_count }} not collected</p><details class="context-help"><summary>Technical details</summary><div class="context-help-body"><p>Asset ID: <span class="identifier">{{ group.asset_id }}</span></p><p>Raw rollup state: {{ group.state }}</p></div></details></article>
    {% else %}<div class="empty-state grid-span"><div class="state-icon" aria-hidden="true">✓</div><h3>No active checks</h3><p>There are no active checks in this view.</p></div>{% endfor %}
  </div>
</section>
{% endmacro %}

{% macro topology_branches() %}
<section class="page-section" aria-labelledby="branches-title">
  <div class="section-heading"><h2 id="branches-title">Topology branches</h2><span class="status-badge status-neutral">Worst child wins</span></div>
  <div id="topology-branches" class="card-grid topology-branch-grid">
    {% for branch in snapshot.topology_branches %}
    <article class="card topology-branch-card">
      <div class="card-heading"><div><h3><a href="{{ branch.href }}">{{ branch.name }}</a></h3><p class="metadata">{{ branch.role }} · {{ branch.descendant_count }} descendants</p></div><span class="status-badge {{ check_state_badges.get(branch.state, 'status-neutral') }}">{{ 'No checks' if branch.state == 'no_checks' else branch.state }}</span></div>
      <p class="metadata">{{ branch.check_count }} enabled checks · {{ branch.alert_count }} current alerts · {{ branch.stale_check_count }} stale · {{ branch.not_collected_check_count }} not collected</p>
      <div class="resource-grid">{% for group in branch.resource_groups %}{{ topology_resource_group(branch, group) }}{% endfor %}</div>
      {% if branch.unavailable_resource_groups %}
      <details class="topology-unavailable-disclosure data-disclosure" data-topology-disclosure-key="unavailable|{{ branch.id|urlencode }}">
        <summary>Show unavailable capabilities ({{ branch.unavailable_resource_groups|length }})</summary>
        <ul class="unavailable-resource-list">{% for group in branch.unavailable_resource_groups %}<li><strong>{{ group.label }}</strong><span>{{ group.message }}</span></li>{% endfor %}</ul>
      </details>
      {% endif %}
    </article>
    {% else %}<div class="empty-state grid-span"><div class="state-icon" aria-hidden="true">○</div><h3>No topology branches</h3><p>Active root assets will appear after registry activation.</p></div>{% endfor %}
  </div>
</section>
{% endmacro %}

{% macro current_alerts() %}
<section class="page-section" aria-labelledby="alerts-title">
  <div class="section-heading"><h2 id="alerts-title">Current alerts</h2><span class="status-badge status-neutral" data-alert-count>{{ snapshot.current_alerts|length }} total</span></div>
  <div id="current-alerts" class="card-grid">{% for alert in snapshot.current_alerts %}<article class="card alert-card"><div class="card-heading"><div><h3>{{ alert.attention.title }}</h3><p class="metadata">{% if alert.asset_href %}<a href="{{ alert.asset_href }}">{{ alert.asset_name }}</a>{% else %}{{ alert.asset_name }}{% endif %}</p></div><span class="status-badge {{ 'status-danger' if alert.attention.kind == 'operational_fault' else 'status-warning' }}">{{ alert.attention.label }}</span></div><p><strong>{{ alert.attention.state_label }}.</strong> {{ alert.attention.reason }}</p><p class="metadata">First seen <time datetime="{{ alert.first_seen }}">{{ alert.first_seen_display }}</time> · Last observed <time datetime="{{ alert.last_seen }}">{{ alert.last_seen_display }}</time></p><p><a href="{{ alert.detail_href }}">Open Asset monitoring</a></p><details class="context-help"><summary>Technical details</summary><div class="context-help-body"><p>Severity: {{ alert.severity }} · Raw state: {{ alert.current_state }}</p><p>Check ID: <span class="identifier">{{ alert.check_id }}</span></p></div></details></article>{% else %}<div class="empty-state grid-span"><div class="state-icon" aria-hidden="true">✓</div><h3>No current alerts</h3><p>No unacknowledged, unrecovered alerts exist for enabled checks in this view.</p></div>{% endfor %}</div>
</section>
{% endmacro %}

{% macro ecosystems() %}
<section class="page-section" aria-labelledby="ecosystems-title">
  <div class="section-heading"><h2 id="ecosystems-title">Ecosystems</h2><span class="status-badge status-neutral">{{ snapshot.ecosystems|length }} total</span></div>
  {% if snapshot.ecosystems %}<div class="card-grid">{% for ecosystem in snapshot.ecosystems %}<a class="card card-interactive" href="/ecosystems/{{ ecosystem.id }}"><div class="card-heading"><h3>{{ ecosystem.name }}</h3><span class="status-badge status-success">{{ ecosystem.lifecycle }}</span></div><p class="muted">{{ ecosystem.timezone }}</p></a>{% endfor %}</div>{% else %}<div class="empty-state"><div class="state-icon" aria-hidden="true">○</div><h3>No ecosystems available</h3><p>Active ecosystems will appear after registry activation.</p></div>{% endif %}
</section>
{% endmacro %}

{% macro check_details() %}
<section class="page-section" aria-labelledby="checks-title">
  <details class="operations-check-disclosure data-disclosure">
    <summary><span><strong id="checks-title">Complete check details</strong><small>All enabled checks and latest observations</small></span><span class="status-badge status-neutral" data-check-count>{{ snapshot.checks|length }} total</span></summary>
    <div id="checks" class="card-grid checks-detail-grid" data-dashboard-url="/api/dashboard{% if ecosystem_id %}?ecosystem_id={{ ecosystem_id|urlencode }}{% endif %}" data-csrf="{{ session.csrf_token }}" aria-live="polite">{% for check in snapshot.checks %}<article class="card check-card {{ 'is-stale' if check.stale else '' }}"><div class="card-heading"><div><h3>{{ check.name }}</h3>{% if check.asset_href %}<a class="metadata" href="{{ check.asset_href }}">{{ check.asset_name }}</a>{% else %}<p class="metadata">{{ check.asset_name }}</p>{% endif %}</div><div class="badge-row"><span class="status-badge {{ check_state_badges.get(check.dependency_state.state, 'status-neutral') }}">{{ check.dependency_state.state }}</span>{% if check.result and check.stale %}<span class="status-badge status-warning">Stale</span>{% elif not check.result %}<span class="status-badge status-neutral">Not collected</span>{% endif %}</div></div><p class="metadata">Captured: {% if check.result %}<time datetime="{{ check.result.captured_at }}">{{ check.result.display_captured_at }}</time>{% else %}never{% endif %}</p><p class="metadata">Data age: {{ '%.1f'|format(check.data_age_seconds) ~ 's' if check.data_age_seconds is not none else 'not available' }}</p>{% if check.observations %}{{ observation_list(check.observations) }}{% else %}<p class="not-collected">Observations: Not collected</p>{% endif %}</article>{% else %}<div class="empty-state grid-span"><div class="state-icon" aria-hidden="true">✓</div><h3>No active checks</h3><p>There are no active checks in this view.</p></div>{% endfor %}</div>
  </details>
  <div class="error-state poll-error" role="status" aria-live="polite" data-poll-error><strong>Live refresh unavailable</strong><span>Showing the last server-rendered snapshot.</span></div>
</section>
{% endmacro %}
{% set dashboard_section_renderers = {
  "estate_summary": estate_summary,
  "root_causes": root_causes,
  "operational_groups": operational_groups,
  "topology_branches": topology_branches,
  "current_alerts": current_alerts,
  "ecosystems": ecosystems,
  "check_details": check_details
} %}
{% for section in dashboard_sections %}{{ dashboard_section_renderers[section.key]() }}{% endfor %}
{% endblock %}
{% block scripts %}<script src="/static/portal.js" defer></script>{% endblock %}