LEGENDLab-Monitoring/WebGen.sh at main · mwillers/LEGENDLab-Monitoring · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
#!/bin/bash
# Copyright (c) 2023, 2024, 2025 Michael Willers
# This software is part of LEGENDLab-Monitoring, released under the MIT License.
# https://github.com/mwillers/LEGENDLab-Monitoring
# See the LICENSE.txt file in the project root for full license information.

SCRIPT_DIR=$(dirname "$(readlink -f "$0")")

# Directory containing images relative to the script
IMAGE_DIRECTORY="$SCRIPT_DIR/html/img"

# Path to the index.html file relative to the script
HTML_FILE="$SCRIPT_DIR/html/index.html"

# Name of the default image
DEFAULT_IMAGE="latest.png"

SERVICE="LEGENDLab-Monitoring.timer"
STATUS=$(systemctl is-active "$SERVICE")

# Start writing to index.html
cat <<EOF > "$HTML_FILE"
<!DOCTYPE html>
<html>
<head>
    <title>LEGENDLab Monitoring</title>
    <meta http-equiv="refresh" content="60">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .container {
            text-align: center;
            margin-bottom: 10px;
        }
        #imageDisplay {
            max-width: 90%;
            height: auto;
        }
        select, button {
            margin: 5px;
        }
        .alert {
            font-family: system-ui, sans-serif;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            position: relative;
            padding: 0.5rem 0.5rem;
            margin-bottom: 0.5rem;
            color: #ffffff;
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 0.25rem;
        }
        .alert-success {
            color: #0a3622;
            background-color: #d1e7dd;
            border-color: #a3cfbb;
        }
        .alert-warning {
            color: #664d03;
            background-color: #fff3cd;
            border-color: #ffe69c;
        }
        .alert-danger {
            color: #58151c;
            background-color: #f8d7da;
            border-color: #f1aeb5;
        }
        .alert-dark {
            color: #495057;
            background-color: #495057;
            border-color: #adb5bd;
        }
    </style>
</head>
<body>
<div class="container">
<select id='imageDropdown' onchange='showImage(this.value)'>
EOF

# Loop through all images in the sub-folder
for IMAGE in "$IMAGE_DIRECTORY"/*
do
    if [[ -f $IMAGE ]]; then
        FILENAME=$(basename "$IMAGE")
        SELECTED=""
        if [ "$FILENAME" == "$DEFAULT_IMAGE" ]; then
            SELECTED="selected"
        fi
        echo "<option value='$FILENAME' $SELECTED>$FILENAME</option>" >> "$HTML_FILE"
    fi
done

# Finalize the HTML content with the default image set
cat <<EOF >> "$HTML_FILE"
</select>
<button onclick='resetImage()'>Reset</button>
EOF

case $STATUS in
    active)
        echo "<div class='alert alert-success'>The monitoring service is running.</div>" >> "$HTML_FILE"
        ;;
    inactive)
        echo "<div class='alert alert-warning'>The monitoring service is stopped.</div>" >> "$HTML_FILE"
        ;;
    failed)
        echo "<div class='alert alert-danger'>The monitoring service has failed.</div>" >> "$HTML_FILE"
        ;;
    *)
        echo "<div class='alert alert-dark'>The monitoring service is in an unknown state.</div>" >> "$HTML_FILE"
        ;;
esac

cat <<EOF >> "$HTML_FILE"
</div>
<img id='imageDisplay' src='img/$DEFAULT_IMAGE' alt='Selected Image' class='center'>
<script>
function showImage(imageFile) {
    document.getElementById('imageDisplay').src = 'img/' + imageFile;
}
function resetImage() {
    var dropdown = document.getElementById('imageDropdown');
    dropdown.value = '$DEFAULT_IMAGE';
    showImage(dropdown.value);
}
</script>
</body></html>
EOF