feat: admin storage actions + status light component

server/graph/resolvers/storage.js

@@ -92,8 +92,7 @@ module.exports = {
               }
             }
           }, {}),
-          actions: {}
-          // actions: md.actions
+          actions: md.actions
         }
       }), ['title'])
     }

server/graph/resolvers/system.js

@@ -94,6 +94,9 @@ module.exports = {
     latestVersionReleaseDate () {
       return DateTime.fromISO(WIKI.system.updates.releaseDate).toJSDate()
     },
+    mailConfigured () {
+      return false // TODO: return true if mail is setup
+    },
     nodeVersion () {
       return process.version.substr(1)
     },

server/graph/schemas/system.graphql

@@ -68,6 +68,7 @@ type SystemInfo {
   httpsPort: Int
   latestVersion: String
   latestVersionReleaseDate: Date
+  mailConfigured: Boolean
   nodeVersion: String
   operatingSystem: String
   pagesTotal: Int

server/modules/storage/azure/definition.yml

@@ -50,7 +50,7 @@ props:
         - hot|Hot
         - cool|Cool
 actions:
-  - handler: exportAll
+  exportAll:
     label: Export All DB Assets to Azure
     hint: Output all content from the DB to Azure Blog Storage, overwriting any existing data. If you enabled Azure Blog Storage after content was created or you temporarily disabled it, you'll want to execute this action to add the missing content.
     icon: this-way-up

server/modules/storage/db/definition.yml

@@ -18,7 +18,7 @@ versioning:
 sync: false
 props: {}
 actions:
-  - handler: purge
+  purge:
     label: Purge All Assets
     hint: Delete all asset data from the database (not the metadata). Useful if you moved assets to another storage target and want to reduce the size of the database.
     warn: This is a destructive action! Make sure all asset files are properly stored on another storage module! This action cannot be undone!

server/modules/storage/disk/definition.yml

@@ -32,15 +32,15 @@ props:
     icon: archive-folder
     order: 2
 actions:
-  - handler: dump
+  dump:
     label: Dump all content to disk
     hint: Output all content from the DB to the local disk. If you enabled this module after content was created or you temporarily disabled this module, you'll want to execute this action to add the missing files.
     icon: downloads
-  - handler: backup
+  backup:
     label: Create Backup
     hint: Will create a manual backup archive at this point in time, in a subfolder named _manual, from the contents currently on disk.
     icon: archive-folder
-  - handler: importAll
+  importAll:
     label: Import Everything
     hint: Will import all content currently in the local disk folder.
     icon: database-daily-import

server/modules/storage/gcs/definition.yml

@@ -59,7 +59,7 @@ props:
     default: storage.google.com
     order: 5
 actions:
-  - handler: exportAll
+  exportAll:
     label: Export All DB Assets to GCS
     hint: Output all content from the DB to Google Cloud Storage, overwriting any existing data. If you enabled Google Cloud Storage after content was created or you temporarily disabled it, you'll want to execute this action to add the missing content.
     icon: this-way-up

server/modules/storage/git/definition.yml

@@ -134,19 +134,19 @@ props:
     icon: run-command
     order: 50
 actions:
-  - handler: syncUntracked
+  syncUntracked:
     label: Add Untracked Changes
     hint: Output all content from the DB to the local Git repository to ensure all untracked content is saved. If you enabled Git after content was created or you temporarily disabled Git, you'll want to execute this action to add the missing untracked changes.
     icon: database-daily-export
-  - handler: sync
+  sync:
     label: Force Sync
     hint: Will trigger an immediate sync operation, regardless of the current sync schedule. The sync direction is respected.
     icon: synchronize
-  - handler: importAll
+  importAll:
     label: Import Everything
     hint: Will import all content currently in the local Git repository, regardless of the latest commit state. Useful for importing content from the remote repository created before git was enabled.
     icon: database-daily-import
-  - handler: purge
+  purge:
     label: Purge Local Repository
     hint: If you have unrelated merge histories, clearing the local repository can resolve this issue. This will not affect the remote repository or perform any commit.
     icon: trash

server/modules/storage/github/definition.yml

@@ -43,7 +43,7 @@ props:
     hint: The repository default branch.
     icon: code-fork
 actions:
-  - handler: exportAll
+  exportAll:
     label: Export All DB Assets to GitHub
     hint: Output all content from the DB to GitHub, overwriting any existing data. If you enabled GitHub after content was created or you temporarily disabled it, you'll want to execute this action to add the missing content.
     icon: this-way-up

server/modules/storage/s3/definition.yml

@@ -153,7 +153,7 @@ props:
     if:
       - { key: 'mode', eq: 'custom' }
 actions:
-  - handler: exportAll
+  exportAll:
     label: Export All DB Assets to S3
     hint: Output all content from the DB to S3, overwriting any existing data. If you enabled S3 after content was created or you temporarily disabled it, you'll want to execute this action to add the missing content.
     icon: this-way-up

server/modules/storage/sftp/definition.yml

@@ -87,7 +87,7 @@ props:
     hint: Base directory where files will be transferred to. The path must already exists and be writable by the user.
     icon: symlink-directory
 actions:
-  - handler: exportAll
+  exportAll:
     label: Export All DB Assets to Remote
     hint: Output all content from the DB to the remote SSH server, overwriting any existing data. If you enabled SFTP after content was created or you temporarily disabled it, you'll want to execute this action to add the missing content.
     icon: this-way-up

ux/src/boot/components.js

 import { boot } from 'quasar/wrappers'
 
 import BlueprintIcon from '../components/BlueprintIcon.vue'
+import StatusLight from '../components/StatusLight.vue'
 import VNetworkGraph from 'v-network-graph'
 
 export default boot(({ app }) => {
   app.component('BlueprintIcon', BlueprintIcon)
+  app.component('StatusLight', StatusLight)
   app.use(VNetworkGraph)
 })

ux/src/components/StatusLight.vue

+<template lang='pug'>
+.status-light(:class='cssClasses')
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// PROPS
+
+const props = defineProps({
+  pulse: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String,
+    default: ''
+  }
+})
+
+// COMPUTED
+
+const cssClasses = computed(() => {
+  return `${props.color} ${props.pulse && 'pulsate'}`
+})
+</script>
+
+<style lang="scss">
+.status-light {
+  display: block;
+  width: 5px;
+  height: 100%;
+  min-height: 5px;
+  border-radius: 5px;
+  color: $grey-5;
+  background-color: currentColor;
+  background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,.4));
+
+  &.negative {
+    color: $negative;
+  }
+  &.positive {
+    color: $positive;
+  }
+  &.warning {
+    color: $warning;
+  }
+
+  &.pulsate {
+    animation: status-light-pulsate 2s ease infinite;
+  }
+}
+
+@keyframes status-light-pulsate {
+  0% {
+    box-shadow: 0 0 5px 0 currentColor;
+  }
+  50% {
+    box-shadow: 0 0 5px 2px currentColor;
+  }
+  100% {
+    box-shadow: 0 0 5px 0 currentColor;
+  }
+}
+</style>

ux/src/i18n/locales/en.json

@@ -1466,5 +1466,6 @@
   "admin.api.key": "API Key",
   "admin.api.createSuccess": "API Key created successfully.",
   "admin.api.revoked": "Revoked",
-  "admin.api.revokedHint": "This key has been revoked and can no longer be used."
+  "admin.api.revokedHint": "This key has been revoked and can no longer be used.",
+  "admin.storage.setupRequired": "Setup required"
 }

ux/src/layouts/AdminLayout.vue

@@ -132,6 +132,8 @@ q-layout.admin(view='hHh Lpr lff')
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-rest-api.svg')
           q-item-section {{ t('admin.api.title') }}
+          q-item-section(side)
+            status-light(:color='adminStore.info.isApiEnabled ? `positive` : `negative`')
         q-item(to='/_admin/audit', v-ripple, active-class='bg-primary text-white', disabled)
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-event-log.svg')
@@ -144,6 +146,8 @@ q-layout.admin(view='hHh Lpr lff')
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-message-settings.svg')
           q-item-section {{ t('admin.mail.title') }}
+          q-item-section(side)
+            status-light(:color='adminStore.info.isMailConfigured ? `positive` : `warning`')
         q-item(to='/_admin/security', v-ripple, active-class='bg-primary text-white')
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-protect.svg')
@@ -156,6 +160,8 @@ q-layout.admin(view='hHh Lpr lff')
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-processor.svg')
           q-item-section {{ t('admin.system.title') }}
+          q-item-section(side)
+            status-light(:color='adminStore.isVersionLatest ? `positive` : `warning`')
         q-item(to='/_admin/utilities', v-ripple, active-class='bg-primary text-white')
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-swiss-army-knife.svg')

ux/src/pages/AdminAuth.vue

@@ -41,14 +41,12 @@ q-page.admin-mail
             clickable
             )
             q-item-section(side)
-              q-icon(
-                :name='`img:` + str.strategy.icon'
-              )
+              q-icon(:name='`img:` + str.strategy.icon')
             q-item-section
               q-item-label {{str.displayName}}
               q-item-label(caption) {{str.strategy.title}}
             q-item-section(side)
-              q-spinner-rings(:color='str.isEnabled ? `positive` : `negative`', size='sm')
+              status-light(:color='str.isEnabled ? `positive` : `negative`', :pulse='str.isEnabled')
       q-btn.q-mt-sm.full-width(
         color='primary'
         icon='las la-plus'
@@ -499,7 +497,7 @@ function addStrategy (str) {
     config: transform(str.props, (cfg, v, k) => {
       cfg[k] = v.default
     }, {}),
-    isEnabled: true,
+    isEnabled: false,
     displayName: str.title,
     selfRegistration: false,
     domainWhitelist: [],

ux/src/pages/AdminDashboard.vue

@@ -89,11 +89,13 @@ q-page.admin-dashboard
             )
     .col-12
       q-banner.bg-positive.text-white(
+        :class='adminStore.isVersionLatest ? `bg-positive` : `bg-warning`'
         inline-actions
         rounded
         )
         i.las.la-check.q-mr-sm
-        span.text-weight-medium Your Wiki.js server is running the latest version!
+        span.text-weight-medium(v-if='adminStore.isVersionLatest') Your Wiki.js server is running the latest version!
+        span.text-weight-medium(v-else) A new version of Wiki.js is available. Please update to the latest version.
         template(#action)
           q-btn(
             flat

ux/src/stores/admin.js

 import { defineStore } from 'pinia'
 import gql from 'graphql-tag'
-import { cloneDeep } from 'lodash-es'
+import { clone, cloneDeep } from 'lodash-es'
+import semverGte from 'semver/functions/gte'
 
 /* global APOLLO_CLIENT */
 
@@ -13,7 +14,9 @@ export const useAdminStore = defineStore('admin', {
       groupsTotal: 0,
       pagesTotal: 0,
       usersTotal: 0,
-      loginsPastDay: 0
+      loginsPastDay: 0,
+      isApiEnabled: false,
+      isMailConfigured: false
     },
     overlay: null,
     overlayOpts: {},
@@ -22,7 +25,14 @@ export const useAdminStore = defineStore('admin', {
       { code: 'en', name: 'English' }
     ]
   }),
-  getters: {},
+  getters: {
+    isVersionLatest: (state) => {
+      if (!state.info.currentVersion || !state.info.latestVersion || state.info.currentVersion === 'n/a' || state.info.latestVersion === 'n/a') {
+        return false
+      }
+      return semverGte(state.info.currentVersion, state.info.latestVersion)
+    }
+  },
   actions: {
     async fetchSites () {
       const resp = await APOLLO_CLIENT.query({
@@ -47,16 +57,24 @@ export const useAdminStore = defineStore('admin', {
       const resp = await APOLLO_CLIENT.query({
         query: gql`
           query getAdminInfo {
+            apiState
             systemInfo {
               groupsTotal
               usersTotal
+              currentVersion
+              latestVersion
+              mailConfigured
             }
           }
         `,
         fetchPolicy: 'network-only'
       })
-      this.info.groupsTotal = cloneDeep(resp?.data?.systemInfo.groupsTotal ?? 0)
-      this.info.usersTotal = cloneDeep(resp?.data?.systemInfo.usersTotal ?? 0)
+      this.info.groupsTotal = clone(resp?.data?.systemInfo?.groupsTotal ?? 0)
+      this.info.usersTotal = clone(resp?.data?.systemInfo?.usersTotal ?? 0)
+      this.info.currentVersion = clone(resp?.data?.systemInfo?.currentVersion ?? 'n/a')
+      this.info.latestVersion = clone(resp?.data?.systemInfo?.latestVersion ?? 'n/a')
+      this.info.isApiEnabled = clone(resp?.data?.apiState ?? false)
+      this.info.isMailConfigured = clone(resp?.data?.systemInfo?.mailConfigured ?? false)
     }
   }
 })