[GitHub] [incubator-streampark] wolfboys commented on a diff in pull request #1961: [Improve] k8s mode job remapping Improvement

[GitBox <gi...@apache.org>]

wolfboys commented on code in PR #1961:
URL: https://github.com/apache/incubator-streampark/pull/1961#discussion_r1013613168


##########
streampark-console/streampark-console-newui/src/views/flink/app/hooks/useApp.tsx:
##########
@@ -276,45 +276,63 @@ export const useFlinkApplication = (openStartModal: Fn) => {
         'Mapping Application',
       ],
       content: () => {
-        return (
-          <Form
-            class="!pt-40px"
-            ref={mappingRef}
-            name="mappingForm"
-            labelCol={{ lg: { span: 7 }, sm: { span: 7 } }}
-            wrapperCol={{ lg: { span: 16 }, sm: { span: 4 } }}
-            v-model:model={formValue}
-          >
-            <Form.Item label="Application Name">
-              <Alert message={app.jobName} type="info" />
-            </Form.Item>
-            <Form.Item
-              label="Application Id"
-              name="appId"
-              rules={[{ required: true, message: 'ApplicationId is required' }]}
-            >
-              <Input type="text" placeholder="ApplicationId" v-model:value={formValue.appId} />
-            </Form.Item>
-            <Form.Item
-              label="JobId"
-              name="jobId"
-              rules={[{ required: true, message: 'ApplicationId is required' }]}
-            >
-              <Input type="text" placeholder="JobId" v-model:value={formValue.jobId} />
-            </Form.Item>
-          </Form>
-        );
+        if ([2, 3, 4].includes(app.executionMode)) {
+          return (
+            <Form
+              class="!pt-40px"
+              ref={mappingRef}
+              name="mappingForm"
+              labelCol={{ lg: { span: 7 }, sm: { span: 7 } }}
+              wrapperCol={{ lg: { span: 16 }, sm: { span: 4 } }}
+              v-model:model={formValue}>
+              <Form.Item label="Application Name">
+                <Alert message={app.jobName} type="info" />
+              </Form.Item>
+              <Form.Item
+                label="YARN Application Id"
+                name="appId"
+                rules={[{ required: true, message: 'YARN ApplicationId is required' }]}>
+                <Input type="text" placeholder="ApplicationId" v-model:value={formValue.appId} />
+              </Form.Item>

Review Comment:
   > > The syntax of tsx is used here
   > 
   > There is actually a better way to write this, like this
   > 
   > ```
   > content: () => {
   > 	return(
   > 		<Form
   > 		........
   > 		{/* What I mean here is that I render the elements behind me when I meet certain conditions */}
   > 	   {[2, 3, 4].includes(app.executionMode) && (
   > 	      <Form.Item
   > 	        label="YARN Application Id"
   > 	        name="appId"
   > 	        rules={[{ required: true, message: 'YARN ApplicationId is required' }]}
   > 	      >
   > 	        <Input type="text" placeholder="ApplicationId" v-model:value={formValue.appId} />
   > 	      </Form.Item>
   > 	    )}
   > 		.......
   > ```
   
   thx, 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@streampark.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org