Merge branch 'dev' into support-moar-git-urls

2024-09-03 20:06:15 +02:00 · 2021-10-01 17:16:43 +02:00 · 2021-10-01 17:16:43 +02:00 · b66d1fe7d1
commit b66d1fe7d1
parent 48bfb3ef36 a10aaae7c4
13 changed files with 254 additions and 83 deletions
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@ -0,0 +1,59 @@
+<template>
+  <div class="lazy-renderer" :style="`min-height: ${fixedMinHeight}px`">
+    <slot v-if="render" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LazyRenderer',
+
+  props: {
+    unrender: { type: Boolean, default: true },
+    minHeight: { type: Number, default: 0 },
+    renderDelay: { type: Number, default: 100 },
+    unrenderDelay: { type: Number, default: 2000 },
+    rootMargin: { type: String, default: '300px' }
+  },
+
+  data () {
+    return {
+      observer: null,
+      render: false,
+      fixedMinHeight: this.minHeight
+    }
+  },
+
+  mounted () {
+    let unrenderTimer
+    let renderTimer
+    this.observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        clearTimeout(unrenderTimer)
+        // Show the component after a delay (to avoid rendering while scrolling fast)
+        renderTimer = setTimeout(() => {
+          this.render = true
+        }, this.unrender ? this.renderDelay : 0)
+
+        if (!this.unrender) {
+          // Stop listening to intersections after first appearance if unrendering is not activated
+          this.observer.disconnect()
+        }
+      } else if (this.unrender) {
+        clearTimeout(renderTimer)
+        // Hide the component after a delay if it's no longer in the viewport
+        unrenderTimer = setTimeout(() => {
+          this.fixedMinHeight = this.$el.clientHeight
+          this.render = false
+        }, this.unrenderDelay)
+      }
+    }, { rootMargin: this.rootMargin })
+
+    this.observer.observe(this.$el)
+  },
+
+  beforeDestroy () {
+    this.observer.disconnect()
+  }
+}
+</script>
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@ -1,9 +1,15 @@
 <template>
  <b-list-group
-    v-bind="$attrs" ref="self"
-    flush :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
+    v-bind="$attrs" flush
+    :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
+    @scroll="onScroll"
  >
-    <b-list-group-item v-for="({ color, text }, i) in messages" :key="i">
+    <b-list-group-item
+      v-if="limit && messages.length > limit"
+      variant="info" v-t="'api.partial_logs'"
+    />
+
+    <b-list-group-item v-for="({ color, text }, i) in reducedMessages" :key="i">
      <span class="status" :class="'bg-' + color" />
      <span v-html="text" />
    </b-list-group-item>
@ -18,15 +24,36 @@ export default {
    messages: { type: Array, required: true },
    fixedHeight: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
-    autoScroll: { type: Boolean, default: false }
+    autoScroll: { type: Boolean, default: false },
+    limit: { type: Number, default: null }
+  },
+
+  data () {
+    return {
+      auto: true
+    }
+  },
+
+  computed: {
+    reducedMessages () {
+      const len = this.messages.length
+      if (!this.limit || len <= this.limit) {
+        return this.messages
+      }
+      return this.messages.slice(len - this.limit)
+    }
  },

  methods: {
    scrollToEnd () {
+      if (!this.auto) return
      this.$nextTick(() => {
-        const container = this.$refs.self
-        container.scrollTo(0, container.lastElementChild.offsetTop)
+        this.$el.scrollTo(0, this.$el.lastElementChild.offsetTop)
      })
+    },
+
+    onScroll ({ target }) {
+      this.auto = target.scrollHeight === target.scrollTop + target.clientHeight
    }
  },

