APPS/ops-dashboard.git - git.mnsoft.org

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OPS Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="/static/css/style.css">
  <style>
    body { background: #0f172a; color: #e2e8f0; margin: 0; }
    #app { display: flex; min-height: 100vh; }
    #sidebar { width: 240px; background: #111827; border-right: 1px solid #1f2937; display: flex; flex-direction: column; flex-shrink: 0; }
    #main { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; }
    #topbar { background: #111827; border-bottom: 1px solid #1f2937; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
    #page-content { flex: 1; padding: 1.5rem; overflow-y: auto; }
    .breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #9ca3af; flex-wrap: wrap; }
    .breadcrumb a { color: #60a5fa; cursor: pointer; text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb .sep { color: #4b5563; }
    .breadcrumb .current { color: #e2e8f0; font-weight: 500; }
    .hamburger { display: none; background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer; padding: 0.25rem; }
    .sidebar-logo { padding: 1.25rem 1rem; font-size: 1.125rem; font-weight: 700; color: #f3f4f6; border-bottom: 1px solid #1f2937; display: flex; align-items: center; gap: 0.5rem; }
    .sidebar-nav { padding: 0.75rem 0.5rem; flex: 1; }
    .sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid #1f2937; font-size: 0.75rem; color: #6b7280; }
    .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
    .grid-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
    .grid-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
    .card-clickable { cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
    .card-clickable:hover { border-color: #60a5fa; transform: translateY(-1px); }
    .stat-tile { cursor: pointer; transition: border-color 0.2s, transform 0.1s; }
    .stat-tile:hover { border-color: #60a5fa; transform: translateY(-2px); }
    .filter-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
    .filter-badge button { background: none; border: none; color: #60a5fa; cursor: pointer; font-size: 0.875rem; padding: 0; line-height: 1; }
    .filter-badge button:hover { color: #f87171; }
    .view-toggle { display: flex; background: #1f2937; border-radius: 0.375rem; overflow: hidden; border: 1px solid #374151; }
    .view-toggle button { background: none; border: none; color: #6b7280; padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
    .view-toggle button.active { background: rgba(59,130,246,0.2); color: #60a5fa; }
    .view-toggle button:hover:not(.active) { color: #d1d5db; }
    .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40; }
    @media (max-width: 768px) {
      #sidebar { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 50; transition: left 0.2s; }
      #sidebar.open { left: 0; }
      .mobile-overlay.open { display: block; }
      .hamburger { display: block; }
      .grid-auto { grid-template-columns: 1fr; }
      .grid-stats { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>

<!-- Login Overlay -->
<div id="login-overlay" style="position:fixed;inset:0;background:#0f172a;z-index:100;display:flex;align-items:center;justify-content:center;">
  <div class="card" style="width:100%;max-width:380px;text-align:center;">
    <div style="font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:#f3f4f6;">OPS Dashboard</div>
    <input type="password" id="login-token" placeholder="Enter access token" class="form-input" style="margin-bottom:1rem;"
      onkeydown="if(event.key==='Enter')doLogin()">
    <button onclick="doLogin()" class="btn btn-primary" style="width:100%;">Login</button>
    <div id="login-error" style="color:#f87171;font-size:0.875rem;margin-top:0.75rem;display:none;"></div>
  </div>
</div>

<!-- App Shell -->
<div id="app" style="display:none;">
  <div id="mobile-overlay" class="mobile-overlay" onclick="toggleSidebar()"></div>

  <!-- Sidebar -->
  <aside id="sidebar">
    <div class="sidebar-logo">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1" fill="#60a5fa"/><circle cx="6" cy="18" r="1" fill="#60a5fa"/></svg>
      OPS Dashboard
    </div>
    <nav class="sidebar-nav" id="sidebar-nav">
      <a class="sidebar-link active" data-page="dashboard" onclick="showPage('dashboard')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        Dashboard
      </a>
      <a class="sidebar-link" data-page="backups" onclick="showPage('backups')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Backups
      </a>
      <a class="sidebar-link" data-page="system" onclick="showPage('system')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
        System
      </a>
      <a class="sidebar-link" data-page="restore" onclick="showPage('restore')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
        Restore
      </a>
    </nav>
    <div class="sidebar-footer" id="sidebar-footer">
      <a onclick="doLogout()" style="color:#9ca3af;cursor:pointer;">Logout</a><div id="app-version" style="margin-top:0.5rem;color:#4b5563;font-size:0.625rem;"></div>
    </div>
  </aside>

  <!-- Main Content -->
  <div id="main">
    <div id="topbar">
      <button class="hamburger" onclick="toggleSidebar()">&#9776;</button>
      <div id="breadcrumbs" class="breadcrumb" style="flex:1;"></div>
      <div id="view-toggle-wrap" style="display:none;">
        <div class="view-toggle">
          <button id="btn-view-cards" class="active" onclick="setViewMode('cards')" title="Card view">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            Cards
          </button>
          <button id="btn-view-table" onclick="setViewMode('table')" title="Table view">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            Table
          </button>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:0.75rem;">
        <div id="refresh-indicator" class="refresh-ring paused" title="Auto-refresh"></div>
        <button class="btn btn-ghost btn-xs" onclick="refreshCurrentPage()" title="Refresh now">Refresh</button>
      </div>
    </div>
    <div id="page-content"></div>
  </div>
</div>

<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>

<!-- Log Modal -->
<div id="log-modal" class="modal-overlay" style="display:none;" onclick="if(event.target===this)closeLogModal()">
  <div class="modal-box" style="max-width:800px;">
    <div class="modal-header">
      <span id="log-modal-title" style="font-weight:600;color:#f3f4f6;">Container Logs</span>
      <button onclick="closeLogModal()" style="background:none;border:none;color:#9ca3af;font-size:1.25rem;cursor:pointer;">&times;</button>
    </div>
    <div class="modal-body" style="padding:0;">
      <div id="log-modal-content" class="terminal" style="max-height:60vh;border:none;border-radius:0;"></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost btn-sm" onclick="closeLogModal()">Close</button>
      <button class="btn btn-primary btn-sm" onclick="refreshLogs()">Refresh</button>
    </div>
  </div>
</div>

<script src="/static/js/app.js?v=4"></script>
</body>
</html>