Merge remote-tracking branch 'origin/feat/4-add-frontend'

Author: tldev-de

docker-compose-dev.yml

@@ -34,11 +34,11 @@ services:
     build:
       context: ./server
       dockerfile: Dockerfile
-    command: celery -A tasks worker -l info -B
+    command: celery -b redis://redis:6379/0 -A tasks worker -l info -B -s /tmp/celerybeat-schedule
     restart: always
     environment:
-      - TASK_TRIVY_INTERVAL=1
-      - TASK_XEOL_INTERVAL=1
+      - TASK_TRIVY_INTERVAL=100
+      - TASK_XEOL_INTERVAL=100
       - TASK_DATA_COLLECTOR_INTERVAL=1
       - CELERY_BROKER_URL=redis://redis:6379/0
       - CELERY_RESULT_BACKEND=redis://redis:6379/0
@@ -50,4 +50,4 @@ services:
   redis:
     image: redis:7-alpine
     ports:
-      - "127.0.0.1:6379:6379"
+      - "127.0.0.1:6379:6379"

server/app.py

@@ -3,6 +3,7 @@
 from config import Config
 from extensions import db, migrate
 from routes.general import general
+from routes.frontend import frontend
 
 
 def create_app(config_object=Config):
@@ -23,6 +24,7 @@ def register_extensions(app):
 
 def register_blueprints(app):
     app.register_blueprint(general)
+    app.register_blueprint(frontend)
     return None
 
 

server/routes/frontend.py

@@ -0,0 +1,131 @@
+import json
+from dataclasses import dataclass
+
+from flask import render_template, Blueprint
+
+from models.host import Host
+from models.image import Image
+
+frontend = Blueprint('frontend', __name__)
+
+
+def count_eol_images(host):
+    eol_images_set = set()  # To ensure each image is counted only once
+    for container in host.containers:
+        if is_image_eol(container.image):
+            eol_images_set.add(container.image.id)  # Use image.id as the unique identifier
+    return len(eol_images_set)
+
+def is_image_eol(image):
+    if not image.status_xeol:
+        return False
+    status_xeol = image.status_xeol
+    matches = status_xeol.get("matches", [])
+    return any("Eol" in match["Cycle"] for match in matches)
+
+
+@dataclass
+class TrivyFindings:
+    high: int
+    medium: int
+    low: int
+
+def count_trivy_findings(host) -> TrivyFindings:
+    trivy_findings = TrivyFindings(0, 0, 0)
+    for container in host.containers:
+        image = container.image
+        if image and image.status_trivy:
+            image_findings = count_trivy_findings_image(image)
+            trivy_findings.high += image_findings.high
+            trivy_findings.medium += image_findings.medium
+            trivy_findings.low += image_findings.low
+    return trivy_findings
+
+
+def count_trivy_findings_image(image):
+    if not image or not image.status_trivy:
+        return TrivyFindings(0, 0, 0)
+    trivy_findings = TrivyFindings(0, 0, 0)
+    status_trivy = image.status_trivy
+    results = status_trivy["Results"]
+    for result in results:
+        if "Vulnerabilities" in result:
+            for vulnerability in result["Vulnerabilities"]:
+                severity = vulnerability["Severity"]
+                if severity == "HIGH":
+                    trivy_findings.high += 1
+                elif severity == "MEDIUM":
+                    trivy_findings.medium += 1
+                elif severity == "LOW":
+                    trivy_findings.low += 1
+    return trivy_findings
+
+
+@frontend.route('/hosts', methods=['GET'])
+def get_hosts():
+    hosts = Host.query.all()
+
+    data = []
+    for host in hosts:
+        last_call = host.updated_at or host.created_at
+        docker_containers = len(host.containers)
+        docker_images = len(set(container.image_id for container in host.containers))
+        eol_images = count_eol_images(host)
+        trivy_findings = count_trivy_findings(host)
+
+        data.append({
+            'id': host.id,
+            'name': host.name,
+            'last_successful_call': last_call,
+            'docker_containers': docker_containers,
+            'docker_images': docker_images,
+            'eol_images': eol_images,
+            'trivy_findings': trivy_findings,
+        })
+
+    return render_template('hosts.html', data=data)
+
+
+@frontend.route('/hosts/<int:host_id>', methods=['GET'])
+def get_host(host_id):
+    host = Host.query.get(host_id)
+    if not host:
+        return "Host not found", 404
+    data = {
+        'host': {
+            'id': host.id,
+            'name': host.name,
+        },
+        'containers': [],
+    }
+    for container in host.containers:
+        image = container.image
+        data['containers'].append({
+            'name': container.name,
+            'image': container.image_string,
+            'image_hash': container.image.repo_digest,
+            'image_eol': is_image_eol(image),
+            'trivy_findings': count_trivy_findings_image(image),
+        })
+
+    return render_template('host.html', data=data)
+
+
+@frontend.route('/images', methods=['GET'])
+def get_images():
+    images = Image.query.all()
+
+    data = []
+    for image in images:
+        is_eol = is_image_eol(image)
+        trivy_findings = count_trivy_findings_image(image)
+        usage_count = len(image.containers)
+
+        data.append({
+            'name': image.name,
+            'image_eol': is_eol,
+            'trivy_findings': trivy_findings,
+            'usage_count': usage_count,
+        })
+
+    return render_template('images.html', data=data)

server/routes/general.py

@@ -1,4 +1,4 @@
-from flask import jsonify, Blueprint
+from flask import jsonify, Blueprint, render_template
 from sqlalchemy.sql import text
 from extensions import db
 import subprocess
@@ -11,7 +11,7 @@
 
 @general.route('/', methods=['GET'])
 def get_home():
-    return "there is nothing to see yet, please use the cli (see readme)! :)"
+    return render_template("index.html")
 
 
 @general.route('/health', methods=['GET'])

server/templates/base.html.j2

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="night">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>DockerInv{% block title %}{% endblock %}</title>
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css"/>
+    <script src="https://cdn.tailwindcss.com"></script>
+    {% block headers %}
+    {% endblock %}
+    <style>
+        html, body {
+            padding: 0;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+<div class="navbar bg-base-100 bg-secondary-content">
+    <div class="flex-1">
+        <a class="btn btn-ghost text-xl" href="/">DockerInv</a>
+    </div>
+    <div class="navbar-center text-info">
+        {{ self.page() }}
+    </div>
+    <div class="flex-none navbar-end">
+        <ul class="menu menu-horizontal px-1">
+            <li><a href="/images">Images</a></li>
+            <li><a href="/hosts">Hosts</a></li>
+        </ul>
+        <div class="form-control">
+            <input type="text" placeholder="Host, Image, Container" class="input input-bordered w-24 md:w-auto"/>
+        </div>
+    </div>
+</div>
+
+<div class="m-8">
+    {% block body %}
+    {% endblock %}
+</div>
+
+<div class="fixed bottom-0 left-0 p-4">
+    <label class="swap swap-rotate">
+        <!-- this hidden checkbox controls the state -->
+        <input type="checkbox" class="theme-controller" value="light"/>
+
+        <!-- sun icon -->
+        <svg
+                class="swap-off h-10 w-10 fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24">
+            <path
+                    d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"></path>
+        </svg>
+
+        <!-- moon icon -->
+        <svg
+                class="swap-on h-10 w-10 fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24">
+            <path
+                    d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"></path>
+        </svg>
+    </label>
+</div>
+{% block scripts %}
+{% endblock %}
+</body>
+</html>

server/templates/host.html

@@ -0,0 +1,49 @@
+{%  extends 'base.html.j2' %}
+
+{% block page %}{{ data.host.name }}{% endblock %}
+
+{% block body %}
+
+<table class="table table-zebra">
+    <thead>
+    <tr>
+        <th>Container Name</th>
+        <th>Image Name / Tag</th>
+        <th>Result of Xeol</th>
+        <th>Result of Trivy</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for container in data.containers %}
+        <tr class="hover">
+            <td>{{ container.name }}</td>
+            <td>
+                <div class="tooltip" data-tip="{{ container.image_hash }}">
+                    {{ container.image }}
+                </div>
+            </td>
+            <td>
+                {% if container.image_eol %}
+                    <span class="text-error">EOL</span>
+                {% else %}
+                    <span class="text-success"></span>
+                {% endif %}
+            </td>
+            <td>
+                <span class="text-error">{{ container.trivy_findings['high'] }}</span> |
+                <span class="text-warning">{{ container.trivy_findings['medium'] }}</span> |
+                <span class="text-info">{{ container.trivy_findings['low'] }}</span>
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function openHost(id) {
+        window.location.href = '/hosts/' + id;
+    }
+</script>
+{% endblock %}

server/templates/hosts.html

@@ -0,0 +1,42 @@
+{%  extends 'base.html.j2' %}
+
+{% block page %}Hosts{% endblock %}
+
+{% block body %}
+<table class="table table-zebra">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Last Successful Agent Call</th>
+            <th>Docker Containers</th>
+            <th>Docker Images</th>
+            <th>End-of-Life Images</th>
+            <th>Aggregated Trivy Findings</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for entry in data %}
+        <tr class="hover" onclick="openHost('{{ entry.id }}')">
+            <td>{{ entry.name }}</td>
+            <td>{{ entry.last_successful_call }}</td>
+            <td>{{ entry.docker_containers }}</td>
+            <td>{{ entry.docker_images }}</td>
+            <td>{{ entry.eol_images }}</td>
+            <td>
+                <span class="text-error">{{ entry.trivy_findings['high'] }}</span> |
+                <span class="text-warning">{{ entry.trivy_findings['medium'] }}</span> |
+                <span class="text-info">{{ entry.trivy_findings['low'] }}</span>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function openHost(id) {
+        window.location.href = "/hosts/" + id;
+    }
+</script>
+{% endblock %}

server/templates/images.html

@@ -0,0 +1,44 @@
+{%  extends 'base.html.j2' %}
+
+{% block page %}Images{% endblock %}
+
+{% block body %}
+<table class="table table-zebra">
+    <thead>
+    <tr>
+        <th>Image Name</th>
+        <th>Result of XEOL</th>
+        <th>Result of Trivy</th>
+        <th>Usage by Containers</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for image in data %}
+        <tr class="hover" onclick="openImage('{{ image.id }}')">
+            <td>{{ image.name }}</td>
+            <td>
+                {% if image.image_eol %}
+                    <span class="text-error">EOL</span>
+                {% else %}
+                    <span class="text-success"></span>
+                {% endif %}
+            </td>
+            <td>
+                <span class="text-error">{{ image.trivy_findings['high'] }}</span> |
+                <span class="text-warning">{{ image.trivy_findings['medium'] }}</span> |
+                <span class="text-info">{{ image.trivy_findings['low'] }}</span>
+            </td>
+            <td>{{ image.usage_count }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function openImage(id) {
+        window.location.href = "/images/" + id;
+    }
+</script>
+{% endblock %}