--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@ -343,9 +343,9 @@ export function formatFormDataValue (value) {
 * @param {Boolean} [extraParams.removeEmpty=true] - Removes "empty" values from the object.
 * @return {Object} the parsed data to be sent to the server, with extracted values if specified.
 */
-export function formatFormData (
+export async function formatFormData (
  formData,
-  { extract = null, flatten = false, removeEmpty = true, removeNull = false, promise = false, multipart = true } = {}
+  { extract = null, flatten = false, removeEmpty = true, removeNull = false, multipart = true } = {}
 ) {
  const output = {
    data: {},
@ -376,14 +376,7 @@ export function formatFormData (
      output[type][key] = value
    }
  }
+  if (promises.length) await Promise.all(promises)
  const { data, extracted } = output
-  if (promises.length > 0 || promise) {
-    return new Promise((resolve, reject) => {
-      Promise.all(promises).then((value) => {
-        resolve(data)
-      })
-    })
-  } else {
-    return extract ? { data, ...extracted } : data
-  }
+  return extract ? { data, ...extracted } : data
 }
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@ -14,6 +14,7 @@
    "administration_password": "Administration password",
    "all": "All",
    "api": {
+        "partial_logs": "[...] (check in history for full logs)",
        "processing": "The server is processing the action...",
        "query_status": {
            "error": "Unsuccessful",
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@ -12,7 +12,9 @@ export default {
    waiting: false, // Boolean
    history: [], // Array of `request`
    requests: [], // Array of `request`
-    error: null // null || request
+    error: null, // null || request
+    historyTimer: null, // null || setTimeout id
+    tempMessages: [] // array of messages
  },

  mutations: {
@ -52,12 +54,26 @@ export default {
      state.history.push(request)
    },

-    'ADD_MESSAGE' (state, { message, type }) {
-      const request = state.history[state.history.length - 1]
-      request.messages.push(message)
-      if (['error', 'warning'].includes(type)) {
-        request[type + 's']++
+    'ADD_TEMP_MESSAGE' (state, { request, message, type }) {
+      state.tempMessages.push([message, type])
+    },
+
+    'UPDATE_DISPLAYED_MESSAGES' (state, { request }) {
+      if (!state.tempMessages.length) {
+        state.historyTimer = null
+        return
      }
+
+      const { messages, warnings, errors } = state.tempMessages.reduce((acc, [message, type]) => {
+        acc.messages.push(message)
+        if (['error', 'warning'].includes(type)) acc[type + 's']++
+        return acc
+      }, { messages: [], warnings: 0, errors: 0 })
+      state.tempMessages = []
+      state.historyTimer = null
+      request.messages = request.messages.concat(messages)
+      request.warnings += warnings
+      request.errors += errors
    },

    'SET_ERROR' (state, request) {
@ -147,7 +163,11 @@ export default {
      return request
    },

-    'END_REQUEST' ({ commit }, { request, success, wait }) {
+    'END_REQUEST' ({ state, commit }, { request, success, wait }) {
+      // Update last messages before finishing this request
+      clearTimeout(state.historyTimer)
+      commit('UPDATE_DISPLAYED_MESSAGES', { request })
+
      let status = success ? 'success' : 'error'
      if (success && (request.warnings || request.errors)) {
        const messages = request.messages
@ -166,7 +186,7 @@ export default {
      }
    },

-    'DISPATCH_MESSAGE' ({ commit }, { request, messages }) {
+    'DISPATCH_MESSAGE' ({ state, commit, dispatch }, { request, messages }) {
      for (const type in messages) {
        const message = {
          text: messages[type].replace('\n', '<br>'),
@ -183,7 +203,13 @@ export default {
          commit('UPDATE_REQUEST', { request, key: 'progress', value: Object.values(progress) })
        }
        if (message.text) {
-          commit('ADD_MESSAGE', { request, message, type })
+          // To avoid rendering lag issues, limit the flow of websocket messages to batches of 50ms.
+          if (state.historyTimer === null) {
+            state.historyTimer = setTimeout(() => {
+              commit('UPDATE_DISPLAYED_MESSAGES', { request })
+            }, 50)
+          }
+          commit('ADD_TEMP_MESSAGE', { request, message, type })
        }
      }
    },
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@ -59,7 +59,7 @@
            @shown="scrollToAction(i)"
            @hide="scrollToAction(i)"
          >
-            <message-list-group :messages="action.messages" flush />
+            <message-list-group :messages="action.messages" />
          </b-collapse>
        </b-card>
      </div>
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@ -18,6 +18,7 @@
    <message-list-group
      v-if="hasMessages" :messages="request.messages"
      bordered fixed-height auto-scroll
+      :limit="100"
    />
  </b-card-body>
 </template>
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@ -64,52 +64,56 @@

    <!-- APPS CARDS -->
    <b-card-group v-else deck>
-      <b-card no-body v-for="app in filteredApps" :key="app.id">
-        <b-card-body class="d-flex flex-column">
-          <b-card-title class="d-flex mb-2">
-            {{ app.manifest.name }}
-            <small v-if="app.state !== 'working'" class="d-flex align-items-center ml-2">
-              <b-badge
-                v-if="app.state !== 'highquality'"
-                :variant="(app.color === 'danger' && app.state === 'lowquality') ? 'warning' : app.color"
-                v-b-popover.hover.bottom="$t(`app_state_${app.state}_explanation`)"
-              >
-                {{ $t('app_state_' + app.state) }}
-              </b-badge>
-              <icon
-                v-else iname="star" class="star"
-                v-b-popover.hover.bottom="$t(`app_state_${app.state}_explanation`)"
-              />
-            </small>
-          </b-card-title>
+      <lazy-renderer v-for="app in filteredApps" :key="app.id" :min-height="120">
+        <b-card no-body>
+          <b-card-body class="d-flex flex-column">
+            <b-card-title class="d-flex mb-2">
+              {{ app.manifest.name }}

-          <b-card-text>{{ app.manifest.description }}</b-card-text>
+              <small v-if="app.state !== 'working'" class="d-flex align-items-center ml-2">
+                <b-badge
+                  v-if="app.state !== 'highquality'"
+                  :variant="(app.color === 'danger' && app.state === 'lowquality') ? 'warning' : app.color"
+                  v-b-popover.hover.bottom="$t(`app_state_${app.state}_explanation`)"
+                >
+                  {{ $t('app_state_' + app.state) }}
+                </b-badge>

-          <b-card-text v-if="app.maintained === 'orphaned'" class="align-self-end mt-auto">
-            <span class="alert-warning p-1" v-b-popover.hover.top="$t('orphaned_details')">
-              <icon iname="warning" /> {{ $t(app.maintained) }}
-            </span>
-          </b-card-text>
-        </b-card-body>
+                <icon
+                  v-else iname="star" class="star"
+                  v-b-popover.hover.bottom="$t(`app_state_${app.state}_explanation`)"
+                />
+              </small>
+            </b-card-title>

-        <!-- APP BUTTONS -->
-        <b-button-group>
-          <b-button :href="app.git.url" variant="outline-dark" target="_blank">
-            <icon iname="code" /> {{ $t('code') }}
-          </b-button>
+            <b-card-text>{{ app.manifest.description }}</b-card-text>

-          <b-button :href="app.git.url + '/blob/master/README.md'" variant="outline-dark" target="_blank">
-            <icon iname="book" /> {{ $t('readme') }}
-          </b-button>
+            <b-card-text v-if="app.maintained === 'orphaned'" class="align-self-end mt-auto">
+              <span class="alert-warning p-1" v-b-popover.hover.top="$t('orphaned_details')">
+                <icon iname="warning" /> {{ $t(app.maintained) }}
+              </span>
+            </b-card-text>
+          </b-card-body>

-          <b-button v-if="app.isInstallable" :variant="app.color" @click="onInstallClick(app)">
-            <icon iname="plus" /> {{ $t('install') }} <icon v-if="app.color === 'danger'" class="ml-1" iname="warning" />
-          </b-button>
-          <b-button v-else :variant="app.color" disabled>
-            {{ $t('installed') }}
-          </b-button>
-        </b-button-group>
-      </b-card>
+          <!-- APP BUTTONS -->
+          <b-button-group>
+            <b-button :href="app.git.url" variant="outline-dark" target="_blank">
+              <icon iname="code" /> {{ $t('code') }}
+            </b-button>
+
+            <b-button :href="app.git.url + '/blob/master/README.md'" variant="outline-dark" target="_blank">
+              <icon iname="book" /> {{ $t('readme') }}
+            </b-button>
+
+            <b-button v-if="app.isInstallable" :variant="app.color" @click="onInstallClick(app)">
+              <icon iname="plus" /> {{ $t('install') }} <icon v-if="app.color === 'danger'" class="ml-1" iname="warning" />
+            </b-button>
+            <b-button v-else :variant="app.color" disabled>
+              {{ $t('installed') }}
+            </b-button>
+          </b-button-group>
+        </b-card>
+      </lazy-renderer>
    </b-card-group>

    <template #bot>
@ -155,12 +159,18 @@
 <script>
 import { validationMixin } from 'vuelidate'

+import LazyRenderer from '@/components/LazyRenderer'
 import { required, appRepoUrl } from '@/helpers/validators'
+
 import { randint } from '@/helpers/commons'

 export default {
  name: 'AppCatalog',

+  components: {
+    LazyRenderer
+  },
+
  data () {
    return {
      queries: [
@ -375,10 +385,11 @@ export default {
 }

 .card-deck {
-  .card {
-    border-color: $gray-400;
+  > * {
+    margin-left: 15px;
+    margin-right: 15px;
    margin-bottom: 2rem;
-    flex-basis: 90%;
+    flex-basis: 100%;
    @include media-breakpoint-up(md) {
      flex-basis: 50%;
      max-width: calc(50% - 30px);
@ -388,6 +399,15 @@ export default {
      max-width: calc(33.3% - 30px);
    }

+    .card {
+      margin: 0;
+      height: 100%;
+    }
+  }
+
+  .card {
+    border-color: $gray-400;
+
    // not maintained info
    .alert-warning {
      font-size: .75em;
@ -402,6 +422,8 @@ export default {
    @include media-breakpoint-up(sm) {
      min-height: 10rem;
    }
+
+    flex-basis: 90%;
    border: 0;

    .btn {
--- a/app/src/views/app/AppConfigPanel.vue
+++ b/app/src/views/app/AppConfigPanel.vue
@ -155,7 +155,7 @@ export default {
    },

    applyConfig (id_) {
-      formatFormData(this.forms[id_], { promise: true, removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
+      formatFormData(this.forms[id_], { removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
        const args = objectToParams(formatedData)

        api.put(
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@ -23,10 +23,13 @@
        :validation="$v" :server-error="serverError"
        @submit.prevent="performInstall"
      >
-        <form-field
-          v-for="(field, fname) in fields" :key="fname" label-cols="0"
-          v-bind="field" v-model="form[fname]" :validation="$v.form[fname]"
-        />
+        <template v-for="(field, fname) in fields">
+          <form-field
+            v-if="isVisible(field.visible, field)"
+            :key="fname" label-cols="0"
+            v-bind="field" v-model="form[fname]" :validation="$v.form[fname]"
+          />
+        </template>
      </card-form>
    </template>

@ -44,9 +47,10 @@

 <script>
 import { validationMixin } from 'vuelidate'
+import evaluate from 'simple-evaluate'

 import api, { objectToParams } from '@/api'
-import { formatYunoHostArguments, formatI18nField, formatFormData } from '@/helpers/yunohostArguments'
+import { formatYunoHostArguments, formatI18nField, formatFormData, pFileReader } from '@/helpers/yunohostArguments'

 export default {
  name: 'AppInstall',
@ -102,6 +106,41 @@ export default {
      this.errors = errors
    },

+    isVisible (expression, field) {
+      if (!expression || !field) return true
+      const context = {}
+
+      const promises = []
+      for (const shortname in this.form) {
+        if (this.form[shortname] instanceof File) {
+          if (expression.includes(shortname)) {
+            promises.push(pFileReader(this.form[shortname], context, shortname, false))
+          }
+        } else {
+          context[shortname] = this.form[shortname]
+        }
+      }
+      // Allow to use match(var,regexp) function
+      const matchRe = new RegExp('match\\(\\s*(\\w+)\\s*,\\s*"([^"]+)"\\s*\\)', 'g')
+      let i = 0
+      Promise.all(promises).then(() => {
+        for (const matched of expression.matchAll(matchRe)) {
+          i++
+          const varName = matched[1] + '__re' + i.toString()
+          context[varName] = new RegExp(matched[2], 'm').test(context[matched[1]])
+          expression = expression.replace(matched[0], varName)
+        }
+
+        try {
+          field.isVisible = evaluate(context, expression)
+        } catch (error) {
+          field.isVisible = false
+        }
+      })
+      // This value should be updated magically when vuejs will detect isVisible changed
+      return field.isVisible
+    },
+
    async performInstall () {
      if ('path' in this.form && this.form.path === '/') {
        const confirmed = await this.$askConfirmation(
@ -110,7 +149,10 @@ export default {
        if (!confirmed) return
      }

-      const { data: args, label } = formatFormData(this.form, { extract: ['label'] })
+      const { data: args, label } = await formatFormData(
+        this.form,
+        { extract: ['label'], removeEmpty: false, removeNull: true, multipart: false }
+      )
      const data = { app: this.id, label, args: Object.entries(args).length ? objectToParams(args) : undefined }

      api.post('apps', data, { key: 'apps.install', name: this.name }).then(() => {
--- a/app/src/views/domain/DomainConfig.vue
+++ b/app/src/views/domain/DomainConfig.vue
@ -142,7 +142,7 @@ export default {
    },

    applyConfig (id_) {
-      formatFormData(this.forms[id_], { promise: true, removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
+      formatFormData(this.forms[id_], { removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
        const args = objectToParams(formatedData)

        api.put(
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@ -173,8 +173,8 @@ export default {
      this.form.domain = this.mainDomain
    },

-    onSubmit () {
-      const data = formatFormData(this.form, { flatten: true })
+    async onSubmit () {
+      const data = await formatFormData(this.form, { flatten: true })
      api.post({ uri: 'users' }, data, { key: 'users.create', name: this.form.username }).then(() => {
        this.$router.push({ name: 'user-list' })
      }).catch(err => {
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@ -266,8 +266,8 @@ export default {
      }
    },

-    onSubmit () {
-      const formData = formatFormData(this.form, { flatten: true })
+    async onSubmit () {
+      const formData = await formatFormData(this.form, { flatten: true })
      const user = this.user(this.name)
      const data = {}
      if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {