InstallerRobot/web-server/views/agent.ejs

<%- include('partials/page-start') %>

<section class="page">
  <div class="page-header">
    <div>
      <h1>Agent</h1>
      <p>Quản lý Local Installer Agent package dùng cho máy client Linux.</p>
    </div>
    <div class="page-actions">
      <span class="badge badge-primary">Admin</span>
      <span class="badge badge-info"><%= agentPackages.length %> packages</span>
    </div>
  </div>

  <div class="agent-layout">
    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>Upload / Update</h2>
          <% if (latestAgentPackage) { %>
            <p>Latest <%= preferredArch %>: <strong><%= latestAgentPackage.version %></strong></p>
          <% } else { %>
            <p>Chưa có Agent package cho <%= preferredArch %>.</p>
          <% } %>
        </div>
      </div>

      <form class="agent-upload-form" method="post" action="/agent/packages" enctype="multipart/form-data">
        <div class="form-grid">
          <label class="form-field">
            <span>Version</span>
            <input type="text" name="version" placeholder="0.1.1" required>
          </label>
          <label class="form-field">
            <span>Architecture</span>
            <input type="text" name="arch" value="<%= preferredArch %>" required>
          </label>
          <div class="form-field full">
            <span>Agent .deb</span>
            <div class="file-dropzone" data-file-dropzone>
              <input class="file-input" type="file" name="agentFile" accept=".deb" required data-file-input>
              <div class="file-dropzone-content">
                <span class="material-symbols-outlined">upload_file</span>
                <strong>Chọn file Agent package</strong>
                <small>Server sẽ lưu thành local-installer-agent_&lt;version&gt;_&lt;arch&gt;.deb</small>
                <button class="btn btn-secondary" type="button" data-file-browse>
                  <span class="material-symbols-outlined">attach_file</span>
                  Chọn file
                </button>
              </div>
              <div class="file-preview" data-file-preview hidden>
                <span class="material-symbols-outlined">draft</span>
                <div>
                  <strong data-file-name>Chưa chọn file</strong>
                  <small data-file-meta></small>
                </div>
                <button class="icon-button subtle" type="button" title="Bỏ file" aria-label="Bỏ file đã chọn" data-file-clear>
                  <span class="material-symbols-outlined">close</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-actions">
          <button class="btn btn-primary" type="submit">
            <span class="material-symbols-outlined">upload</span>
            Upload / Update
          </button>
        </div>
      </form>

      <div class="agent-command-list">
        <label class="form-field full">
          <span>Install command</span>
          <input class="mono" type="text" value="<%= installCommand %>" readonly>
        </label>
        <label class="form-field full">
          <span>Latest package URL</span>
          <input class="mono" type="text" value="<%= latestAgentUrl %>" readonly>
        </label>
        <label class="form-field full">
          <span>Storage folder</span>
          <input class="mono" type="text" value="<%= agentPackageDir %>" readonly>
        </label>
      </div>
    </section>

    <section class="table-panel wide-panel">
      <div class="page-filters inline">
        <label class="filter-field wide">
          <span>Search</span>
          <input type="search" placeholder="Tìm theo version, arch, filename..." data-table-search="agentPackagesTable">
        </label>
      </div>

      <div class="table-wrap">
        <table id="agentPackagesTable" class="data-table agent-table">
          <thead>
            <tr>
              <th>Version</th>
              <th>Arch</th>
              <th>File</th>
              <th>Size</th>
              <th>Uploaded</th>
              <th>Status</th>
              <th class="action-col">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% if (agentPackages.length === 0) { %>
              <tr>
                <td colspan="7" class="table-empty">Chưa có Agent package nào.</td>
              </tr>
            <% } %>
            <% agentPackages.forEach((item) => { %>
              <tr data-search="<%= `${item.version} ${item.arch} ${item.fileName}`.toLowerCase() %>">
                <td><strong><%= item.version %></strong></td>
                <td><span class="badge badge-muted"><%= item.arch %></span></td>
                <td>
                  <span class="table-title"><%= item.fileName %></span>
                  <span class="table-subtitle"><%= item.downloadPath %></span>
                </td>
                <td><%= item.sizeLabel %></td>
                <td><%= item.uploadedAt %></td>
                <td>
                  <% if (item.isLatestForArch) { %>
                    <span class="badge badge-success">Latest</span>
                  <% } else { %>
                    <span class="badge badge-muted">Stored</span>
                  <% } %>
                </td>
                <td class="action-col">
                  <div class="action-group">
                    <a class="icon-button subtle" href="<%= item.downloadPath %>" title="Download" aria-label="Download <%= item.fileName %>">
                      <span class="material-symbols-outlined">download</span>
                    </a>
                  </div>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
      <div class="page-pager">
        <span>Showing 1-<%= agentPackages.length %> of <%= agentPackages.length %></span>
        <div>
          <button type="button" disabled>Prev</button>
          <span>Page 1 / 1</span>
          <button type="button" disabled>Next</button>
        </div>
      </div>
    </section>
  </div>
</section>

<%- include('partials/page-end') %>