websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-03-31 12:01:42 +02:00
parent 5b2783b8e4
commit e903899bcd
1 changed files with 106 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

204
app/templates/ipam/subnet_view.html
View file

@ -1,4 +1,58 @@
{% extends "layout.html" %}
{% from "components/markdown_content.html" import render_markdown, render_markdown_with_truncate %}
{% block styles %}
<link href="{{ url_for('static', filename='css/github-markdown-reading-view.css') }}" rel="stylesheet">
<style>
/* Custom styling for markdown within tables */
.documentation-cell {
min-width: 300px;
max-width: 600px;
}
.documentation-cell .markdown-content {
padding: 0;
margin: 0;
}
.documentation-cell .markdown-reading-view {
background: transparent !important;
padding: 0;
}
.documentation-cell h1,
.documentation-cell h2,
.documentation-cell h3 {
margin-top: 0;
margin-bottom: 0.25rem;
font-size: 1rem;
font-weight: 600;
}
.documentation-cell p {
margin-bottom: 0.25rem;
}
.documentation-cell .markdown-alert {
padding: 0.5rem;
margin: 0.25rem 0;
}
.app-name {
color: var(--tblr-primary);
font-weight: 600;
}
.server-link {
color: var(--tblr-body-color);
text-decoration: none;
}
.server-link:hover {
text-decoration: underline;
}
</style>
{% endblock %}
{% block content %}
<div class="container-xl">
@ -156,43 +210,55 @@
</div>
</div>
{% from "components/markdown_content.html" import render_markdown, render_markdown_with_truncate %}
<!-- Applications in this Subnet Section -->
<div class="row mt-3">
<div class="col-12">
<div class="card glass-card">
<div class="card">
<div class="card-header">
<h3 class="card-title">Applications in this Subnet</h3>
</div>
<div class="card-body">
<div class="card-body p-0">
{% if subnet_apps %}
<div class="app-grid">
{% for app in subnet_apps %}
<div class="app-card">
<div class="app-card-header">
<div class="app-card-title">
<h4>{{ app.name }}</h4>
<span class="text-muted small">on {{ app.server.hostname }} ({{ app.server.ip_address }})</span>
</div>
<div class="app-card-actions">
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-outline-primary">
View
</a>
</div>
</div>
<div class="app-card-body markdown-content">
{% if app.documentation %}
{{ render_markdown_with_truncate(app.documentation) }}
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-primary">Read more</a>
{% else %}
<p class="text-muted">No documentation available for this application.</p>
{% endif %}
</div>
</div>
{% endfor %}
<div class="table-responsive">
<table class="table card-table table-vcenter">
<thead>
<tr>
<th>Name</th>
<th>Server</th>
<th>Documentation</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody>
{% for app in subnet_apps %}
<tr>
<td class="text-nowrap">
<span class="app-name">{{ app.name }}</span>
</td>
<td class="text-nowrap">
<a href="{{ url_for('dashboard.server_view', server_id=app.server.id) }}" class="server-link">
{{ app.server.hostname }} ({{ app.server.ip_address }})
</a>
</td>
<td class="documentation-cell">
{% if app.documentation %}
{{ render_markdown_with_truncate(app.documentation, 120) }}
{% else %}
<span class="text-muted">No documentation available</span>
{% endif %}
</td>
<td>
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-primary">
View
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="empty">
<div class="empty p-4">
<div class="empty-icon">
<span class="ti ti-app-window"></span>
</div>
@ -208,15 +274,18 @@
</div>
<!-- Update the usage progress bar section -->
<div class="mb-3">
<div class="form-label">Usage</div>
<div class="progress mb-2">
<div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
role="progressbar"></div>
</div>
<div class="d-flex justify-content-between">
<span>{{ used_ips }} used</span>
<span>{{ total_ips }} total</span>
<div class="card mt-3">
<div class="card-body">
<div class="mb-3">
<div class="d-flex justify-content-between">
<div class="form-label mb-0">IP Usage ({{ used_ips }} of {{ total_ips }})</div>
<div class="text-muted">{{ (used_ips / total_ips * 100)|round(1) }}%</div>
</div>
<div class="progress mt-2">
<div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
role="progressbar"></div>
</div>
</div>
</div>
</div>
</div>
@ -249,65 +318,4 @@
</div>
</div>
</div>
<style>
.glass-card {
background-color: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .glass-card {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.app-card {
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="light"] .app-card {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.app-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.app-card-header {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="light"] .app-card-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.app-card-title h4 {
margin: 0 0 0.25rem 0;
font-size: 1.25rem;
}
.app-card-body {
padding: 1rem;
max-height: 200px;
overflow: hidden;
}
</style>
{% endblock %}