Skip to content
Snippets Groups Projects
Commit eafd5ead authored by Dmitry Romanov's avatar Dmitry Romanov
Browse files

Introduced view

parent 6ab68bba
No related branches found
No related tags found
1 merge request!2Draft: Resolve "Add artifacts viewer"
Show whitespace changes
Inline Side-by-side
artifacts/src/artifacts.js
+ 294
− 1
View file @ eafd5ead
...@@ -32,7 +32,300 @@ let artifacts = [ ...@@ -32,7 +32,300 @@ let artifacts = [
desc: "List of all calculated constants", desc: "List of all calculated constants",
job: "report", job: "report",
repo: "athena" repo: "athena"
} },
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view01_ev001_top.png", imagePdf: "images/view01_ev001_top.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view01_ev001.png", imagePdf: "images/view01_ev001.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view01_ev002_top.png", imagePdf: "images/view01_ev002_top.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view01_ev002.png", imagePdf: "images/view01_ev002.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view01_top.png", imagePdf: "images/view01_top.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view01.png", imagePdf: "images/view01.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev002a.png", imagePdf: "images/view02_ev002a.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev002b.png", imagePdf: "images/view02_ev002b.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev002c.png", imagePdf: "images/view02_ev002c.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev002d.png", imagePdf: "images/view02_ev002d.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev002e.png", imagePdf: "images/view02_ev002e.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev003a.png", imagePdf: "images/view02_ev003a.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev003b.png", imagePdf: "images/view02_ev003b.pdf"},
{ type: "image", job: "report", repo: "athena", tag: "", imageCategory: "main", path: "images/view02_ev003c.png", imagePdf: "images/view02_ev003c.pdf"},
]; ];
images/view02_ev003d.pdf
images/view02_ev003d.png
images/view02_ev003e.pdf
images/view02_ev003e.png
images/view02a.pdf
images/view02a.png
images/view02b.pdf
images/view02b.png
images/view02c.pdf
images/view02c.png
images/view02d.pdf
images/view02d.png
images/view02e.pdf
images/view02e.png
images/view03_ev002.pdf
images/view03_ev002.png
images/view03.pdf
images/view03.png
images/view06_ev001a.pdf
images/view06_ev001a.png
images/view06_ev001b.pdf
images/view06_ev001b.png
images/view06_ev001c.pdf
images/view06_ev001c.png
images/view06_ev001d.pdf
images/view06_ev001d.png
images/view06_ev001e.pdf
images/view06_ev001e.png
images/view06_ev001f.pdf
images/view06_ev001f.png
images/view06_ev002a.pdf
images/view06_ev002a.png
images/view06_ev002b.pdf
images/view06_ev002b.png
images/view06_ev002c.pdf
images/view06_ev002c.png
images/view06_ev002d.pdf
images/view06_ev002d.png
images/view06_ev002e.pdf
images/view06_ev002e.png
images/view06_ev002f.pdf
images/view06_ev002f.png
images/view06_ev003a.pdf
images/view06_ev003a.png
images/view06_ev003b.pdf
images/view06_ev003b.png
images/view06_ev003c.pdf
images/view06_ev003c.png
images/view06_ev003d.pdf
images/view06_ev003d.png
images/view06_ev003e.pdf
images/view06_ev003e.png
images/view06_ev003f.pdf
images/view06_ev003f.png
images/view06_ev004a.pdf
images/view06_ev004a.png
images/view06_ev004b.pdf
images/view06_ev004b.png
images/view06_ev004c.pdf
images/view06_ev004c.png
images/view06_ev004d.pdf
images/view06_ev004d.png
images/view06_ev004e.pdf
images/view06_ev004e.png
images/view06_ev004f.pdf
images/view06_ev004f.png
images/view06a.pdf
images/view06a.png
images/view06b.pdf
images/view06b.png
images/view06c.pdf
images/view06c.png
images/view06d.pdf
images/view06d.png
images/view06e.pdf
images/view06e.png
images/view06f.pdf
images/view06f.png
images/view07_ev002a.pdf
images/view07_ev002a.png
images/view07_ev002b.pdf
images/view07_ev002b.png
images/view07_ev003a.pdf
images/view07_ev003a.png
images/view07_ev003b.pdf
images/view07_ev003b.png
images/view07a.pdf
images/view07a.png
images/view07b.pdf
images/view07b.png
images/view11.pdf
images/view11.png
images/view11a.pdf
images/view11a.png
images/view12a0100.pdf
images/view12a0100.png
images/view12a0300.pdf
images/view12a0300.png
images/view12a0500.pdf
images/view12a0500.png
images/view12a0700.pdf
images/view12a0700.png
images/view12a0900.pdf
images/view12a0900.png
images/view12a1100.pdf
images/view12a1100.png
images/view12a1300.pdf
images/view12a1300.png
images/view12a1500.pdf
images/view12a1500.png
images/view12a1700.pdf
images/view12a1700.png
images/view12a1900.pdf
images/view12a1900.png
images/view13b.pdf
images/view13b.png
images/view14a0100.pdf
images/view14a0100.png
images/view14a0300.pdf
images/view14a0300.png
images/view14a0500.pdf
images/view14a0500.png
images/view14a0700.pdf
images/view14a0700.png
images/view14a0900.pdf
images/view14a0900.png
images/view14a1100.pdf
images/view14a1100.png
images/view14a1300.pdf
images/view14a1300.png
images/view14a1500.pdf
images/view14a1500.png
images/view14a1700.pdf
images/view14a1700.png
images/view14a1900.pdf
images/view14a1900.png
images/view15a0100.pdf
images/view15a0100.png
images/view15a0300.pdf
images/view15a0300.png
images/view15a0500.pdf
images/view15a0500.png
images/view15a0700.pdf
images/view15a0700.png
images/view15a0900.pdf
images/view15a0900.png
images/view15a1100.pdf
images/view15a1100.png
images/view15a1300.pdf
images/view15a1300.png
images/view15a1500.pdf
images/view15a1500.png
images/view15a1700.pdf
images/view15a1700.png
images/view15a1900.pdf
images/view15a1900.png
images/view20_endcapN.pdf
images/view20_endcapN.png
images/view20_ev001_endcapN.pdf
images/view20_ev001_endcapN.png
images/view20_ev001_top.pdf
images/view20_ev001_top.png
images/view20_ev001.pdf
images/view20_ev001.png
images/view20_ev002_endcapN.pdf
images/view20_ev002_endcapN.png
images/view20_ev002_top.pdf
images/view20_ev002_top.png
images/view20_ev002.pdf
images/view20_ev002.png
images/view20_top.pdf
images/view20_top.png
images/view20.pdf
images/view20.png
geo/calorimeters_geo.root
geo/detector_geo_full.root
geo/detector_geo.root
geo/dirc_only_geo.root
geo/inner_detector_geo.root
geo/inner_tracking_only_geo.root
geo/pid_only_geo.root
geo/tracking_only_geo.root
geo/vertex_only_geo.root
export default artifacts; export default artifacts;
\ No newline at end of file
artifacts/src/gitlabServer.js
+ 80
− 3
View file @ eafd5ead
...@@ -11,6 +11,7 @@ class GitlabRepository { ...@@ -11,6 +11,7 @@ class GitlabRepository {
this.projectId = projectId; this.projectId = projectId;
this.baseUrl = `${apiUrl}/projects/${projectId}`; this.baseUrl = `${apiUrl}/projects/${projectId}`;
} }
/** /**
* Gets all branches for a project. (Actually the first page only) * Gets all branches for a project. (Actually the first page only)
* *
...@@ -23,11 +24,12 @@ class GitlabRepository { ...@@ -23,11 +24,12 @@ class GitlabRepository {
let response = await fetch(`${this.baseUrl}/repository/branches?per_page=100`); let response = await fetch(`${this.baseUrl}/repository/branches?per_page=100`);
return await response.json(); return await response.json();
} }
/** /**
* Gets pipelines for a branch. Sorted by finish time (recent to old) * Gets pipelines for a branch. Sorted by finish time (recent to old)
* *
* @param {str} branch branch name * @param {str} branch branch name
* @returns * @returns pipelines array
*/ */
async getPipelinesForBranch(branch) { async getPipelinesForBranch(branch) {
console.log(`GitlabRepository ${this.projectId}: Loading pipelines for a branch ${branch}...`); console.log(`GitlabRepository ${this.projectId}: Loading pipelines for a branch ${branch}...`);
...@@ -36,17 +38,92 @@ class GitlabRepository { ...@@ -36,17 +38,92 @@ class GitlabRepository {
let pipelinesRequest = await fetch(`${this.baseUrl}/pipelines?ref=${branch}`); let pipelinesRequest = await fetch(`${this.baseUrl}/pipelines?ref=${branch}`);
return await pipelinesRequest.json(); return await pipelinesRequest.json();
} }
/**
*
* @returns
*/
async getLatestPipelineForBranch(branch) {
// Loading pipelines for a branch
let pipelinesRequest = await this.getPipelinesForBranch(branch);
if (pipelinesRequest.length == 0) {
console.log(`GitlabRepository ${this.projectId}: No pipelines found for the ${branch} branch`); // TODO throw error here
return null;
};
return pipelinesRequest[0]
}
/**
* Gets pipelines for a project. Sorted by finish time (recent to old)
*
* @returns pipelines array
*/
async getPipelines() {
console.log(`GitlabRepository ${this.projectId}: Loading pipelines`);
// The request is like:
// https://eicweb.phy.anl.gov/api/v4/projects/473/pipelines
let pipelinesRequest = await fetch(`${this.baseUrl}/pipelines?per_page=100`);
if(pipelinesRequest.status != 200) {
return null;
}
return await pipelinesRequest.json();
}
/**
* Gets all branches for a project. (Actually the first page only)
*
* @returns branches object future
*/
async getPipelineById(pipelineId) {
console.log(`GitlabRepository ${this.projectId}: Loading pipeline by ID: ${pipelineId}`);
// The request is like:
// https://eicweb.phy.anl.gov/api/v4/projects/473/pipelines/3453463
let pipelinesRequest = await fetch(`${this.baseUrl}/pipelines/${pipelineId}`);
if(pipelinesRequest.status != 200) {
return null;
}
return await pipelinesRequest.json();
}
/** /**
* Returns the first page of jobs for a given pipeline ID * Returns the first page of jobs for a given pipeline ID
* *
* @param {int} pipelineId Id of the pipeline to get jobs * @param {int} pipelineId Id of the pipeline to get jobs
* @returns * @returns
*/ */
async getJobs(pipelineId, branch) { async getJobs(pipelineId) {
console.log(`GitlabRepository ${this.projectId}: Loading jobs for a pipeline ${branch}...`); console.log(`GitlabRepository ${this.projectId}: Loading jobs for a pipeline ${pipelineId}...`);
let jobsRequest = await fetch(`${this.baseUrl}/pipelines/${pipelineId}/jobs?per_page=100`); let jobsRequest = await fetch(`${this.baseUrl}/pipelines/${pipelineId}/jobs?per_page=100`);
if(jobsRequest.status != 200) {
return null;
}
return await jobsRequest.json(); return await jobsRequest.json();
} }
/**
* Returns the job by pipelineId and name
*
* @param {int} pipelineId Id of the pipeline to get jobs
* @param {str} name name of the job
* @returns
*/
async getJob(pipelineId, name) {
console.log(`GitlabRepository ${this.projectId}: Looking for a job name ${name} in pipeline: ${pipelineId}...`);
let jobs = await this.getJobs(pipelineId);
for(let job of jobs) {
if (job.name == "report") {
return job;
}
}
return null;
}
} }
......
artifacts/src/index.html
+ 9
− 11
View file @ eafd5ead
...@@ -48,18 +48,16 @@ ...@@ -48,18 +48,16 @@
</div> </div>
</nav> </nav>
</header> </header>
<main id="mainField" style="margin: 0px; padding:0px; height: 100%;"> <main style="margin: 0px; padding:0px; height: 100%;">
<div class="album py-5 bg-light"> <div class="album py-5 bg-light">
<div class="container bg-light" > <div class="container bg-light" id="main-content">
<div class="row mb-4"> <div id="branches" class="row"></div>
<form id="branchesForm"> <div id="messages" class="row"></div>
<div class="col-6 flex-row" style="display: flex;"> <div class="row">
<select id="branches" name="br"class="form-select" aria-label=".form-select-lg example"></select> <div id="pipeline" class="col"></div>
<button input class="btn btn-primary" type="submit" value="Submit" style="margin-left: 1em;">Submit</button> <div id="job" class="col"></div>
</div> </div>
</form> <div id="images" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"></div>
</div>
<div id="images-id" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"></div>
</div> </div>
</div> </div>
</main> </main>
......
artifacts/src/index.js
+ 93
− 142
View file @ eafd5ead
import artifacts from "./artifacts"; import artifacts from "./artifacts";
import ArtifactStore from "./artifactStore"; import ArtifactStore from "./artifactStore";
import GitlabRepository from "./gitlabServer"; import GitlabRepository from "./gitlabServer";
import AppView from ".view";
function setSelectedBranch(branchName) { function setSelectedBranch(el, branchName) {
let branchOption = document.querySelector(`#branchesForm option[value="${branchName}"]`); let branchOption = el.querySelector(`option[value="${branchName}"]`);
branchOption.setAttribute("selected", "true"); branchOption.setAttribute("selected", "true");
return branchOption; return branchOption;
} }
...@@ -24,113 +25,20 @@ function findGetParameter(parameterName, defaultValue=null) { ...@@ -24,113 +25,20 @@ function findGetParameter(parameterName, defaultValue=null) {
return result; return result;
} }
async function renderBranches(branches) {
let branchSelectElement = document.querySelector(`#branches`);
branchSelectElement.innerHTML += `<option value="master">master</option>`
branches.forEach(branch=>{
branchSelectElement.innerHTML +=`<option value="${branch.name}">${branch.name}</option>`;
})
}
function renderGeoViewer(el, fileUrl) {
el.innerHTML = `
<iframe src="${fileUrl}" frameborder="0" onload="calcHeight(this)" style="background: #000;border: none;width: 100%;height: 100%;" height="100%" width="100%"></iframe>`
async function showArtifactsByJobId(artsDiv, artStore, jobId) {
let imageArts = artStore.getImageArtifacts();
imageArts.forEach(art=>{
let imgRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${jobId}/artifacts/raw/${art.path}`
let pdfRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${jobId}/artifacts/raw/${art.imagePdf}`
// TODO better image name than art.path! Like single file name
renderImage(artsDiv, art.path, art.desc, imgRef, pdfRef)
});
} }
function renderImage(el, name, desc, imgRef, pdfRef) {
el.innerHTML +=`
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Эскиз" preserveAspectRatio="xMidYMid slice" focusable="false">
<image x="0" y="0" width="100%" height="100%" href='${imgRef}'/>
</svg>
<div class="card-body">
<h1>${name}</h1>
<p class="card-text">${desc}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<!-- <button type="button" class="btn btn-sm btn-outline-secondary">watch</button> -->
<button type="button" class="btn btn-sm btn-outline-secondary"><a href='${pdfRef}' target="_blank">pdf</a></button>
</div>
</div>
</div>
</div>
</div>`;
}
function renderStatus(pipeline, job, link) {
el.innerHTML +=`<table class="table">
<thead>
<tr>
<th scope="col">№</th>
<th scope="col">pipline</th>
<th scope="col">status</th>
<th scope="col">link</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>${pipeline}</td>
<td>${job}</td>
<td>${link}</td>
</tr>
</tbody>
</table>`
}
/**
*
* @returns
*/
async function fetchBranches(gitlabServer, requestedBranch) {
console.log("hello");
let branches = await gitlabServer.getBranches();
let branchSelectElement = document.querySelector(`#branches`);
branchSelectElement.innerHTML += `<option value="master">master</option>`
for(let i=0; i<branches.length; i++) {
branchSelectElement.innerHTML +=`<option value="${branches[i].name}">${branches[i].name}</option>`;
}
console.log('branches loaded');
renderBranches(branches);
setSelectedBranch(requestedBranch); // <= хорошо
console.log(`Searching pipelines for ${requestedBranch}`);
let pipelinesRequest = await gitlabServer.getPipelinesForBranch(requestedBranch);
if (pipelinesRequest.length == 0) { async function pageRootGeometry() {
console.log(`No pipelines found for the ${requestedBranch} branch`);
return -1;
};
let pipelineId = pipelinesRequest[0].id;
console.log(pipelinesRequest[0], 'required pipeline');
let pipelineStatus = pipelinesRequest[0].status;
console.log('pipline status: ',pipelineStatus);
let pipelineLink = pipelinesRequest[0].web_url;
console.log('pipline web_url: ',pipelineLink);
console.log(`searching job name "report" in pipeline : ${pipelineId}`);
let jobsRequest = await gitlabServer.getJobs(pipelineId, requestedBranch);
for(let i=0; i<jobsRequest.length; i++) {
if (jobsRequest[i].name == "report") {
console.log("job: ", jobsRequest[i])
let jobId = jobsRequest[i].id
let jobStatus = jobsRequest[i].status;
console.log('job status: ',jobStatus);
return jobId, jobStatus;
}
}
renderStatus(pipelineStatus, jobStatus, pipelineGitlabUrl);
}
function processGeo() {
let artStore = new ArtifactStore(artifacts); let artStore = new ArtifactStore(artifacts);
let imagesDiv = document.getElementById("mainField"); let imagesDiv = document.getElementById("mainField");
...@@ -144,16 +52,48 @@ function processGeo() { ...@@ -144,16 +52,48 @@ function processGeo() {
let viewerUrl = `geo.htm?browser&file=${fileUrl}?job=report&item=default;1&opt=${options}&`; let viewerUrl = `geo.htm?browser&file=${fileUrl}?job=report&item=default;1&opt=${options}&`;
console.log(viewerUrl); console.log(viewerUrl);
//file=https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/geo/detector_geo.root //file=https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/geo/detector_geo.root
renderGeoViewer(imagesDiv, viewerUrl) renderGeoViewer(imagesDiv, viewerUrl);
}
async function showArtifactsByPipeline(pipeline, gitlabServer, view) {
if(!pipeline) {
showWarning(`Pipeline with id ${reqPlId} is not found on server`);
return;
}
view.renderPipeline(pipeline);
// pull job out of the server
let reportJob = await gitlabServer.getJob(pipeline.id, "report");
if (reportJob === null) {
renderWarning(artsDiv, `Error loading job "report" for pipeline ${pipeline.id}`);
return;
};
view.renderJob(reportJob);
// Show artifacts knowing jobId
view.showArtifactsByJobId(artStore, reportJob.id);
} }
function processIndex() { async function pageArtifactsByBranch() {
// Connect to artifacts and repository
let artStore = new ArtifactStore(artifacts); let artStore = new ArtifactStore(artifacts);
let gitlabServer = new GitlabRepository("https://eicweb.phy.anl.gov/api/v4", 473); let gitlabServer = new GitlabRepository("https://eicweb.phy.anl.gov/api/v4", 473);
let view = new AppView();
// Load branches
let branchSelect = document.querySelector(`#branches`);
let branches = await gitlabServer.getBranches();
// Render branches
renderBranches(branchSelect, branches); // Вывести все ветки
setSelectedBranch(branchSelect, branch); // Выбрать ту, которую мы смотрим
let imagesDiv = document.getElementById("images-id"); let imagesDiv = document.getElementById("images-id");
...@@ -162,42 +102,53 @@ function processIndex() { ...@@ -162,42 +102,53 @@ function processIndex() {
let branch = findGetParameter("br"); let branch = findGetParameter("br");
if(!branch) branch = "master"; if(!branch) branch = "master";
// //
fetchBranches(gitlabServer, branch).then((jobId) => { let pipeline = await gitlabServer.getLatestPipelineForBranch(branch);
if (jobId == -1) {
imagesDiv.innerHTML += `
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>No pipelines found for the branch</div>
</div>`
return;
};
let imageArts = artStore.getImageArtifacts(); showArtifactsByPipeline(pipeline, gitlabServer, view);
imageArts.forEach(art=>{
let imgRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${jobId}/artifacts/raw/${art.path}`
let pdfRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${jobId}/artifacts/raw/${art.imagePdf}`
// TODO better image name than art.path! Like single file name
renderImage(imagesDiv, art.path, art.desc, imgRef, pdfRef)
});
});
} }
async function pageArtifactsByPipelineId() {
// Connect to artifacts and repository
let artStore = new ArtifactStore(artifacts);
let gitlabServer = new GitlabRepository("https://eicweb.phy.anl.gov/api/v4", 473);
let view = new AppView();
// Requiested Pipeline ID
let reqPlId = findGetParameter("pid", "0");
window.onload = function() { // Show pipeline
let operation = findGetParameter("op", "index"); let pipeline = await gitlabServer.getPipelineById(reqPlId);
if(operation === "geo") { showArtifactsByPipeline(pipeline, gitlabServer, view);
processGeo();
} }
else {
processIndex();
async function pageTest() {
let imagesDiv = document.getElementById("images-id");
let url = "https://www.digitalphotomentor.com/photography/2018/05/famous-photographs-Dorothea.Lange_.1936-migrant-mother-750x975.jpg"
renderImage(imagesDiv, "Mother", "1936 Migrant mother", url, url);
} }
window.onload = function() {
const operation = findGetParameter("op", "index");
let pageGenerator = pageArtifactsByBranch;
switch (operation) {
case 'geo':
pageGenerator = pageRootGeometry;
break;
case 'pl':
pageGenerator = pageArtifactsByPipelineId;
break;
case 'test':
pageGenerator = pageTest;
break;
};
pageGenerator().then(()=>{
console.log("Done page generation!");
})
} }
\ No newline at end of file
artifacts/src/view.js 0 → 100644
+ 131
− 0
View file @ eafd5ead
/**
* Application view manipulation
*
*/
class AppView {
constructor(apiUrl, projectId) {
// artifacts container
this.cntDiv = document.getElementById("main-content");
this.msgDiv = document.getElementById("messages");
this.plDiv = document.getElementById("pipeline");
this.jobDiv = document.getElementById("job");
this.branchesDiv = document.getElementById("branches");
this.imagesDiv = document.getElementById("images");
this.apiUrl = apiUrl;
this.projectId = projectId;
this.baseUrl = `${apiUrl}/projects/${projectId}`;
}
renderBranches(branches) {
let options = `<option value="master">master</option>`;
branches.forEach(branch=>{
options +=`<option value="${branch.name}">${branch.name}</option>`;
})
this.branchesDiv.innerHTML = `
<div class="row mb-4">
<form id="branchesForm">
<div class="col-6 flex-row" style="display: flex;">
<select id="branches" name="br" class="form-select" aria-label=".form-select-lg example">
${options}
</select>
<button input class="btn btn-primary" type="submit" value="Submit" style="margin-left: 1em;">Submit</button>
</div>
</form>
</div>
`;
}
renderGeoViewer(fileUrl) {
this.cntDiv.innerHTML = `<iframe src="${fileUrl}" frameborder="0" onload="calcHeight(this)" style="background: #000;border: none;width: 100%;height: 100%;" height="100%" width="100%"></iframe>`;
}
renderImage(el, name, desc, imgRef, pdfRef) {
el.innerHTML +=`
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Эскиз" preserveAspectRatio="xMidYMid slice" focusable="false">
<image x="0" y="0" width="100%" height="100%" href='${imgRef}'/>
</svg>
<div class="card-body">
<h1>${name}</h1>
<p class="card-text">${desc}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<!-- <button type="button" class="btn btn-sm btn-outline-secondary">watch</button> -->
<button type="button" class="btn btn-sm btn-outline-secondary"><a href='${pdfRef}' target="_blank">pdf</a></button>
</div>
</div>
</div>
</div>
</div>`;
}
renderPipeline(el, pipeline) {
el.innerHTML += `
<div>
Pipeline <a href="${pipeline.web_url}" target="_blank">${pipeline.id}</a> status: ${pipeline.status}
</div>
`;
}
renderJob(el, job) {
el.innerHTML += `
<div>
Job <a href="${job.web_url}" target="_blank">${job.name}</a> status: ${job.status} arts expire at: ${job.artifacts_expire_at}
</div>
<div class="tr"></div>
`;
}
renderStatus(el, pipeline, job, link) {
el.innerHTML +=`<table class="table">
<thead>
<tr>
<th scope="col">№</th>
<th scope="col">pipline</th>
<th scope="col">status</th>
<th scope="col">link</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>${pipeline}</td>
<td>${job}</td>
<td>${link}</td>
</tr>
</tbody>
</table>`
}
renderWarning(text) {
}
renderError(el, text) {
el.innerHTML += `
<div class="alert alert-error d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Error:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>${text}</div>
</div>`;
}
showWarning(text) {
this.msgDiv.innerHTML += `
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>${text}</div>
</div>`;
}
}
export default AppView;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment