gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

master #18

Merged
m.lettere merged 12 commits from master into prod 2024-06-14 12:47:54 +02:00
Conversation 0 Commits 12 Files Changed 6 +456 -48
6 changed files with 456 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
boot/d4s-boot.js
View File

@ -107,14 +107,14 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
startStateChecker() { startStateChecker() {
this.#interval = window.setInterval(() => { this.#interval = window.setInterval(() => {
if (this.#locked) { if (this.#locked) {
console.log("Still locked. Currently has " + this.#queue.length + " pending requests.") //console.log("Still locked. Currently has " + this.#queue.length + " pending requests.")
} else if (!this.authenticated) { } else if (!this.authenticated) {
window.alert("Not authorized!") window.alert("Not authorized!")
} else { } else {
if (this.#queue.length > 0) { if (this.#queue.length > 0) {
this.#keycloak.updateToken(30).then(() => { this.#keycloak.updateToken(30).then(() => {
if (this.#audience) { if (this.#audience) {
console.log("Checking entitlement for audience", this.#audience) //console.log("Checking entitlement for audience", this.#audience)
const audience = encodeURIComponent(this.#audience) const audience = encodeURIComponent(this.#audience)
return this.entitlement(audience) return this.entitlement(audience)
} else { } else {
@ -122,7 +122,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
} }
}).then(token => { }).then(token => {
console.log("Authorized. Token exp: " + this.expirationDate(this.parseJwt(token).exp)) //console.log("Authorized. Token exp: " + this.expirationDate(this.parseJwt(token).exp))
//transform all queued requests to fetches //transform all queued requests to fetches
//console.log("All pending requests to promises") //console.log("All pending requests to promises")
let promises = this.#queue.map(r => { let promises = this.#queue.map(r => {

6
ccp/index.html
View File

@ -2,6 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<script src="https://cdn.cloud-dev.d4science.org/boot/d4s-boot.js"></script>
<script src="js/methodlistcontroller.js"></script> <script src="js/methodlistcontroller.js"></script>
<script src="js/methodeditorcontroller.js"></script> <script src="js/methodeditorcontroller.js"></script>
<script src="js/inputwidgeteditorcontroller.js"></script> <script src="js/inputwidgeteditorcontroller.js"></script>
@ -16,10 +17,11 @@
<script src="https://cdn.cloud-dev.d4science.org/common/js/bss-min-1.2.6.js"></script> <script src="https://cdn.cloud-dev.d4science.org/common/js/bss-min-1.2.6.js"></script>
<script src="../storage/d4s-storage.js"></script> <script src="../storage/d4s-storage.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
</head> </head>
<body class="m-4"> <body class="m-4">
<d4s-boot-2 clientid="https://next.dev.d4science.org" context="%2Fgcube%2Fdevsec%2FCCP" gateway="next.dev.d4science.org" redirect-url="http://localhost:8080/ccp/index.html" url="https://accounts.dev.d4science.org/auth"> <script src="https://cdn.dev.d4science.org/boot/d4s-boot.js"></script> </d4s-boot-2> <d4s-boot-2 clientid="https://next.dev.d4science.org" context="%2Fgcube%2Fdevsec%2FCCP" gateway="next.dev.d4science.org" redirect-url="http://localhost:8080/ccp/index.html" url="https://accounts.dev.d4science.org/auth"></d4s-boot-2>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org" allow-edit="true" allow-execute="true" archive="true"></d4s-ccp-methodlist> <d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org" allow-edit="true" allow-execute="true" archive="true"></d4s-ccp-methodlist>
@ -32,7 +34,7 @@
<d4s-ccp-executionform serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionform> <d4s-ccp-executionform serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionform>
</div> </div>
<div class="col"> <div class="col">
<d4s-ccp-executionhistory archive="true" serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionhistory> <d4s-ccp-executionhistory allow-archive="true" serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionhistory>
</div> </div>
</div> </div>

17
ccp/js/executionformcontroller.js
View File

@ -343,6 +343,23 @@ class CCPExecutionForm extends HTMLElement{
} }
prepareFromExecution(exec){ prepareFromExecution(exec){
//if exec carries already full information then it comes from archive. Use this info instead of fetching.
if(exec.fullrequest && exec.fullmethod && exec.fullinfrastructure){
this.#data = exec.fullmethod
this.#method = this.#data.id
this.#boot.secureFetch(this.#serviceurl + "/infrastructures/" + exec.fullinfrastructure.id)
.then(resp=>{
if(resp.ok){
this.#data.executable = true
this.showMethod()
this.initInputValues(exec.fullrequest.inputs)
this.initOptionValues(exec.fullrequest)
}else throw("Unable to find infrastructure")
}).catch(err=>alert(err))
return
}
//fetch method and request and validate infra
let f1 = let f1 =
this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/method.json`) this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/method.json`)
.then(resp=>{ .then(resp=>{

462
ccp/js/executionhistorycontroller.js
View File

@ -3,6 +3,7 @@ class CCPExecutionHistory extends HTMLElement {
#boot = null; #boot = null;
#rootdoc = null; #rootdoc = null;
#serviceurl = null; #serviceurl = null;
#wsurl = null;
#broadcasturl = null; #broadcasturl = null;
#archive = null; #archive = null;
#data = []; #data = [];
@ -11,8 +12,11 @@ class CCPExecutionHistory extends HTMLElement {
#socket = null; #socket = null;
#interval = null; #interval = null;
#searchfield = null; #searchfield = null;
#fileupload = null; // #fileupload = null;
#archiveupload = null; // #archiveupload = null;
#ws = null;
#execfolderid = null
#archived = []
#messages = { #messages = {
"en" : { "en" : {
"search" : "Search", "search" : "Search",
@ -27,6 +31,7 @@ class CCPExecutionHistory extends HTMLElement {
"archive_execution_help" : "Archive whole execution to workspace folder", "archive_execution_help" : "Archive whole execution to workspace folder",
"archive_outputs_help" : "Archive only outputs to workspace folder", "archive_outputs_help" : "Archive only outputs to workspace folder",
"re-submit_help" : "Re submit this exact execution", "re-submit_help" : "Re submit this exact execution",
"re-submit" : "Re-submit",
"delete_help" : "Delete this execution", "delete_help" : "Delete this execution",
"generate_code" : "Generate code for", "generate_code" : "Generate code for",
"generate_code_help" : "Generate code that replicates this exact execution on a chosen programming language or runtime", "generate_code_help" : "Generate code that replicates this exact execution on a chosen programming language or runtime",
@ -36,7 +41,19 @@ class CCPExecutionHistory extends HTMLElement {
"direct_link_help" : "Navigate to the direct link for opening this exact execution in the exeuction form", "direct_link_help" : "Navigate to the direct link for opening this exact execution in the exeuction form",
"confirm_import_link" : "Please confirm importing of execution from link", "confirm_import_link" : "Please confirm importing of execution from link",
"confirm_import_file" : "Please confirm importing of execution from file", "confirm_import_file" : "Please confirm importing of execution from file",
"confirm_delete_execution" : "Please confirm deletion of this execution" "confirm_delete_execution" : "Please confirm deletion of this execution",
"confirm_delete_archived_execution" : "Please confirm deletion of this archived execution from your workspace.",
"confirm_archive_execution" : "Confirm archiving of this execution to workspace.",
"confirm_archive_outputs" : "Confirm archiving of outputs to workspace.",
"confirm_reexecution" : "Confirm resubmission of this execution",
"live_executions" : "Live executions",
"archived_executions" : "Archived executions",
"restore_execution_help" : "Restore this archived execution back to CCP",
"infrastructure_help" : "The infrastructure where this execution has been scheduled on",
"runtime_help" : "The runtime where this execution has been scheduled on",
"loading_archived_help" : "Loading archived executions from workspace. This can take a while.",
"err_reexecute" : "Unable to re-submit the execution. Please check console for further info",
"err_generate_code_for" : "Unable to generate code for "
} }
} }
@ -60,11 +77,21 @@ class CCPExecutionHistory extends HTMLElement {
this.#broadcasturl = this.#serviceurl.replace(/^http/, "ws") this.#broadcasturl = this.#serviceurl.replace(/^http/, "ws")
} }
this.#broadcasturl = this.#broadcasturl + "/ws/notification" this.#broadcasturl = this.#broadcasturl + "/ws/notification"
this.#archive = this.getAttribute("archive") this.#archive = this.getAttribute("allow-archive") && this.getAttribute("allow-archive").toLowerCase() === "true"
const iss = document.querySelector("d4s-boot-2").getAttribute("url");
const addresses = {
"https://accounts.dev.d4science.org/auth": "https://workspace-repository.dev.d4science.org/storagehub/workspace",
"https://accounts.pre.d4science.org/auth": "https://pre.d4science.org/workspace",
"https://accounts.d4science.org/auth": "https://api.d4science.org/workspace"
};
this.#wsurl = addresses[iss]
this.connectNewExecution() this.connectNewExecution()
this.connectBroadcastWithSubject() this.connectBroadcastWithSubject()
this.render() this.render()
this.refreshExecutions() this.refreshExecutions()
if(this.#archive) this.refreshArchivedExecutions();
} }
render(){ render(){
@ -72,6 +99,10 @@ class CCPExecutionHistory extends HTMLElement {
<link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link> <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style> <style>
.galaxy{
background-color: #2c3143;
color: yellow;
}
.lxd{ .lxd{
background-color: #dd4814; background-color: #dd4814;
color: white; color: white;
@ -126,7 +157,7 @@ class CCPExecutionHistory extends HTMLElement {
<svg viewBox="0 0 48 48"><path d="M7 40q-1.15 0-2.075-.925Q4 38.15 4 37V11q0-1.15.925-2.075Q5.85 8 7 8h14l3 3h17q1.15 0 2.075.925Q44 12.85 44 14v23q0 1.15-.925 2.075Q42.15 40 41 40Zm25-3h9V14h-9v4.6h4.6v4.6H32v4.6h4.6v4.6H32ZM7 37h20.4v-4.6H32v-4.6h-4.6v-4.6H32v-4.6h-4.6V14h-4.65l-3-3H7v26Zm0-23v-3 26-23Z"/></svg> <svg viewBox="0 0 48 48"><path d="M7 40q-1.15 0-2.075-.925Q4 38.15 4 37V11q0-1.15.925-2.075Q5.85 8 7 8h14l3 3h17q1.15 0 2.075.925Q44 12.85 44 14v23q0 1.15-.925 2.075Q42.15 40 41 40Zm25-3h9V14h-9v4.6h4.6v4.6H32v4.6h4.6v4.6H32ZM7 37h20.4v-4.6H32v-4.6h-4.6v-4.6H32v-4.6h-4.6V14h-4.65l-3-3H7v26Zm0-23v-3 26-23Z"/></svg>
</button> </button>
<button data-index="0" name="reexecute1" title="${this.getLabel("re-submit_help")}" class="btn btn-info ccp-toolbar-button ccp-toolbar-button-small"> <button data-index="0" name="reexecute1" title="${this.getLabel("re-submit_help")}" class="btn btn-info ccp-toolbar-button ccp-toolbar-button-small">
Re-submit ${this.getLabel("re-submit")}
</button> </button>
<button data-index="0" name="delete" title="${this.getLabel("delete_help")}" class="btn btn-danger ccp-toolbar-button ccp-toolbar-button-small"> <button data-index="0" name="delete" title="${this.getLabel("delete_help")}" class="btn btn-danger ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
@ -144,8 +175,8 @@ class CCPExecutionHistory extends HTMLElement {
</p> </p>
</summary> </summary>
<div class="d-flex flex-wrap" style="gap:3px; overflow:hidden"> <div class="d-flex flex-wrap" style="gap:3px; overflow:hidden">
<span style="text-overflow:ellipsis" class="badge badge-light text-info border border-info" name="infrastructure" alt="Infrastructure" title="Infrastructure"></span> <span style="text-overflow:ellipsis" class="badge badge-light text-info border border-info" name="infrastructure" alt="${this.getLabel("infrastructure_help")}" title="${this.getLabel("infrastructure_help")}"></span>
<span class="badge" name="runtime" alt="Runtime" title="Runtime"></span> <span class="badge" name="runtime" alt="${this.getLabel("runtime_help")}" title="${this.getLabel("runtime_help")}"></span>
</div> </div>
<div name="logterminalcontainer" style="margin:5px 0 5px 0"> <div name="logterminalcontainer" style="margin:5px 0 5px 0">
</div> </div>
@ -163,7 +194,7 @@ class CCPExecutionHistory extends HTMLElement {
<option value="application/x-sh+curl" data-ext="sh" title="Generate Bash script (curl)">Bash (curl)</option> <option value="application/x-sh+curl" data-ext="sh" title="Generate Bash script (curl)">Bash (curl)</option>
<option value="application/x-sh+wget" data-ext="sh" title="Generate Bash script (wget)">Bash (wget)</option> <option value="application/x-sh+wget" data-ext="sh" title="Generate Bash script (wget)">Bash (wget)</option>
</select> </select>
<button data-index="0" name="codegen" title="Generate code" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small"> <button data-index="0" name="codegen" title="${this.getLabel("generate_code_help")}" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 96 960 960"> <svg viewBox="0 96 960 960">
<path d="m384 721 43-43-101-102 101-101-43-43-144 144.5L384 721Zm192 0 145-145-144-144-43 43 101 101-102 102 43 43ZM180 936q-24.75 0-42.375-17.625T120 876V276q0-24.75 17.625-42.375T180 216h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840 276v600q0 24.75-17.625 42.375T780 936H180Zm0-60h600V276H180v600Zm300-617q14 0 24.5-10.5T515 224q0-14-10.5-24.5T480 189q-14 0-24.5 10.5T445 224q0 14 10.5 24.5T480 259ZM180 876V276v600Z"/> <path d="m384 721 43-43-101-102 101-101-43-43-144 144.5L384 721Zm192 0 145-145-144-144-43 43 101 101-102 102 43 43ZM180 936q-24.75 0-42.375-17.625T120 876V276q0-24.75 17.625-42.375T180 216h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840 276v600q0 24.75-17.625 42.375T780 936H180Zm0-60h600V276H180v600Zm300-617q14 0 24.5-10.5T515 224q0-14-10.5-24.5T480 189q-14 0-24.5 10.5T445 224q0 14 10.5 24.5T480 259ZM180 876V276v600Z"/>
</svg> </svg>
@ -182,6 +213,50 @@ class CCPExecutionHistory extends HTMLElement {
</li> </li>
</ul> </ul>
</template> </template>
<template id="ARCHIVED_EXECUTION_LIST_TEMPLATE">
<ul name="ccp_archived_execution_list" class="ccp-execution-list list-group border border-2">
<li class="ccp-method-item ccp-archived-execution-method-item list-group-item list-group-item-light">
<details name="level1">
<summary class="ccp-method-item-header noselect d-flex flex-wrap justify-content-between">
<h5 class="text-primary d-inline"></h5>
</summary>
<ul class="ccp-execution-list list-group" style="list-style:none">
<li class="ccp-execution-item ccp-archived-execution-item list-group-item-secondary my-2 p-2" draggable="true">
<span name="version" class="badge badge-primary"></span>
<span name="status" class="ml-1 badge"></span>
<div class="d-flex float-right" style="gap: 3px 5px;flex-wrap:wrap;">
<button data-index="0" name="reexecute2" title="${this.getLabel("re-submit_help")}" class="btn btn-info ccp-toolbar-button ccp-toolbar-button-small">
${this.getLabel("re-submit")}
</button>
<button name="restore" title="${this.getLabel("restore_execution_help")}" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path d="M480-250q78 0 134-56t56-134q0-78-56-134t-134-56q-38 0-71 14t-59 38v-62h-60v170h170v-60h-72q17-18 41-29t51-11q54 0 92 38t38 92q0 54-38 92t-92 38q-44 0-77-25.5T356-400h-62q14 65 65.5 107.5T480-250ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm0-80h480v-446L526-800H240v640Zm0 0v-640 640Z"/>
</svg>
</button>
<button name="delete" title="${this.getLabel("delete_help")}" class="btn btn-danger ccp-toolbar-button ccp-toolbar-button-small">
<svg viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path>
</svg>
</button>
</div>
<p name="createstart" class="font-weight-light font-italic" style="margin-top:revert">
<span name="created"></span>.
<span name="started" class="ml-1"></span>
</p>
<p name="message" class="font-weight-light font-italic" style="margin-top:revert">
<span name="updated"></span>:
<span name="message" class="ml-1"></span>
</p>
<div class="d-flex flex-wrap" style="gap:3px; overflow:hidden">
<span style="text-overflow:ellipsis" class="badge badge-light text-info border border-info" name="infrastructure" alt="${this.getLabel("infrastructure_help")}" title="${this.getLabel("infrastructure_help")}"></span>
<span class="badge" name="runtime" alt="${this.getLabel("runtime_help")}" title="${this.getLabel("runtime_help")}"></span>
</div>
</li>
</ul>
</details>
</li>
</ul>
</template>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@ -193,7 +268,7 @@ class CCPExecutionHistory extends HTMLElement {
<button name="refresh" class="btn btn-primary ccp-toolbar-button" title="${this.getLabel("refresh_help")}"> <button name="refresh" class="btn btn-primary ccp-toolbar-button" title="${this.getLabel("refresh_help")}">
<svg viewBox="0 0 48 48"><path d="M24 40q-6.65 0-11.325-4.675Q8 30.65 8 24q0-6.65 4.675-11.325Q17.35 8 24 8q4.25 0 7.45 1.725T37 14.45V8h3v12.7H27.3v-3h8.4q-1.9-3-4.85-4.85Q27.9 11 24 11q-5.45 0-9.225 3.775Q11 18.55 11 24q0 5.45 3.775 9.225Q18.55 37 24 37q4.15 0 7.6-2.375 3.45-2.375 4.8-6.275h3.1q-1.45 5.25-5.75 8.45Q29.45 40 24 40Z"/></svg> <svg viewBox="0 0 48 48"><path d="M24 40q-6.65 0-11.325-4.675Q8 30.65 8 24q0-6.65 4.675-11.325Q17.35 8 24 8q4.25 0 7.45 1.725T37 14.45V8h3v12.7H27.3v-3h8.4q-1.9-3-4.85-4.85Q27.9 11 24 11q-5.45 0-9.225 3.775Q11 18.55 11 24q0 5.45 3.775 9.225Q18.55 37 24 37q4.15 0 7.6-2.375 3.45-2.375 4.8-6.275h3.1q-1.45 5.25-5.75 8.45Q29.45 40 24 40Z"/></svg>
</button> </button>
<label name="fileupload" class="btn btn-primary ccp-toolbar-button m-0" title="${this.getLabel("import_file_help")}"> <!--label name="fileupload" class="btn btn-primary ccp-toolbar-button m-0" title="${this.getLabel("import_file_help")}">
<svg viewBox="0 96 960 960"><path d="M452 854h60V653l82 82 42-42-156-152-154 154 42 42 84-84v201ZM220 976q-24 0-42-18t-18-42V236q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554V236H220v680h520V422H551ZM220 236v186-186 680-680Z"/></svg> <svg viewBox="0 96 960 960"><path d="M452 854h60V653l82 82 42-42-156-152-154 154 42 42 84-84v201ZM220 976q-24 0-42-18t-18-42V236q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554V236H220v680h520V422H551ZM220 236v186-186 680-680Z"/></svg>
<input type="file" class="d-none" multiple="multiple"/> <input type="file" class="d-none" multiple="multiple"/>
</label> </label>
@ -204,7 +279,7 @@ class CCPExecutionHistory extends HTMLElement {
<path d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM324 606v-60h310v60H324Zm556-30h-60q0-58-40.833-99-40.834-41-99.167-41H510v-60h170q83 0 141.5 58.5T880 576ZM699 896V776H579v-60h120V596h60v120h120v60H759v120h-60Z"/> <path d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM324 606v-60h310v60H324Zm556-30h-60q0-58-40.833-99-40.834-41-99.167-41H510v-60h170q83 0 141.5 58.5T880 576ZM699 896V776H579v-60h120V596h60v120h120v60H759v120h-60Z"/>
</svg> </svg>
</button> </button>
</div> </div-->
</div> </div>
</div> </div>
</div> </div>
@ -212,14 +287,38 @@ class CCPExecutionHistory extends HTMLElement {
<div class="mb-3"> <div class="mb-3">
<input accept="application/zip" type="text" name="search" class="form-control" placeholder="Search"/> <input accept="application/zip" type="text" name="search" class="form-control" placeholder="Search"/>
</div> </div>
<div> ${
this.#archive ? `
<ul id="switch_executions" class="nav nav-tabs">
<li class="nav-item">
<a name="live_executions" class="nav-link active" href="#">${this.getLabel("live_executions")}</a>
</li>
<li class="nav-item">
<a name="archived_executions" class="nav-link" href="#">${this.getLabel("archived_executions")}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="live_executions">
<ul name="ccp_execution_list"></ul>
</div>
<div class="tab-pane fade" id="archived_executions">
<ul name="ccp_archived_execution_list"></ul>
</div>
</div>
` : `
<ul name="ccp_execution_list"></ul> <ul name="ccp_execution_list"></ul>
</div> `
}
</div> </div>
</div> </div>
` `
this.#rootdoc.querySelector("button[name=refresh]").addEventListener("click", ev=>{ this.#rootdoc.querySelector("button[name=refresh]").addEventListener("click", ev=>{
this.refreshExecutions() if(this.isShowingArchived()){
this.refreshArchivedExecutions()
}else{
this.refreshExecutions()
}
}) })
this.#searchfield = this.#rootdoc.querySelector("input[name=search]") this.#searchfield = this.#rootdoc.querySelector("input[name=search]")
@ -227,24 +326,55 @@ class CCPExecutionHistory extends HTMLElement {
this.updateList() this.updateList()
}) })
this.#fileupload = this.#rootdoc.querySelector("label[name=fileupload] > input[type=file]") if(this.#archive){
this.#fileupload.addEventListener("change", ev=>{ const linklive = this.#rootdoc.querySelector("a.nav-link[name=live_executions]")
const filelist = ev.target.files; const linkarch = this.#rootdoc.querySelector("a.nav-link[name=archived_executions]")
if (filelist.length > 0) { const tablive = this.#rootdoc.querySelector("div.tab-pane#live_executions")
const files = Array.prototype.slice.call(filelist) const tabarch = this.#rootdoc.querySelector("div.tab-pane#archived_executions")
this.importExecutions(files) this.#rootdoc.querySelector("#switch_executions").addEventListener("click", ev=>{
} const tgt = ev.target
}) if(tgt == linklive){
linklive.classList.add("active")
this.#archiveupload = this.#rootdoc.querySelector("button[name=archive]") linkarch.classList.remove("active")
this.#archiveupload.addEventListener("click", ev=>{ tablive.classList.add("show")
const link = ev.target.parentElement.querySelector("input").value tablive.classList.add("active")
if(link){ tabarch.classList.remove("show")
if(confirm(this.getLabel("confirm_import") + "?")){ tabarch.classList.remove("active")
this.fromArchiveFolder(link) }else if(tgt == linkarch){
linklive.classList.remove("active")
linkarch.classList.add("active")
tabarch.classList.add("show")
tabarch.classList.add("active")
tablive.classList.remove("show")
tablive.classList.remove("active")
} }
} ev.preventDefault();
}) ev.stopPropagation()
})
}
// this.#fileupload = this.#rootdoc.querySelector("label[name=fileupload] > input[type=file]")
// this.#fileupload.addEventListener("change", ev=>{
// const filelist = ev.target.files;
// if (filelist.length > 0) {
// const files = Array.prototype.slice.call(filelist)
// this.importExecutions(files)
// }
// })
// this.#archiveupload = this.#rootdoc.querySelector("button[name=archive]")
// this.#archiveupload.addEventListener("click", ev=>{
// const link = ev.target.parentElement.querySelector("input").value
// if(link){
// if(confirm(this.getLabel("confirm_import") + "?")){
// this.fromArchiveFolder(link)
// }
// }
// })
}
isShowingArchived(){
return this.#archive && this.#rootdoc.querySelector("#archived_executions").classList.contains("show")
} }
updateList(){ updateList(){
@ -409,11 +539,27 @@ class CCPExecutionHistory extends HTMLElement {
}).catch(err=>{ alert(err)}) }).catch(err=>{ alert(err)})
} }
reexecuteArchived(data, level){
this.#boot.secureFetch(`${this.#serviceurl}/executions/level/${level}`, {
method: "POST",
headers: {"Content-Type" : "application/json"},
body: JSON.stringify({ "request" : data.fullrequest, "method" : data.fullmethod, "infrastructure" : data.fullinfrastructure})
})
.then(reply =>{
if (!reply.ok) {
throw this.getLabel("err_reexecute")
}
return reply.json()
}).then(data=>{
this.refreshExecution(data.jobID)
}).catch(err=>{ alert(err)})
}
reexecute(id,level){ reexecute(id,level){
this.#boot.secureFetch(`${this.#serviceurl}/executions/${id}/level/${level}`, { method: "POST" }) this.#boot.secureFetch(`${this.#serviceurl}/executions/${id}/level/${level}`, { method: "POST" })
.then(reply =>{ .then(reply =>{
if (!reply.ok) { if (!reply.ok) {
throw "Unable to re-execute. Check console." throw this.getLabel("err_reexecute")
} }
return reply.json() return reply.json()
}).then(data=>{ }).then(data=>{
@ -444,7 +590,7 @@ class CCPExecutionHistory extends HTMLElement {
this.#boot.secureFetch(`${this.#serviceurl}/executions/${id}/code`, this.#boot.secureFetch(`${this.#serviceurl}/executions/${id}/code`,
{ method: "GET", headers : { "Accept" : mime} }).then(reply =>{ { method: "GET", headers : { "Accept" : mime} }).then(reply =>{
if (!reply.ok) { if (!reply.ok) {
throw "Unable to generate code for " + mime throw this.getLabel("err_generate_code_for") + mime
} }
return reply.blob() return reply.blob()
}).then(blob => { }).then(blob => {
@ -490,6 +636,104 @@ class CCPExecutionHistory extends HTMLElement {
} }
} }
async deleteArchiveFolder(id){
if(id){
await this.initWorkspace()
await this.#ws.deleteItem(id)
if(this.#archive) await this.refreshArchivedExecutions();
}
}
async initWorkspace(){
if(!this.#ws){
this.#ws = new D4SWorkspace(this.#wsurl, this.#boot)
}
if(!this.#execfolderid){
const rootws = await this.#ws.getWorkspace()
const ccpfolder = await this.#ws.findByName(rootws.id, "CCP")
if(ccpfolder.length === 1){
const execfolder = await this.#ws.findByName(ccpfolder[0].id, "executions")
if(execfolder.length === 1){
this.#execfolderid = execfolder[0].id
}
}
}
}
showLoading(el){
el.innerHTML = `
<div class="d-flex justify-content-center" title="${this.getLabel("loading_archived_help")}">
<style>
.spinning {
animation:spin 4s linear infinite;
}
@keyframes spin {
100% {
-webkit-transform: rotate(-360deg);
transform:rotate(-360deg);
}
}
</style>
<svg class="spinning" style="width:10%" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-160v-80h110l-16-14q-52-46-73-105t-21-119q0-111 66.5-197.5T400-790v84q-72 26-116 88.5T240-478q0 45 17 87.5t53 78.5l10 10v-98h80v240H160Zm400-10v-84q72-26 116-88.5T720-482q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16 14q49 49 71.5 106.5T800-482q0 111-66.5 197.5T560-170Z"/></svg>
<div>
`
}
async refreshArchivedExecutions(){
this.showLoading(this.#rootdoc.querySelector("ul[name=ccp_archived_execution_list]"))
await this.initWorkspace()
if(this.#execfolderid){
const folders = await this.#ws.listFolder(this.#execfolderid)
this.#archived = {}
for(let i=0; i < folders.length; i++){
const methodfolder = folders[i]
const executionfolders = await this.#ws.listFolder(methodfolder.id)
for(let j=0; j < executionfolders.length; j++){
const metadatafolder = await this.#ws.findByName(executionfolders[j].id, "metadata")
if(metadatafolder.length === 1){
//parse all metada content that is useful to build up an entry
const metadata = await this.#ws.download(metadatafolder[0].id, null, true)
const zip = new JSZip()
const req = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/request.json").async("string"))))
const status = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/jobStatus.json").async("string"))))
const meth = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/method.json").async("string"))))
const infra = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/infrastructure.json").async("string"))))
const parser = new DOMParser()
// Fasted way to get context is from prov-o. If it doesn't match the context in boot skip this execution
const provo = parser.parseFromString(await zip.loadAsync(metadata).then(z=>z.file("metadata/prov-o.xml").async("string")), "text/xml")
const context = provo.querySelector("entity[*|id='d4s:VRE']>value").textContent
if(context !== this.#boot.context && context.replaceAll("/", "%2F") !== this.#boot.context) continue;
//build entry from downloaded data
const entry = {
id : req.id,
status : status.status,
created : status.created,
started : status.started,
updated : status.updated,
message : status.message,
method : meth.title,
methodversion : meth.version,
infrastructure: infra.name,
infrastructuretype : infra.type,
ccpnote : req.inputs.ccpnote ? req.inputs.ccpnote : "",
runtime : req.inputs.ccpimage,
replicas : req.inputs.ccpreplicas ? req.inputs.ccpreplicas : 1,
href : `items/${executionfolders[j].id}/download`,
wsid : executionfolders[j].id,
fullrequest : req,
fullmethod : meth,
fullinfrastructure : infra
}
if(this.#archived[entry.method]) this.#archived[entry.method].push(entry);
else this.#archived[entry.method] = [entry]
}
}
}
}
BSS.apply(this.#archived_execution_list_bss, this.#rootdoc)
}
#execution_list_bss = { #execution_list_bss = {
template : "#EXECUTIOM_LIST_TEMPLATE", template : "#EXECUTIOM_LIST_TEMPLATE",
target : "ul[name=ccp_execution_list]", target : "ul[name=ccp_execution_list]",
@ -582,19 +826,19 @@ class CCPExecutionHistory extends HTMLElement {
this.export(id, "application/prov-o+xml", id + ".xml") this.export(id, "application/prov-o+xml", id + ".xml")
} }
if(ev.target.getAttribute("name") === "reexecute1"){ if(ev.target.getAttribute("name") === "reexecute1"){
if(window.confirm("Please confirm re-execution?")){ if(window.confirm(this.getLabel("confirm_reexecution"))){
const id = ev.currentTarget.getAttribute("data-index") const id = ev.currentTarget.getAttribute("data-index")
this.reexecute(id, 1) this.reexecute(id, 1)
} }
} }
if(ev.target.getAttribute("name") === "archive"){ if(ev.target.getAttribute("name") === "archive"){
if(confirm(" Please confirm archiving of execution to workspace folder?")){ if(confirm(this.getLabel("confirm_archive_execution"))){
const id = ev.currentTarget.getAttribute("data-index") const id = ev.currentTarget.getAttribute("data-index")
this.toArchiveFolder(id) this.toArchiveFolder(id)
} }
} }
if(ev.target.getAttribute("name") === "archiveoutputs"){ if(ev.target.getAttribute("name") === "archiveoutputs"){
if(confirm(" Please confirm archiving of execution outputs to workspace folder?")){ if(confirm(this.getLabel("confirm_archive_outputs"))){
const id = ev.currentTarget.getAttribute("data-index") const id = ev.currentTarget.getAttribute("data-index")
this.toOutputsArchiveFolder(id) this.toOutputsArchiveFolder(id)
} }
@ -686,7 +930,8 @@ class CCPExecutionHistory extends HTMLElement {
e.textContent = rt + (d.replicas && d.replicas !== "1" ? ' x ' + d.replicas : '') e.textContent = rt + (d.replicas && d.replicas !== "1" ? ' x ' + d.replicas : '')
const t = infratype.match(/docker/i) ? "docker" : null const t = infratype.match(/docker/i) ? "docker" : null
const t2 = !t && infratype.match(/lxd/i) ? "lxd" : t const t2 = !t && infratype.match(/lxd/i) ? "lxd" : t
e.classList.add(t2) const t3 = !t2 && infratype.match(/galaxy/i) ? "galaxy" : t
e.classList.add(t3)
} }
}, },
{ {
@ -737,5 +982,150 @@ class CCPExecutionHistory extends HTMLElement {
} }
] ]
} }
#archived_execution_list_bss = {
template : "#ARCHIVED_EXECUTION_LIST_TEMPLATE",
target : "ul[name=ccp_archived_execution_list]",
in : ()=>this,
recurse:[
{
target : "li.ccp-method-item",
"in" : (e,d)=>Object.keys(this.#archived),
recurse: [
{
target : "details[name=level1]",
apply : (e,d)=>{
e.alt = e.title = d
if(sessionStorage.getItem("arch_" + d) === "open") e.open = "open";
else e.removeAttribute("open");
},
on_toggle : ev=>{
if(ev.target.open){
sessionStorage.setItem("arch_" + ev.currentTarget.alt, 'open')
}else{
sessionStorage.removeItem("arch_" + ev.currentTarget.alt)
}
},
},
{
target : "summary.ccp-method-item-header h5",
apply : (e,d) => { e.textContent = d }
},
{
target : "li.ccp-execution-item",
"in" : (e,d)=>this.#archived[d],
apply : (e,d)=>{
e.setAttribute("data-index", d.id)
e.setAttribute("data-href", d.href)
e.setAttribute("data-wsid", d.wsid)
},
on_dragstart : ev=>{
ev.dataTransfer.effectAllowed = 'move'
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML)
ev.dataTransfer.setData('text/plain+ccpexecution', ev.currentTarget.getAttribute("data-index"))
ev.dataTransfer.setData('application/json+ccpexecution', JSON.stringify(ev.currentTarget.bss_input.data))
},
on_dragend : ev=>{
ev.preventDefault()
},
on_click: ev=>{
if(ev.target.getAttribute("name") === "restore"){
if(window.confirm(this.getLabel("confirm_restore_execution"))){
const href = ev.currentTarget.getAttribute("data-href")
this.fromArchiveFolder(href)
}
}else if(ev.target.getAttribute("name") === "delete"){
if(window.confirm(this.getLabel("confirm_delete_archived_execution"))){
const wsid = ev.currentTarget.getAttribute("data-wsid")
this.deleteArchiveFolder(wsid)
}
}else if(ev.target.getAttribute("name") === "reexecute2"){
if(window.confirm(this.getLabel("confirm_reexecution"))){
this.reexecuteArchived(ev.currentTarget.bss_input.data, 1)
}
}
},
recurse : [
{
target : "span[name=version]",
apply : (e,d)=>{
if(d.ccpnote){
e.textContent = `${d.ccpnote} (${d.methodversion})`
}else{
e.textContent = `${d.methodversion}`
}
}
},
{
target : "span[name=status]",
apply : (e,d)=>{
if(d.status){
const status = d.status
e.textContent = status
if (status === "running") e.classList.add("badge-primary");
else if (status === "successful") e.classList.add("badge-success");
else if (status === "failed") e.classList.add("badge-danger");
else e.classList.add("badge-secondary");
}
}
},
{
target : "span[name=created]",
apply : (e,d)=>{
if(d.created){
const dt = new Date(d.created)
e.textContent = `Accepted ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
}
}
},
{
target : "span[name=started]",
apply : (e,d)=>{
if(d.started){
const dt = new Date(d.started)
e.textContent = `Started ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
}
}
},
{
target : "span[name=updated]",
apply : (e,d)=>{
const dt = new Date(d.updated)
e.textContent = `Last update ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
}
},
{
target : "span[name=message]",
apply : (e,d)=>{
if(d.message){
e.textContent = d.message
}
}
},
{
target : "span[name=infrastructure]",
apply : (e,d)=>{
e.textContent = d.infrastructure
}
},
{
target : "span[name=runtime]",
apply : (e,d)=>{
const rt = d.runtime ? d.runtime : ""
const infratype = d.infrastructuretype ? d.infrastructuretype : ""
e.textContent = rt + (d.replicas && d.replicas !== "1" ? ' x ' + d.replicas : '')
const t = infratype.match(/docker/i) ? "docker" : null
const t2 = !t && infratype.match(/lxd/i) ? "lxd" : t
const t3 = !t2 && infratype.match(/galaxy/i) ? "galaxy" : t
e.classList.add(t3)
}
}
]
}
]
}
]
}
} }
window.customElements.define('d4s-ccp-executionhistory', CCPExecutionHistory); window.customElements.define('d4s-ccp-executionhistory', CCPExecutionHistory);

5
ccp/js/inputwidgetcontroller.js
View File

@ -709,7 +709,6 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
}) })
this.addEventListener("input", ev => { this.addEventListener("input", ev => {
ev.stopPropagation()
if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) { if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
this.value[Number(ev.target.getAttribute("data-index"))] = ev.target.value this.value[Number(ev.target.getAttribute("data-index"))] = ev.target.value
} }
@ -808,7 +807,7 @@ class CCPGeoInputWidgetController extends CCPBaseInputWidgetController {
<svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960"> <svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
<path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"/> <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"/>
</svg> </svg>
<div name="map" class="d-none position-absolute shadow border border-primary bg-light p-2" style="right:0;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;"> <div name="map" class="d-none position-absolute shadow border border-primary bg-light p-2" style="right:0;z-index:1000;width:100%;line-height:1.5rem;overflow:hidden;padding:5px;">
<div name="maptoolbar" class="mb-1" style="border-bottom: solid 1px gray;"> <div name="maptoolbar" class="mb-1" style="border-bottom: solid 1px gray;">
<div class="d-flex justify-content-between m-0"> <div class="d-flex justify-content-between m-0">
<div> <div>
@ -825,7 +824,7 @@ class CCPGeoInputWidgetController extends CCPBaseInputWidgetController {
</div> </div>
<small class="text-muted m-0">Draw and export geometry</small> <small class="text-muted m-0">Draw and export geometry</small>
</div> </div>
<div style="width:500px;height:500px;position:relative;"> <div style="width:100%;height:500px;position:relative;">
<style> <style>
div[name=internalmap]{ div[name=internalmap]{
width: 100%; width: 100%;

4
storage/d4s-storage.js
View File

@ -836,7 +836,7 @@ class D4SWorkspace {
if (uri) { if (uri) {
url += uri.startsWith('/') ? uri : '/' + uri; url += uri.startsWith('/') ? uri : '/' + uri;
} }
console.log("Invoking WS API with: " + url); //console.log("Invoking WS API with: " + url);
return this.#d4sboot.secureFetch(url, req) return this.#d4sboot.secureFetch(url, req)
.then(resp => { .then(resp => {
if (resp.ok) { if (resp.ok) {
@ -1021,7 +1021,7 @@ class D4SWorkspace {
tmplnk.click(); tmplnk.click();
document.body.removeChild(tmplnk); document.body.removeChild(tmplnk);
} else { } else {
console.log("Skipping local download"); //console.log("Skipping local download");
} }
return data; return data;
}).catch(err => { }).catch(err => {