ngfw-15453 Added Google.vue component with get settings api integration

untangle-vue-ui/source/src/components/settings/administration/Admin.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Main administration component wrapping AdministrationAdmin from vuntangle -->
-  <settings-admin :settings="settings">
+  <settings-admin :settings="commonSettings">
     <template #actions="{ newSettings, isDirty, validate }">
       <u-btn :min-width="null" :disabled="!isDirty" @click="onSaveSettings(newSettings, validate)">{{
         $t('save')
@@ -11,9 +11,11 @@
 
 <script>
   import { SettingsAdmin } from 'vuntangle'
+  import settingsMixin from '../settingsMixin'
 
   export default {
     components: { SettingsAdmin },
+    mixins: [settingsMixin],
 
     computed: {
       /**
@@ -30,7 +32,7 @@
        * Combines admin and system settings into a single object.
        * @returns {Object} Combined settings object.
        */
-      settings() {
+      commonSettings() {
         return { ...this.adminSettings, system: this.systemSettings }
       },
     },

untangle-vue-ui/source/src/components/settings/administration/Certificates.vue

@@ -0,0 +1,39 @@
+<template>
+  <settings-certificates :certificates-information="certificatesInformation" />
+</template>
+
+<script>
+  import { SettingsCertificates } from 'vuntangle'
+  import settingsMixin from '../settingsMixin'
+
+  export default {
+    components: { SettingsCertificates },
+    mixins: [settingsMixin],
+
+    computed: {
+      /**
+       * Retrieves certificates information from the Vuex store.
+       * @returns {Object} Certificates information object.
+       */
+      certificatesInformation: ({ $store }) => $store.getters['settings/certificatesInformation'],
+    },
+
+    created() {
+      this.loadCertificates(false)
+    },
+
+    methods: {
+      /**
+       * Loads certificate information from the store.
+       * @param {boolean} refetch - Whether to refetch the data from the server.
+       */
+      async loadCertificates(refetch) {
+        await this.$store.dispatch('settings/getCertificatesInformation', refetch)
+      },
+
+      onBrowserRefresh() {
+        this.loadCertificates(true)
+      },
+    },
+  }
+</script>

untangle-vue-ui/source/src/components/settings/administration/Google.vue

@@ -0,0 +1,183 @@
+<template>
+  <settings-google
+    :settings="settings"
+    @google-drive-configure="googleDriveConfigure"
+    @google-drive-disconnect="googleDriveDisconnect"
+    @select-directory="selectRootDirectory"
+  >
+    <template #actions="{ newSettings, isDirty }">
+      <u-btn :min-width="null" :disabled="!isDirty" @click="onSaveSettings(newSettings)">{{ $t('save') }}</u-btn>
+    </template>
+  </settings-google>
+</template>
+
+<script>
+  import { SettingsGoogle } from 'vuntangle'
+  import Rpc from '@/util/Rpc'
+  import Util from '@/util/setupUtil'
+
+  export default {
+    components: { SettingsGoogle },
+
+    data() {
+      return {
+        refreshGoogleTask: null,
+      }
+    },
+
+    computed: {
+      /**
+       * Retrieves Google settings from the Vuex store.
+       * @returns {Object} Google settings object.
+       */
+      googleSettings: ({ $store }) => $store.getters['settings/googleSettings'],
+
+      /* Checks if Google Drive is connected from the Vuex store */
+      isGoogleDriveConnected: ({ $store }) => $store.getters['settings/isGoogleDriveConnected'],
+
+      /**
+       * Returns the current Google settings.
+       * @returns {Object} Current Google settings object.
+       */
+      settings({ googleSettings, isGoogleDriveConnected }) {
+        return {
+          ...googleSettings,
+          googleDriveIsConfigured: isGoogleDriveConnected,
+        }
+      },
+    },
+
+    /** Fetches initial admin and system settings. */
+    created() {
+      this.$store.dispatch('settings/getGoogleSettings', false)
+      this.$store.dispatch('settings/getIsGoogleDriveConnected')
+      this.buildGoogleRefreshTask()
+    },
+
+    methods: {
+      /**
+       * Retrieves the root directory for Google Drive via the Rpc api call.
+       * @returns {string} Root directory path.
+       */
+      getRootDirectory() {
+        const googleManager = Rpc.directData('rpc.UvmContext.googleManager')
+        const rootDirectory = googleManager.getAppSpecificGoogleDrivePath(null)
+        return rootDirectory
+      },
+
+      /**
+       * Handles Google Drive configuration event.
+       */
+      googleDriveConfigure() {
+        this.refreshGoogleTask.start()
+        window.open(
+          Rpc.directData(
+            'rpc.UvmContext.googleManager.getAuthorizationUrl',
+            window.parent.location.protocol,
+            window.parent.location.host,
+          ),
+        )
+      },
+
+      /**
+       * Handles Google Drive disconnection event.
+       */
+      googleDriveDisconnect() {
+        Rpc.directData('rpc.UvmContext.googleManager.disconnectGoogleDrive')
+        this.refreshGoogleTask.run()
+      },
+
+      /**
+       * Handles saving of new Google settings.
+       * @param {Object} newSettings - The new Google settings object.
+       */
+      async onSaveSettings(newSettings) {
+        this.$store.commit('SET_LOADER', true)
+        await this.$store
+          .dispatch('settings/setGoogleSettings', newSettings)
+          .finally(() => this.$store.commit('SET_LOADER', false))
+      },
+
+      /**
+       * handler for select root directory
+       * Gets google cloud app details from back-end
+       * opens google picker iframe in callback implementation
+       */
+      async selectRootDirectory(cb) {
+        try {
+          const result = await Rpc.asyncPromise('rpc.UvmContext.googleManager.getGoogleCloudApp')()
+          if (result && result.clientId) {
+            const googlePickerMessageData = {
+              action: 'openPicker',
+              clientId: result.clientId,
+              appId: result.appId,
+              scopes: result.scopes,
+              apiKey: result.apiKey,
+              relayServerUrl: result.relayServerUrl,
+              origin: window.location.protocol + '//' + window.location.host,
+            }
+
+            cb(googlePickerMessageData)
+          } else {
+            this.$vuntangle.toast.add(this.$t('an_error_occurred'), 'error')
+          }
+        } catch (ex) {
+          Util.handleException(ex)
+        }
+      },
+
+      /**
+       * Builds a refresh task to get the google drive configuration status and google settings
+       */
+      buildGoogleRefreshTask() {
+        if (this.refreshGoogleTask) return
+
+        const me = this
+
+        this.refreshGoogleTask = {
+          updateFrequency: 3000,
+          count: 0,
+          maxTries: 40,
+          started: false,
+          intervalId: null,
+
+          start() {
+            this.stop()
+            this.count = 0
+            this.intervalId = setInterval(() => this.run(), this.updateFrequency)
+            this.started = true
+          },
+
+          stop() {
+            if (this.intervalId) {
+              clearInterval(this.intervalId)
+              this.intervalId = null
+            }
+            this.started = false
+          },
+
+          run() {
+            this.count++
+            if (this.count > this.maxTries) {
+              this.stop()
+              return
+            }
+
+            try {
+              me.$store.dispatch('settings/getIsGoogleDriveConnected')
+              me.$store.dispatch('settings/getGoogleSettings', true)
+
+              // Stop task when connected
+              const isGoogleDriveConnected = me.$store.getters['settings/isGoogleDriveConnected']
+              if (isGoogleDriveConnected) {
+                this.stop()
+              }
+            } catch (ex) {
+              this.$vuntangle.toast.add(this.$t('an_error_occurred') + ex.message, 'error')
+            }
+          },
+        }
+      },
+    },
+  }
+</script>

untangle-vue-ui/source/src/layouts/AppDrawer.vue

@@ -129,18 +129,6 @@
               { name: 'troubleshooting', to: '/settings/network/troubleshooting' },
             ],
           },
-          {
-            name: 'administration',
-            icon: 'mdi-account-cog',
-            active: false,
-            match: '/settings/administration',
-            items: [
-              { name: 'admin', to: '/settings/administration/admin' },
-              { name: 'certificates', to: '' },
-              { name: 'snmp', to: '' },
-              { name: 'google', to: '' },
-            ],
-          },
           {
             name: 'routing',
             icon: 'mdi-call-split',
@@ -162,6 +150,18 @@
               { name: 'denial_of_service', to: '/settings/firewall/denial-of-service' },
             ],
           },
+          {
+            name: 'administration',
+            icon: 'mdi-account-cog',
+            active: false,
+            match: '/settings/administration',
+            items: [
+              { name: 'admin', to: '/settings/administration/admin' },
+              { name: 'certificates', to: '/settings/administration/certificates' },
+              { name: 'snmp', to: '' },
+              { name: 'google', to: '/settings/administration/google' },
+            ],
+          },
           {
             name: 'system',
             icon: 'mdi-cog',

untangle-vue-ui/source/src/router/setting.js

@@ -22,10 +22,13 @@ import Upgrade from '@/components/settings/system/Upgrade'
 import RulesList from '@/components/settings/rules/RulesList.vue'
 import Troubleshooting from '@/components/settings/network/Troubleshooting.vue'
 import DenialOfService from '@/components/settings/firewall/DenialOfService.vue'
+import Logging from '@/components/settings/system/Logging.vue'
 
 // Administration
 import Admin from '@/components/settings/administration/Admin.vue'
-import Logging from '@/components/settings/system/Logging.vue'
+import Certificates from '@/components/settings/administration/Certificates.vue'
+import Google from '@/components/settings/administration/Google.vue'
+
 export default [
   {
     name: 'settings',
@@ -36,6 +39,10 @@ export default [
         path: 'network',
         redirect: 'network/interfaces',
       },
+      {
+        path: 'administration',
+        redirect: 'administration/admin',
+      },
       {
         path: 'system',
         redirect: 'system/settings',
@@ -116,6 +123,15 @@ export default [
         component: Admin,
         meta: { helpContext: 'administration' },
       },
+      {
+        path: 'administration/certificates',
+        component: Certificates,
+        meta: { helpContext: 'certificates' },
+      },
+      {
+        path: 'administration/google',
+        component: Google,
+      },
       {
         path: 'system/upgrade',
         component: Upgrade,