Impala-connection/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Impala Analytics — Zorro BPMN MVP</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="header-inner">
      <div>
        <h1>Impala Analytics → Zorro BPMN → LLM</h1>
        <p class="subtitle">MVP · реализация по TRD.md</p>
      </div>
      <div class="env-badge">
        <span class="env-label">ZORRO_API_URL</span>
        <span class="env-value">https://api.m11s.zorrobpm.dev</span>
      </div>
    </div>
  </header>

  <main>
    <div class="grid">
      <div class="col">
        <!-- VPN Panel -->
        <section class="panel" id="vpn-panel">
          <h2><span class="num">1</span> Checkpoint VPN</h2>

          <div class="vpn-status" id="vpn-status-box">
            <span class="status-dot" id="vpn-dot"></span>
            <span id="vpn-status-text">Disconnected</span>
          </div>

          <div class="form-row">
            <label>Gateway</label>
            <input type="text" id="vpn-gateway" value="vpn.telecom.kz">
          </div>
          <div class="form-row">
            <label>Username</label>
            <input type="text" id="vpn-user" placeholder="i.kyrykbaev" autocomplete="off">
          </div>
          <div class="form-row">
            <label>Password</label>
            <input type="password" id="vpn-pass" autocomplete="off">
          </div>

          <div class="actions">
            <button id="vpn-connect" class="primary">Connect</button>
            <button id="vpn-disconnect" disabled>Disconnect</button>
          </div>

          <label class="checkbox">
            <input type="checkbox" id="vpn-skip">
            VPN уже включён вручную (пропустить BPMN vpnConnect)
          </label>
        </section>

        <!-- Query Panel -->
        <section class="panel" id="query-panel">
          <h2><span class="num">2</span> Impala — подключение и запрос</h2>

          <div class="impala-creds" id="impala-creds">
            <div class="form-row">
              <label>Пользователь Impala</label>
              <input type="text" id="impala-user" placeholder="i.kyrykbaev" autocomplete="off">
            </div>
            <div class="form-row">
              <label>Пароль Impala</label>
              <input type="password" id="impala-pass" autocomplete="off">
            </div>
            <div class="form-row" style="display:flex; gap:8px; align-items:flex-end;">
              <div style="flex:1">
                <label>База данных</label>
                <input type="text" id="impala-db" value="Impala">
              </div>
              <button id="impala-connect" class="primary" style="margin-bottom:0; height:36px;">Загрузить таблицы</button>
            </div>
            <div class="form-row" style="margin-bottom:4px">
              <label>IP-адрес хоста <span style="color:var(--text-dim)">(если DNS не резолвит hostname)</span></label>
              <input type="text" id="impala-ip" placeholder="оставьте пустым — используется hostname" autocomplete="off">
            </div>
            <div class="impala-hosts">
              <small>Хосты: bdas-worker-08 / bdas-utility-01 · порт 21050 · LDAP+SSL</small>
            </div>
          </div>

          <div class="form-row">
            <label>Таблица</label>
            <select id="table-select" disabled>
              <option value="">— введите учётные данные выше —</option>
            </select>
            <small class="hint" id="table-hint">Список загружается через <code>SHOW TABLES IN {database}</code></small>
          </div>

          <div class="form-row">
            <label>Промпт для LLM (необязательно)</label>
            <textarea id="prompt-input" rows="5" placeholder="Оставьте пустым — будет использован дефолтный аналитический промпт"></textarea>
          </div>

          <div class="form-row">
            <label>LLM провайдер</label>
            <div class="radio-group">
              <label class="radio"><input type="radio" name="llm" value="ollama" checked> <span>Ollama (local)</span> <small>llama3.1:8b</small></label>
              <label class="radio"><input type="radio" name="llm" value="anthropic"> <span>Anthropic API</span> <small>claude-sonnet-4-6</small></label>
            </div>
          </div>

          <button id="run-btn" class="primary big" disabled>▶ Run analysis</button>
        </section>
      </div>

      <div class="col">
        <!-- Process Log -->
        <section class="panel" id="log-panel">
          <h2><span class="num">3</span> BPMN Process Log</h2>
          <div class="log-toolbar">
            <span class="pi-id" id="pi-id">processInstance: —</span>
            <button id="clear-log" class="link">очистить</button>
          </div>
          <div id="log" class="log"></div>
        </section>

        <!-- Result -->
        <section class="panel" id="result-panel">
          <h2><span class="num">4</span> Результат</h2>
          <div id="result" class="result placeholder">
            Запустите анализ, чтобы увидеть результат от LLM.
          </div>
        </section>
      </div>
    </div>
  </main>

  <footer>
    <small>kyrykbaev_i · MVP для хакатона · GUI = HTML/CSS/JS · VPN/Zorro/LLM мокированы · Impala — реальный</small>
  </footer>

  <script src="mock-data.js"></script>
  <script src="app.js"></script>
</body>
</html>