{% extends "layout.html" %} {% block css %} {% endblock %} {% block title %} Dashboard {% endblock %} {% block body %}
<!-- Page title -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-auto">
            <div class="page-pretitle">
                Overview
            </div>
            <h2 class="page-title">
                Velero Dashboard
            </h2>
        </div>
    </div>
</div>

<div class="row row-deck row-cards">
    <div class="col-md-6 col-xl-4">
        <div class="card card-sm">
            <div class="card-body d-flex align-items-center">
                <span class="text-green mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xl" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z"></path>
                        <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2">
                        </path>
                        <circle cx="12" cy="14" r="2"></circle>
                        <polyline points="14 4 14 8 8 8 8 4"></polyline>
                    </svg>
                </span>
                <div class="mr-3 lh-sm">
                    <div class="h1 strong">
                        <span id="num_backups"></span>
                        <div id="num_backups_status" class="spinner-grow text-green d-none" role="status"></div>
                    </div>
                    <div class="text-muted">Backups</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-xl-4">
        <div class="card card-sm">
            <div class="card-body d-flex align-items-center">
                <span class="text-blue mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xl" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z"></path>
                        <path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
                        <path d="M13 19.95a8 8 0 0 0 5.3 -12.8" stroke-dasharray=".001 4.13"></path>
                    </svg>
                </span>
                <div class="mr-3 lh-sm">
                    <div class="h1 strong">
                        <span id="num_restores"></span>
                        <div id="num_restores_status" class="spinner-grow text-blue d-none" role="status"></div>
                    </div>
                    <div class="text-muted">Restores</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-xl-4">
        <div class="card card-sm">
            <div class="card-body d-flex align-items-center">
                <span class="text-purple mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xl" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z"></path>
                        <rect x="4" y="5" width="16" height="16" rx="2"></rect>
                        <line x1="16" y1="3" x2="16" y2="7"></line>
                        <line x1="8" y1="3" x2="8" y2="7"></line>
                        <line x1="4" y1="11" x2="20" y2="11"></line>
                        <rect x="8" y="15" width="2" height="2"></rect>
                    </svg>
                </span>
                <div class="mr-3 lh-sm">
                    <div class="h1 strong">
                        <span id="num_schedules"></span>
                        <div id="num_schedules_status" class="spinner-grow text-purple d-none" role="status"></div>
                    </div>
                    <div class="text-muted">Schedules</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mr-3">Backup Location</h4>
                <div id="backup_locations_status" class="spinner-border text-azure d-none" role="status"></div>
            </div>
            <div class="table-responsive">
                <table class="table card-table table-vcenter" id="backup_locations">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>provider</th>
                            <th>bucket/prefix</th>
                            <th>access mode</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mr-3">Snapshot Location</h4>
                <div id="snapshot_locations_status" class="spinner-border text-azure d-none" role="status"></div>
            </div>
            <div class="table-responsive">
                <table class="table card-table table-vcenter" id="snapshot_locations">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>provider</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block javascript %}
<script src="{{ url_for('static', filename='js/views/dashboard.js') }}"></script>
{% endblock %}⏎