flask_ipam/app/templates/panel/dashboard.html

{% extends 'panel/_base.html' %}
{% block content %}
{% include 'panel/_nav.html' %}
<div class="container" style="margin-top:5vh;">
    <div class="row">
        <!-- NETWORKS -->
        <div class="col-3">
            <a href="{{ url_for('network.networks') }}" class="card text-bg-info mb-3 text-decoration-none">
                <div class="card-header"><i class="bi bi-globe"></i> <b>Total Networks</b></div>
                <div class="card-body">
                    <h1 class="card-title text-center">{{db_networks}}</h1>
                </div>
            </a>
        </div>
        <!-- TOTAL IP -->
        <div class="col-3">
            <a href="{{ url_for('network.networks') }}" class="card text-bg-secondary mb-3 text-decoration-none" style="margin-bottom:1vh;">
                <div class="card-header"><i class="bi bi-broadcast-pin"></i> <b>Total Allocations</b></div>
                <div class="card-body">
                    <h1 class="card-title text-center">{{db_allocations}} / {{ available_alloc }}</h1>
                </div>
            </a>
        </div>
        <!-- TOTAL Inventory -->
        <div class="col-3">
            <a class="card text-bg-secondary mb-3 text-decoration-none">
                <div class="card-header"><i class="bi bi-archive"></i> <b>Total Inventory</b></div>
                <div class="card-body">
                    <h1 class="card-title text-center">{{db_inventory}}</h1>
                </div>
            </a>
        </div>
        <!-- Total Users -->
        <div class="col-3">
            <a class="card text-bg-primary mb-3 text-decoration-none">
                <div class="card-header"><i class="bi bi-people"></i> <b>Total Users</b></div>
                <div class="card-body">
                    <h1 class="card-title text-center">{{ db_users }}</h1>
                </div>
            </a>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-4">
            <canvas id="allocchart"></canvas>
        </div>
        <div class="col-4">
            <canvas id="deviceschart"></canvas>
        </div>
        <div class="col-2"></div>
    </div>
</div>
<script src="{{ url_for('static',filename='js/chart.umd.js') }}"></script>
<script>
    /* Allocations Chart */
    const ctx = document.getElementById('allocchart');
    var ip_max = JSON.parse('{{ available_alloc | tojson }}');
    var ip_min = JSON.parse('{{ db_allocations | tojson }}');
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['Reserved', 'Available'],
        datasets: [{
          label: 'IP Addresses',
          data: [ip_min, ip_max],
          borderWidth: 2
        }]
      },
      options: {
      }
    });
    /* Devices Chart */
    const ctx1 = document.getElementById('deviceschart');
    var computers = JSON.parse('{{ Inventory.query.filter_by(host_type=1).count() | tojson }}');
    var servers = JSON.parse('{{ Inventory.query.filter_by(host_type=2).count() | tojson }}');
    var virtual_machines = JSON.parse('{{ Inventory.query.filter_by(host_type=3).count() | tojson }}');
    var networks_devices = JSON.parse('{{ Inventory.query.filter_by(host_type=4).count() | tojson }}');
    var others = JSON.parse('{{ Inventory.query.filter_by(host_type=0).count() | tojson }}');
    new Chart(ctx1, {
      type: 'doughnut',
      data: {
        labels: ['Computers', 'Servers', 'VM', 'Network Devices', 'Others'],
        datasets: [{
          data: [computers, servers, virtual_machines, networks_devices, others],
          borderWidth: 2
        }]
      },
      options: {
      }
    });
</script>
{% endblock %}