zhangmo8 commented on code in PR #266:
URL: https://github.com/apache/paimon-webui/pull/266#discussion_r1619796078
##########
paimon-web-ui/src/views/playground/components/query/components/console/components/controls/index.tsx:
##########
@@ -16,29 +16,227 @@ specific language governing permissions and limitations
under the License. */
import { Copy, DataTable, Renew } from '@vicons/carbon'
-import { StopOutline } from '@vicons/ionicons5'
+import { StopOutline, Stop } from '@vicons/ionicons5'
import { ClockCircleOutlined, DownloadOutlined, LineChartOutlined } from
'@vicons/antd'
import styles from './index.module.scss'
-import { useConfigStore } from '@/store/config'
+import type {Job, JobResultData} from "@/api/models/job/types/job"
+import {fetchResult, getJobStatus, stopJob} from "@/api/models/job"
+import {useMessage} from "naive-ui"
export default defineComponent({
name: 'TableActionBar',
- setup() {
- const { t } = useLocaleHooks()
+ setup: function () {
+ const {t} = useLocaleHooks()
+ const message = useMessage()
- const configStore = useConfigStore()
- const isDarkMode = computed(() => configStore.theme === 'dark')
+ const {mittBus} = getCurrentInstance()!.appContext.config.globalProperties
+ const currentJob = ref<Job | null>(null)
+ const tableData = ref<JobResultData | null>(null)
+ const jobStatus = ref<string>('')
+ const selectedInterval = ref('Disabled')
+ const refreshIntervalId = ref<number | null>(null);
const activeButton = ref('table')
+ const startTime = ref(0);
+ const elapsedTime = ref(0);
+
const setActiveButton = (button: any) => {
activeButton.value = button
}
+ mittBus.on('jobResult', (jobData: any) => {
+ currentJob.value = jobData
+ })
+
+ const handleRefreshData = async () => {
+ if (currentJob.value) {
+ if (currentJob.value.shouldFetchResult) {
+ try {
+ const resultFetchDTO = {
+ submitId: currentJob.value.submitId,
+ clusterId: currentJob.value.clusterId,
+ sessionId: currentJob.value.sessionId,
+ taskType: currentJob.value.type,
+ token: currentJob.value.token
+ }
+
+ const response: any = await fetchResult(resultFetchDTO);
+ console.log(response.data)
+ tableData.value = response.data;
+ mittBus.emit('refreshedResult', response.data)
+ } catch (error) {
+ tableData.value = null;
+ console.error('Error fetching result:', error)
+ }
+ } else {
+ message.warning(t('playground.no_data'))
+ }
+ } else {
+ message.warning(t('playground.no_data'))
+ }
+ }
+
+ const handleStopJob = async () => {
+ if (currentJob.value) {
+ const stopJobDTO = {
+ clusterId: currentJob.value.clusterId,
+ jobId: currentJob.value.jobId,
+ taskType: currentJob.value.type,
+ withSavepoint: false
+ }
+ try {
+ const response: any = await stopJob(stopJobDTO);
Review Comment:
Please use the correct type
##########
paimon-web-ui/src/views/playground/components/query/components/console/components/controls/index.tsx:
##########
@@ -16,29 +16,227 @@ specific language governing permissions and limitations
under the License. */
import { Copy, DataTable, Renew } from '@vicons/carbon'
-import { StopOutline } from '@vicons/ionicons5'
+import { StopOutline, Stop } from '@vicons/ionicons5'
import { ClockCircleOutlined, DownloadOutlined, LineChartOutlined } from
'@vicons/antd'
import styles from './index.module.scss'
-import { useConfigStore } from '@/store/config'
+import type {Job, JobResultData} from "@/api/models/job/types/job"
+import {fetchResult, getJobStatus, stopJob} from "@/api/models/job"
+import {useMessage} from "naive-ui"
export default defineComponent({
name: 'TableActionBar',
- setup() {
- const { t } = useLocaleHooks()
+ setup: function () {
+ const {t} = useLocaleHooks()
+ const message = useMessage()
- const configStore = useConfigStore()
- const isDarkMode = computed(() => configStore.theme === 'dark')
+ const {mittBus} = getCurrentInstance()!.appContext.config.globalProperties
+ const currentJob = ref<Job | null>(null)
+ const tableData = ref<JobResultData | null>(null)
+ const jobStatus = ref<string>('')
+ const selectedInterval = ref('Disabled')
+ const refreshIntervalId = ref<number | null>(null);
const activeButton = ref('table')
+ const startTime = ref(0);
+ const elapsedTime = ref(0);
+
const setActiveButton = (button: any) => {
activeButton.value = button
}
+ mittBus.on('jobResult', (jobData: any) => {
+ currentJob.value = jobData
+ })
+
+ const handleRefreshData = async () => {
+ if (currentJob.value) {
+ if (currentJob.value.shouldFetchResult) {
+ try {
+ const resultFetchDTO = {
+ submitId: currentJob.value.submitId,
+ clusterId: currentJob.value.clusterId,
+ sessionId: currentJob.value.sessionId,
+ taskType: currentJob.value.type,
+ token: currentJob.value.token
Review Comment:
Can be use the Extended symbol. Remember to use toRaw before use
##########
paimon-web-ui/src/views/playground/components/query/components/console/components/controls/index.tsx:
##########
@@ -16,29 +16,227 @@ specific language governing permissions and limitations
under the License. */
import { Copy, DataTable, Renew } from '@vicons/carbon'
-import { StopOutline } from '@vicons/ionicons5'
+import { StopOutline, Stop } from '@vicons/ionicons5'
import { ClockCircleOutlined, DownloadOutlined, LineChartOutlined } from
'@vicons/antd'
import styles from './index.module.scss'
-import { useConfigStore } from '@/store/config'
+import type {Job, JobResultData} from "@/api/models/job/types/job"
+import {fetchResult, getJobStatus, stopJob} from "@/api/models/job"
+import {useMessage} from "naive-ui"
export default defineComponent({
name: 'TableActionBar',
- setup() {
- const { t } = useLocaleHooks()
+ setup: function () {
+ const {t} = useLocaleHooks()
+ const message = useMessage()
- const configStore = useConfigStore()
- const isDarkMode = computed(() => configStore.theme === 'dark')
+ const {mittBus} = getCurrentInstance()!.appContext.config.globalProperties
+ const currentJob = ref<Job | null>(null)
+ const tableData = ref<JobResultData | null>(null)
+ const jobStatus = ref<string>('')
+ const selectedInterval = ref('Disabled')
+ const refreshIntervalId = ref<number | null>(null);
const activeButton = ref('table')
+ const startTime = ref(0);
+ const elapsedTime = ref(0);
+
const setActiveButton = (button: any) => {
activeButton.value = button
}
+ mittBus.on('jobResult', (jobData: any) => {
+ currentJob.value = jobData
+ })
+
+ const handleRefreshData = async () => {
+ if (currentJob.value) {
+ if (currentJob.value.shouldFetchResult) {
+ try {
+ const resultFetchDTO = {
+ submitId: currentJob.value.submitId,
+ clusterId: currentJob.value.clusterId,
+ sessionId: currentJob.value.sessionId,
+ taskType: currentJob.value.type,
+ token: currentJob.value.token
+ }
+
+ const response: any = await fetchResult(resultFetchDTO);
+ console.log(response.data)
+ tableData.value = response.data;
+ mittBus.emit('refreshedResult', response.data)
+ } catch (error) {
+ tableData.value = null;
+ console.error('Error fetching result:', error)
+ }
+ } else {
+ message.warning(t('playground.no_data'))
+ }
+ } else {
+ message.warning(t('playground.no_data'))
+ }
+ }
+
+ const handleStopJob = async () => {
+ if (currentJob.value) {
+ const stopJobDTO = {
+ clusterId: currentJob.value.clusterId,
+ jobId: currentJob.value.jobId,
+ taskType: currentJob.value.type,
+ withSavepoint: false
+ }
+ try {
+ const response: any = await stopJob(stopJobDTO);
+ if (response.code === 200) {
+ message.success(t('playground.job_stopping_successfully'))
+ } else {
+ message.warning(t('playground.job_stopping_failed'))
+ }
+ } catch (error) {
+ message.warning(t('playground.job_stopping_failed'))
+ }
+ }
+ }
+
+ let getJobStatusIntervalId: number
+ onMounted(() => {
+ getJobStatusIntervalId = setInterval(async () => {
+ if (currentJob.value && currentJob.value.jobId) {
+ const response: any = await getJobStatus(currentJob.value.jobId)
Review Comment:
Please use the correct type
##########
paimon-web-ui/src/views/playground/components/query/components/console/components/controls/index.tsx:
##########
@@ -16,29 +16,227 @@ specific language governing permissions and limitations
under the License. */
import { Copy, DataTable, Renew } from '@vicons/carbon'
-import { StopOutline } from '@vicons/ionicons5'
+import { StopOutline, Stop } from '@vicons/ionicons5'
import { ClockCircleOutlined, DownloadOutlined, LineChartOutlined } from
'@vicons/antd'
import styles from './index.module.scss'
-import { useConfigStore } from '@/store/config'
+import type {Job, JobResultData} from "@/api/models/job/types/job"
+import {fetchResult, getJobStatus, stopJob} from "@/api/models/job"
+import {useMessage} from "naive-ui"
export default defineComponent({
name: 'TableActionBar',
- setup() {
- const { t } = useLocaleHooks()
+ setup: function () {
+ const {t} = useLocaleHooks()
+ const message = useMessage()
- const configStore = useConfigStore()
- const isDarkMode = computed(() => configStore.theme === 'dark')
+ const {mittBus} = getCurrentInstance()!.appContext.config.globalProperties
+ const currentJob = ref<Job | null>(null)
+ const tableData = ref<JobResultData | null>(null)
+ const jobStatus = ref<string>('')
+ const selectedInterval = ref('Disabled')
+ const refreshIntervalId = ref<number | null>(null);
const activeButton = ref('table')
+ const startTime = ref(0);
+ const elapsedTime = ref(0);
+
const setActiveButton = (button: any) => {
activeButton.value = button
}
+ mittBus.on('jobResult', (jobData: any) => {
+ currentJob.value = jobData
+ })
+
+ const handleRefreshData = async () => {
+ if (currentJob.value) {
+ if (currentJob.value.shouldFetchResult) {
+ try {
+ const resultFetchDTO = {
+ submitId: currentJob.value.submitId,
+ clusterId: currentJob.value.clusterId,
+ sessionId: currentJob.value.sessionId,
+ taskType: currentJob.value.type,
+ token: currentJob.value.token
+ }
+
+ const response: any = await fetchResult(resultFetchDTO);
+ console.log(response.data)
+ tableData.value = response.data;
+ mittBus.emit('refreshedResult', response.data)
+ } catch (error) {
+ tableData.value = null;
+ console.error('Error fetching result:', error)
+ }
+ } else {
+ message.warning(t('playground.no_data'))
+ }
+ } else {
+ message.warning(t('playground.no_data'))
+ }
+ }
+
+ const handleStopJob = async () => {
+ if (currentJob.value) {
+ const stopJobDTO = {
+ clusterId: currentJob.value.clusterId,
+ jobId: currentJob.value.jobId,
+ taskType: currentJob.value.type,
+ withSavepoint: false
+ }
+ try {
+ const response: any = await stopJob(stopJobDTO);
+ if (response.code === 200) {
+ message.success(t('playground.job_stopping_successfully'))
+ } else {
+ message.warning(t('playground.job_stopping_failed'))
+ }
+ } catch (error) {
+ message.warning(t('playground.job_stopping_failed'))
+ }
+ }
+ }
+
+ let getJobStatusIntervalId: number
+ onMounted(() => {
+ getJobStatusIntervalId = setInterval(async () => {
+ if (currentJob.value && currentJob.value.jobId) {
+ const response: any = await getJobStatus(currentJob.value.jobId)
+ if (response.data) {
+ jobStatus.value = response.data.status
+ }
+ }
+ }, 1000)
+ })
+
+ const currentStopIcon = computed(() => jobStatus.value === 'RUNNING' ?
StopOutline : Stop);
+
+ const isButtonDisabled = computed(() => {
+ return jobStatus.value !== 'RUNNING'
+ })
+
+ const jobStatusColor = computed(() => {
+ switch (jobStatus.value.toUpperCase()) {
+ case 'RUNNING':
+ return '#33994A'
+ case 'CANCELED':
+ return '#f6b658'
+ case 'FINISHED':
+ return '#f5c1bd'
+ case 'FAILED':
+ return '#f9827c'
+ default:
+ return '#7ce998';
+ }
+ })
+
+ const formattedJobStatus = computed(() => {
+ return jobStatus.value.charAt(0).toUpperCase() +
jobStatus.value.slice(1).toLowerCase()
+ })
+
+ const dropdownOptions = [
+ { label: 'Disabled', key: 'Disabled' },
+ { label: '5s', key: '5s' },
+ { label: '10s', key: '10s' },
+ { label: '30s', key: '30s' },
+ { label: '1m', key: '1m' },
+ { label: '5m', key: '5m' }
+ ];
+
+ const clearRefreshInterval = () => {
+ if (refreshIntervalId.value) {
+ clearInterval(refreshIntervalId.value)
+ refreshIntervalId.value = null
+ }
+ }
+
+ const setRefreshInterval = (milliseconds: number) => {
+ clearRefreshInterval();
+ refreshIntervalId.value = setInterval(handleRefreshData, milliseconds)
+ }
+
+ const handleSelect = (key: any) => {
+ selectedInterval.value = key
+ switch (key) {
+ case '5s':
+ setRefreshInterval(5000)
+ break
+ case '10s':
+ setRefreshInterval(10000)
+ break
+ case '30s':
+ setRefreshInterval(30000)
+ break
+ case '1m':
+ setRefreshInterval(60000)
+ break
+ case '5m':
+ setRefreshInterval(300000)
+ break
+ case 'Disabled':
+ default:
+ clearRefreshInterval()
+ break
Review Comment:
Please use dayjs for time conversion
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
