You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@paimon.apache.org by "s7monk (via GitHub)" <gi...@apache.org> on 2024/06/24 05:26:28 UTC
[PR] [Improvement] Refactor the job query page front end [paimon-webui]
s7monk opened a new pull request, #442:
URL: https://github.com/apache/paimon-webui/pull/442
close: https://github.com/apache/paimon-webui/issues/441
### Purpose
Refactor the job query page frontend to support submitting multiple jobs at the same time.
--
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: issues-unsubscribe@paimon.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [Improvement] Refactor the job query page front end [paimon-webui]
Posted by "zhangmo8 (via GitHub)" <gi...@apache.org>.
zhangmo8 commented on code in PR #442:
URL: https://github.com/apache/paimon-webui/pull/442#discussion_r1650584579
##########
paimon-web-ui/src/store/job/index.ts:
##########
@@ -15,89 +15,139 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import type { ExecutionMode } from './type'
+import type { ExecutionMode, JobDetails } from './type'
import type { Job, JobResultData } from '@/api/models/job/types/job'
export interface JobState {
- executionMode: ExecutionMode
- currentJob: Job | null
- jobResultData: JobResultData | null
- jobStatus: string
- executionTime: string
+ jobs: Record<string, JobDetails>
jobLog?: string
}
export const useJobStore = defineStore({
id: 'job',
state: (): JobState => ({
- executionMode: 'Streaming',
- currentJob: null,
- jobResultData: null,
- jobStatus: '',
- executionTime: '0m:0s',
+ jobs: {},
jobLog: '',
}),
persist: false,
getters: {
- getExecutionMode(): ExecutionMode {
- return this.executionMode
+ getJobDetails(state): (key: string) => JobDetails | undefined {
+ return key => state.jobs[key]
},
- getCurrentJob(): Job | null {
- return this.currentJob
+ getCurrentJob(state): (key: string) => Job | null {
+ return key => state.jobs[key]?.job
},
- getJobResultData(): JobResultData | null {
- return this.jobResultData
+ getExecutionMode(state): (key: string) => string | undefined {
+ return key => state.jobs[key]?.executionMode
},
- getColumns(): number {
- if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0)
- return Object.keys(this.currentJob.resultData[0]).length
- else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0)
- return Object.keys(this.jobResultData.resultData[0]).length
- else
- return 0
+ getJobStatus(state): (key: string) => string {
+ return (key) => {
+ if (!state.jobs[key]) {
+ return ''
Review Comment:
Set a valid default value
##########
paimon-web-ui/src/store/job/index.ts:
##########
@@ -15,89 +15,139 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import type { ExecutionMode } from './type'
+import type { ExecutionMode, JobDetails } from './type'
import type { Job, JobResultData } from '@/api/models/job/types/job'
export interface JobState {
- executionMode: ExecutionMode
- currentJob: Job | null
- jobResultData: JobResultData | null
- jobStatus: string
- executionTime: string
+ jobs: Record<string, JobDetails>
jobLog?: string
}
export const useJobStore = defineStore({
id: 'job',
state: (): JobState => ({
- executionMode: 'Streaming',
- currentJob: null,
- jobResultData: null,
- jobStatus: '',
- executionTime: '0m:0s',
+ jobs: {},
jobLog: '',
}),
persist: false,
getters: {
- getExecutionMode(): ExecutionMode {
- return this.executionMode
+ getJobDetails(state): (key: string) => JobDetails | undefined {
+ return key => state.jobs[key]
},
- getCurrentJob(): Job | null {
- return this.currentJob
+ getCurrentJob(state): (key: string) => Job | null {
+ return key => state.jobs[key]?.job
},
- getJobResultData(): JobResultData | null {
- return this.jobResultData
+ getExecutionMode(state): (key: string) => string | undefined {
+ return key => state.jobs[key]?.executionMode
},
- getColumns(): number {
- if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0)
- return Object.keys(this.currentJob.resultData[0]).length
- else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0)
- return Object.keys(this.jobResultData.resultData[0]).length
- else
- return 0
+ getJobStatus(state): (key: string) => string {
+ return (key) => {
+ if (!state.jobs[key]) {
+ return ''
+ }
+ return state.jobs[key].jobStatus
+ }
},
- getRows(): number {
- if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0)
- return this.currentJob.resultData.length
- else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0)
- return this.jobResultData.resultData.length
- else
- return 0
+ getJobResultData(state): (key: string) => JobResultData | null {
+ return key => state.jobs[key]?.jobResultData
},
- getJobStatus(): string {
- return this.jobStatus
+ getExecutionTime(state): (key: string) => number {
+ return (key) => {
+ if (!state.jobs[key]) {
+ return 0
+ }
+ return state.jobs[key].executionTime
+ }
+ },
+ getColumns(state): (key: string) => number {
+ return (key) => {
+ const jobDetails = state.jobs[key]
+ if (jobDetails) {
+ if (jobDetails.job && jobDetails.job.resultData && jobDetails.job.resultData.length > 0) {
+ return Object.keys(jobDetails.job.resultData[0]).length
+ }
+ if (jobDetails.jobResultData && jobDetails.jobResultData.resultData && jobDetails.jobResultData.resultData.length > 0) {
+ return Object.keys(jobDetails.jobResultData.resultData[0]).length
+ }
+ }
Review Comment:
You can use the optional chain to reduce the length of judgment.
##########
paimon-web-ui/src/store/job/index.ts:
##########
@@ -15,89 +15,139 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import type { ExecutionMode } from './type'
+import type { ExecutionMode, JobDetails } from './type'
import type { Job, JobResultData } from '@/api/models/job/types/job'
export interface JobState {
- executionMode: ExecutionMode
- currentJob: Job | null
- jobResultData: JobResultData | null
- jobStatus: string
- executionTime: string
+ jobs: Record<string, JobDetails>
jobLog?: string
}
export const useJobStore = defineStore({
id: 'job',
state: (): JobState => ({
- executionMode: 'Streaming',
- currentJob: null,
- jobResultData: null,
- jobStatus: '',
- executionTime: '0m:0s',
+ jobs: {},
jobLog: '',
}),
persist: false,
getters: {
- getExecutionMode(): ExecutionMode {
- return this.executionMode
+ getJobDetails(state): (key: string) => JobDetails | undefined {
+ return key => state.jobs[key]
},
- getCurrentJob(): Job | null {
- return this.currentJob
+ getCurrentJob(state): (key: string) => Job | null {
+ return key => state.jobs[key]?.job
},
- getJobResultData(): JobResultData | null {
- return this.jobResultData
+ getExecutionMode(state): (key: string) => string | undefined {
+ return key => state.jobs[key]?.executionMode
},
- getColumns(): number {
- if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0)
- return Object.keys(this.currentJob.resultData[0]).length
- else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0)
- return Object.keys(this.jobResultData.resultData[0]).length
- else
- return 0
+ getJobStatus(state): (key: string) => string {
+ return (key) => {
+ if (!state.jobs[key]) {
+ return ''
+ }
+ return state.jobs[key].jobStatus
+ }
},
- getRows(): number {
- if (this.currentJob && this.currentJob.resultData && this.currentJob.resultData.length > 0)
- return this.currentJob.resultData.length
- else if (this.jobResultData && this.jobResultData.resultData && this.jobResultData.resultData.length > 0)
- return this.jobResultData.resultData.length
- else
- return 0
+ getJobResultData(state): (key: string) => JobResultData | null {
+ return key => state.jobs[key]?.jobResultData
},
- getJobStatus(): string {
- return this.jobStatus
+ getExecutionTime(state): (key: string) => number {
+ return (key) => {
+ if (!state.jobs[key]) {
+ return 0
+ }
+ return state.jobs[key].executionTime
+ }
+ },
+ getColumns(state): (key: string) => number {
+ return (key) => {
+ const jobDetails = state.jobs[key]
+ if (jobDetails) {
+ if (jobDetails.job && jobDetails.job.resultData && jobDetails.job.resultData.length > 0) {
+ return Object.keys(jobDetails.job.resultData[0]).length
+ }
+ if (jobDetails.jobResultData && jobDetails.jobResultData.resultData && jobDetails.jobResultData.resultData.length > 0) {
+ return Object.keys(jobDetails.jobResultData.resultData[0]).length
+ }
+ }
+ return 0
+ }
},
- getExecutionTime(): string {
- return this.executionTime
+ getRows(state): (key: string) => number {
+ return (key) => {
+ const jobDetails = state.jobs[key]
+ if (jobDetails) {
+ if (jobDetails.job && jobDetails.job.resultData && jobDetails.job.resultData.length > 0) {
+ return jobDetails.job.resultData.length
+ }
+ if (jobDetails.jobResultData && jobDetails.jobResultData.resultData && jobDetails.jobResultData.resultData.length > 0) {
+ return jobDetails.jobResultData.resultData.length
+ }
+ }
Review Comment:
You can use the optional chain to reduce the length of judgment.
--
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: issues-unsubscribe@paimon.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [Improvement] Refactor the job query page front end [paimon-webui]
Posted by "s7monk (via GitHub)" <gi...@apache.org>.
s7monk commented on PR #442:
URL: https://github.com/apache/paimon-webui/pull/442#issuecomment-2186083259
> Licenses that need to be supplemented with new dependencies
done.
--
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: issues-unsubscribe@paimon.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [Improvement] Refactor frontend of job query page [paimon-webui]
Posted by "SteNicholas (via GitHub)" <gi...@apache.org>.
SteNicholas merged PR #442:
URL: https://github.com/apache/paimon-webui/pull/442
--
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: issues-unsubscribe@paimon.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org