diff options
| author | ckonstanski <kostcarl@isu.edu> | 2026-07-30 18:17:14 -0600 |
|---|---|---|
| committer | ckonstanski <kostcarl@isu.edu> | 2026-07-30 18:17:14 -0600 |
| commit | 640ff61422bc0ee3966941b93d9889ddbbd38d77 (patch) | |
| tree | abf1c08f5d38ee53ec8b29dc4f425722517505e6 /src/dashboard/templates | |
| parent | 22dae02a86c1fce71091bfa5289cf99abba1b217 (diff) | |
Diffstat (limited to 'src/dashboard/templates')
| -rw-r--r-- | src/dashboard/templates/by_cluster_name.html | 50 | ||||
| -rw-r--r-- | src/dashboard/templates/by_playbook_name.html | 50 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/clusters.html | 38 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/clusters_by_name.html | 26 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/firmware_version.html | 32 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/map.html | 16 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/playbook.html | 33 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/playbook_by_name.html | 26 | ||||
| -rw-r--r-- | src/dashboard/templates/cards/summary.html | 315 | ||||
| -rw-r--r-- | src/dashboard/templates/dashboard.html | 7 | ||||
| -rw-r--r-- | src/dashboard/templates/deployment.html | 7 | ||||
| -rw-r--r-- | src/dashboard/templates/hardware.html | 7 | ||||
| -rw-r--r-- | src/dashboard/templates/includes/base.html | 35 | ||||
| -rw-r--r-- | src/dashboard/templates/includes/main-panel.html | 17 | ||||
| -rw-r--r-- | src/dashboard/templates/includes/sidebar.html | 26 | ||||
| -rw-r--r-- | src/dashboard/templates/includes/top_navbar.html | 13 |
16 files changed, 698 insertions, 0 deletions
diff --git a/src/dashboard/templates/by_cluster_name.html b/src/dashboard/templates/by_cluster_name.html new file mode 100644 index 0000000..6715052 --- /dev/null +++ b/src/dashboard/templates/by_cluster_name.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +{% load static %} +<html lang="en"> + +<head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' /> + + <!-- Core JS Files --> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> + {% block javascript %} + <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" crossorigin="anonymous"></script> + {% endblock %} + + <!-- Fonts and icons --> + <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" /> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> + + <!-- CSS Files --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> + <link rel="stylesheet" type="text/css" href="../../static/css/styles.css?v=2.0.0 " /> + + {% block stylesheet %} + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" + integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w==" + crossorigin="anonymous"/> + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" + integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA==" + crossorigin="anonymous"/> + {% endblock %} + + <title>Far-Edge Ops Middleware</title> +</head> + +<body> + <div class="wrapper"> + {% block content %} + <div class="row"> + {% include 'cards/clusters_by_name.html' %} + </div> + {% endblock %} + </div> +</body> + +</html> + + diff --git a/src/dashboard/templates/by_playbook_name.html b/src/dashboard/templates/by_playbook_name.html new file mode 100644 index 0000000..d8da7c6 --- /dev/null +++ b/src/dashboard/templates/by_playbook_name.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +{% load static %} +<html lang="en"> + +<head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' /> + + <!-- Core JS Files --> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> + {% block javascript %} + <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" crossorigin="anonymous"></script> + {% endblock %} + + <!-- Fonts and icons --> + <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" /> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> + + <!-- CSS Files --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> + <link rel="stylesheet" type="text/css" href="../../static/css/styles.css?v=2.0.0 " /> + + {% block stylesheet %} + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" + integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w==" + crossorigin="anonymous"/> + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" + integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA==" + crossorigin="anonymous"/> + {% endblock %} + + <title>Far-Edge Ops Middleware</title> +</head> + +<body> + <div class="wrapper"> + {% block content %} + <div class="row"> + {% include 'cards/playbook_by_name.html' %} + </div> + {% endblock %} + </div> +</body> + +</html> + + diff --git a/src/dashboard/templates/cards/clusters.html b/src/dashboard/templates/cards/clusters.html new file mode 100644 index 0000000..ea23b71 --- /dev/null +++ b/src/dashboard/templates/cards/clusters.html @@ -0,0 +1,38 @@ +{% load static %} + +{% block clusters-libraries %} + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w==" + crossorigin="anonymous" /> + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA==" + crossorigin="anonymous" /> {% endblock %} {% block javascript %} + <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" + crossorigin="anonymous"></script> + <script type="text/javascript" src="{% static " js/dashboard.js " %}"></script> + <script> + $(function() { + initInstallGrid({{installs|safe }}) + }) + </script> +{% endblock %} + +<div class="col-md-12"> + <div class="card "> + <div class="card-header "> + <h4 class="card-title">Cluster List</h4> + <p class="card-category">Comprehensive list</p> + </div> + <div class="card-body "> + <div class="progress"> + <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">Started</div> + <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Done</div> + <div class="progress-bar bg-info" role="progressbar" style="width: 30%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Pending</div> + <div class="progress-bar bg-danger" role="progressbar" style="width: 51%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Failed</div> + </div> + <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;"> + <div class="demo-container"> + <div id="gridContainer"></div> + </div> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/src/dashboard/templates/cards/clusters_by_name.html b/src/dashboard/templates/cards/clusters_by_name.html new file mode 100644 index 0000000..0350daf --- /dev/null +++ b/src/dashboard/templates/cards/clusters_by_name.html @@ -0,0 +1,26 @@ +{% load static %} + +{% block javascript %} + <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script> + <script> + $(function() { + PlaybookStatusGrid({{ query_result|safe }}) + }) + </script> +{% endblock %} + +<div class="col-md-12"> + <div class="card "> + <div class="card-header "> + <h5 class="card-title" style="color:#326690;">Cluster Name: {{ cluster_name }}</h5> + </div> + <div class="card-body "> + <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;"> + <div class="demo-container"> + <div id="PlaybookGridContainer"></div> + </div> + </div> + </div> + </div> +</div> + diff --git a/src/dashboard/templates/cards/firmware_version.html b/src/dashboard/templates/cards/firmware_version.html new file mode 100644 index 0000000..6ac5ddb --- /dev/null +++ b/src/dashboard/templates/cards/firmware_version.html @@ -0,0 +1,32 @@ +{% load static %} + +{% block libraries %} + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w==" + crossorigin="anonymous" /> + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA==" + crossorigin="anonymous" /> {% endblock %} {% block javascript %} + <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" + crossorigin="anonymous"></script> + <script type="text/javascript" src="{% static "js/firmware_version.js" %}"></script> + <script> + $(function() { + FirmwareVersionGrid({{ firmware_versions|safe }}) + }) + </script> +{% endblock %} + +<div class="col-md-12"> + <div class="card "> + <div class="card-header "> + <h4 class="card-title">Firmware Versions</h4> + <p class="card-category">Latest firmware versions per server</p> + </div> + <div class="card-body "> + <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;"> + <div class="demo-container"> + <div id="FirmwareGridContainer"></div> + </div> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/src/dashboard/templates/cards/map.html b/src/dashboard/templates/cards/map.html new file mode 100644 index 0000000..3f12b59 --- /dev/null +++ b/src/dashboard/templates/cards/map.html @@ -0,0 +1,16 @@ +<div class="col-md-6"> + <div class="card "> + <div class="card-header "> + <h4 class="card-title">Deployment list</h4> + </div> + <div class="card-body "> + <ul class="list-group list-group-flush"> + <li class="list-group-item">Cluster 1</li> + <li class="list-group-item">Cluster 2</li> + <li class="list-group-item">Cluster 3</li> + <li class="list-group-item">Cluster 4</li> + <li class="list-group-item">Cluster 5</li> + </ul> + </div> + </div> +</div> diff --git a/src/dashboard/templates/cards/playbook.html b/src/dashboard/templates/cards/playbook.html new file mode 100644 index 0000000..c888937 --- /dev/null +++ b/src/dashboard/templates/cards/playbook.html @@ -0,0 +1,33 @@ +{% load static %} + +{% block playbook-libraries %} + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w==" + crossorigin="anonymous" /> + <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA==" + crossorigin="anonymous" /> {% endblock %} {% block javascript %} + <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" + crossorigin="anonymous"></script> + <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script> + <script> + $(function() { + PlaybookStatusGrid({{ clusters|safe }}) + }) + </script> +{% endblock %} + +<div class="col-md-12"> + <div class="card "> + <div class="card-header "> + <h4 class="card-title">Deployment Workflow</h4> + <p class="card-category">Latest status update received for each cluster</p> + </div> + <div class="card-body "> + <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;"> + <div class="demo-container"> + <div id="PlaybookGridContainer"></div> + </div> + </div> + </div> + </div> +</div> + diff --git a/src/dashboard/templates/cards/playbook_by_name.html b/src/dashboard/templates/cards/playbook_by_name.html new file mode 100644 index 0000000..0bc4b20 --- /dev/null +++ b/src/dashboard/templates/cards/playbook_by_name.html @@ -0,0 +1,26 @@ +{% load static %} + +{% block javascript %} + <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script> + <script> + $(function() { + PlaybookStatusGrid({{ query_result|safe }}) + }) + </script> +{% endblock %} + +<div class="col-md-12"> + <div class="card "> + <div class="card-header "> + <h5 class="card-title" style="color:#326690;">Playbook: {{ playbook_name }}</h5> + </div> + <div class="card-body "> + <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;"> + <div class="demo-container"> + <div id="PlaybookGridContainer"></div> + </div> + </div> + </div> + </div> +</div> + diff --git a/src/dashboard/templates/cards/summary.html b/src/dashboard/templates/cards/summary.html new file mode 100644 index 0000000..454b6fd --- /dev/null +++ b/src/dashboard/templates/cards/summary.html @@ -0,0 +1,315 @@ +{% load static %} + +<div class="col-md-3"> + <div class="card "> + <div class="card-body"> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Clusters</h6> + <h2>{{ summary.clusters }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-server" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4C14.665 5.474 11.68 6.667 8 6.667 4.318 6.667 1.333 5.473 1.333 4V2.667zm0 3.667v3C1.333 10.805 4.318 12 8 12c3.68 0 6.665-1.193 6.667-2.665V6.334c-.43.32-.931.58-1.458.79C11.81 7.684 9.967 8 8 8c-1.967 0-3.81-.317-5.21-.876a6.508 6.508 0 0 1-1.457-.79zm13.334 5.334c-.43.319-.931.578-1.458.789-1.4.56-3.242.876-5.209.876-1.967 0-3.81-.316-5.21-.876a6.51 6.51 0 0 1-1.457-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/> + </svg> + </div> + </div> + <small class="text-small mt-10 d-block">Last updated at {{ summary.created_at }}</small> + </div> + + </div> +</div> +<div class="col-md-3"> + <div class="card "> + <div class="card-body"> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Completed Installs</h6> + <h2>{{ summary.completed }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-success" role="progressbar" style="width: {{ completed_percent }}%;"> + {{ completed_percent }}% + </div> + </div> + </div> +</div> + +<div class="col-md-3"> + <div class="card "> + <div class="card-body"> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>In Progress</h6> + <h2>{{ summary.in_progress }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-hourglass-split" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13s-.866-1.299-3-1.48V8.35z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-warning" role="progressbar" style="width: {{ in_progress_percent }}%;"> + {{ in_progress_percent }}% + </div> + </div> + </div> +</div> + +<div class="col-md-3"> + <div class="card "> + <div class="card-body"> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Failed</h6> + <h2>{{ summary.failed }}</h2> + </div> + <div class="icon"> + <svg width="1.0625em" height="1em" viewBox="0 0 17 16" class="bi bi-exclamation-triangle" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/> + <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> + +<!-- Break down CaaS workflow --> + +<div class="col-md-2"> + <div class="card"> + <div class="card-body text-decoration-none"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Ingested</h6> + <h2>{{ summary.ingested }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> +<div class="col-md-2"> + <div class="card "> + <div class="card-body"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=online"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Online</h6> + <h2>{{ summary.online }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-share" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> +<div class="col-md-2"> + <div class="card "> + <div class="card-body"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=firmware_scheduled"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Firmware Scheduled</h6> + <h2>{{ summary.firmware_scheduled }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> + <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> +<div class="col-md-2"> + <div class="card "> + <div class="card-body"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=firmware_upgraded"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Firmware updated</h6> + <h2>{{ summary.firmware_upgraded }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> +<div class="col-md-2"> + <div class="card "> + <div class="card-body"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=wr_scheduled"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>WindRiver Scheduled</h6> + <h2>{{ summary.wr_scheduled }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> + <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> +<div class="col-md-2"> + <div class="card "> + <div class="card-body"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=wr_installed"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>WindRiver Installed</h6> + <h2>{{ summary.wr_installed }}</h2> + </div> + <div class="icon"> + <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/> + </svg> + </div> + </div> + </div> + <div class="progress progress-sm"> + <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;"> + {{ failed_percent }}% + </div> + </div> + </div> +</div> + +<!-- Break down Orchestration workflow --> + +<div class="col-md-2"> + <div class="card"> + <div class="card-body text-decoration-none"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Namespaces Created</h6> + <h2>{{ orchestration.namespaces }}</h2> + </div> + </div> + </div> + </div> +</div> +<div class="col-md-3"> + <div class="card"> + <div class="card-body text-decoration-none"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Service Accounts</h6> + Orchestration: {{ orchestration.orch_service_account }} <br /> Edge Engineering: {{ orchestration.edge_eng_service_account }} <br /> Samsung:{{ orchestration.samsung_service_account }} <br /> + </div> + </div> + </div> + </div> +</div> +<div class="col-md-3"> + <div class="card"> + <div class="card-body text-decoration-none"> + <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a> + <div class="d-flex justify-content-between align-items-center"> + <div class="state"> + <h6>Kubeconfig's Created</h6> + Orchestration: {{ orchestration.orch_kubeconfig }} <br /> Edge Engineering: {{ orchestration.edge_eng_kubeconfig }} <br /> Samsung: {{ orchestration.samsung_kubeconfig }} + </div> + </div> + </div> + </div> +</div> + + + +{% block playbook-libraries %} +<link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w==" + crossorigin="anonymous" /> +<link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA==" + crossorigin="anonymous" /> {% endblock %} {% block javascript %} +<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" + crossorigin="anonymous"></script> +<script type="text/javascript" src="{% static " js/workflow_status.js " %}"></script> +<script> + $(function() { + WorkflowGrid({ + { + workflow | safe + } + }) + }) +</script> +{% endblock %} + +<div class="col-md-12"> + <div class="card "> + <div class="card-header "> + <h4 class="card-title">Deployment Workflow</h4> + <p class="card-category">Latest status update received for each cluster</p> + </div> + <div class="card-body "> + <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;"> + <div class="demo-container"> + <div id="WorkflowGridContainer"></div> + </div> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/src/dashboard/templates/dashboard.html b/src/dashboard/templates/dashboard.html new file mode 100644 index 0000000..c7d7e39 --- /dev/null +++ b/src/dashboard/templates/dashboard.html @@ -0,0 +1,7 @@ +{% extends 'includes/main-panel.html' %} + +{% block content %} +<div class="row"> + {% include 'cards/summary.html' %} +</div> +{% endblock %}
\ No newline at end of file diff --git a/src/dashboard/templates/deployment.html b/src/dashboard/templates/deployment.html new file mode 100644 index 0000000..a63556d --- /dev/null +++ b/src/dashboard/templates/deployment.html @@ -0,0 +1,7 @@ +{% extends 'includes/main-panel.html' %} + +{% block content %} +<div class="row"> + {% include 'cards/playbook.html' %} +</div> +{% endblock %}
\ No newline at end of file diff --git a/src/dashboard/templates/hardware.html b/src/dashboard/templates/hardware.html new file mode 100644 index 0000000..6d1f992 --- /dev/null +++ b/src/dashboard/templates/hardware.html @@ -0,0 +1,7 @@ +{% extends 'includes/main-panel.html' %} + +{% block content %} +<div class="row"> + {% include 'cards/firmware_version.html' %} +</div> +{% endblock %}
\ No newline at end of file diff --git a/src/dashboard/templates/includes/base.html b/src/dashboard/templates/includes/base.html new file mode 100644 index 0000000..751853b --- /dev/null +++ b/src/dashboard/templates/includes/base.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +{% load static %} +<html lang="en"> + +<head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' /> + + <!-- Core JS Files --> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> + {% block javascript %}{% endblock %} + + <!-- Fonts and icons --> + <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" /> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> + + <!-- CSS Files --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> + <link rel="stylesheet" href="../../static/css/styles.css?v=2.0.0 " /> + {% block stylesheet %}{% endblock %} + + <title>Far-Edge Ops Middleware</title> +</head> + +<body> + <div class="wrapper"> + {% include 'includes/sidebar.html' %} + {% block main_panel %} {% endblock %} + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/dashboard/templates/includes/main-panel.html b/src/dashboard/templates/includes/main-panel.html new file mode 100644 index 0000000..5e9aad7 --- /dev/null +++ b/src/dashboard/templates/includes/main-panel.html @@ -0,0 +1,17 @@ +{% extends 'includes/base.html' %} + +{% block main_panel %} +<div class="main-panel"> + <!-- Navbar --> + {% include 'includes/top_navbar.html' %} + <!-- End Navbar --> + + <!-- Content Section --> + <div class="content"> + <div class="container-fluid"> + {% block content %} No Content Added Yet {% endblock %} + </div> + </div> + <!-- End Content Section --> +</div> +{% endblock %}
\ No newline at end of file diff --git a/src/dashboard/templates/includes/sidebar.html b/src/dashboard/templates/includes/sidebar.html new file mode 100644 index 0000000..5997f61 --- /dev/null +++ b/src/dashboard/templates/includes/sidebar.html @@ -0,0 +1,26 @@ +<div class="sidebar" data-color="black"> + <div class="sidebar-wrapper"> + <div class="logo"> + <a class="simple-text"> + VCP Far Edge Dashboard + </a> + </div> + <ul id="nav" class="nav"> + <li id="dashboard" class="nav-item "> + <a class="nav-link" href="{% url 'dashboard' %}"> + <p>Dashboard</p> + </a> + </li> + <li id="deployment" class="nav-item "> + <a class="nav-link" href="{% url 'deployment' %}"> + <p>Deployment</p> + </a> + </li> + <li id="hardware" class="nav-item "> + <a class="nav-link" href="{% url 'hardware' %}"> + <p>Hardware</p> + </a> + </li> + </ul> + </div> +</div>
\ No newline at end of file diff --git a/src/dashboard/templates/includes/top_navbar.html b/src/dashboard/templates/includes/top_navbar.html new file mode 100644 index 0000000..5765358 --- /dev/null +++ b/src/dashboard/templates/includes/top_navbar.html @@ -0,0 +1,13 @@ +<nav class="navbar navbar-expand-lg " color-on-scroll="500"> + <div class="container-fluid"> + <div class="collapse navbar-collapse justify-content-end" id="navigation"> + <ul class="navbar-nav ml-auto"> + <li class="nav-item"> + <a class="nav-link" href="#pablo"> + <span class="no-icon">Log out</span> + </a> + </li> + </ul> + </div> + </div> +</nav>
\ No newline at end of file |