(backport to 3.4.x)fix(kconfig): remove kong version from kconfig.js-FTI-5557 (#146)

package.json

@@ -39,6 +39,7 @@
     "bmp-js": "^0.1.0",
     "lodash.clonedeep": "^4.5.0",
     "marked": "^5.1.0",
+    "pinia": "^2.1.7",
     "vue": "^3.2.47",
     "vue-router": "^4.2.2"
   },

src/components/MakeAWish.vue

@@ -16,11 +16,13 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from '@/composables/useI18n'
+import { useInfoStore } from '@/stores/info'
 
 const route = useRoute()
 const { t } = useI18n()
+const infoStore = useInfoStore()
 
-const mailToUrl = computed(() => `mailto:[email protected]?subject=${t('wish.subject', { title: `${route.meta.title} | Kong Manager OSS` })}`)
+const mailToUrl = computed(() => `mailto:[email protected]?subject=${t('wish.subject', { title: `${route.meta.title} | Kong Manager OSS@${infoStore.kongVersion}` })}`)
 </script>
 
 <style scoped lang="scss">

src/composables/useDetailGeneralConfig.ts

@@ -1,16 +1,18 @@
 import { reactive } from 'vue'
 import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import type { KongManagerBaseEntityConfig } from '@kong-ui/entities-shared'
-import { useAdminApiUrl } from './useAdminApiUrl'
+
+const infoStore = useInfoStore()
 
 export const useDetailGeneralConfig = () => {
   return reactive({
     app: 'kongManager' as const,
     workspace: '',
     gatewayInfo: {
-      edition: config.GATEWAY_EDITION,
-      version: config.GATEWAY_VERSION,
+      edition: infoStore.kongEdition,
+      version: infoStore.kongVersion,
     },
-    apiBaseUrl: useAdminApiUrl(),
+    apiBaseUrl: config.ADMIN_API_URL,
   } as Pick<KongManagerBaseEntityConfig, 'app' | 'workspace' | 'gatewayInfo' | 'apiBaseUrl'>)
 }

src/composables/useDocsLink.ts

@@ -1,22 +1,27 @@
 import { formatVersion } from '@/utils'
-import { config, type GatewayEdition } from 'config'
+import { type GatewayEdition } from 'config'
 import { EntityType } from '@/types'
+import { computed } from 'vue'
+import { useInfoStore } from '@/stores/info'
+
+const infoStore = useInfoStore()
+const kongVersion = computed(() => infoStore.kongVersion)
 
 const getVersionInPath = (edition: GatewayEdition) => {
-  if (!config.GATEWAY_VERSION) {
+  if (!kongVersion.value) {
     return 'latest'
   }
 
   return edition === 'enterprise'
     // For Enterprise, the version has a pattern of <major>.<minor>.0.x where the 3rd digit
     // will always be 0 regardless of the actual patch version
-    ? `${formatVersion(config.GATEWAY_VERSION)}.0.x`
+    ? `${formatVersion(kongVersion.value)}.0.x`
     // For OSS, the version has a pattern of <major>.<minor>.x
-    : `${formatVersion(config.GATEWAY_VERSION)}.x`
+    : `${formatVersion(kongVersion.value)}.x`
 }
 
 export const useDocsLink = (entityType: EntityType) => {
-  const edition = config.GATEWAY_EDITION ?? 'community'
+  const edition = infoStore.kongEdition ?? 'community'
   const versionInPath = getVersionInPath(edition)
   const docsBase = `https://docs.konghq.com/gateway/api/admin-${edition === 'enterprise' ? 'ee' : 'oss'}/${versionInPath}/#/`
 

src/composables/useFormGeneralConfig.ts

@@ -1,16 +1,18 @@
 import { reactive } from 'vue'
 import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import type { KongManagerBaseFormConfig } from '@kong-ui/entities-shared'
-import { useAdminApiUrl } from './useAdminApiUrl'
+
+const infoStore = useInfoStore()
 
 export const useFormGeneralConfig = () => {
   return reactive({
     app: 'kongManager' as const,
     workspace: '',
     gatewayInfo: {
-      edition: config.GATEWAY_EDITION,
-      version: config.GATEWAY_VERSION,
+      edition: infoStore.kongEdition,
+      version: infoStore.kongVersion,
     },
-    apiBaseUrl: useAdminApiUrl(),
+    apiBaseUrl: config.ADMIN_API_URL,
   } as Pick<KongManagerBaseFormConfig, 'app' | 'workspace' | 'gatewayInfo' | 'apiBaseUrl'>)
 }

src/composables/useListGeneralConfig.ts

@@ -1,19 +1,21 @@
 import { reactive } from 'vue'
 import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import type { KongManagerBaseTableConfig } from '@kong-ui/entities-shared'
-import { useAdminApiUrl } from './useAdminApiUrl'
+
+const infoStore = useInfoStore()
 
 export const useListGeneralConfig = () => {
   return reactive({
     app: 'kongManager' as const,
     workspace: '',
     gatewayInfo: {
-      edition: config.GATEWAY_EDITION,
-      version: config.GATEWAY_VERSION,
+      edition: infoStore.kongEdition,
+      version: infoStore.kongVersion,
     },
-    apiBaseUrl: useAdminApiUrl(),
+    apiBaseUrl: config.ADMIN_API_URL,
     // Kong Gateway OSS only supports exact match and does not support sorting
-    isExactMatch: true,
-    disableSorting: true,
-  } as Pick<KongManagerBaseTableConfig, 'app' | 'workspace' | 'gatewayInfo' | 'isExactMatch' | 'apiBaseUrl' | 'disableSorting'>)
+    isExactMatch: infoStore.kongEdition === 'community',
+    disableSorting: infoStore.kongEdition === 'community',
+  }) as Pick<KongManagerBaseTableConfig, 'app' | 'workspace' | 'gatewayInfo' | 'isExactMatch' | 'apiBaseUrl' | 'disableSorting'>
 }

