This is an automated email from the ASF dual-hosted git repository. nicholasjiang pushed a commit to branch branch-0.1 in repository https://gitbox.apache.org/repos/asf/paimon-webui.git
commit eae5f5d82ac33748153e1a94bc73caedd2afc988 Author: yangyang zhong <[email protected]> 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; }
