Add service configure dialog

dashboard/src/views/ServicesView.vue

@@ -7,15 +7,17 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { computed, reactive, onMounted, ref, useTemplateRef } from 'vue';
-import { Button, TableView, ProgressBar, ButtonGroup, Dialog } from 'pankow';
+import { Button, TableView, ProgressBar, ButtonGroup, FormGroup, Checkbox, Dialog } from 'pankow';
 import { prettyBinarySize } from 'pankow/utils';
 import { each } from 'async';
 import Section from '../components/Section.vue';
 import ServicesModel from '../models/ServicesModel.js';
+import SystemModel from '../models/SystemModel.js';
 import AppsModel from '../models/AppsModel.js';
 
 const appsModel = AppsModel.create(API_ORIGIN, localStorage.token);
 const servicesModel = ServicesModel.create(API_ORIGIN, localStorage.token);
+const systemModel = SystemModel.create(API_ORIGIN, localStorage.token);
 
 const columns = {
   status: {},
@@ -94,20 +96,57 @@ const dialog = useTemplateRef('dialog');
 const editService = ref({});
 const editError = ref('');
 const editBusy = ref(false);
+const editMemoryLimit = ref(0);
+const editMemoryTicks = ref([]);
+const editRecoveryMode = ref(false);
+
+let availableSystemMemory = 4 * 1024 * 1024 * 1024;
 
 async function onEdit(service) {
+  console.log(service)
   editService.value = service;
+  editMemoryLimit.value = service.config.memoryLimit;
+  editRecoveryMode.value = service.config.recoveryMode;
+
+  editMemoryTicks.value = [];
+  // we max system memory and current service memory for the case where the user configured the service on another server with more resources
+  const nearest256m = Math.ceil(Math.max(availableSystemMemory, editService.value.config.memoryLimit) / (256*1024*1024)) * 256 * 1024 * 1024;
+  const startTick = editService.value.defaultMemoryLimit;
+
+  // code below ensure we atleast have 2 ticks to keep the slider usable
+  editMemoryTicks.value.push(startTick); // start tick
+  for (let i = startTick * 2; i < nearest256m; i *= 2) editMemoryTicks.value.push(i);
+  editMemoryTicks.value.push(nearest256m); // end tick
+
   dialog.value.open();
 }
 
+function onResetToDefaults() {
+  editMemoryLimit.value = editService.value.defaultMemoryLimit;
+}
+
 async function onEditConfirm() {
   editBusy.value = true;
+
+  const [error] = await servicesModel.update(editService.value.id, parseInt(editMemoryLimit.value), editRecoveryMode.value);
+  if (error) {
+    console.error(error);
+    editError.value = error.body ? error.body.message : 'Internal Error';
+    editBusy.value = false;
+    return;
+  }
+
+  setTimeout(() => refresh(editService.value.id), 2000);
   editBusy.value = false;
   dialog.value.close();
 }
 
 onMounted(async () => {
   await refreshAll();
+
+  const [error, result] = await systemModel.memory();
+  if (error) return console.error(error);
+  availableSystemMemory = result.memory;
 });
 
 </script>
@@ -123,6 +162,19 @@ onMounted(async () => {
       @confirm="onEditConfirm()"
     >
       <p class="has-error text-center" v-show="editError">{{ editError }}</p>
+
+      <FormGroup>
+        <label for="memoryLimitInput">{{ $t('services.memoryLimit') }}: {{ prettyBinarySize(editService.memoryLimit) }}</label>
+        <input type="range" style="margin: 4px" id="memoryLimitInput" v-model="editMemoryLimit" step="134217728" :min="editMemoryTicks[0]" :max="editMemoryTicks[editMemoryTicks.length-1]" list="memoryLimitTicks" />
+        <datalist id="memoryLimitTicks">
+          <option v-for="limit in editMemoryTicks" :value="limit" :key="limit"></option>
+        </datalist>
+      </FormGroup>
+      <Button style="float: right;" small @click="onResetToDefaults()">{{ $t('services.configure.resetToDefaults') }}</Button>
+      <br/>
+      <br/>
+      <Checkbox v-model="editRecoveryMode" :label="$t('services.configure.enableRecoveryMode')" />
+      <p v-html="$t('services.configure.recoveryModeDescription', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-service' })"></p>
     </Dialog>
 
     <Section :title="$t('services.title')">