src/config.ts

@@ -52,14 +52,6 @@ export const config = {
     return `${window.location.protocol}//${window.location.hostname}:${port}`
   },
 
-  get GATEWAY_VERSION () {
-    return getConfig<string | null>('KONG_VERSION', null)
-  },
-
-  get GATEWAY_EDITION () {
-    return getConfig<GatewayEdition | null>('KONG_EDITION', null)
-  },
-
   get ANONYMOUS_REPORTS () {
     return getConfig('ANONYMOUS_REPORTS', false)
   },

src/pages/consumers/ConsumerCredentials.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import { pluginMeta } from '@/pages/plugins/PluginMeta'
 import { useAxios } from '@/composables/useAxios'
 import { useAdminApiUrl } from '@/composables/useAdminApiUrl'
@@ -36,6 +36,7 @@ const router = useRouter()
 const { axiosInstance } = useAxios()
 const adminApiUrl = useAdminApiUrl()
 const { t } = useI18n()
+const infoStore = useInfoStore()
 
 const enabledPlugins = ref<string[]>([])
 const enabledPluginsFetched = ref(false)
@@ -46,7 +47,7 @@ const credentialPlugins = [
   'hmac-auth',
   'jwt',
   'key-auth',
-  ...(config.GATEWAY_EDITION === 'community' ? [] : ['key-auth-enc']),
+  ...(infoStore.kongEdition === 'community' ? [] : ['key-auth-enc']),
   'oauth2',
 ]
   .filter(plugin => !!pluginMeta[plugin])

src/pages/overview/Overview.vue

@@ -59,12 +59,12 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, computed } from 'vue'
-import { config as gatewayConfig } from 'config'
+import { onBeforeMount, computed } from 'vue'
 import KonnectCTA from '@/components/KonnectCTA.vue'
 import { useAxios } from '@/composables/useAxios'
 import { useAdminApiUrl } from '@/composables/useAdminApiUrl'
 import { useI18n } from '@/composables/useI18n'
