From 9156119940c4650396512bdd7e1ba71f39089b61 Mon Sep 17 00:00:00 2001
From: Manabu Mccloskey <manabu.mccloskey@gmail.com>
Date: Thu, 6 Jul 2023 14:06:12 -0700
Subject: [PATCH] wip

---
 plugins/apache-spark/src/api/model.ts         |  50 ++++-----
 .../ApacheSparkLogs/ApacheSparkLogs.tsx       |   8 +-
 .../DetailedDrawer/DetailedDrawer.tsx         |  64 ++++++-----
 .../DetailedDrawer/DrawerOverview.tsx         | 102 ++++++++++++++++++
 4 files changed, 161 insertions(+), 63 deletions(-)
 create mode 100644 plugins/apache-spark/src/components/DetailedDrawer/DrawerOverview.tsx

diff --git a/plugins/apache-spark/src/api/model.ts b/plugins/apache-spark/src/api/model.ts
index e2cac1c..e5805fe 100644
--- a/plugins/apache-spark/src/api/model.ts
+++ b/plugins/apache-spark/src/api/model.ts
@@ -8,42 +8,44 @@ export type Metadata = {
 };
 
 export type Spec = {
-  arguments: string[];
-  batchScheduler: string;
+  arguments?: string[];
+  batchScheduler?: string;
   driver: {
-    coreLimit: string;
-    coreRequest: string;
-    cores: number;
-    gpu: {
+    coreLimit?: string;
+    coreRequest?: string;
+    cores?: number;
+    gpu?: {
       name: string;
       quantity: number;
     };
-    labels: Record<string, string>;
-    memory: string;
-    memoryOverhead: string;
-    podName: string;
-    schedulerName: string;
-    serviceAccount: string;
+    labels?: Record<string, string>;
+    memory?: string;
+    memoryOverhead?: string;
+    podName?: string;
+    schedulerName?: string;
+    serviceAccount?: string;
   };
   executor: {
-    coreLimit: string;
-    coreRequest: string;
-    cores: number;
-    gpu: {
+    coreLimit?: string;
+    coreRequest?: string;
+    cores?: number;
+    gpu?: {
       name: string;
       quantity: number;
     };
-    instances: number;
-    labels: Record<string, string>;
-    memory: string;
-    memoryOverhead: string;
-    schedulerName: string;
-    serviceAccount: string;
+    instances?: number;
+    labels?: Record<string, string>;
+    memory?: string;
+    memoryOverhead?: string;
+    schedulerName?: string;
+    serviceAccount?: string;
   };
   image: string;
-  mainClass: string;
+  mainClass?: string;
+  mainApplicationFile?: string;
   mode: string;
-  pythonVersion: string;
+  pythonVersion?: string;
+  sparkVersion: string;
   type: string;
 };
 
diff --git a/plugins/apache-spark/src/components/ApacheSparkLogs/ApacheSparkLogs.tsx b/plugins/apache-spark/src/components/ApacheSparkLogs/ApacheSparkLogs.tsx
index 162d0b6..57cf939 100644
--- a/plugins/apache-spark/src/components/ApacheSparkLogs/ApacheSparkLogs.tsx
+++ b/plugins/apache-spark/src/components/ApacheSparkLogs/ApacheSparkLogs.tsx
@@ -1,7 +1,7 @@
 import { useApi } from '@backstage/core-plugin-api';
 import { apacheSparkApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
-import { ApacheSpark, ApacheSparkList } from '../../api/model';
+import { ApacheSpark } from '../../api/model';
 import {
   LogViewer,
   Progress,
@@ -75,9 +75,7 @@ export const ApacheSparkExecutorLogs = (props: { sparkApp: ApacheSpark }) => {
   }
 
   const handleChange = (item: SelectedItems) => {
-    // setSelected(item);
-    // return;
-    if (typeof item === 'string' && item !== '' && item !== '[]') {
+    if (typeof item === 'string' && item !== '') {
       setSelected(item);
     }
   };
@@ -89,7 +87,7 @@ export const ApacheSparkExecutorLogs = (props: { sparkApp: ApacheSpark }) => {
         items={executors}
         onChange={handleChange}
       />
-      {ExecutorLogs({ name: selected })}
+      <ExecutorLogs name={selected} key={selected} />
     </>
   );
 };
diff --git a/plugins/apache-spark/src/components/DetailedDrawer/DetailedDrawer.tsx b/plugins/apache-spark/src/components/DetailedDrawer/DetailedDrawer.tsx
index f175c04..386892b 100644
--- a/plugins/apache-spark/src/components/DetailedDrawer/DetailedDrawer.tsx
+++ b/plugins/apache-spark/src/components/DetailedDrawer/DetailedDrawer.tsx
@@ -4,19 +4,18 @@ import {
   createStyles,
   IconButton,
   makeStyles,
-  Paper,
   Theme,
   Typography,
 } from '@material-ui/core';
 import Close from '@material-ui/icons/Close';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { stringify } from 'yaml';
 import { CopyTextButton, TabbedLayout } from '@backstage/core-components';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import {
   ApacheSparkDriverLogs,
   ApacheSparkExecutorLogs,
 } from '../ApacheSparkLogs/ApacheSparkLogs';
+import { DrawerOverview } from './DrawerOverview';
 
 const useDrawerContentStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -36,7 +35,12 @@ const useDrawerContentStyles = makeStyles((theme: Theme) =>
     },
     logs: {
       height: 500,
-      backgroundColor: '#EEEEEE',
+      display: 'flex',
+      flexDirection: 'column',
+      flexShrink: 0,
+    },
+    logs2: {
+      height: 600,
       display: 'flex',
       flexDirection: 'column',
     },
@@ -57,7 +61,14 @@ export const DrawerContent = ({
   const yamlString = stringify(apacheSpark);
   return (
     <TabbedLayout>
-      <TabbedLayout.Route path="/" title="Manifest">
+      <TabbedLayout.Route path="/" title="Overview">
+        <>
+          <div>
+            <DrawerOverview sparkApp={apacheSpark} />
+          </div>
+        </>
+      </TabbedLayout.Route>
+      <TabbedLayout.Route path="/manifests" title="Manifest">
         <>
           <div className={classes.header}>
             <Typography variant="h6">{apacheSpark.metadata.name}</Typography>
@@ -74,40 +85,25 @@ export const DrawerContent = ({
             <CopyTextButton text={yamlString} tooltipText="Copy" />
             <pre>{yamlString}</pre>
           </div>
-          <div>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={() => toggleDrawer(false)}
-            >
-              Primary Action
-            </Button>
-            <Button
-              className={classes.secondaryAction}
-              variant="outlined"
-              color="primary"
-              onClick={() => toggleDrawer(false)}
-            >
-              Secondary Action
-            </Button>
-          </div>
         </>
       </TabbedLayout.Route>
       <TabbedLayout.Route path="/logs" title="Logs">
         <>
-          <div className={classes.logs}>
-            <Typography variant="h6">
-              Driver Log for {apacheSpark.metadata.name}
-            </Typography>
-            {/*<ApacheSparkDriverLogs sparkApp={apacheSpark} />*/}
+          <div className={classes.logs2}>
+            <div className={classes.logs}>
+              <Typography variant="h6">
+                Driver Log for {apacheSpark.metadata.name}
+              </Typography>
+              <ApacheSparkDriverLogs sparkApp={apacheSpark} />
+            </div>
           </div>
-          <div className={classes.logs}>
-            <Typography variant="h6">
-              Executor Logs for {apacheSpark.metadata.name}
-            </Typography>
-            <ApacheSparkExecutorLogs
-              sparkApp={apacheSpark}
-            ></ApacheSparkExecutorLogs>
+          <div className={classes.logs2}>
+            <div className={classes.logs}>
+              <Typography variant="h6">
+                Executor Logs for {apacheSpark.metadata.name}
+              </Typography>
+              <ApacheSparkExecutorLogs sparkApp={apacheSpark} />
+            </div>
           </div>
         </>
       </TabbedLayout.Route>
diff --git a/plugins/apache-spark/src/components/DetailedDrawer/DrawerOverview.tsx b/plugins/apache-spark/src/components/DetailedDrawer/DrawerOverview.tsx
new file mode 100644
index 0000000..471a86a
--- /dev/null
+++ b/plugins/apache-spark/src/components/DetailedDrawer/DrawerOverview.tsx
@@ -0,0 +1,102 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import { ApacheSpark } from '../../api/model';
+import {
+  InfoCard,
+  StatusError,
+  StatusOK,
+  StatusPending,
+  StatusRunning,
+  StructuredMetadataTable,
+} from '@backstage/core-components';
+import React from 'react';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    content: {
+      justifyContent: 'space-between',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '5px',
+      gap: '30px',
+    },
+  }),
+);
+
+type generateMetadataOutput = {
+  app: { [key: string]: any };
+  driver: { [key: string]: any };
+  executor: { [key: string]: any };
+};
+
+function generateMetadata(sparkApp: ApacheSpark): generateMetadataOutput {
+  const out = {} as generateMetadataOutput;
+  const executor: { [key: string]: any } = {};
+  const app: { [key: string]: any } = {
+    name: sparkApp.metadata.name,
+    namespace: sparkApp.metadata.namespace,
+    status: renderState(sparkApp.status.applicationState.state),
+    image: sparkApp.spec.image,
+    mode: sparkApp.spec.mode,
+  };
+  if (sparkApp.status.applicationState.errorMessage)
+    app['error Message'] = sparkApp.status.applicationState.errorMessage;
+
+  for (const key in sparkApp.status.executorState) {
+    if (sparkApp.status.executorState.hasOwnProperty(key)) {
+      executor[`${key}`] = renderState(sparkApp.status.executorState[key]);
+    }
+  }
+  out.app = app;
+  out.driver = sparkApp.status.driverInfo;
+  out.executor = executor;
+  return out;
+}
+
+function renderState(state: string): JSX.Element {
+  switch (state) {
+    case 'RUNNING':
+      return <StatusRunning>{state}</StatusRunning>;
+    case 'COMPLETED':
+      return <StatusOK>{state}</StatusOK>;
+    case 'SUBMITTED':
+    case 'PENDING_RERUN':
+      return <StatusPending>{state}</StatusPending>;
+    case 'FAILED':
+    case 'SUBMISSION_FAILED':
+      return <StatusError>{state}</StatusError>;
+    default:
+      return <StatusPending>{state}</StatusPending>;
+  }
+}
+
+const upperCaseFirstChar = (s: string) => {
+  if (s.length > 0) {
+    return `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
+  }
+  return s;
+};
+
+export const DrawerOverview = (props: { sparkApp: ApacheSpark }) => {
+  return (
+    <div className={useStyles().content}>
+      <InfoCard title="Apache Spark Application">
+        <StructuredMetadataTable
+          metadata={generateMetadata(props.sparkApp).app}
+          options={{ titleFormat: upperCaseFirstChar }}
+        />
+      </InfoCard>
+      <InfoCard title="Driver">
+        <StructuredMetadataTable
+          metadata={generateMetadata(props.sparkApp).driver}
+          options={{ titleFormat: upperCaseFirstChar }}
+        />
+      </InfoCard>
+      <InfoCard title="Executors">
+        <StructuredMetadataTable
+          metadata={generateMetadata(props.sparkApp).executor}
+          options={{ titleFormat: upperCaseFirstChar }}
+        />
+      </InfoCard>
+    </div>
+  );
+};