From 431cbf53e2fb988403a52ad1e628b88a070374e2 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Mon, 4 May 2020 17:16:25 +0100
Subject: [PATCH] Add nginx global section

---
 src/nginxconfig/scss/style.scss               |  12 +-
 .../templates/global_sections/index.js        |   1 +
 .../templates/global_sections/nginx.vue       | 169 ++++++++++++++++++
 3 files changed, 176 insertions(+), 6 deletions(-)
 create mode 100644 src/nginxconfig/templates/global_sections/nginx.vue

diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index 4f513ac..e31c5f2 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -191,18 +191,18 @@ $highlight: #f2c94c;
     .button {
       &.is-static {
         background: $panel;
-        border-color: $border;
-        border-style: solid;
-        border-width: 1px 0 1px 1px;
+        border: 1px solid $border;
         color: $dark-grey;
         padding: 0 ($margin * 1.5);
       }
     }
 
     .control {
-      + .control {
-        &:not(.is-expanded) {
-          margin-top: .25rem;
+      &:not(.is-expanded) {
+        + .control {
+          &:not(.is-expanded) {
+            margin-top: .25rem;
+          }
         }
       }
     }
diff --git a/src/nginxconfig/templates/global_sections/index.js b/src/nginxconfig/templates/global_sections/index.js
index c20688e..9cf6c4f 100644
--- a/src/nginxconfig/templates/global_sections/index.js
+++ b/src/nginxconfig/templates/global_sections/index.js
@@ -4,3 +4,4 @@ export { default as PHP } from './php';
 export { default as Python } from './python';
 export { default as Performance } from './performance';
 export { default as Logging } from './logging';
+export { default as NGINX } from './nginx';
diff --git a/src/nginxconfig/templates/global_sections/nginx.vue b/src/nginxconfig/templates/global_sections/nginx.vue
new file mode 100644
index 0000000..2d651c1
--- /dev/null
+++ b/src/nginxconfig/templates/global_sections/nginx.vue
@@ -0,0 +1,169 @@
+<template>
+    <div>
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">NGINX config directory</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${nginxConfigDirectoryChanged ? ' is-changed' : ''}`">
+                        <input v-model="nginxConfigDirectory"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.nginxConfigDirectory.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">worker_processes</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${workerProcessesChanged ? ' is-changed' : ''}`">
+                        <VueSelect v-model="workerProcesses"
+                                   :options="$props.data.workerProcesses.options"
+                                   :clearable="false"
+                        ></VueSelect>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">user</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${userChanged ? ' is-changed' : ''}`">
+                        <input v-model="user"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.user.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">pid</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${pidChanged ? ' is-changed' : ''}`">
+                        <input v-model="pid"
+                               class="input"
+                               type="text"
+                               :placeholder="$props.data.pid.default"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">client_max_body_size</label>
+            </div>
+            <div class="field-body">
+                <div class="field has-addons">
+                    <div :class="`control is-expanded${clientMaxBodySizeChanged ? ' is-changed' : ''}`">
+                        <input v-model.number="clientMaxBodySize"
+                               class="input"
+                               type="number"
+                               min="0"
+                               step="1"
+                               :placeholder="$props.data.clientMaxBodySize.default"
+                        />
+                    </div>
+                    <div class="control">
+                        <a class="button is-static">
+                            MB
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import VueSelect from 'vue-select';
+    import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
+
+    const defaults = {
+        nginxConfigDirectory: {
+            default: '/etc/nginx/',
+            enabled: true,
+        },
+        workerProcesses: {
+            default: 'auto',
+            options: [
+                'auto',
+                ...Array.from({ length: 16 }, (_, i) => i + 1),
+            ],
+            enabled: true,
+        },
+        user: {
+            default: 'www-data',
+            enabled: true,
+        },
+        pid: {
+            default: '/run/nginx.pid',
+            enabled: true,
+        },
+        clientMaxBodySize: {
+            default: 16,
+            enabled: true,
+        },
+    };
+
+    export default {
+        name: 'GlobalNGINX',                                // Component name
+        display: 'NGINX',                                   // Display name for tab
+        key: 'nginx',                                       // Key for data in parent
+        delegated: delegatedFromDefaults(defaults),         // Data the parent will present here
+        components: {
+            VueSelect,
+        },
+        props: {
+            data: Object,                                   // Data delegated back to us from parent
+        },
+        data () {
+            return {
+                i18n,
+            };
+        },
+        computed: computedFromDefaults(defaults, 'nginx'),  // Getters & setters for the delegated data
+        watch: {
+            // Check worker processes selection is valid
+            '$props.data.workerProcesses': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+                    if (data.enabled)
+                        if (!data.options.includes(data.computed))
+                            data.computed = data.default;
+                },
+                deep: true,
+            },
+            // Check client max body size value is valid
+            '$props.data.clientMaxBodySize': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+                    if (data.enabled)
+                        if (data.computed < 0)
+                            data.computed = 0;
+                },
+                deep: true,
+            },
+        },
+    };
+</script>