2020-01-28 13:01:39 +01:00
|
|
|
import React, { useState } from 'react'
|
2020-03-18 22:56:09 +01:00
|
|
|
|
2020-03-30 12:41:13 +02:00
|
|
|
import asset from './asset'
|
2020-03-30 18:06:26 +02:00
|
|
|
import { assetAlgo, rawAlgoMeta } from './asset-compute'
|
2020-01-28 13:01:39 +01:00
|
|
|
|
|
|
|
export default function Compute({ ocean, web3 }) {
|
2020-03-16 15:59:56 +01:00
|
|
|
const [ddoAssetId, setDdoAssetId] = useState('')
|
2020-03-10 12:32:34 +01:00
|
|
|
const [jobStatus, setJobStatus] = useState('')
|
|
|
|
const [jobId, setJobId] = useState('')
|
|
|
|
const [agreementId, setAgreementId] = useState('')
|
2020-03-16 15:59:56 +01:00
|
|
|
const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
|
2020-03-30 09:10:38 +02:00
|
|
|
const [isAlgoInputVisible, setIsAlgoInputVisible] = useState('')
|
2020-03-25 21:05:04 +01:00
|
|
|
const [textRawAlgo, setTextRawAlgo] = useState('')
|
2020-03-30 09:10:38 +02:00
|
|
|
const [publishLogState, setPublishLogState] = useState(false)
|
|
|
|
const [publishOutputState, setPublishOutputState] = useState(false)
|
|
|
|
|
2020-01-28 13:01:39 +01:00
|
|
|
// publish a dataset and an algorithm
|
|
|
|
async function publish() {
|
|
|
|
try {
|
|
|
|
const accounts = await ocean.accounts.list()
|
2020-03-10 12:32:34 +01:00
|
|
|
console.log('Publishing asset.')
|
2020-03-12 09:16:09 +01:00
|
|
|
|
2020-03-30 18:06:26 +02:00
|
|
|
const service = await ocean.compute.createComputeServiceAttributes(
|
2020-03-12 09:16:09 +01:00
|
|
|
accounts[0],
|
|
|
|
'0',
|
|
|
|
'2020-03-10T10:00:00Z'
|
|
|
|
)
|
2020-03-10 12:32:34 +01:00
|
|
|
console.log(service)
|
2020-03-16 15:59:56 +01:00
|
|
|
const ddoAssetNew = await ocean.assets.create(asset, accounts[0], [
|
|
|
|
service
|
|
|
|
])
|
2020-01-28 13:01:39 +01:00
|
|
|
console.log('Asset successfully submitted.')
|
|
|
|
console.log(ddoAssetNew)
|
|
|
|
// keep track of this registered asset for consumption later on
|
2020-03-16 15:59:56 +01:00
|
|
|
setDdoAssetId(ddoAssetNew.id)
|
2020-03-12 09:16:09 +01:00
|
|
|
alert('Asset successfully submitted.')
|
2020-03-10 12:32:34 +01:00
|
|
|
} catch (error) {
|
|
|
|
console.error(error.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function publishalgo() {
|
|
|
|
try {
|
|
|
|
const accounts = await ocean.accounts.list()
|
|
|
|
console.log('Publishing algo.')
|
2020-03-12 09:16:09 +01:00
|
|
|
|
2020-03-30 12:41:13 +02:00
|
|
|
const ddoAlgorithmNew = await ocean.assets.create(assetAlgo, accounts[0])
|
2020-03-10 12:32:34 +01:00
|
|
|
console.log(ddoAlgorithmNew)
|
|
|
|
console.log('Algo asset successfully submitted.')
|
|
|
|
// keep track of this registered asset for consumption later on
|
2020-03-16 15:59:56 +01:00
|
|
|
setDdoAlgorithmId(ddoAlgorithmNew.id)
|
2020-03-12 09:16:09 +01:00
|
|
|
alert('Algorithm successfully submitted.')
|
2020-01-28 13:01:39 +01:00
|
|
|
} catch (error) {
|
|
|
|
console.error(error.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
async function startCompute(algorithmId, algorithmMeta) {
|
2020-01-28 13:01:39 +01:00
|
|
|
try {
|
|
|
|
const accounts = await ocean.accounts.list()
|
2020-03-30 12:41:13 +02:00
|
|
|
const computeOutput = {
|
2020-03-30 09:10:38 +02:00
|
|
|
publishAlgorithmLog: publishLogState,
|
|
|
|
publishOutput: publishOutputState,
|
2020-03-18 22:56:09 +01:00
|
|
|
brizoAddress: ocean.config.brizoAddress,
|
|
|
|
brizoUri: ocean.config.brizoUri,
|
|
|
|
metadataUri: ocean.config.aquariusUri,
|
|
|
|
nodeUri: ocean.config.nodeUri,
|
|
|
|
owner: accounts[0].getId(),
|
|
|
|
secretStoreUri: ocean.config.secretStoreUri
|
|
|
|
}
|
2020-03-30 12:41:13 +02:00
|
|
|
console.log(computeOutput)
|
2020-01-28 13:01:39 +01:00
|
|
|
// order the compute service
|
2020-03-16 15:59:56 +01:00
|
|
|
const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
|
2020-03-10 12:32:34 +01:00
|
|
|
setAgreementId(agreement)
|
2020-01-28 13:01:39 +01:00
|
|
|
// start a compute job
|
|
|
|
const status = await ocean.compute.start(
|
|
|
|
accounts[0],
|
2020-03-10 12:32:34 +01:00
|
|
|
agreement,
|
2020-03-16 15:59:56 +01:00
|
|
|
algorithmId,
|
2020-03-30 18:06:26 +02:00
|
|
|
algorithmMeta,
|
2020-03-30 12:41:13 +02:00
|
|
|
computeOutput
|
2020-01-28 13:01:39 +01:00
|
|
|
)
|
2020-03-10 12:32:34 +01:00
|
|
|
setJobId(status.jobId)
|
|
|
|
console.log(status)
|
2020-03-30 12:02:07 +02:00
|
|
|
alert('Compute job created. You can query for its status now.')
|
2020-03-10 12:32:34 +01:00
|
|
|
} catch (error) {
|
|
|
|
console.error(error.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-17 12:46:56 +01:00
|
|
|
// order and start the compute service with an algorithm published as an asset
|
2020-03-16 15:59:56 +01:00
|
|
|
async function startWithPublishedAlgo() {
|
|
|
|
return startCompute(ddoAlgorithmId)
|
|
|
|
}
|
|
|
|
|
2020-03-17 12:46:56 +01:00
|
|
|
// order and start the compute service with a passed raw algorithm
|
2020-03-16 15:59:56 +01:00
|
|
|
async function startWithRawAlgo() {
|
2020-03-18 12:53:48 +01:00
|
|
|
rawAlgoMeta.rawcode = textRawAlgo
|
2020-03-16 15:59:56 +01:00
|
|
|
return startCompute(undefined, rawAlgoMeta)
|
|
|
|
}
|
|
|
|
|
2020-03-10 12:32:34 +01:00
|
|
|
async function getStatus() {
|
|
|
|
try {
|
|
|
|
const accounts = await ocean.accounts.list()
|
|
|
|
|
2020-03-12 09:16:09 +01:00
|
|
|
const status = await ocean.compute.status(accounts[0], agreementId, jobId)
|
2020-03-10 12:32:34 +01:00
|
|
|
setJobStatus(JSON.stringify(status, null, '\t'))
|
2020-01-28 13:01:39 +01:00
|
|
|
console.log(status)
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-18 12:53:48 +01:00
|
|
|
async function showDivAlgo() {
|
2020-03-30 09:13:14 +02:00
|
|
|
setIsAlgoInputVisible(isAlgoInputVisible ? false : true)
|
2020-03-18 12:53:48 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async function updateRawAlgoCode(event) {
|
2020-03-25 21:05:04 +01:00
|
|
|
setTextRawAlgo(event.target.value)
|
2020-03-18 12:53:48 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async function updateDdoAssetId(event) {
|
|
|
|
setDdoAssetId(event.target.value)
|
|
|
|
}
|
2020-03-30 12:02:07 +02:00
|
|
|
|
2020-03-18 22:56:09 +01:00
|
|
|
async function handlePublishOutputState(event) {
|
2020-03-30 09:13:14 +02:00
|
|
|
setPublishOutputState(event.target.checked)
|
2020-03-18 22:56:09 +01:00
|
|
|
}
|
2020-03-30 12:02:07 +02:00
|
|
|
|
2020-03-18 22:56:09 +01:00
|
|
|
async function handlePublishLogState(event) {
|
2020-03-30 09:13:14 +02:00
|
|
|
setPublishLogState(event.target.checked)
|
2020-03-18 22:56:09 +01:00
|
|
|
}
|
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
if (!web3) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2020-01-28 13:01:39 +01:00
|
|
|
return (
|
|
|
|
<>
|
2020-03-30 12:02:07 +02:00
|
|
|
<h2>Compute</h2>
|
2020-03-16 15:59:56 +01:00
|
|
|
<ComputeSection>
|
2020-03-30 12:02:07 +02:00
|
|
|
<h3>1. Publish Dataset</h3>
|
2020-03-16 15:59:56 +01:00
|
|
|
<button onClick={publish}>Publish dataset with compute service</button>
|
2020-03-30 12:02:07 +02:00
|
|
|
|
|
|
|
<p>
|
2020-03-30 12:34:27 +02:00
|
|
|
<Label htmlFor="ddoAssetId">Asset DID</Label>
|
2020-03-31 09:37:49 +02:00
|
|
|
<code id="ddoAssetId">{ddoAssetId}</code>
|
2020-03-30 12:02:07 +02:00
|
|
|
</p>
|
2020-03-16 15:59:56 +01:00
|
|
|
</ComputeSection>
|
2020-03-30 12:34:27 +02:00
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
<ComputeSection>
|
2020-03-30 12:02:07 +02:00
|
|
|
<h3>2. Publish Algorithm</h3>
|
2020-03-16 15:59:56 +01:00
|
|
|
<button onClick={publishalgo}>Publish algorithm</button>
|
2020-03-30 12:02:07 +02:00
|
|
|
<p>
|
2020-03-30 12:34:27 +02:00
|
|
|
<Label htmlFor="ddoAlgorithmId">Algorithm DID</Label>
|
2020-03-30 12:02:07 +02:00
|
|
|
<code id="ddoAlgorithmId">{ddoAlgorithmId}</code>
|
|
|
|
</p>
|
2020-03-16 15:59:56 +01:00
|
|
|
</ComputeSection>
|
2020-03-30 12:34:27 +02:00
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
<ComputeSection>
|
2020-03-30 12:02:07 +02:00
|
|
|
<h3>3. Start Compute Job</h3>
|
|
|
|
|
|
|
|
<p>
|
2020-03-30 12:34:27 +02:00
|
|
|
<Label htmlFor="publishOutputState">
|
2020-03-30 12:02:07 +02:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
id="publishOutputState"
|
|
|
|
checked={publishOutputState}
|
|
|
|
onChange={handlePublishOutputState}
|
|
|
|
/>
|
|
|
|
Publish Output into the Marketplace
|
|
|
|
</Label>
|
2020-03-30 12:34:27 +02:00
|
|
|
<Label htmlFor="publishLogState">
|
2020-03-30 12:02:07 +02:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
id="publishLogState"
|
|
|
|
checked={publishLogState}
|
|
|
|
onChange={handlePublishLogState}
|
|
|
|
/>
|
|
|
|
Publish Algorithm Logs into the Marketplace
|
|
|
|
</Label>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<button onClick={showDivAlgo}>Show/Hide Raw Algorithm</button>
|
|
|
|
<p style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
|
2020-03-30 12:34:27 +02:00
|
|
|
<Label htmlFor="jobStatus">Raw Algorithm</Label>
|
2020-03-30 12:02:07 +02:00
|
|
|
<textarea
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
rows="10"
|
|
|
|
value={textRawAlgo}
|
|
|
|
onChange={updateRawAlgoCode}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p>
|
2020-03-30 12:34:27 +02:00
|
|
|
<Label htmlFor="jobId">Compute Job ID</Label>
|
2020-03-30 12:02:07 +02:00
|
|
|
<code>{jobId}</code>
|
|
|
|
</p>
|
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
<button
|
|
|
|
onClick={startWithPublishedAlgo}
|
|
|
|
disabled={!ddoAssetId || !ddoAlgorithmId}
|
|
|
|
>
|
|
|
|
Order and start compute service with published algorithm
|
|
|
|
</button>
|
|
|
|
<button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
|
|
|
|
Order and start compute service with raw algorithm
|
|
|
|
</button>
|
|
|
|
</ComputeSection>
|
2020-03-30 12:34:27 +02:00
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
<ComputeSection>
|
2020-03-30 12:02:07 +02:00
|
|
|
<h3>4. Get Compute Job Status</h3>
|
|
|
|
|
2020-03-30 12:34:27 +02:00
|
|
|
<pre
|
|
|
|
id="jobStatus"
|
|
|
|
style={{ padding: '1rem', background: 'ghostwhite' }}
|
|
|
|
>
|
|
|
|
<code>{jobStatus}</code>
|
|
|
|
</pre>
|
2020-03-30 12:02:07 +02:00
|
|
|
|
2020-03-16 15:59:56 +01:00
|
|
|
<button onClick={getStatus} disabled={!jobId}>
|
|
|
|
Get Job Status
|
|
|
|
</button>
|
|
|
|
</ComputeSection>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function ComputeSection({ children }) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div
|
|
|
|
style={{
|
2020-03-30 12:02:07 +02:00
|
|
|
textAlign: 'left',
|
|
|
|
paddingBottom: '1rem',
|
|
|
|
maxWidth: '40rem',
|
|
|
|
margin: '1rem auto'
|
2020-03-16 15:59:56 +01:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</div>
|
2020-03-10 12:32:34 +01:00
|
|
|
<hr />
|
2020-01-28 13:01:39 +01:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
2020-03-30 12:02:07 +02:00
|
|
|
|
|
|
|
function Label({ children, ...props }) {
|
|
|
|
return (
|
|
|
|
<label style={{ display: 'block', fontSize: '0.8rem' }} {...props}>
|
|
|
|
{children}
|
|
|
|
</label>
|
|
|
|
)
|
|
|
|
}
|