Skip to content

Commit

Permalink
chore: adaption for gateway preview image
Browse files Browse the repository at this point in the history
  • Loading branch information
@TT1228
TT1228 committed Jan 17, 2025
1 parent 808e026 commit 6b4ee34
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 82 deletions.
139 changes: 95 additions & 44 deletions packages/core/forms/src/components/FormRedis.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,25 @@
v-if="usePartial"
class="shared-redis-config"
>
<h3>{{ t("redis.shared_configuration.title") }}</h3>
<div class="shared-redis-config-title">
{{ t('redis.shared_configuration.title') }}
</div>
<KSelect
v-model="selectedRedisConfigItem"
data-testid="redis-config-select"
enable-filtering
:filter-function="() => true"
:items="availableRedisConfigs"
:loading="loadingRedisConfigs"
:placeholder="t('redis.shared_configuration.selector.placeholder')"
@change="redisConfigSelected"
@change="(item) => redisConfigSelected(item?.value)"
@query-change="debouncedRedisConfigsQuery"
>
<template #selected-item-template="{ item }">
<div class="selected-redis-config">
{{ (item as SelectItem).name }}
</div>
</template>
<template #item-template="{ item }">
<div class="plugin-form-redis-configuration-dropdown-item">
<span class="select-item-name">{{ item.name }}</span>
Expand Down Expand Up @@ -75,9 +83,11 @@
</div>
<div
v-else
class="shared-redis-config"
class="dedicated-redis-config"
>
<h3>{{ t('redis.dedicated_configuration.title') }}</h3>
<div class="dedicated-redis-config-title">
{{ t('redis.dedicated_configuration.title') }}
</div>
<component
:is="tag"
>
Expand Down Expand Up @@ -115,7 +125,6 @@ import {
import type { SelectItem } from '@kong/kongponents'
import { AddIcon } from '@kong/icons'
import { KUI_ICON_SIZE_20 } from '@kong/design-tokens'
import type { PropType } from 'vue'
import { computed, onBeforeMount, ref, inject, watch } from 'vue'
import formGroup from './FormGroup.vue'
import RedisConfigCard from './RedisConfigCard.vue'
Expand All @@ -126,25 +135,20 @@ import { createI18n } from '@kong-ui-public/i18n'
import english from '../locales/en.json'
import { FORMS_CONFIG } from '../const'
const formConfig : KonnectBaseFormConfig | KongManagerBaseFormConfig | KonnectBaseTableConfig | KongManagerBaseTableConfig | undefined = inject(FORMS_CONFIG)
const formConfig : KonnectBaseFormConfig | KongManagerBaseFormConfig | KonnectBaseTableConfig | KongManagerBaseTableConfig = inject(FORMS_CONFIG)!
const endpoints = {
konnect: '/v2/control-planes/{controlPlaneId}/core-entities/partials',
kongManager: '/{workspace}/partials',
konnect: {
getOne: '/v2/control-planes/{controlPlaneId}/core-entities/partials/{id}',
getAll: '/v2/control-planes/{controlPlaneId}/core-entities/partials',
},
kongManager: {
getOne: '/{workspace}/partials/{id}',
getAll: '/{workspace}/partials',
},
}
const props = defineProps({
config: {
type: Object as PropType<any>,
required: true,
validator: (): boolean => {
return true
},
},
usePartial: {
type: Boolean,
default: false,
},
tag: {
type: String,
default: 'fieldset',
Expand Down Expand Up @@ -190,11 +194,12 @@ const emits = defineEmits<{
const { t } = createI18n<typeof english>('en-us', english)
const usePartial = ref(props.usePartial)
const usePartial = ref(false)
const selectedRedisConfigItem = ref()
const selectedRedisConfig = ref(null)
const newRedisConfigurationModal = ref(false)
const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
const { axiosInstance } = useAxios(formConfig?.axiosRequestConfig)
const redisFieldsSaved = ref([] as { model: any; schema: any }[])
const partialsSaved = ref()
Expand All @@ -207,27 +212,36 @@ const fieldVisible = (field: any) => {
return field.visible
}
const redisConfigSelected = async (item: SelectItem | null) => {
// selector cleared
if (!item) return
/**
* Build the validate and submit URL
*/
const getOnePartialUrl = (partialId: string | number): string => {
let url = `${formConfig.apiBaseUrl}${endpoints[formConfig.app].getOne}`
if (formConfig.app === 'konnect') {
url = url.replace(/{controlPlaneId}/gi, formConfig?.controlPlaneId || '')
} else if (formConfig.app === 'kongManager') {
url = url.replace(/\/{workspace}/gi, formConfig?.workspace ? `/${formConfig.workspace}` : '')
}
// Always replace the id when editing
url = url.replace(/{id}/gi, String(partialId))
return url
}
const redisConfigSelected = async (val: string | number | undefined) => {
// when selector is cleared, do nothing
if (!val) return
emits('modelUpdated', [{ id: item.value, path: props.redisPath }], 'partials')
partialsSaved.value = [{ id: item.value, path: props.redisPath }]
emits('modelUpdated', [{ id: val, path: props.redisPath }], 'partials')
partialsSaved.value = [{ id: val, path: props.redisPath }]
//
try {
const configRes = await axiosInstance.get(`/partials/${item.value}`)
configRes.data = {
'database': 0,
'host': null,
'password': '1111',
'port': 637,
'server_name': null,
'ssl': false,
'ssl_verify': false,
'timeout': 2000,
'username': null,
const configRes = await axiosInstance.get(getOnePartialUrl(val))
if (configRes.data.config) {
const flattenedConfigRes = Object.assign(configRes.data, configRes.data.config)
delete flattenedConfigRes.config
selectedRedisConfig.value = flattenedConfigRes
}
selectedRedisConfig.value = configRes.data
} catch (error) {
console.error(error)
}
Expand All @@ -239,7 +253,7 @@ const {
// error: redisConfigsFetchError,
loadItems: loadConfigs,
results: redisConfigsResults,
} = useDebouncedFilter(formConfig!, endpoints[formConfig!.app], undefined, {
} = useDebouncedFilter(formConfig!, endpoints[formConfig!.app].getAll, undefined, {
fetchedItemsKey: 'data',
searchKeys: ['id', 'name'],
})
Expand Down Expand Up @@ -279,16 +293,24 @@ onBeforeMount(async () => {
return acc
}, {})
await loadConfigs()
if (props?.model?.partials?.[0]?.id) {
const selectedPartialId = props.model.partials[0].id
usePartial.value = true
selectedRedisConfigItem.value = selectedPartialId
redisConfigSelected(selectedPartialId)
}
})
</script>

<style lang="scss">
.redis-config-card {
margin-bottom: $kui-space-60;
.empty-redis-config {
color: $kui-color-text-neutral;
}
.new-redis-config-area {
align-items: center;
color: $kui-color-text-primary;
Expand All @@ -297,23 +319,52 @@ onBeforeMount(async () => {
gap: $kui-space-10;
pointer-events: auto;
}
:deep(.form-group:last-child) {
margin-bottom: 0;
}
.plugin-form-redis-configuration-dropdown-item {
display: flex;
padding: $kui-space-50 $kui-space-60;
align-items: center;
display: flex;
gap: $kui-space-60;
.select-item-name {
color: $kui-color-text-neutral-stronger;
line-height: $kui-line-height-40;
color: $kui-color-text-neutral;
}
}
.selected-redis-config {
font-weight: $kui-font-weight-bold;
line-height: $kui-line-height-40;
}
.plugin-form-selected-redis-config {
font-weight: $kui-font-weight-bold;
line-height: $kui-line-height-40;
}
}
.shared-redis-config {
margin-top: $kui-space-60;
.shared-redis-config-title {
font-weight: $kui-font-weight-semibold;
line-height: $kui-line-height-30;
margin-bottom: $kui-space-40;
}
}
.redis-config-title {
margin-block-start: 0;
.dedicated-redis-config {
margin-top: $kui-space-60;
.dedicated-redis-config-title {
font-size: $kui-font-size-40;
font-weight: $kui-font-weight-bold;
line-height: $kui-line-height-30;
margin-bottom: $kui-space-60;
}
}
.redis-config-radio-group {
Expand Down
49 changes: 41 additions & 8 deletions packages/core/forms/src/components/RedisConfigCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,35 @@ import type { PropType } from 'vue'
import type { Field } from '../composables/useRedisPartial'
import composables from '../composables'
import { useStringHelpers } from '@kong-ui-public/entities-shared'
import { computed } from 'vue'
import { createI18n } from '@kong-ui-public/i18n'
import english from '../locales/en.json'
const { t, formatUnixTimeStamp } = createI18n<typeof english>('en-us', english)
const standardEntityfields: Record<string,any> = {
id: {
order: 1,
},
name: {
order: 1,
},
type: {
label: t('redis.config_card.common_fields.type_label'),
hidden: true,
type: 'hidden',
},
created_at: {
label: t('redis.config_card.common_fields.created_at_label'),
formatter: formatUnixTimeStamp,
order: 2,
},
updated_at: {
label: t('redis.config_card.common_fields.updated_at_label'),
formatter: formatUnixTimeStamp,
order: 3,
},
}
const props = defineProps({
configFields: {
Expand Down Expand Up @@ -75,19 +104,22 @@ const fieldEncrptyed = (key: string, val: any) => {
const { convertKeyToTitle } = useStringHelpers()
const configDetails = Object.entries(props.configFields).map(([key, value]) => {
return {
key,
label: convertKeyToTitle(key),
value,
type: fieldEncrptyed(key, value),
const configDetails = computed(()=>{
return Object.entries(props.configFields).map(([key, value]) => {
return {
key,
label: standardEntityfields[key]?.label ?? convertKeyToTitle(key),
value: standardEntityfields[key]?.formatter ? standardEntityfields[key].formatter(value) : value,
type: standardEntityfields[key]?.type ?? fieldEncrptyed(key, value),
order: standardEntityfields[key]?.order ?? 100,
// attrs: value.attrs,
}
}
}).sort((a, b) => a.order - b.order).filter((item) => item.type !== 'hidden')
})
const nonStandardConfigDetails = composables.useRedisNonStandardFields(props.configFields, props.pluginRedisFields)
const allConfigDetails = configDetails.concat(nonStandardConfigDetails)
const allConfigDetails = computed(() => configDetails.value.concat(nonStandardConfigDetails as any[]))
</script>

Expand All @@ -112,6 +144,7 @@ const allConfigDetails = configDetails.concat(nonStandardConfigDetails)
line-height: $kui-line-height-40;
}
}
.config-card-row-value {
align-items: center;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/forms/src/composables/useRedisPartial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function useRedisPartial(formSchema: any, formModel?: any) {
return false
}
}
return /(?<=config-redis-).*/.test(field.model)
return /(?<=-redis-).*/.test(field.model)
}
formSchema.fields.forEach((field: Field) => {
if (isRedisField(field)) {
Expand Down
7 changes: 7 additions & 0 deletions packages/core/forms/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,13 @@
"label": "Use dedicated configuration",
"description": "Create a Redis configuration exclusively for this plugin, with settings that won’t impact other plugins.",
"title": "Connection Settings"
},
"config_card": {
"common_fields": {
"created_at_label": "Created at",
"updated_at_label": "Last Updated at",
"type_label": "Redis Type"
}
}
},
"vfg": {
Expand Down
28 changes: 26 additions & 2 deletions packages/entities/entities-plugins/src/components/PluginConfigCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,24 @@
:text="getPropValue('rowValue', slotProps).id"
/>
</template>
<template #partials="slotProps">
<span v-if="!getPropValue('rowValue', slotProps)">–</span>
<InternalLinkItem
v-else-if="showIdAsLink"
:item="{
key: getPropValue('rowValue', slotProps)?.[0]?.id,
value: getPropValue('rowValue', slotProps)?.[0]?.id + (getPropValue('rowValue', slotProps)?.[0]?.name ? '/' + getPropValue('rowValue', slotProps)?.[0]?.name : ''),
type: ConfigurationSchemaType.LinkInternal
}"
@navigation-click="() => $emit('navigation-click', getPropValue('rowValue', slotProps).id, 'partial')"
/>
<KCopy
v-else
:copy-tooltip="t('copy.tooltip', { label: getPropValue('row', slotProps).label })"
data-testid="partial-copy-uuid"
:text="getPropValue('rowValue', slotProps)?.[0].id"
/>
</template>
</EntityBaseConfigCard>
</div>
</template>
Expand Down Expand Up @@ -156,7 +174,7 @@ const emit = defineEmits<{
(e: 'fetch:error', error: AxiosError): void,
(e: 'error:fetch-schema', error: AxiosError): void,
(e: 'fetch:success', data: Record<string, any>): void,
(e: 'navigation-click', data: string, direction: 'route' | 'consumer' | 'consumer_group' | 'service'): void
(e: 'navigation-click', data: string, direction: 'route' | 'consumer' | 'consumer_group' | 'service' | 'partial'): void
}>()
// Component props - This structure must exist in ALL entity components, with the exclusion of unneeded action props (e.g. if you don't need `canDelete`, just exclude it)
Expand Down Expand Up @@ -204,6 +222,11 @@ const props = defineProps({
required: false,
default: '',
},
/** Whether to expand partial in config */
expandPartial: {
type: Boolean,
default: true,
},
})
const { i18n: { t } } = composables.useI18n()
Expand All @@ -214,7 +237,8 @@ const { getPropValue } = useHelpers()
const fetchUrl = computed<string>(
() => endpoints.item[props.config.app]?.[props.scopedEntityType ? 'forEntity' : 'all']
.replace(/{entityType}/gi, props.scopedEntityType)
.replace(/{entityId}/gi, props.scopedEntityId),
.replace(/{entityId}/gi, props.scopedEntityId)
.concat(props.expandPartial ? '?expand_partials=true' : ''),
)
// schema for the basic properties
Expand Down
Loading

0 comments on commit 6b4ee34

Please sign in to comment.