You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@paimon.apache.org by ni...@apache.org on 2024/07/12 07:12:07 UTC
(paimon-webui) branch main updated: [Feature] Frontend supports query limit (#510)
This is an automated email from the ASF dual-hosted git repository.
nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new 310145f4 [Feature] Frontend supports query limit (#510)
310145f4 is described below
commit 310145f4028aed0a63de0ad0941eb88821d1ab87
Author: yangyang zhong <35...@users.noreply.github.com>
AuthorDate: Fri Jul 12 15:12:03 2024 +0800
[Feature] Frontend supports query limit (#510)
---
paimon-web-ui/src/api/models/job/types/job.ts | 1 +
paimon-web-ui/src/locales/en/modules/playground.ts | 4 +
paimon-web-ui/src/locales/zh/modules/playground.ts | 4 +
.../query/components/debugger/index.module.scss | 14 +-
.../components/query/components/debugger/index.tsx | 146 +++++++++++----------
.../query/components/tabs/index.module.scss | 1 -
6 files changed, 85 insertions(+), 85 deletions(-)
diff --git a/paimon-web-ui/src/api/models/job/types/job.ts b/paimon-web-ui/src/api/models/job/types/job.ts
index 1a1ec2e0..35d01680 100644
--- a/paimon-web-ui/src/api/models/job/types/job.ts
+++ b/paimon-web-ui/src/api/models/job/types/job.ts
@@ -43,6 +43,7 @@ export interface JobSubmitDTO {
}
statements: string
streaming: boolean
+ maxRows: number
}
export interface JobResultData {
diff --git a/paimon-web-ui/src/locales/en/modules/playground.ts b/paimon-web-ui/src/locales/en/modules/playground.ts
index 74810025..d9d1a298 100644
--- a/paimon-web-ui/src/locales/en/modules/playground.ts
+++ b/paimon-web-ui/src/locales/en/modules/playground.ts
@@ -58,4 +58,8 @@ export default {
job_stopping_successfully: 'Job Stopped Successfully',
job_stopping_failed: 'Job Stopped Failed',
data_copied_successfully: 'Data Copied to Clipboard',
+ execution_mode: 'Mode',
+ execution_engine: 'Engine',
+ deployment_cluster: 'Cluster',
+ limit_records: 'Limit',
}
diff --git a/paimon-web-ui/src/locales/zh/modules/playground.ts b/paimon-web-ui/src/locales/zh/modules/playground.ts
index 39ce0510..c88a2233 100644
--- a/paimon-web-ui/src/locales/zh/modules/playground.ts
+++ b/paimon-web-ui/src/locales/zh/modules/playground.ts
@@ -58,4 +58,8 @@ export default {
job_stopping_successfully: '停止任务成功',
job_stopping_failed: '停止任务失败',
data_copied_successfully: '数据已复制到剪贴板',
+ execution_mode: '运行模式',
+ execution_engine: '执行引擎',
+ deployment_cluster: '部署集群',
+ limit_records: '限制行数',
}
diff --git a/paimon-web-ui/src/views/playground/components/query/components/debugger/index.module.scss b/paimon-web-ui/src/views/playground/components/query/components/debugger/index.module.scss
index 0ab88421..c13b8220 100644
--- a/paimon-web-ui/src/views/playground/components/query/components/debugger/index.module.scss
+++ b/paimon-web-ui/src/views/playground/components/query/components/debugger/index.module.scss
@@ -17,18 +17,6 @@ under the License. */
.container {
- display: flex;
- align-items: center;
width: 100%;
- height: 100%;
-
- .run {
- display: flex;
- }
-
- .operations {
- display: flex;
- flex: 1;
- justify-content: flex-end;
- }
+ height: 60px;
}
diff --git a/paimon-web-ui/src/views/playground/components/query/components/debugger/index.tsx b/paimon-web-ui/src/views/playground/components/query/components/debugger/index.tsx
index 3a5e5794..f3b62561 100644
--- a/paimon-web-ui/src/views/playground/components/query/components/debugger/index.tsx
+++ b/paimon-web-ui/src/views/playground/components/query/components/debugger/index.tsx
@@ -15,7 +15,7 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import { ChevronDown, Pause, Play, Reload, Save } from '@vicons/ionicons5'
+import { Pause, Play, Reload, Save } from '@vicons/ionicons5'
import { FormatAlignLeftOutlined } from '@vicons/material'
import { NInput, useMessage } from 'naive-ui'
@@ -60,22 +60,25 @@ export default defineComponent({
})
const debuggerVariables = reactive<{
- operatingConditionOptions: { label: string, key: string }[]
+ operatingConditionOptions: { label: string, value: number }[]
conditionValue: string
- bigDataOptions: { label: string, value: string }[]
+ bigDataOptions: { label: string, value: string, disabled?: boolean }[]
conditionValue2: string
clusterOptions: { label: string, value: string }[]
conditionValue3: string
+ maxRows: number
executionModeOptions: { label: string, value: string }[]
}>({
operatingConditionOptions: [
- { label: 'Limit 100 items', key: '100' },
- { label: 'Limit 1000 items', key: '1000' },
+ { label: '500', value: 500 },
+ { label: '1000', value: 1000 },
+ { label: '2000', value: 2000 },
+ { label: '5000', value: 5000 },
+ { label: 'ALL', value: 2147483647 },
],
conditionValue: 'Flink',
bigDataOptions: [
{ label: 'Flink', value: 'Flink' },
- { label: 'Spark', value: 'Spark' },
],
conditionValue2: '',
clusterOptions: [],
@@ -84,6 +87,7 @@ export default defineComponent({
{ label: 'Streaming', value: 'Streaming' },
{ label: 'Batch', value: 'Batch' },
],
+ maxRows: 500,
})
const handleSelect = () => {
@@ -230,6 +234,7 @@ export default defineComponent({
clusterId: debuggerVariables.conditionValue2,
statements: currentSQL,
streaming: debuggerVariables.conditionValue3 === 'Streaming',
+ maxRows: debuggerVariables.maxRows,
}
try {
@@ -269,8 +274,8 @@ export default defineComponent({
},
render() {
return (
- <div class={styles.container}>
- <n-space>
+ <n-space justify="space-between" class={styles.container} align="center">
+ <n-space align="center">
<n-button
type="primary"
loading={this.isSubmitting}
@@ -281,76 +286,75 @@ export default defineComponent({
return (
<div class={styles.run}>
{this.jobStatus === 'RUNNING' ? this.t('playground.stop') : this.t('playground.run')}
- <n-divider vertical />
- <n-dropdown trigger="hover" show-arrow options={this.operatingConditionOptions} on-select={this.handleSelect}>
- <n-icon component={ChevronDown} />
- </n-dropdown>
</div>
)
},
}}
>
</n-button>
- <n-select style="width:160px;" v-model:value={this.conditionValue} options={this.bigDataOptions} />
- <n-select style="width:160px;" v-model:value={this.conditionValue2} options={this.clusterOptions} />
- <n-select style="width:160px;" v-model:value={this.conditionValue3} options={this.executionModeOptions} />
+ <span>{this.t('playground.execution_mode')}</span>
+ <n-select style="width:110px;" v-model:value={this.conditionValue3} options={this.executionModeOptions} />
+ <span>{this.t('playground.execution_engine')}</span>
+ <n-select style="width:110px;" v-model:value={this.conditionValue} options={this.bigDataOptions} />
+ <span>{this.t('playground.deployment_cluster')}</span>
+ <n-select style="width:150px;" v-model:value={this.conditionValue2} options={this.clusterOptions} />
+ <span>{this.t('playground.limit_records')}</span>
+ <n-select style="width:100px;" v-model:value={this.maxRows} options={this.operatingConditionOptions} />
</n-space>
- <div class={styles.operations}>
- <n-space>
- <n-popover
- trigger="hover"
- placement="bottom"
- v-slots={{
- trigger: () => (
- <n-button
- onClick={this.handleFormat}
- v-slots={{
- icon: () => <n-icon component={FormatAlignLeftOutlined}></n-icon>,
- }}
- >
- </n-button>
- ),
- }}
- >
- <span>{this.t('playground.format')}</span>
- </n-popover>
- <n-popover
- trigger="hover"
- placement="bottom"
- v-slots={{
- trigger: () => (
- <n-button
- onClick={this.handleReload}
- v-slots={{
- icon: () => <n-icon component={Reload}></n-icon>,
- }}
- >
- </n-button>
- ),
- }}
- >
- <span>{this.t('playground.reload')}</span>
- </n-popover>
- <n-popover
- trigger="hover"
- placement="bottom"
- v-slots={{
- trigger: () => (
- <n-button
- onClick={this.handleSave}
- v-slots={{
- icon: () => <n-icon component={Save}></n-icon>,
- }}
- >
- </n-button>
- ),
- }}
- >
- <span>{this.t('playground.save')}</span>
- </n-popover>
- </n-space>
- </div>
- </div>
+ <n-space align="center">
+ <n-popover
+ trigger="hover"
+ placement="bottom"
+ v-slots={{
+ trigger: () => (
+ <n-button
+ onClick={this.handleFormat}
+ v-slots={{
+ icon: () => <n-icon component={FormatAlignLeftOutlined}></n-icon>,
+ }}
+ >
+ </n-button>
+ ),
+ }}
+ >
+ <span>{this.t('playground.format')}</span>
+ </n-popover>
+ <n-popover
+ trigger="hover"
+ placement="bottom"
+ v-slots={{
+ trigger: () => (
+ <n-button
+ onClick={this.handleReload}
+ v-slots={{
+ icon: () => <n-icon component={Reload}></n-icon>,
+ }}
+ >
+ </n-button>
+ ),
+ }}
+ >
+ <span>{this.t('playground.reload')}</span>
+ </n-popover>
+ <n-popover
+ trigger="hover"
+ placement="bottom"
+ v-slots={{
+ trigger: () => (
+ <n-button
+ onClick={this.handleSave}
+ v-slots={{
+ icon: () => <n-icon component={Save}></n-icon>,
+ }}
+ >
+ </n-button>
+ ),
+ }}
+ >
+ <span>{this.t('playground.save')}</span>
+ </n-popover>
+ </n-space>
+ </n-space>
)
},
})
diff --git a/paimon-web-ui/src/views/playground/components/query/components/tabs/index.module.scss b/paimon-web-ui/src/views/playground/components/query/components/tabs/index.module.scss
index f05e5766..f09c3b84 100644
--- a/paimon-web-ui/src/views/playground/components/query/components/tabs/index.module.scss
+++ b/paimon-web-ui/src/views/playground/components/query/components/tabs/index.module.scss
@@ -37,7 +37,6 @@ under the License. */
}
.debugger {
- display: flex;
height: 60px;
}