239 lines
No EOL
9 KiB
HTML
239 lines
No EOL
9 KiB
HTML
{% 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 is defined and 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 %} |