fix db roles forms to form-builder

charts/enginekubevaultcom-elasticsearchrole-editor/ui/create-ui.yaml

@@ -1,73 +1,62 @@
-steps:
-- form:
-    elements:
-    - fetch: getDatabases|core.k8s.appscode.com|v1alpha1|genericresources
-      if: isConsole
-      label:
-        text: labels.selectDb
-      refresh: true
-      required: true
-      schema:
-        $ref: discriminator#/properties/database
-      sortable: true
-      type: select
-    - computed: setRoleName
-      label:
-        text: metadata.name
-      required: true
-      schema:
-        $ref: schema#/properties/metadata/properties/name
+step:
+- elements:
+  - if:
+      name: isConsole
+      type: function
+    label: Select Database
+    loader: getDatabases|core.k8s.appscode.com|v1alpha1|genericresources
+    refresh: true
+    schema: temp/properties/database
+    sortable: true
+    type: select
+    validation:
+      type: required
+  - label: Name
+    schema: schema/properties/metadata/properties/name
+    type: input
+    validation:
+      type: required
+    watcher:
+      func: setRoleName
+      paths:
+      - schema/properties/spec/properties/secretEngineRef/properties/name
+  - disable: true
+    if:
+      name: isDbSelected
+      type: function
+    init:
+      type: func
+      value: getDbNamespace
+    label: Namespace
+    schema: schema/properties/metadata/properties/namespace
+    type: input
+  - if:
+      name: isDbSelected
+      type: function
+    label: Select SecretEngine
+    loader: getEngines|engine.kubevault.com|v1alpha1|secretengines
+    refresh: true
+    schema: schema/properties/spec/properties/secretEngineRef/properties/name
+    type: select
+    validation:
+      type: required
+  - label: Default TTL
+    schema: schema/properties/spec/properties/defaultTTL
+    type: input
+  - label: Max TTL
+    schema: schema/properties/spec/properties/maxTTL
+    type: input
+  - element:
+      label: Statement
       type: input
-    - computed: getDbNamespace
-      disabled: true
-      if: isDbSelected
-      label:
-        text: metadata.namespace
-      schema:
-        $ref: schema#/properties/metadata/properties/namespace
+    label: Creation Statement
+    schema: schema/properties/spec/properties/creationStatements
+    type: array-item-form
+  - element:
+      label: Statement
       type: input
-    - fetch: getEngines|engine.kubevault.com|v1alpha1|secretengines
-      if: isDbSelected
-      label:
-        text: labels.selectEngine
-      refresh: true
-      required: true
-      schema:
-        $ref: schema#/properties/spec/properties/secretEngineRef/properties/name
-      type: select
-    - label:
-        text: spec.defaultTTL
-      schema:
-        $ref: schema#/properties/spec/properties/defaultTTL
-      type: input
-    - label:
-        text: spec.maxTTL
-      schema:
-        $ref: schema#/properties/spec/properties/maxTTL
-      type: input
-    - element:
-        label:
-          text: labels.statement
-        schema:
-          $ref: schema#/properties/spec/properties/creationStatements/items
-        type: input
-      label:
-        text: spec.creation
-      schema:
-        $ref: schema#/properties/spec/properties/creationStatements
-      type: list-input-form
-    - element:
-        label:
-          text: labels.statement
-        schema:
-          $ref: schema#/properties/spec/properties/revocationStatements/items
-        type: input
-      label:
-        text: spec.revocation
-      schema:
-        $ref: schema#/properties/spec/properties/revocationStatements
-      type: list-input-form
-    type: single-step-form
-  id: basic
-  title: Create ElasicSearchRole
+    label: Revocation Statement
+    schema: schema/properties/spec/properties/revocationStatements
+    type: array-item-form
+  type: single-step-form
 type: multi-step-form

charts/enginekubevaultcom-elasticsearchrole-editor/ui/functions.js