+import { useInfoStore } from '@/stores/info'
 import { formatVersion } from '@/utils'
 
 defineOptions({
@@ -74,22 +74,27 @@ defineOptions({
 const { axiosInstance } = useAxios()
 const adminApiUrl = useAdminApiUrl()
 const { t } = useI18n()
+const infoStore = useInfoStore()
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const config = ref<Record<string, any>>({})
-const version = computed(() => gatewayConfig.GATEWAY_VERSION ? `${formatVersion(gatewayConfig.GATEWAY_VERSION)}.x` : 'latest')
+const config = computed(() => ({
+  ...infoStore.infoConfig,
+  kongVersion: infoStore.kongVersion,
+  kongEdition: infoStore.kongEdition,
+  hostname: infoStore.info.hostname,
+}))
+const version = computed(() => config.value.kongVersion ? `${formatVersion(config.value.kongVersion)}.x` : 'latest')
 const info = computed(() => {
   return [
     {
       title: t('overview.info.gateway.title'),
       items: [
         {
           label: t('overview.info.gateway.edition'),
-          value: gatewayConfig.GATEWAY_EDITION,
+          value: config.value.kongEdition,
         },
         {
           label: t('overview.info.gateway.version'),
-          value: gatewayConfig.GATEWAY_VERSION,
+          value: config.value.kongVersion,
         },
       ],
     },

src/services/apiService.ts

@@ -0,0 +1,65 @@
+import axios, {
+  type AxiosInstance,
+  type AxiosRequestConfig,
+} from 'axios'
+import { config } from 'config'
+
+const adminApiUrl = config.ADMIN_API_URL
+
+class ApiService {
+  instance: AxiosInstance
+
+  constructor () {
+    this.instance = axios.create({
+      timeout: 30000,
+    })
+  }
+
+  getInfo () {
+    return this.instance.get(`${adminApiUrl}`)
+  }
+
+  // entity-specific methods
+  findAll (entity: string, params: Pick<AxiosRequestConfig, 'params'> = {}) {
+    return this.instance.get(`${adminApiUrl}/${entity}`, { params })
+  }
+
+  findRecord (entity: string, id: string) {
+    return this.instance.get(`${adminApiUrl}/${entity}/${id}`)
+  }
+
+  createRecord (entity: string, data: Record<string, unknown>) {
+    return this.instance.post(`${adminApiUrl}/${entity}`, data)
+  }
+
+  updateRecord (entity: string, id: string, data: Record<string, unknown>) {
+    return this.instance.patch(`${adminApiUrl}/${entity}/${id}`, data)
+  }
+
+  deleteRecord (entity: string, id: string) {
+    return this.instance.delete(`${adminApiUrl}/${entity}/${id}`)
+  }
+
+  // generic methods
+  get (url = '', config: AxiosRequestConfig = {}) {
+    return this.instance.get(`${adminApiUrl}/${url}`, config)
+  }
+
+  post (url = '', data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
+    return this.instance.post(`${adminApiUrl}/${url}`, data, config)
+  }
+
+  put (url = '', data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
+    return this.instance.put(`${adminApiUrl}/${url}`, data, config)
+  }
+
+  patch (url = '', data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
+    return this.instance.patch(`${adminApiUrl}/${url}`, data, config)
+  }
+
+  delete (url = '', config: AxiosRequestConfig = {}) {
+    return this.instance.delete(`${adminApiUrl}/${url}`, config)
+  }
+}
+
+export const apiService = new ApiService()

src/stores/info.ts

@@ -0,0 +1,63 @@
+import { apiService } from '@/services/apiService'
+import { defineStore } from 'pinia'
+import type { AnyObject, Info } from './types'
+
+interface State {
+  info: Info;
+}
+
+export const useInfoStore = defineStore('info', {
+  state: (): State => ({
+    info: {},
+  }),
+
+  getters: {
+    kongVersion: state => state.info.version,
+    kongEdition: state => state.info.edition,
+    infoConfig: (state) => {
+      const config = state.info.configuration || {}
+      if (!config?.node) {
+        config.node = {}
+        config.node.version = state.info.version
+        config.node.edition = state.info.edition
+        config.node.tagline = state.info.tagline
+        config.node.hostname = state.info.hostname
+        config.node.lua_version = state.info.lua_version
+      }
+
+      return config
+    },
+    isHybridMode: (state) => {
+      return (state.info.configuration?.role ?? 'traditional') !== 'traditional'
+    },
+    plugins: (state) => ({
+      enabledInCluster: state.info.plugins?.enabled_in_cluster ?? [],
+      availableOnServer: state.info.plugins?.available_on_server ?? [],
+    }),
+  },
+
+  actions: {
+    async getInfo (payload: AnyObject = { silent: true, force: false }) {
+      const { silent = true, force = false } = payload
+
+      // Return the info if it's already loaded unless force is true
+      if (this.info?.version && !force) {
+        return this.info
+      }
+
+      return apiService.getInfo()
+        .then((info) => {
+          this.info = info.data
+
+          return info.data
+        })
+        .catch(err => {
+          if (silent) {
+            return
+          }
+
+          throw err
+        })
+    },
+  },
+})

src/stores/types.ts

@@ -0,0 +1,33 @@
+import type { GatewayEdition } from '@/config'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyObject = Record<string, any>
+
+export interface Info {
+  configuration?: {
+    database?: string
+    node?: {
+      hostname?: string
+      lua_version?: string
+      tagline?: string
+      version?: string
+      edition?: GatewayEdition
+    }
+    role?: 'traditional' | 'control_plane' | 'data_plane'
+    admin_listen?: string[]
+    admin_gui_listeners?: Array<{ port: number, ssl?: boolean }>
+    proxy_listeners?: Array<{ port: number, ssl?: boolean }>
+    pg_user?: string
+    pg_host?: string
+    pg_port?: number
+    pg_ssl?: boolean
+  } & AnyObject
+  license?: AnyObject
+  version?: string,
+  edition?: GatewayEdition,
+  timers?: AnyObject
+  plugins?: AnyObject
+  hostname?: string
+  tagline?: string
+  lua_version?: string
+}