Add global performance section

src/nginxconfig/templates/global_sections/index.js

@@ -2,3 +2,4 @@ export { default as HTTPS } from './https';
 export { default as Security } from './security';
 export { default as PHP } from './php';
 export { default as Python } from './python';
+export { default as Performance } from './performance';

src/nginxconfig/templates/global_sections/performance.vue

@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Gzip compression</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${gzipCompressionChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="gzipCompression" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable gzip compression
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Brotli compression</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${brotliCompressionChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="brotliCompression" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable brotli compression
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Expiration for assets</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${assetsExpirationChanged ? ' is-changed' : ''}`">
+                        <input v-model="assetsExpiration"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.assetsExpiration.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Expiration for media</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${mediaExpirationChanged ? ' is-changed' : ''}`">
+                        <input v-model="mediaExpiration"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.mediaExpiration.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Expiration for SVGs</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${svgExpirationChanged ? ' is-changed' : ''}`">
+                        <input v-model="svgExpiration"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.svgExpiration.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Expiration for fonts</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${fontsExpirationChanged ? ' is-changed' : ''}`">
+                        <input v-model="fontsExpiration"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.fontsExpiration.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import PrettyCheck from 'pretty-checkbox-vue/check';
+    import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
+
+    const defaults = {
+        gzipCompression: {
+            default: true,
+            enabled: true,
+        },
+        brotliCompression: {
+            default: false,
+            enabled: true,
+        },
+        assetsExpiration: {
+            default: '7d',
+            enabled: true,
+        },
+        mediaExpiration: {
+            default: '7d',
+            enabled: true,
+        },
+        svgExpiration: {
+            default: '7d',
+            enabled: true,
+        },
+        fontsExpiration: {
+            default: '7d',
+            enabled: true,
+        },
+    };
+
+    export default {
+        name: 'GlobalPerformance',                                  // Component name
+        display: 'Performance',                                     // Display name for tab
+        key: 'performance',                                         // Key for data in parent
+        delegated: delegatedFromDefaults(defaults),                 // Data the parent will present here
+        components: {
+            PrettyCheck,
+        },
+        props: {
+            data: Object,                                           // Data delegated back to us from parent
+        },
+        data () {
+            return {
+                i18n,
+            };
+        },
+        computed: computedFromDefaults(defaults, 'performance'),    // Getters & setters for the delegated data
+    };
+</script>