Offline (static) frontend - fixes #4

sighupio · Oct 2, 2020 · f090789 · f090789
1 parent 085b063
commit f090789
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 18 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1 +1,6 @@
-app/__pycache__
+app/__pycache__
+.git
+.vscode
+env
+screenshots
+manifests
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 env
 .vscode
 __pycache__
-launch.json
+launch.json
+app/static/node_modules
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ You'll need OPA Gatekeeper running in your cluster and at least some constraint
 In order to deploy Gatekeper Policy Manager to your cluster, apply the provided kustomization file running the following command:
 
 ```shell
-$ kubectl apply -k .
+kubectl apply -k .
 ```
 
 By default, this will create a deployment and a service both with the name `gatekeper-policy-manager` in the `gatekeeper-system` namespace. We invite you to take a look into the `kustomization.yaml` file to do further configuration.

diff --git a/app/app.py b/app/app.py
@@ -217,14 +217,15 @@ def get_constrainttemplates():
         return render_template("message.html",
                                type="error",
                                title="Error",
-                               message="We had a problem while asking the API for Gatekeeper objects",
+                               message="We had a problem while asking the API for Gatekeeper Constraint Templates objects",
                                action="Is Gatekeeper deployed in the cluster?",
                                description=e
                                )
     else:
         return render_template("constrainttemplates.html",
                                constrainttemplates=constrainttemplates,
-                               title="Constraint Templates"
+                               title="Constraint Templates",
+                               hide_sidebar=len(constrainttemplates["items"]) == 0
                                )
 
 

diff --git a/app/static/package-lock.json b/app/static/package-lock.json
diff --git a/app/static/user-tie.svg b/app/static/user-tie.svg
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -2,17 +2,18 @@
 <html lang="en">
 <head>
   <title>Gatekeeper Policy Manager - {{ title }}</title>
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.js"></script>
+  <link rel="icon" type="image/png" href="{{ url_for('static', filename='user-tie.svg') }}"/>
+  <script src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/fomantic-ui-css/semantic.min.css') }}">
+  <script src="{{ url_for('static', filename='node_modules/fomantic-ui-css/semantic.min.js') }}"></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='prism.css') }}">
+  <script src={{ url_for('static', filename='prism.js') }}></script>
   <style>
     .footer.segment {
       padding: 5em 0em;
       margin-top: 10em !important;
     }
   </style>
-  <script src={{ url_for('static', filename='prism.js') }}></script>
 </head>
 <body style="background-color: #f0f0f0;">
   <div class="ui top secondary pointing menu">

diff --git a/app/templates/constrainttemplates.html b/app/templates/constrainttemplates.html
@@ -7,9 +7,19 @@
   {% endfor %}
 {% endblock %}
 {% block content %}
+{% if constrainttemplates["items"]|length == 0 %}
+    <div class="ui segments">
+      <div class="ui secondary header segment">
+        <i class="ui info icon"></i> There are no Constraint Templates defined
+      </div>
+      <div class="ui blue segment">
+        We didn't find any Constraint Template CRDs defined in the cluster.
+      </div>
+    </div>
+{% else %}
   {% for constrainttemplate in constrainttemplates["items"] %}
   <div class="ui segments" id="{{ constrainttemplate.spec.crd.spec.names.kind }}">
-    <div class="ui {% if constrainttemplate.status.created %} green {% endif %} secondary header segment">{{ constrainttemplate.spec.crd.spec.names.kind }} {% if constrainttemplate.status.created %} <span class="ui small horizontal label green">CREATED</span> {% endif %}</div>
+    <div class="ui {% if constrainttemplate.status and constrainttemplate.status.created %} green {% endif %} secondary header segment">{{ constrainttemplate.spec.crd.spec.names.kind }} {% if constrainttemplate.status and constrainttemplate.status.created %} <span class="ui small horizontal label green">CREATED</span>{% else %}<span class="ui small horizontal basic label red" title="Status field is not set, is Gatekeeper healthy?">UNKOWN STATE</span>{% endif %}</div>
     {% for t in constrainttemplate.spec.targets %}
       <div class="ui segment">
         <h5 class="header">Target {{ t.target }}</h5>
@@ -74,6 +84,7 @@ <h5 class="header">Parameters schema</h5>
     </div>
     {% endif %}
 
+    {% if constrainttemplate.status %}
     <div class="ui segment">
       <h5>Status</h6>
         <div class="ui horizontal list">
@@ -88,8 +99,10 @@ <h5>Status</h6>
           </div>
           {% endfor %}
         </div>
-      </div>
+    </div>
+    {% endif %}
 
     </div>
     {% endfor %}
+  {% endif %}
 {% endblock %}
diff --git a/app/templates/footer.html b/app/templates/footer.html
@@ -1,6 +1,6 @@
 <div class="ui inverted vertical footer segment">
     <div class="ui container">
-      <h4 class="ui inverted header">Gatekeeper Policy Manager v0.2</h4>
+      <h4 class="ui inverted header">Gatekeeper Policy Manager v0.3</h4>
       <p>A simple to use web-based Gatekeeper policies manager</p>
       <p><i class="red heart icon"></i> Proud part of the <a href="https://kubernetesfury.com">Kubernetes Fury Distribution</a></p>
       <p><i class="github icon"></i> <a href="https://github.com/sighupio/gatekeeper-policy-manager">Source Code</a></p>

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <title>Gatekeeper Policy Manager - {{ title }}</title>
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.js"></script>
+  <link rel="icon" type="image/png" href="{{ url_for('static', filename='user-tie.svg') }}"/>
+  <script src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/fomantic-ui-css/semantic.min.css') }}">
+  <script src="{{ url_for('static', filename='node_modules/fomantic-ui-css/semantic.min.js') }}"></script>
   <style type="text/css">
     body {
       background-color: #1b1c1d;

diff --git a/app/templates/message.html b/app/templates/message.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <title>Gatekeeper Policy Manager - {{ title }}</title>
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.js"></script>
+  <link rel="icon" type="image/png" href="{{ url_for('static', filename='user-tie.svg') }}"/>
+  <script src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/fomantic-ui-css/semantic.min.css') }}">
+  <script src="{{ url_for('static', filename='node_modules/fomantic-ui-css/semantic.min.js') }}"></script>
   <style type="text/css">
     body {
       background-color: #1b1c1d;