Merge pull request #27 from exacaster/external_logs_link

Add support for external logs link

frontend/src/client/types.ts

@@ -32,4 +32,5 @@ export type BatchPage = {
 
 export type Configuration = {
   sparkHistoryServerUrl?: string;
+  externalLogsUrlTemplate?: string;
 };

frontend/src/components/AppActions.tsx

@@ -0,0 +1,45 @@
+import {ExternalLinkIcon, CloseIcon, CalendarIcon} from '@chakra-ui/icons';
+import {HStack, IconButton, Link as ExLink} from '@chakra-ui/react';
+import React from 'react';
+import {Application} from '../client/types';
+import {useConfiguration} from '../hooks/configuration';
+import {formatLink} from '../utils/application';
+
+interface Props {
+  app: Application;
+  onDelete?: () => void;
+}
+
+const AppActions: React.FC<Props> = ({app, onDelete}) => {
+  const {data: conf} = useConfiguration();
+
+  return (
+    <HStack>
+      {!!conf?.sparkHistoryServerUrl && !!app.appId && (
+        <IconButton
+          size="sm"
+          icon={<ExternalLinkIcon />}
+          title="History"
+          aria-label="History"
+          as={ExLink}
+          target="_blank"
+          href={`${conf.sparkHistoryServerUrl}/history/${app.appId}/jobs`}
+        />
+      )}
+      {!!conf?.externalLogsUrlTemplate && !!app.appId && (
+        <IconButton
+          size="sm"
+          icon={<CalendarIcon />}
+          title="External logs"
+          aria-label="External logs"
+          as={ExLink}
+          target="_blank"
+          href={formatLink(conf.externalLogsUrlTemplate, app)}
+        />
+      )}
+      {onDelete && <IconButton size="sm" title="Delete" aria-label="Delete" onClick={() => onDelete()} icon={<CloseIcon />} />}
+    </HStack>
+  );
+};
+
+export default AppActions;

frontend/src/components/AppInfo.module.scss

@@ -0,0 +1,5 @@
+.noWrapTable {
+  td {
+    white-space: nowrap;
+  }
+}

frontend/src/components/AppInfo.tsx

@@ -0,0 +1,81 @@
+import {Box, Table, Tbody, Td, Th, Thead, Tr} from '@chakra-ui/react';
+import React from 'react';
+import {Application} from '../client/types';
+import styles from './AppInfo.module.scss';
+
+interface Props {
+  app: Application;
+}
+
+const AppInfo: React.FC<Props> = ({app}) => {
+  return (
+    <Box mt="5">
+      <Table className={styles.noWrapTable} variant="simple" size="sm">
+        <Thead>
+          <Tr>
+            <Th>Property</Th>
+            <Th>Value</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>File</Td>
+            <Td>{app.submitParams.file}</Td>
+          </Tr>
+          <Tr>
+            <Td>Args</Td>
+            <Td>{app.submitParams.args.join(', ')}</Td>
+          </Tr>
+          <Tr>
+            <Td>Name (--name)</Td>
+            <Td>{app.submitParams.name}</Td>
+          </Tr>
+          <Tr>
+            <Td>Driver Cores (--driver-cores)</Td>
+            <Td>{app.submitParams.driverCores}</Td>
+          </Tr>
+          <Tr>
+            <Td>Driver Memory (--driver-memory)</Td>
+            <Td>{app.submitParams.driverMemory}</Td>
+          </Tr>
+          <Tr>
+            <Td>Number Of Executors (--num-executors)</Td>
+            <Td>{app.submitParams.numExecutors}</Td>
+          </Tr>
+          <Tr>
+            <Td>Executor Cores (--executor-cores)</Td>
+            <Td>{app.submitParams.executorCores}</Td>
+          </Tr>
+          <Tr>
+            <Td>Executor Memory (--executor-memory)</Td>
+            <Td>{app.submitParams.executorMemory}</Td>
+          </Tr>
+          <Tr>
+            <Td>Python files (--py-files)</Td>
+            <Td>{app.submitParams.pyFiles.join(', ')}</Td>
+          </Tr>
+          <Tr>
+            <Td>Archives (--archives)</Td>
+            <Td>{app.submitParams.archives.join(', ')}</Td>
+          </Tr>
+          <Tr>
+            <Td>Additional files (--files)</Td>
+            <Td>{app.submitParams.files.join(', ')}</Td>
+          </Tr>
+          <Tr>
+            <Td>Additional JARs (--jars)</Td>
+            <Td>{app.submitParams.jars.join(', ')}</Td>
+          </Tr>
+          {Object.entries(app.submitParams.conf).map(([name, val]) => (
+            <Tr key={name}>
+              <Td>--conf {name}</Td>
+              <Td>{val}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AppInfo;

frontend/src/components/AppLogs.module.scss

@@ -0,0 +1,5 @@
+.logs {
+  white-space: pre-wrap;
+  max-width: 100%;
+  font-size: 12px;
+}

frontend/src/components/AppLogs.tsx

@@ -0,0 +1,26 @@
+import {ExternalLinkIcon} from '@chakra-ui/icons';
+import {Code, Link} from '@chakra-ui/react';
+import React from 'react';
+import {ApplicationLog} from '../client/types';
+import styles from './AppLogs.module.scss';
+
+interface Props {
+  logs: ApplicationLog | undefined;
+}
+const AppLogs: React.FC<Props> = ({logs}) => {
+  if (!logs?.log) {
+    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>;
+};
+
+export default AppLogs;

frontend/src/components/AppSubmit.module.scss

@@ -0,0 +1,5 @@
+.command {
+  white-space: pre-wrap;
+  max-width: 100%;
+  font-size: 12px;
+}

frontend/src/components/AppSubmit.tsx

@@ -0,0 +1,37 @@
+import {Code} from '@chakra-ui/react';
+import React from 'react';
+import {Application} from '../client/types';
+import {getSparkSubmitArg} from '../utils/application';
+import styles from './AppSubmit.module.scss';
+
+interface Props {
+  app: Application;
+}
+
+const AppSubmit: React.FC<Props> = ({app}) => {
+  return (
+    <Code className={styles.command}>
+      spark-submit
+      {getSparkSubmitArg('--name', app.submitParams.name)}
+      {getSparkSubmitArg('--driver-cores', app.submitParams.driverCores.toString())}
+      {getSparkSubmitArg('--driver-memory', app.submitParams.driverMemory)}
+      {getSparkSubmitArg('--num-executors', app.submitParams.numExecutors.toString())}
+      {getSparkSubmitArg('--executor-cores', app.submitParams.executorCores.toString())}
+      {getSparkSubmitArg('--executor-memory', app.submitParams.executorMemory)}
+      {getSparkSubmitArg('--py-files', app.submitParams.pyFiles.join(','))}
+      {getSparkSubmitArg('--archives', app.submitParams.archives.join(','))}
+      {getSparkSubmitArg('--files', app.submitParams.files.join(','))}
+      {getSparkSubmitArg('--jars', app.submitParams.jars.join(','))}
+      {Object.entries(app.submitParams.conf).map(([name, val]) => (
+        <span key={name}>
+          {' '}
+          --conf {name} {val}
+        </span>
+      ))}
+      {' ' + app.submitParams.file}
+      {' ' + app.submitParams.args.join(' ')}
+    </Code>
+  );
+};
+
+export default AppSubmit;

frontend/src/components/AppTitle.tsx

@@ -0,0 +1,27 @@
+import {Grid, GridItem} from '@chakra-ui/react';
+import React from 'react';
+import {Application} from '../client/types';
+import AppActions from './AppActions';
+import AppStatus from './AppStatus';
+import PageHeading from './PageHeading';
+
+interface Props {
+  app: Application;
+}
+
+const AppTitle: React.FC<Props> = ({app, children}) => {
+  return (
+    <PageHeading>
+      <Grid templateColumns="repeat(5, 1fr)">
+        <GridItem colSpan={4}>
+          {children} <AppStatus status={app.state} />
+        </GridItem>
+        <GridItem colSpan={1} justifySelf="end">
+          <AppActions app={app} />
+        </GridItem>
+      </Grid>
+    </PageHeading>
+  );
+};
+
+export default AppTitle;