PWA improvements

Add PWA features:
* PWA/WEB manifest;
* service worker caching;
* PWA icons.

Closes #217

See merge request polemarch/ce!151

polemarch/__init__.py

@@ -31,6 +31,6 @@
     "VST_ROOT_URLCONF": os.getenv("VST_ROOT_URLCONF", 'vstutils.urls'),
 }
 
-__version__ = "1.2.2"
+__version__ = "1.2.3"
 
 prepare_environment(**default_settings)

polemarch/main/settings.py

@@ -110,17 +110,17 @@
 OPENAPI_EXTRA_LINKS['Request'] = [
     {
         'url': (
-            'https://gitlab.com/vstconsulting/polemarch/issues/new?'
-            'issuable_template%5D=Ask&issue%5Btitle%5D=Ask%20about%20version%20'
-            +str(POLEMARCH_VERSION)
+                'https://gitlab.com/vstconsulting/polemarch/issues/new?'
+                'issuable_template%5D=Ask&issue%5Btitle%5D=Ask%20about%20version%20'
+                +str(POLEMARCH_VERSION)
         ),
         'name': 'Question'
     },
     {
         'url': (
-            'https://gitlab.com/vstconsulting/polemarch/issues/new?'
-            'issuable_template%5D=Bug&issue%5Btitle%5D=Bug%20in%20version%20'
-            + str(POLEMARCH_VERSION)
+                'https://gitlab.com/vstconsulting/polemarch/issues/new?'
+                'issuable_template%5D=Bug&issue%5Btitle%5D=Bug%20in%20version%20'
+                + str(POLEMARCH_VERSION)
         ),
         'name': 'Bug report'
     },
@@ -262,6 +262,45 @@ class GitSectionConfig(SectionConfig):
     dict(forks=4, timeout=30, fact_caching_timeout=3600, poll_interval=5)
 ).all()
 
+__PWA_ICONS_SIZES = [
+    "36x36", "48x48", "72x72", "96x96", "120x120", "128x128", "144x144",
+    "150x150", "152x152", "180x180", "192x192", "310x310", "512x512"
+]
+
+PWA_MANIFEST = {
+    "description": "Ansible based service for IT infrastructure management",
+    "icons": list(
+        map(lambda icon_size : {
+            "src": "{0}img/logo/logo_{1}.png".format(STATIC_URL, icon_size),
+            "sizes": icon_size,
+            "type": "image/png"
+        }, __PWA_ICONS_SIZES)
+    ),
+}
+
+SPA_STATIC += [
+    {'priority': 200, 'type': 'tpl', 'name': 'templates/pmFields.html', 'spa': True, 'api': False},
+    {'priority': 200, 'type': 'tpl', 'name': 'templates/pmItems.html', 'spa': True, 'api': True},
+    {'priority': 200, 'type': 'tpl', 'name': 'templates/pmProjects.html', 'spa': True, 'api': False},
+    {'priority': 200, 'type': 'tpl', 'name': 'templates/pmHistory.html', 'spa': True, 'api': False},
+    {'priority': 150, 'type': 'js', 'name': 'js/libs/ansi_up.js', 'spa': True, 'api': True},
+    {'priority': 150, 'type': 'js', 'name': 'js/pmCustomizer.js', 'spa': True, 'api': True},
+    {'priority': 160, 'type': 'js', 'name': 'js/common.js', 'spa': True, 'api': True},
+    {'priority': 182, 'type': 'js', 'name': 'js/pmFields.js', 'spa': True, 'api': False},
+    {'priority': 182, 'type': 'js', 'name': 'js/pmFieldsMixins.js', 'spa': True, 'api': False},
+    {'priority': 183, 'type': 'js', 'name': 'js/pmItems.js', 'spa': True, 'api': True},
+    {'priority': 184, 'type': 'js', 'name': 'js/pmHosts.js', 'spa': True, 'api': False},
+    {'priority': 184.5, 'type': 'js', 'name': 'js/pmGroups.js', 'spa': True, 'api': False},
+    {'priority': 185, 'type': 'js', 'name': 'js/pmInventories.js', 'spa': True, 'api': False},
+    {'priority': 186, 'type': 'js', 'name': 'js/pmProjects.js', 'spa': True, 'api': False},
+    {'priority': 187, 'type': 'js', 'name': 'js/pmHistory.js', 'spa': True, 'api': False},
+    {'priority': 190, 'type': 'js', 'name': 'js/pmTemplates.js', 'spa': True, 'api': False},
+    {'priority': 191, 'type': 'js', 'name': 'js/pmPeriodicTasks.js', 'spa': True, 'api': False},
+    {'priority': 183, 'type': 'js', 'name': 'js/pmUsers.js', 'spa': True, 'api': False},
+    {'priority': 400, 'type': 'js', 'name': 'js/pmDashboard.js', 'spa': True, 'api': False},
+    {'priority': 200, 'type': 'css', 'name': 'css/polemarch-gui.css', 'spa': True, 'api': True},
+    {'priority': 200, 'type': 'css', 'name': 'css/ansi-colors.css', 'spa': True, 'api': True},
+]
 
 # TEST settings
 if "test" in sys.argv:

polemarch/static/js/pmHistory.js

@@ -494,23 +494,7 @@ var history_pk_mixin = {
                  * Method, that gets lines and set them to this.lines async.
                  */
                 getLines() {
-                    if(app.files_cache.use_cache) {
-                        return this.getLinesFromCache();
-                    } else {
-                        return this.loadLines();
-                    }
-                },
-
-                /**
-                 * Method, that gets lines from cache (if they exist there) or loads them from API.
-                 */
-                getLinesFromCache() {
-                    return app.files_cache.getFile(this.lines_url).then(response => {
-                        this.lines = JSON.parse(response.data);
-                        return response;
-                    }).catch(error => {
-                        return this.loadLines();
-                    });
+                    return this.loadLines();
                 },
 
                 /**
@@ -597,10 +581,6 @@ var history_pk_mixin = {
                             this.lines.push(new_line);
                         }
                     }
-
-                    if(app.files_cache.use_cache) {
-                        app.files_cache.setFile(this.lines_url, JSON.stringify(this.lines));
-                    }
                 },
                 /**
                  * Method, that returns html (line content with ansi_up classes).

polemarch/static/templates/pmItems.html

@@ -94,9 +94,9 @@ <h1>
         <transition name="fade">
             <div class="pull-right" id="period-list" style="width:215px; min-width:145px;" v-if="!item.collapsed">
                 <div class="chart-period-select-wrapper">
-                    <label style="float:left; margin-right:10px; line-height:26px;">Period</label>
-                    <select id="chart-period" class="form-control chart-period-select"
-                            @change="onChangeHandler($event.target.value)"
+                    <label style="float:left; margin-right:10px; line-height:26px;" id="chart-period-label">Period</label>
+                    <select id="chart-period" class="form-control chart-period-select" aria-label="Chart Period"
+                            @change="onChangeHandler($event.target.value)" aria-labelledby="chart-period-label"
                     >
                         <option v-for="option in period_options" :value="option.value"
                                 :selected="isOptionSelected(option)"

polemarch/templates/gui/gui.html

@@ -11,37 +11,5 @@
 </a>
 {% endblock %}
 
-{% block common_sciprt %}
-<script type="text/javascript">
-    window.resourceList = window.resourceList.concat([
-        { prioritet:200, type:'tpl', name: "{% static '/' %}templates/pmFields.html?v={{gui_version}}"},
-        { prioritet:200, type:'tpl', name: "{% static '/' %}templates/pmItems.html?v={{gui_version}}"},
-        { prioritet:200, type:'tpl', name: "{% static '/' %}templates/pmProjects.html?v={{gui_version}}"},
-        { prioritet:200, type:'tpl', name: "{% static '/' %}templates/pmHistory.html?v={{gui_version}}"},
-
-        { prioritet:150, type:'js', name: "{% static 'js/libs/ansi_up.js' %}?v={{gui_version}}"},
-        { prioritet:150, type:'js', name: "{% static 'js/pmCustomizer.js' %}?v={{gui_version}}"},
-
-        { prioritet:160, type:'js', name: "{% static 'js/common.js' %}?v={{gui_version}}"},
-
-        { prioritet:182, type:'js', name: "{% static 'js/pmFields.js' %}?v={{gui_version}}"},
-        { prioritet:182, type:'js', name: "{% static 'js/pmFieldsMixins.js' %}?v={{gui_version}}"},
-        { prioritet:183, type:'js', name: "{% static 'js/pmItems.js' %}?v={{gui_version}}"},
-        { prioritet:184, type:'js', name: "{% static 'js/pmHosts.js' %}?v={{gui_version}}"},
-        { prioritet:184.5, type:'js', name: "{% static 'js/pmGroups.js' %}?v={{gui_version}}"},
-        { prioritet:185, type:'js', name: "{% static 'js/pmInventories.js' %}?v={{gui_version}}"},
-        { prioritet:186, type:'js', name: "{% static 'js/pmProjects.js' %}?v={{gui_version}}"},
-        { prioritet:187, type:'js', name: "{% static 'js/pmHistory.js' %}?v={{gui_version}}"},
-        { prioritet:190, type:'js', name: "{% static 'js/pmTemplates.js' %}?v={{gui_version}}"},
-        { prioritet:191, type:'js', name: "{% static 'js/pmPeriodicTasks.js' %}?v={{gui_version}}"},
-        { prioritet:183, type:'js', name: "{% static 'js/pmUsers.js' %}?v={{gui_version}}"},
-        { prioritet:400, type:'js', name: "{% static 'js/pmDashboard.js' %}?v={{gui_version}}"},
-
-        { prioritet:200, type:'css', name: "{% static 'css/polemarch-gui.css' %}?v={{gui_version}}"},
-        { prioritet:200, type:'css', name: "{% static 'css/ansi-colors.css' %}?v={{gui_version}}"},
-    ])
-</script>
-{% endblock %}
-
 {% block script %}
 {% endblock %}

polemarch/templates/gui/offline.html

@@ -0,0 +1,8 @@
+{% extends "gui/offline.html" %}
+{% load request_static %}
+
+{% block logo_or_name %}
+    <div style="max-width: 360px; margin: 0px auto;">
+        <img src="{% static_path '/img/logo/vertical.png' %}" alt="Polemarch logo" style=" display:block; margin: auto;  width: 50%;">
+    </div>
+{% endblock %}

polemarch/templates/gui/service-worker.js

@@ -0,0 +1,11 @@
+//{% extends "gui/service-worker.js" %}
+//{% load request_static %}
+//{% autoescape off %}
+
+//{% block resource_list %}
+const ADDITIONAL_FILES_LIST = [
+    "{% static 'img/logo/vertical.png' %}",
+];
+//{% endblock %}
+
+//{% endautoescape %}

polemarch/templates/rest_framework/base.html

@@ -1,4 +1,4 @@
-{% extends "rest_framework/rest_base.html" %}
+{% extends "rest_framework/base.html" %}
 {% load request_static %}
 
 {% block logo %}
@@ -13,76 +13,4 @@
 {% block bootstrap_theme %}
     {{ block.super }}
     <link rel="stylesheet" type="text/css" href="{% static_path "css/polemarch-gui.css" %}"/>
-{% endblock %}
-
-{% block resource_list %}
-    <script src="{% static_path 'js/libs/tabSignal.js' %}?v={{gui_version}}"></script>
-
-    <script>
-        window.resourceList = [
-            { prioritet:3, type:'js', name: "{% static 'js/libs/md5.min.js' %}?v={{gui_version}}"},
-            { prioritet:4, type:'js', name: "{% static 'js/libs/touchwipe.js' %}?v={{gui_version}}"},
-
-            { prioritet:4, type:'js', name: "{% static 'js/libs/visibility/visibility.core.js' %}?v={{gui_version}}"},
-
-            { prioritet:4, type:'js', name: "{% static 'js/libs/iziToast.min.js' %}?v={{gui_version}}"},
-            { prioritet:4, type:'js', name: "{% static 'js/libs/iziModal.min.js' %}?v={{gui_version}}"},
-            { prioritet:4, type:'js', name: "{% static 'js/libs/imask.js' %}?v={{gui_version}}"},
-
-            { prioritet:4, type:'js', name: "{% static 'AdminLTE-3.0.0/plugins/bootstrap/js/bootstrap.bundle.min.js' %}?v={{gui_version}}"},
-            { prioritet:5, type:'js', name: "{% static 'AdminLTE-3.0.0/plugins/slimScroll/jquery.slimscroll.min.js' %}?v={{gui_version}}"},
-            { prioritet:9, type:'js', name: "{% static 'js/guiCustomizer.js' %}?v={{gui_version}}"},
-
-            { prioritet:4, type:'js', name: "{% static 'plugins/fastclick/fastclick.min.js' %}?v={{gui_version}}"},
-
-
-            { prioritet:11.5, type:'js', name: "{% static 'js/libs/xregexp-all.js' %}?v={{gui_version}}"},
-
-            { prioritet:8, type:'js', name: "{% static 'AdminLTE-3.0.0/min/js/adminlte.min.js' %}?v={{gui_version}}"},
-            { prioritet:8, type:'js', name: "{% static 'js/common-utils.js' %}?v={{gui_version}}"},
-
-            { prioritet:110, type:'js', name: "{% static 'js/libs/autocomplete.js' %}?v={{gui_version}}"},
-            { prioritet:110, type:'js', name: "{% static 'plugins/select2/select2.full.min.js' %}?v={{gui_version}}"},
-
-            { prioritet:50, type:'js', name: "{% static 'js/libs/moment.min.js' %}?v={{gui_version}}"},
-            { prioritet:51, type:'js', name: "{% static 'js/libs/moment-timezone.min.js' %}?v={{gui_version}}"},
-            { prioritet:51, type:'js', name: "{% static 'js/libs/Chart.min.js' %}?v={{gui_version}}"},
-            { prioritet:50, type:'js', name: "{% static 'js/libs/jquery.scrollTo.min.js' %}?v={{gui_version}}"},
-
-            { prioritet:9,   type:'js', name: "{% static 'js/libs/axios.min.js' %}?v={{gui_version}}"},
-            { prioritet:9,   type:'js', name: "{% static 'js/libs/vue/vue.min.js' %}?v={{gui_version}}"},
-            { prioritet:9.1,   type:'js', name: "{% static 'js/libs/vue/vuex.min.js' %}?v={{gui_version}}"},
-            { prioritet:9.2,   type:'js', name: "{% static 'js/libs/vue/vue-router.min.js' %}?v={{gui_version}}"},
-
-            { prioritet:300, type:'tpl', name: "{% static 'templates/guiFields.html' %}?v={{gui_version}}"},
-            { prioritet:300, type:'tpl', name: "{% static 'templates/guiItems.html' %}?v={{gui_version}}"},
-
-            { prioritet:9.8, type:'js', name: "{% static 'js/guiPopUp.js' %}?v={{gui_version}}"},
-            { prioritet:9.9,   type:'js', name: "{% static 'js/guiFieldsMixins.js' %}?v={{gui_version}}" },
-            { prioritet:10,   type:'js', name: "{% static 'js/guiFields.js' %}?v={{gui_version}}" },
-            { prioritet:10.1,   type:'js', name: "{% static 'js/guiItems.js' %}?v={{gui_version}}" },
-            { prioritet:10.7,   type:'js', name: "{% static 'js/guiApi.js' %}?v={{gui_version}}" },
-            { prioritet:10.9,   type:'js', name: "{% static 'js/guiAppForApi.js' %}?v={{gui_version}}" },
-            { prioritet:300, type:'js', name: "{% static 'js/guiUsers.js' %}?v={{gui_version}}"},
-
-            { prioritet:150, type:'js', name: "{% static 'js/pmCustomizer.js' %}?v={{gui_version}}"},
-            { prioritet:160, type:'js', name: "{% static 'js/common.js' %}?v={{gui_version}}"},
-            { prioritet:183, type:'js', name: "{% static 'js/pmItems.js' %}?v={{gui_version}}"},
-            { prioritet:200, type:'tpl', name: "{% static '/' %}templates/pmItems.html?v={{gui_version}}"},
-
-            { prioritet:101, type:'css', name: "{% static 'AdminLTE-3.0.0/plugins/bootstrap/css/bootstrap.min.css' %}?v={{gui_version}}"},
-            { prioritet:102, type:'css', name: "{% static 'css/iziToast.min.css' %}?v={{gui_version}}"},
-            { prioritet:102, type:'css', name: "{% static 'css/iziModal.min.css' %}?v={{gui_version}}"},
-            { prioritet:103, type:'css', name: "{% static 'AdminLTE-3.0.0/plugins/font-awesome/css/font-awesome.min.css' %}?v={{gui_version}}"},
-            { prioritet:105, type:'css', name: "{% static 'AdminLTE-3.0.0/min/css/adminlte.min.css' %}?v={{gui_version}}"},
-            { prioritet:108, type:'css', name: "{% static 'css/gui.css' %}?v={{gui_version}}"},
-
-            { prioritet:99, type:'css', name: "{% static 'plugins/select2/select2.min.css' %}?v={{gui_version}}"},
-
-            { prioritet:150, type:'js', name: "{% static 'js/libs/ansi_up.js' %}?v={{gui_version}}"},
-
-            { prioritet:200, type:'css', name: "{% static 'css/polemarch-gui.css' %}?v={{gui_version}}"},
-            { prioritet:200, type:'css', name: "{% static 'css/ansi-colors.css' %}?v={{gui_version}}"},
-        ]
-    </script>
 {% endblock %}

requirements-doc.txt

@@ -1,2 +1,2 @@
 # Docs
-vstutils[doc]~=2.2.0
+vstutils[doc]~=2.3.0

requirements.txt

@@ -1,5 +1,5 @@
 # Main
-vstutils[rpc,ldap,doc,prod]~=2.2.0
+vstutils[rpc,ldap,doc,prod]~=2.3.0
 docutils==0.14
 markdown2==2.3.7