wip
This commit is contained in:
pika
parent
66fe31eabe
commit
67dae6f5e4
7 changed files with 490 additions and 23 deletions
239
app/templates/dashboard/overview.html
Normal file
239
app/templates/dashboard/overview.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-xl">
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Infrastructure Overview
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="btn-list">
|
||||
<a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
New Subnet
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
New Server
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
New Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hierarchical View -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Network Infrastructure</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Subnets -->
|
||||
{% if hierarchy.subnets %}
|
||||
{% for subnet in hierarchy.subnets %}
|
||||
<div class="subnet-container mb-4">
|
||||
<div class="subnet-header d-flex align-items-center p-2 bg-azure-lt rounded">
|
||||
<span class="ti ti-network me-2"></span>
|
||||
<h4 class="m-0">
|
||||
<a href="{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}" class="text-reset">
|
||||
{{ subnet.cidr }}
|
||||
</a>
|
||||
{% if subnet.location %}
|
||||
<small class="text-muted ms-2">({{ subnet.location }})</small>
|
||||
{% endif %}
|
||||
{% if subnet.description %}
|
||||
<small class="text-muted ms-2">{{ subnet.description }}</small>
|
||||
{% endif %}
|
||||
</h4>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.server_new') }}?subnet_id={{ subnet.id }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<span class="ti ti-plus me-1"></span> Add Server
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Servers in this subnet -->
|
||||
{% if subnet.servers %}
|
||||
<div class="ps-4 mt-2">
|
||||
{% for server in subnet.servers %}
|
||||
<div class="server-container mb-3 border-start ps-3">
|
||||
<div class="server-header d-flex align-items-center p-2 bg-light rounded">
|
||||
<span class="ti ti-server me-2"></span>
|
||||
<h5 class="m-0">
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
|
||||
{{ server.hostname }}
|
||||
</a>
|
||||
<small class="text-muted ms-2">{{ server.ip_address }}</small>
|
||||
</h5>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<span class="ti ti-plus me-1"></span> Add App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Apps on this server -->
|
||||
{% if server.apps %}
|
||||
<div class="ps-4 mt-2">
|
||||
{% for app in server.apps %}
|
||||
<div class="app-container mb-2 border-start ps-3">
|
||||
<div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
|
||||
<span class="ti ti-app-window me-2"></span>
|
||||
<h6 class="m-0">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
|
||||
{{ app.name }}
|
||||
</a>
|
||||
</h6>
|
||||
<div class="ms-2">
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="ps-4 mt-2">
|
||||
<div class="text-muted fst-italic">No applications</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="ps-4 mt-2">
|
||||
<div class="text-muted fst-italic">No servers in this subnet</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Standalone Servers -->
|
||||
{% if hierarchy.standalone_servers %}
|
||||
<div class="standalone-servers-container mb-4">
|
||||
<div class="subnet-header d-flex align-items-center p-2 bg-yellow-lt rounded">
|
||||
<span class="ti ti-server me-2"></span>
|
||||
<h4 class="m-0">Standalone Servers</h4>
|
||||
</div>
|
||||
|
||||
<div class="ps-4 mt-2">
|
||||
{% for server in hierarchy.standalone_servers %}
|
||||
<div class="server-container mb-3 border-start ps-3">
|
||||
<div class="server-header d-flex align-items-center p-2 bg-light rounded">
|
||||
<span class="ti ti-server me-2"></span>
|
||||
<h5 class="m-0">
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
|
||||
{{ server.hostname }}
|
||||
</a>
|
||||
<small class="text-muted ms-2">{{ server.ip_address }}</small>
|
||||
</h5>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<span class="ti ti-plus me-1"></span> Add App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Apps on this server -->
|
||||
{% if server.apps %}
|
||||
<div class="ps-4 mt-2">
|
||||
{% for app in server.apps %}
|
||||
<div class="app-container mb-2 border-start ps-3">
|
||||
<div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
|
||||
<span class="ti ti-app-window me-2"></span>
|
||||
<h6 class="m-0">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
|
||||
{{ app.name }}
|
||||
</a>
|
||||
</h6>
|
||||
<div class="ms-2">
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="ps-4 mt-2">
|
||||
<div class="text-muted fst-italic">No applications</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not hierarchy.subnets and not hierarchy.standalone_servers %}
|
||||
<div class="text-center py-4">
|
||||
<div class="empty">
|
||||
<div class="empty-img">
|
||||
<span class="ti ti-database-off" style="font-size: 3rem;"></span>
|
||||
</div>
|
||||
<p class="empty-title">No infrastructure defined yet</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
Start by creating a subnet or a server to organize your infrastructure.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
Create Subnet
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary ms-2">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
Create Server
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subnet-container,
|
||||
.server-container,
|
||||
.app-container {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.border-start {
|
||||
border-left: 2px solid rgba(98, 105, 118, 0.16) !important;
|
||||
}
|
||||
|
||||
.server-container:hover .border-start,
|
||||
.app-container:hover .border-start {
|
||||
border-left-color: var(--tblr-primary) !important;
|
||||
}
|
||||
|
||||
.subnet-header,
|
||||
.server-header,
|
||||
.app-header {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.subnet-header:hover,
|
||||
.server-header:hover,
|
||||
.app-header:hover {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue