From 645adb17beb46a73e97b7ac5a35d19bfd253910b Mon Sep 17 00:00:00 2001
From: Mindaugas <Minutis@gmail.com>
Date: Thu, 6 Jan 2022 12:53:45 +0200
Subject: [PATCH] Improve batch screen (#6)

Reformat Batches window
Add Spark submit command to Batches window
---
 frontend/src/pages/Batch.module.scss |  6 ++
 frontend/src/pages/Batch.tsx         | 83 +++++++++++++++++++++++-----
 frontend/src/utils/batch.ts          |  3 +
 3 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/utils/batch.ts

diff --git a/frontend/src/pages/Batch.module.scss b/frontend/src/pages/Batch.module.scss
index 9fbde8dc..12d97ebb 100644
--- a/frontend/src/pages/Batch.module.scss
+++ b/frontend/src/pages/Batch.module.scss
@@ -5,3 +5,9 @@
     font-size: 12px;
   }
 }
+
+.noWrapTable {
+  td {
+    white-space: nowrap;
+  }
+}
diff --git a/frontend/src/pages/Batch.tsx b/frontend/src/pages/Batch.tsx
index 56b649b8..7921be8a 100644
--- a/frontend/src/pages/Batch.tsx
+++ b/frontend/src/pages/Batch.tsx
@@ -1,10 +1,13 @@
 import {Code} from '@chakra-ui/layout';
 import React, {useMemo} from 'react';
 import {useParams} from 'react-router';
+import {Link} from '@chakra-ui/react';
+import {ExternalLinkIcon} from '@chakra-ui/icons';
 import PageHeading from '../components/PageHeading';
 import {useBatchLog, useBatch} from '../hooks/batch';
 import styles from './Batch.module.scss';
 import {Table, Thead, Tbody, Tr, Th, Td, Box} from '@chakra-ui/react';
+import {getSparkSubmitArg} from '../utils/batch';
 
 const Batch: React.FC = () => {
   const {id} = useParams<{id: string}>();
@@ -18,7 +21,7 @@ const Batch: React.FC = () => {
 
     return (
       <Box mt="5">
-        <Table variant="simple" size="sm">
+        <Table className={styles.noWrapTable} variant="simple" size="sm">
           <Thead>
             <Tr>
               <Th>Property</Th>
@@ -26,14 +29,18 @@ const Batch: React.FC = () => {
             </Tr>
           </Thead>
           <Tbody>
-            <Tr>
-              <Td>Name (--name)</Td>
-              <Td>{batch.submitParams.name}</Td>
-            </Tr>
             <Tr>
               <Td>File</Td>
               <Td>{batch.submitParams.file}</Td>
             </Tr>
+            <Tr>
+              <Td>Args</Td>
+              <Td>{batch.submitParams.args.join(', ')}</Td>
+            </Tr>
+            <Tr>
+              <Td>Name (--name)</Td>
+              <Td>{batch.submitParams.name}</Td>
+            </Tr>
             <Tr>
               <Td>Driver Cores (--driver-cores)</Td>
               <Td>{batch.submitParams.driverCores}</Td>
@@ -54,10 +61,6 @@ const Batch: React.FC = () => {
               <Td>Executor Memory (--executor-memory)</Td>
               <Td>{batch.submitParams.executorMemory}</Td>
             </Tr>
-            <Tr>
-              <Td>Args</Td>
-              <Td>{batch.submitParams.args.join(', ')}</Td>
-            </Tr>
             <Tr>
               <Td>Python files (--py-files)</Td>
               <Td>{batch.submitParams.pyFiles.join(', ')}</Td>
@@ -74,13 +77,9 @@ const Batch: React.FC = () => {
               <Td>Additional JARs (--jars)</Td>
               <Td>{batch.submitParams.jars.join(', ')}</Td>
             </Tr>
-            <Tr>
-              <Th>Config (--conf)</Th>
-              <Th>Value</Th>
-            </Tr>
             {Object.entries(batch.submitParams.conf).map(([name, val]) => (
               <Tr key={name}>
-                <Td>{name}</Td>
+                <Td>--conf {name}</Td>
                 <Td>{val}</Td>
               </Tr>
             ))}
@@ -90,11 +89,65 @@ const Batch: React.FC = () => {
     );
   }, [batch]);
 
+  const sparkSubmitStr = useMemo(() => {
+    if (!batch) {
+      return null;
+    }
+
+    return (
+      <Code className={styles.logs}>
+        spark-submit
+        {getSparkSubmitArg('--name', batch.submitParams.name)}
+        {getSparkSubmitArg('--driver-cores', batch.submitParams.driverCores.toString())}
+        {getSparkSubmitArg('--driver-memory', batch.submitParams.driverMemory)}
+        {getSparkSubmitArg('--num-executors', batch.submitParams.numExecutors.toString())}
+        {getSparkSubmitArg('--executor-cores', batch.submitParams.executorCores.toString())}
+        {getSparkSubmitArg('--executor-memory', batch.submitParams.executorMemory)}
+        {getSparkSubmitArg('--py-files', batch.submitParams.pyFiles.join(','))}
+        {getSparkSubmitArg('--archives', batch.submitParams.archives.join(','))}
+        {getSparkSubmitArg('--files', batch.submitParams.files.join(','))}
+        {getSparkSubmitArg('--jars', batch.submitParams.jars.join(','))}
+        {Object.entries(batch.submitParams.conf).map(([name, val]) => (
+          <span key={name}>
+            {' '}
+            --conf {name} {val}
+          </span>
+        ))}
+        {' ' + batch.submitParams.file}
+        {' ' + batch.submitParams.args.join(' ')}
+      </Code>
+    );
+  }, [batch]);
+
+  const logsStr = useMemo(() => {
+    if (!logs) {
+      return null;
+    }
+
+    if (logs.log.startsWith('http')) {
+      return (
+        <Link href={logs.log} isExternal>
+          {logs?.log} <ExternalLinkIcon mx="2px" marginBottom="5px" />
+        </Link>
+      );
+    }
+
+    return <Code className={styles.logs}>{logs.log}</Code>;
+  }, [logs]);
+
   return (
     <div className={styles.batch}>
       <PageHeading>Batch {id}</PageHeading>
-      <Code className={styles.logs}>{logs?.log}</Code>
+      <Box textStyle="caption" mt="5">
+        Logs:
+      </Box>
+      <Box mt="1">{logsStr}</Box>
+
       {appInfo}
+      <Box textStyle="caption" mt="5">
+        Spark submit command:
+      </Box>
+      <Box mt="1">{sparkSubmitStr}</Box>
     </div>
   );
 };
diff --git a/frontend/src/utils/batch.ts b/frontend/src/utils/batch.ts
new file mode 100644
index 00000000..4f4f90bc
--- /dev/null
+++ b/frontend/src/utils/batch.ts
@@ -0,0 +1,3 @@
+export function getSparkSubmitArg(key: string, value: string) {
+  return value ? ` ${key} ${value}` : null;
+}