mongo-express/lib/views/index.html

Web-based admin interface for MongoDB

{% extends 'layout.html' %}

{% block title %}Home{% endblock %}

{% block breadcrumb %}
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" aria-controls="navbarDatabaseDropdown" data-bs-target="#navbarDatabaseDropdown" data-bs-toggle="collapse" aria-expanded="false">
    Database
  </a>
  <ul id="navbarDatabaseDropdown" class="dropdown-menu">
    {% for db in databases %}
    <li><a class="dropdown-item" href="{{ baseHref }}db/{{ db | url_encode }}/">{{ db }}</a></li>
    {% endfor %}
  </ul>
</li>
{% endblock %}

{% block content %}
<div class="card mb-3">
  <div class="card-header">
    <h4 class="d-inline-block">Databases</h4>
    {% if !settings.read_only %}
    <form class="form-inline float-end" method="POST">
      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
      <div class="input-group">
        <input type="text" class="form-control" id="database" name="database" placeholder="Database name" />
        <div class="input-group-append">
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-plus"></i>
            Create database
          </button>
        </div>
      </div>
    </form>
    {% endif %}
  </div>
  <ul class="list-group list-group-flush">
    {% for db in databases %}
    <li class="list-group-item p-1">
      <div class="row">
        <div class="col-md-2 d-grid">
          <a href="{{ baseHref }}db/{{ db | url_encode }}/" class="btn btn-success btn-block">
            <i class="fa fa-eye d-block"></i>View
          </a>
        </div>
        <div class="col-md-8 d-flex">
          <h3 class="align-self-center m-0"><a href="{{ baseHref }}db/{{ db | url_encode }}/">{{ db }}</a></h3>
        </div>
        {% if !settings.read_only && !settings.no_delete %}
        <div class="col-md-2 d-grid">
          <form method="POST" class="d-grid" action="{{ baseHref }}{{ db | url_encode }}">
            <input type="hidden" name="_csrf" value="{{ csrfToken }}">
            <input type="hidden" name="_method" value="delete">
            <button type="submit" class="btn btn-danger btn-block deleteButton" data-database-name="{{ db }}">
              <i class="fa fa-trash d-block"></i>Delete
            </button>
          </form>
        </div>
        {% endif %}
      </div>
    </li>
    {% endfor %}
  </ul>
</div>

{% if !settings.read_only && !settings.no_delete %}
<div class="modal fade" id="confirm-deletion" tabindex="-1" aria-labelledby="confirmDeletionLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete database</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
          Be careful! You are about to delete whole <strong><span id="modal-database-name"></span></strong> database.
        </p>
        <p>
          <label for="confirmation-input">Type the database name to proceed:</label>
          <input type="text" id="confirmation-input" name="confirmation-input" shouldbe="" value="" />
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" data-bs-dismiss="modal" class="btn btn btn-danger" id="delete">Delete</button>
        <button type="button" data-bs-dismiss="modal" class="btn">Cancel</button>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% if info != false %}
<div class="card mb-3">
  <h4 class="card-header">Server status</h4>
  <table class="table table-bordered table-striped m-0">
    <tr>
      <td><strong>Hostname</strong></td>
      <td>{{ info.host }}</td>
      <td><strong>MongoDB Version</strong></td>
      <td>{{ info.version }}</td>
    </tr>
    <tr>
      <td><strong>Uptime</strong></td>
      <td>{{ info.uptime }} seconds {% if info.uptime > 86400 %} ({{ Math.floor( info.uptime/86400 ) }} days) {% endif
        %}</td>
      <td><strong>Node Version</strong></td>
      <td>{{ process.versions.node }}</td>
    </tr>
    <tr>
      <td><strong>Server Time</strong></td>
      <td>{{ info.localTime|date('r') }}</td>
      <td><strong>V8 Version</strong></td>
      <td>{{ process.versions.v8 }}</td>
    </tr>
    <tr>
      <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td><strong>Current Connections</strong></td>
      <td>{{ info.connections.current }}</td>
      <td><strong>Available Connections</strong></td>
      <td>{{ info.connections.available }}</td>
    </tr>
    <tr>
      <td><strong>Active Clients</strong></td>
      <td>{{ info.globalLock.activeClients.total }}</td>
      <td><strong>Queued Operations</strong></td>
      <td>{{ info.globalLock.currentQueue.total }}</td>
    </tr>
    <tr>
      <td><strong>Clients Reading</strong></td>
      <td>{{ info.globalLock.activeClients.readers }}</td>
      <td><strong>Clients Writing</strong></td>
      <td>{{ info.globalLock.activeClients.writers}}</td>
    </tr>
    <tr>
      <td><strong>Read Lock Queue</strong></td>
      <td>{{ info.globalLock.currentQueue.readers }}</td>
      <td><strong>Write Lock Queue</strong></td>
      <td>{{ info.globalLock.currentQueue.writers}}</td>
    </tr>
    <tr>
      <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td><strong>Disk Flushes</strong></td>
      <td>{{ info.backgroundFlushing.flushes }}</td>
      <td><strong>Last Flush</strong></td>
      <td>{{ info.backgroundFlushing ? info.backgroundFlushing.last_finished|date('r') : '' }}</td>
    </tr>
    <tr>
      <td><strong>Time Spent Flushing</strong></td>
      <td>{{ info.backgroundFlushing.total_ms }} ms</td>
      <td><strong>Average Flush Time</strong></td>
      <td>{{ info.backgroundFlushing.average_ms }} ms</td>
    </tr>
    <tr>
      <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td><strong>Total Inserts</strong></td>
      <td>{{ info.opcounters.insert }}</td>
      <td><strong>Total Queries</strong></td>
      <td>{{ info.opcounters.query}}</td>
    </tr>
    <tr>
      <td><strong>Total Updates</strong></td>
      <td>{{ info.opcounters.update}}</td>
      <td><strong>Total Deletes</strong></td>
      <td>{{ info.opcounters.delete}}</td>
    </tr>
  </table>
</div>
{% endif %}

{#
# Still need to add global lock time stats and replica set stats
#}

{% endblock %}


{% block scripts %}
{% if !settings.read_only %}
<script src="{{ baseHref }}{{ assets.index.js }}"></script>
{% endif %}
{% endblock %}