This is an automated email from the ASF dual-hosted git repository.
czy006 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/amoro.git
The following commit(s) were added to refs/heads/master by this push:
new 22b7e35a9 [Improvement]: Add Paimon Table Consumer Infos In Ams
Dashboard (#3081)
22b7e35a9 is described below
commit 22b7e35a9aba7d3e83047c114ab92415d1945ab4
Author: Liammcl <[email protected]>
AuthorDate: Mon Aug 12 14:07:43 2024 +0800
[Improvement]: Add Paimon Table Consumer Infos In Ams Dashboard (#3081)
* 合并缓存
* [Improvement]: Add Paimon Table Consumer Infos In Ams Dashboard
* [Improvement]: Add Paimon Table Consumer Infos In Ams Dashboard
* [amoro-#3054]: Add Paimon Table Consumer Infos In Ams Dashboard
* fix proxy
* pnpm-lock rebase
* fix someting wrong
* fixed
* fied
* fixed
* fixed
* fix:Code formatting issue
* fix bugs
* fixed bug
* fix: change typescript consumers to consumer
---------
Co-authored-by: ConradJam <[email protected]>
---
amoro-ams/amoro-ams-dashboard/src/language/en.ts | 3 +-
amoro-ams/amoro-ams-dashboard/src/language/zh.ts | 3 +-
.../src/services/table.service.ts | 4 ++
.../amoro-ams-dashboard/src/types/common.type.ts | 4 ++
.../src/views/tables/components/Selector.vue | 48 +++++++++++++++++-----
.../src/views/tables/components/Snapshots.vue | 17 +++++++-
6 files changed, 66 insertions(+), 13 deletions(-)
diff --git a/amoro-ams/amoro-ams-dashboard/src/language/en.ts
b/amoro-ams/amoro-ams-dashboard/src/language/en.ts
index 60c6ed7ee..60d494f0d 100644
--- a/amoro-ams/amoro-ams-dashboard/src/language/en.ts
+++ b/amoro-ams/amoro-ams-dashboard/src/language/en.ts
@@ -198,8 +198,9 @@ export default {
totalDeleteFiles: 'delete-files',
branches: 'branches',
tags: 'tags',
+ consumers: 'consumers',
nothingToShow: 'Nothing to show',
- filterBranchesOrTags: 'Filter branches/tags',
+ filterBranchesOrTagsOrConsumers: 'Filter branches/tags/consumers',
findATag: 'Find a tag',
fileSearchPlaceholder: 'Filter partitions',
noResourceGroupsTitle: 'No resource groups available.',
diff --git a/amoro-ams/amoro-ams-dashboard/src/language/zh.ts
b/amoro-ams/amoro-ams-dashboard/src/language/zh.ts
index 23cdeee18..6bafedd9e 100644
--- a/amoro-ams/amoro-ams-dashboard/src/language/zh.ts
+++ b/amoro-ams/amoro-ams-dashboard/src/language/zh.ts
@@ -198,8 +198,9 @@ export default {
totalDeleteFiles: '删除文件数量',
branches: '分支',
tags: '标签',
+ consumers: '用户',
nothingToShow: '无内容可展示',
- filterBranchesOrTags: '过滤分支/标签',
+ filterBranchesOrTagsOrConsumers: '过滤分支/标签/消费者',
findATag: '查找标签',
fileSearchPlaceholder: '过滤分区',
noResourceGroupsTitle: '没有任何优化组',
diff --git a/amoro-ams/amoro-ams-dashboard/src/services/table.service.ts
b/amoro-ams/amoro-ams-dashboard/src/services/table.service.ts
index 34ad3e588..18d7f5b79 100644
--- a/amoro-ams/amoro-ams-dashboard/src/services/table.service.ts
+++ b/amoro-ams/amoro-ams-dashboard/src/services/table.service.ts
@@ -209,3 +209,7 @@ export function getTags(params: { catalog: string, db:
string, table: string })
const { catalog, db, table } = params
return
request.get(`/ams/v1/tables/catalogs/${catalog}/dbs/${db}/tables/${table}/tags`)
}
+export function getConsumers(params: { catalog: string, db: string, table:
string }) {
+ const { catalog, db, table } = params
+ return
request.get(`/ams/v1/tables/catalogs/${catalog}/dbs/${db}/tables/${table}/consumers`)
+}
diff --git a/amoro-ams/amoro-ams-dashboard/src/types/common.type.ts
b/amoro-ams/amoro-ams-dashboard/src/types/common.type.ts
index c2e0ba208..ec6d062ce 100644
--- a/amoro-ams/amoro-ams-dashboard/src/types/common.type.ts
+++ b/amoro-ams/amoro-ams-dashboard/src/types/common.type.ts
@@ -360,12 +360,14 @@ export type ILineChartOriginalData = Record<string,
Record<string, number>>
export enum branchTypeMap {
BRANCH = 'branch',
TAG = 'tag',
+ CONSUMER = 'consumer',
}
export interface IBranchItem {
value: string
label: string
type: branchTypeMap
+ amoroCurrentSnapshotsOfTable?: SnapshotItem
}
export interface IServiceBranchItem {
@@ -375,6 +377,8 @@ export interface IServiceBranchItem {
maxSnapshotAgeMs: number | null
maxRefAgeMs: number | null
type: branchTypeMap
+ consumerId: string
+ amoroCurrentSnapshotsOfTable: SnapshotItem
}
export enum operationMap {
diff --git
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
index bc9162d80..f7985d87a 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Selector.vue
@@ -20,21 +20,26 @@ limitations under the License.
import { computed, onMounted, reactive, ref } from 'vue'
import type { IBranchItem, IServiceBranchItem } from '@/types/common.type'
import { branchTypeMap, operationMap } from '@/types/common.type'
-import { getBranches, getTags } from '@/services/table.service'
+import { getBranches, getTags, getConsumers } from '@/services/table.service'
const props = defineProps({ catalog: String, db: String, table: String,
disabled: Boolean })
-const emit = defineEmits(['refChange'])
+const emit = defineEmits(['refChange', 'consumerChange'])
const disabled = computed(() => props.disabled)
const selectedObj = ref<IBranchItem>({ value: '', type: branchTypeMap.BRANCH,
label: '' })
const branchSearchKey = ref<string>('')
const tagSearchKey = ref<string>('')
+const consumerSearchKey=ref<string>('')
const tabActiveKey = ref<string>(branchTypeMap.BRANCH)
const branchList = ref<IBranchItem[]>([])
const tagList = ref<IBranchItem[]>([])
+const consumerList = ref<IBranchItem[]>([])
const actualBranchList = computed(() => branchList.value.filter(item =>
!branchSearchKey.value || item.label.includes(branchSearchKey.value)))
const actualTagList = computed(() => tagList.value.filter(item =>
!tagSearchKey.value || item.label.includes(tagSearchKey.value)))
+const actualConsumerList = computed(() =>consumerList.value.filter((item) =>
!consumerSearchKey.value ||
+item.label.includes(consumerSearchKey.value)))
+
const operation = ref<string>(operationMap.ALL)
const operationList = reactive([operationMap.ALL, operationMap.OPTIMIZING,
operationMap.NONOPTIMIZING])
@@ -51,7 +56,12 @@ function selectObject(obj: IBranchItem) {
operation.value = operationMap.ALL
emit('refChange', { ref: obj.value, operation: operationMap.ALL })
}
-
+function selectConsumer(obj: IBranchItem) {
+ if (obj.value === selectedObj.value.value) return
+ selectedObj.value = obj
+ const amoroCurrentSnapshotsItem = { ...obj.amoroCurrentSnapshotsOfTable }
+ emit('consumerChange', {ref: obj.value, amoroCurrentSnapshotsItem,
operation: operationMap.ALL})
+}
function onChange(val: string) {
emit('refChange', { ref: selectedObj.value.value, operation: val })
}
@@ -66,9 +76,11 @@ async function getTagList() {
const result = await getTags(props as any)
tagList.value = (result.list || []).map((l: IServiceBranchItem) => ({ value:
l.name, label: l.name, type: branchTypeMap.TAG }))
}
-
+async function getConsumerList() {
+ const result = await getConsumers(props as any)
+ consumerList.value = (result.list || []).map((l: IServiceBranchItem) => ({
value: l.consumerId, label: l.consumerId, type: branchTypeMap.CONSUMER,
amoroCurrentSnapshotsOfTable: l.amoroCurrentSnapshotsOfTable}))}
async function init() {
- await Promise.all([getBranchList(), getTagList()])
+ await Promise.all([getBranchList(), getTagList(), getConsumerList()])
}
onMounted(() => {
@@ -88,8 +100,11 @@ onMounted(() => {
<template #overlay>
<div>
<div class="branch-selector-search">
- <a-input v-show="tabActiveKey === branchTypeMap.BRANCH"
v-model:value="branchSearchKey" :placeholder="$t('filterBranchesOrTags')"
@click="onClickInput" />
- <a-input v-show="tabActiveKey === branchTypeMap.TAG"
v-model:value="tagSearchKey" :placeholder="$t('filterBranchesOrTags')"
@click="onClickInput" />
+ <a-input v-show="tabActiveKey === branchTypeMap.BRANCH"
v-model:value="branchSearchKey"
:placeholder="$t('filterBranchesOrTagsOrConsumers')" @click="onClickInput" />
+ <a-input v-show="tabActiveKey === branchTypeMap.TAG"
v-model:value="tagSearchKey"
:placeholder="$t('filterBranchesOrTagsOrConsumers')" @click="onClickInput" />
+ <a-input
+ v-show="tabActiveKey === branchTypeMap.CONSUMER"
v-model:value="consumerSearchKey"
:placeholder="$t('filterBranchesOrTagsOrConsumers')"
+ @click="onClickInput"/>
</div>
<a-tabs v-model:activeKey="tabActiveKey" type="card">
<a-tab-pane :key="branchTypeMap.BRANCH" :tab="$t('branches')">
@@ -114,6 +129,17 @@ onMounted(() => {
</template>
<span v-else class="empty-tips">{{ $t('nothingToShow') }}</span>
</a-tab-pane>
+ <a-tab-pane v-if="consumerList.length !== 0"
:key="branchTypeMap.CONSUMER" :tab="$t('consumers')">
+ <template v-if="!!actualConsumerList.length">
+ <div v-for="(item, key) in actualConsumerList" :key="key"
class="branch-selector-item" @click="selectConsumer(item)">
+ <div class="item-icon">
+ <check-outlined v-if="item.value === selectedObj.value" />
+ </div>
+ <span class="item-label">{{ item.label }}</span>
+ </div>
+ </template>
+ <span v-else class="empty-tips">{{ $t('nothingToShow') }}</span>
+ </a-tab-pane>
</a-tabs>
</div>
</template>
@@ -130,11 +156,11 @@ onMounted(() => {
</div>
<div class="g-ml-24">
{{ $t('operation') }}:
- <a-select
+ <a-select
v-model:value="operation"
class="g-ml-8"
style="width: 160px"
- :disabled="disabled"
+ :disabled="disabled || tabActiveKey === branchTypeMap.CONSUMER"
@change="onChange"
>
<a-select-option v-for="item in operationList" :key="item"
:value="item">
@@ -155,6 +181,7 @@ onMounted(() => {
display: flex;
align-items: center;
color: #102048;
+
.branch-btn-label {
line-height: 32px;
max-width: 125px;
@@ -172,7 +199,7 @@ onMounted(() => {
padding: 8px 0 16px 0;
font-size: 12px;
border-radius: 6px;
- box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0,
0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0,
0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
.branch-selector-search {
margin: 0 12px 8px 12px;
@@ -194,6 +221,7 @@ onMounted(() => {
overflow: hidden;
text-align: left;
cursor: pointer;
+
&:hover {
background-color: rgba(0, 0, 0, 0.04);
}
diff --git
a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
index 978048d27..219092439 100644
--- a/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
+++ b/amoro-ams/amoro-ams-dashboard/src/views/tables/components/Snapshots.vue
@@ -71,6 +71,21 @@ function onRefChange(params: { ref: string, operation:
string }) {
operation.value = params.operation
getTableInfo()
}
+function onConsumerChange(params: {
+ ref: string
+ operation: string
+ amoroCurrentSnapshotsItem: SnapshotItem
+}) {
+ tblRef.value = params.ref
+ operation.value = params.operation
+ dataSource.length = 0
+ params.amoroCurrentSnapshotsItem.commitTime =
params.amoroCurrentSnapshotsItem
+ .commitTime
+ ? dateFormat(params.amoroCurrentSnapshotsItem.commitTime)
+ : '-'
+ dataSource.push(params.amoroCurrentSnapshotsItem)
+ pagination.total = 1
+}
async function getTableInfo() {
try {
@@ -185,7 +200,7 @@ onMounted(() => {
<Chart :loading="loading" :options="fileChartOption" />
</a-col>
</a-row>
- <Selector :catalog="sourceData.catalog" :db="sourceData.db"
:table="sourceData.table" :disabled="loading" @ref-change="onRefChange" />
+ <Selector :catalog="sourceData.catalog" :db="sourceData.db"
:table="sourceData.table" :disabled="loading"
@consumer-change="onConsumerChange" @ref-change="onRefChange" />
<a-table
row-key="snapshotId"
:columns="columns"