@@ -1,113 +1,123 @@
-function isConsole({ storeGet }) {
-  const owner = storeGet('/route/params/user')
-  const path = storeGet('/route/path')
-  const prefix = `/${owner}/kubernetes`
-  if (path.startsWith(prefix)) return true
-  return false
-}
+const { ref, computed, axios, watch, useOperator, store } = window.vueHelpers || {}
 
-async function getDatabases({ axios, storeGet }, group, version, resource) {
-  const owner = storeGet('/route/params/user') || ''
-  const cluster = storeGet('/route/params/cluster') || ''
-  if (isConsole({ storeGet })) {
-    try {
-      const resp = await axios.get(
-        `/clusters/${owner}/${cluster}/proxy/${group}/${version}/${resource}`,
-        {
-          params: {
-            convertToTable: true,
-            labelSelector: 'k8s.io/group=kubedb.com',
-          },
-        },
-      )
+export const useFunc = (model) => {
+  const { getValue, setDiscriminatorValue, commit, storeGet, discriminator } = useOperator(
+    model,
+    store.state,
+  )
 
-      const resources = (resp && resp.data && resp.data.rows) || []
+  function isConsole() {
+    const owner = storeGet('/route/params/user')
+    const path = storeGet('/route/path')
+    const prefix = `/${owner}/kubernetes`
+    if (path.startsWith(prefix)) return true
+    return false
+  }
 
-      resources.map((item) => {
-        const name = (item.cells && item.cells[0].data) || ''
-        const namespace = (item.cells?.length > 0 && item.cells[1].data) || ''
-        const resource = (item.cells?.length > 1 && item.cells[2].data) || ''
-        item.text = name
-        item.value = {
-          name: name,
-          namespace: namespace,
-          resource: resource,
-        }
-        return true
-      })
-      const filteredResources = resources.filter(
-        (item) => item.value.resource.toLowerCase() === 'elasticsearch',
-      )
-      return filteredResources
-    } catch (e) {
-      console.log(e)
-      return []
-    }
-  } else return []
-}
+  async function getDatabases(group, version, resource) {
+    const owner = storeGet('/route/params/user') || ''
+    const cluster = storeGet('/route/params/cluster') || ''
+    if (isConsole()) {
+      try {
+        const resp = await axios.get(
+          `/clusters/${owner}/${cluster}/proxy/${group}/${version}/${resource}`,
+          {
+            params: {
+              convertToTable: true,
+              labelSelector: 'k8s.io/group=kubedb.com',
+            },
+          },
+        )
 
-function isDbSelected({ getValue, storeGet, discriminator, watchDependency }) {
-  if (!isConsole({ storeGet })) return true
-  watchDependency('discriminator#/database')
-  const val = getValue(discriminator, '/database') || {}
-  return val && val.name ? true : false
-}
+        const resources = (resp && resp.data && resp.data.rows) || []
 
-function setRoleName({ watchDependency, getValue, model }) {
-  watchDependency('model#/spec/secretEngineRef/name')
-  const engineName = getValue(model, '/spec/secretEngineRef/name') || ''
-  const timestamp = `${Math.floor(Date.now() / 1000)}`
-  return engineName ? `${engineName}-role-${timestamp}` : engineName
-}
+        resources.map((item) => {
+          const name = (item.cells && item.cells[0].data) || ''
+          const namespace = (item.cells?.length > 0 && item.cells[1].data) || ''
+          const resource = (item.cells?.length > 1 && item.cells[2].data) || ''
+          item.text = name
+          item.value = {
+            name: name,
+            namespace: namespace,
+            resource: resource,
+          }
+          return true
+        })
+        const filteredResources = resources.filter(
+          (item) => item.value.resource.toLowerCase() === 'elasticsearch',
+        )
+        return filteredResources
+      } catch (e) {
+        console.log(e)
+        return []
+      }
+    } else return []
+  }
 
-function getDbNamespace({ getValue, storeGet, discriminator, watchDependency }) {
-  if (isConsole({ storeGet })) {
-    watchDependency('discriminator#/database')
-    const data = getValue(discriminator, '/database') || {}
-    return (data && data.namespace) || ''
-  } else {
-    const namespace = storeGet('/route/query/namespace') || ''
-    return namespace
+  function isDbSelected() {
+    if (!isConsole()) return true
+    // watchDependency('discriminator#/database')
+    const val = getValue(discriminator, '/database') || {}
+    return val && val.name ? true : false
   }
-}
 
-async function getEngines({ axios, storeGet, getValue, discriminator }, group, version, resource) {
-  const owner = storeGet('/route/params/user') || ''
-  const cluster = storeGet('/route/params/cluster') || ''
-  const dbValue = getValue(discriminator, '/database') || {}
-  const dbName = storeGet('/route/params/name') || dbValue.name || ''
-  const dbNamespace = storeGet('/route/query/namespace') || dbValue.namespace || ''
-  if (dbName) {
-    try {
-      const resp = await axios.get(
-        `/clusters/${owner}/${cluster}/proxy/${group}/${version}/${resource}`,
-      )
+  function setRoleName() {
+    // watchDependency('model#/spec/secretEngineRef/name')
+    const engineName = getValue(model, '/spec/secretEngineRef/name') || ''
+    const timestamp = `${Math.floor(Date.now() / 1000)}`
+
+    return engineName ? `${engineName}-role-${timestamp}` : engineName
+  }
 
-      const resources = (resp && resp.data && resp.data.items) || []
-      const filteredResources = resources.filter(
-        (item) =>
-          item.spec?.elasticsearch?.databaseRef?.name === dbName &&
-          item.spec?.elasticsearch?.databaseRef?.namespace === dbNamespace,
-      )
-      filteredResources.map((item) => {
-        const name = (item.metadata && item.metadata.name) || ''
-        item.text = name
-        item.value = name
-        return true
-      })
-      return filteredResources
-    } catch (e) {
-      console.log(e)
-      return []
+  function getDbNamespace() {
+    if (isConsole()) {
+      // watchDependency('discriminator#/database')
+      const data = getValue(discriminator, '/database') || {}
+      return (data && data.namespace) || ''
+    } else {
+      const namespace = storeGet('/route/query/namespace') || ''
+      return namespace
     }
-  } else return []
-}
+  }
 
-return {
-  isConsole,
-  getDatabases,
-  isDbSelected,
-  setRoleName,
-  getDbNamespace,
-  getEngines,
+  async function getEngines(group, version, resource) {
+    const owner = storeGet('/route/params/user') || ''
+    const cluster = storeGet('/route/params/cluster') || ''
+    const dbValue = getValue(discriminator, '/database') || {}
+    const dbName = storeGet('/route/params/name') || dbValue.name || ''
+    const dbNamespace = storeGet('/route/query/namespace') || dbValue.namespace || ''
+    if (dbName) {
+      try {
+        const resp = await axios.get(
+          `/clusters/${owner}/${cluster}/proxy/${group}/${version}/${resource}`,
+        )
+
+        const resources = (resp && resp.data && resp.data.items) || []
+        const filteredResources = resources.filter(
+          (item) =>
+            item.spec?.elasticsearch?.databaseRef?.name === dbName &&
+            item.spec?.elasticsearch?.databaseRef?.namespace === dbNamespace,
+        )
+        filteredResources.map((item) => {
+          const name = (item.metadata && item.metadata.name) || ''
+          item.text = name
+          item.value = name
+          return true
+        })
+        return filteredResources
+      } catch (e) {
+        console.log(e)
+        return []
+      }
+    } else return []
+  }
+
+  return {
+    isConsole,
+    getDatabases,
+    isDbSelected,
+    setRoleName,
+    getDbNamespace,
+    getEngines,
+  }
 }