From 93b7b1b6c2bb24ef107cda09dcf400f77626a208 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 6 Oct 2020 15:46:41 +0200
Subject: [PATCH] compute widget cleanup

---
 .../organisms/AssetActions/Compute.module.css | 33 +++----
 .../organisms/AssetActions/Compute.tsx        | 97 ++++++++++---------
 2 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/components/organisms/AssetActions/Compute.module.css b/src/components/organisms/AssetActions/Compute.module.css
index b92be5590..565d2b621 100644
--- a/src/components/organisms/AssetActions/Compute.module.css
+++ b/src/components/organisms/AssetActions/Compute.module.css
@@ -1,27 +1,24 @@
-.compute {
+.info {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  width: auto;
+  margin-bottom: var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-top: -1rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding: 0 var(--spacer) calc(var(--spacer) / 2) var(--spacer);
 }
 
-.jobButtonWrapper {
+.filewrapper {
+  flex-shrink: 0;
+}
+
+.actions {
   margin-top: var(--spacer);
+  text-align: center;
 }
 
 .feedback {
   width: 100%;
 }
-
-.compute button {
-  margin-left: var(--spacer);
-}
-
-.compute button:first {
-  margin-left: 0px;
-}
-
-.info {
-  margin-top: var(--spacer);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx
index 07bd70ea3..dc8d2b443 100644
--- a/src/components/organisms/AssetActions/Compute.tsx
+++ b/src/components/organisms/AssetActions/Compute.tsx
@@ -1,9 +1,10 @@
 import React, { useState, ReactElement, ChangeEvent } from 'react'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import Dropzone from '../../atoms/Dropzone'
 import Price from '../../atoms/Price'
+import File from '../../atoms/File'
 import {
   computeOptions,
   useCompute,
@@ -25,10 +26,11 @@ export default function Compute({
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
   const computeService = ddo.findServiceByType('compute').attributes.main
+  const metadataService = ddo.findServiceByType('metadata')
 
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [, setError] = useState('')
-  const [computeType, setComputeType] = useState('')
+  const [computeType, setComputeType] = useState('nodejs')
   const [computeContainer, setComputeContainer] = useState({
     entrypoint: '',
     image: '',
@@ -39,7 +41,7 @@ export default function Compute({
   const [file, setFile] = useState(null)
 
   const isComputeButtonDisabled =
-    isJobStarting ||
+    isJobStarting === true ||
     file === null ||
     computeType === '' ||
     !ocean ||
@@ -80,56 +82,59 @@ export default function Compute({
       setFile(null)
     } catch (error) {
       setError('Failed to start job!')
-      console.log(error)
+      Logger.error(error.message)
+    } finally {
+      setIsJobStarting(false)
     }
-    setIsJobStarting(false)
   }
 
   return (
-    <div className={styles.compute}>
-      <Price ddo={ddo} conversion />
-
+    <>
       <div className={styles.info}>
-        <div className={styles.selectType}>
-          <Input
-            type="select"
-            name="algorithm"
-            label="Select image to run the algorithm"
-            placeholder=""
-            value={computeType}
-            options={computeOptions.map((x) => x.name)}
-            onChange={handleSelectChange}
-          />
+        <div className={styles.filewrapper}>
+          <File file={metadataService.attributes.main.files[0]} small />
         </div>
-        <div>
-          <Dropzone multiple={false} handleOnDrop={onDrop} />
-
-          <div className={styles.jobButtonWrapper}>
-            <Button
-              style="primary"
-              onClick={() => startJob()}
-              disabled={isComputeButtonDisabled}
-            >
-              Start job
-            </Button>
-          </div>
+        <div className={styles.pricewrapper}>
+          <Price ddo={ddo} conversion />
         </div>
-
-        <footer className={styles.feedback}>
-          {isLoading && <Loader message={computeStepText} />}
-          {computeError !== undefined && (
-            <Alert text={computeError} state="error" />
-          )}
-          {isPublished && (
-            <Alert
-              title="Your job started!"
-              text="Watch the progress in the history page."
-              state="success"
-            />
-          )}
-          <Web3Feedback isBalanceSufficient={isBalanceSufficient} />
-        </footer>
       </div>
-    </div>
+
+      <Input
+        type="select"
+        name="algorithm"
+        label="Select image to run the algorithm"
+        placeholder=""
+        small
+        value={computeType}
+        options={computeOptions.map((x) => x.name)}
+        onChange={handleSelectChange}
+      />
+      <Dropzone multiple={false} handleOnDrop={onDrop} />
+
+      <div className={styles.actions}>
+        <Button
+          style="primary"
+          onClick={() => startJob()}
+          disabled={isComputeButtonDisabled}
+        >
+          Start job
+        </Button>
+      </div>
+
+      <footer className={styles.feedback}>
+        {isLoading && <Loader message={computeStepText} />}
+        {computeError !== undefined && (
+          <Alert text={computeError} state="error" />
+        )}
+        {isPublished && (
+          <Alert
+            title="Your job started!"
+            text="Watch the progress in the history page."
+            state="success"
+          />
+        )}
+        <Web3Feedback isBalanceSufficient={isBalanceSufficient} />
+      </footer>
+    </>
   )
 }