fixed branches

artifacts/dist/index.bundle.js

@@ -46,7 +46,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _artifacts__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./artifacts */ \"./src/artifacts.js\");\n/* harmony import */ var _artifactStore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./artifactStore */ \"./src/artifactStore.js\");\n/* harmony import */ var _gitlabServer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./gitlabServer */ \"./src/gitlabServer.js\");\n/* harmony import */ var _view__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./view */ \"./src/view.js\");\n\r\n\r\n\r\n\r\n\r\nfunction setSelectedBranch(view, branchName) {\r\n    let branchOption = view.querySelector(`option[value=\"${branchName}\"]`);\r\n    branchOption.setAttribute(\"selected\", \"true\");      \r\n    return branchOption;\r\n  }\r\n\r\n\r\nfunction findGetParameter(parameterName, defaultValue=null) { \r\n    let result = null;\r\n    let tmp = [];\r\n    location.search\r\n      .substr(1)\r\n      .split(\"&\")\r\n      .forEach(function (item) {\r\n        tmp = item.split(\"=\");\r\n        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);\r\n    });\r\n    \r\n    if(!result) return defaultValue;\r\n    return result;\r\n  }\r\n\r\n\r\n\r\n\r\nasync function pageRootGeometry() {\r\n    let artStore = new _artifactStore__WEBPACK_IMPORTED_MODULE_1__.default(_artifacts__WEBPACK_IMPORTED_MODULE_0__.default);\r\n    let imagesDiv = document.getElementById(\"mainField\");\r\n    \r\n    // What branch we want?       \r\n    let branch = findGetParameter(\"br\"); \r\n    if(!branch) branch = \"master\"; \r\n\r\n    let fileUrl = 'https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/geo/detector_geo.root'\r\n    let options = 'clipxyz;transp30;zoom100;ROTY0;ROTZ0;trz100;trr0;ctrl;all'\r\n    let viewerUrl = `geo.htm?browser&file=${fileUrl}?job=report&item=default;1&opt=${options}&`;\r\n    console.log(viewerUrl);\r\n    //file=https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/geo/detector_geo.root\r\n    renderGeoViewer(imagesDiv, viewerUrl);\r\n}\r\n\r\nasync function showArtifactsByPipeline(pipeline ,gitlabServer, view, artStore) {\r\n    if(!pipeline) {\r\n        showWarning(`Pipeline with id ${reqPlId} is not found on server`);\r\n        return;\r\n    }\r\n\r\n    view.renderPipeline(pipeline);    \r\n          \r\n    // pull job out of the server\r\n    let reportJob = await gitlabServer.getJob(pipeline.id, \"report\");\r\n    // console.log(reportJob);\r\n\r\n    if (reportJob === null) {\r\n        view.renderWarning(`Error loading job \"report\" for pipeline ${pipeline.id}`);\r\n        return;\r\n    };\r\n\r\n    view.renderJob(reportJob);\r\n\r\n    // Show artifacts knowing jobId\r\n    let imageArts = artStore.getImageArtifacts();\r\n    imageArts.forEach(art=>{\r\n        let imgRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${reportJob.id}/artifacts/raw/${art.path}`\r\n        let pdfRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${reportJob.id}/artifacts/raw/${art.imagePdf}`\r\n        // TODO better image name than art.path! Like single file name\r\n        view.renderImage(art.path, art.desc, imgRef, pdfRef)\r\n    });\r\n}\r\n\r\nasync function pageArtifactsByBranch() {\r\n\r\n    // Connect to artifacts and repository\r\n    let artStore = new _artifactStore__WEBPACK_IMPORTED_MODULE_1__.default(_artifacts__WEBPACK_IMPORTED_MODULE_0__.default);\r\n    let gitlabServer = new _gitlabServer__WEBPACK_IMPORTED_MODULE_2__.default(\"https://eicweb.phy.anl.gov/api/v4\", 473);\r\n    let view = new _view__WEBPACK_IMPORTED_MODULE_3__.default();\r\n\r\n\r\n    // Load branches \r\n    let branchSelect = document.querySelector(`#branches`);\r\n\r\n    let branches = await gitlabServer.getBranches();\r\n\r\n    // Render branches\r\n    view.renderBranches(branches);     // Вывести все ветки\r\n    \r\n    let imagesDiv = document.getElementById(\"images-id\"); //где используем?\r\n    \r\n    // What branch we want?       \r\n    let branch = findGetParameter(\"br\"); \r\n    if(!branch) branch = \"master\"; \r\n\r\n    setSelectedBranch(branchSelect, branch);  // Выбрать ту, которую мы смотрим\r\n\r\n    // \r\n    let pipeline = await gitlabServer.getLatestPipelineForBranch(branch); \r\n    \r\n    showArtifactsByPipeline(pipeline, gitlabServer, view, artStore);\r\n}\r\n\r\nasync function pageArtifactsByPipelineId() {\r\n\r\n        // Connect to artifacts and repository\r\n        let artStore = new _artifactStore__WEBPACK_IMPORTED_MODULE_1__.default(_artifacts__WEBPACK_IMPORTED_MODULE_0__.default);\r\n        let gitlabServer = new _gitlabServer__WEBPACK_IMPORTED_MODULE_2__.default(\"https://eicweb.phy.anl.gov/api/v4\", 473);\r\n        let view = new _view__WEBPACK_IMPORTED_MODULE_3__.default();\r\n\r\n        // Requiested Pipeline ID\r\n        let reqPlId = findGetParameter(\"pid\", \"0\");     \r\n\r\n        // Show pipeline\r\n        let pipeline = await gitlabServer.getPipelineById(reqPlId);\r\n\r\n        showArtifactsByPipeline(pipeline, gitlabServer, view);\r\n}\r\n\r\nasync function pageTest() {\r\n\r\n    let imagesDiv = document.getElementById(\"images-id\"); \r\n    let url = \"https://www.digitalphotomentor.com/photography/2018/05/famous-photographs-Dorothea.Lange_.1936-migrant-mother-750x975.jpg\"\r\n    renderImage(imagesDiv, \"Mother\", \"1936 Migrant mother\", url, url);\r\n}\r\n\r\n\r\nwindow.onload = function() {\r\n    const operation = findGetParameter(\"op\", \"index\");\r\n    let pageGenerator = pageArtifactsByBranch;\r\n\r\n    switch (operation) {\r\n        case 'geo':\r\n            pageGenerator = pageRootGeometry;\r\n            break;\r\n        case 'pl':\r\n            pageGenerator = pageArtifactsByPipelineId;\r\n            break;\r\n        case 'test':\r\n            pageGenerator = pageTest;\r\n            break;\r\n    };\r\n\r\n    pageGenerator().then(()=>{\r\n        console.log(\"Done page generation!\");\r\n    })\r\n}\n\n//# sourceURL=webpack://artifactviewer/./src/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _artifacts__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./artifacts */ \"./src/artifacts.js\");\n/* harmony import */ var _artifactStore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./artifactStore */ \"./src/artifactStore.js\");\n/* harmony import */ var _gitlabServer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./gitlabServer */ \"./src/gitlabServer.js\");\n/* harmony import */ var _view__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./view */ \"./src/view.js\");\n\r\n\r\n\r\n\r\n\r\nfunction setSelectedBranch(view, branchName) {\r\n    let branchOption = view.querySelector(`option[value=\"${branchName}\"]`);\r\n    branchOption.setAttribute(\"selected\", \"true\");      \r\n    return branchOption;\r\n  }\r\n\r\n\r\nfunction findGetParameter(parameterName, defaultValue=null) { \r\n    let result = null;\r\n    let tmp = [];\r\n    location.search\r\n      .substr(1)\r\n      .split(\"&\")\r\n      .forEach(function (item) {\r\n        tmp = item.split(\"=\");\r\n        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);\r\n    });\r\n    \r\n    if(!result) return defaultValue;\r\n    return result;\r\n  }\r\n\r\n\r\n\r\n\r\nasync function pageRootGeometry() {\r\n    let artStore = new _artifactStore__WEBPACK_IMPORTED_MODULE_1__.default(_artifacts__WEBPACK_IMPORTED_MODULE_0__.default);\r\n    let imagesDiv = document.getElementById(\"mainField\");\r\n    \r\n    // What branch we want?       \r\n    let branch = findGetParameter(\"br\"); \r\n    if(!branch) branch = \"master\"; \r\n\r\n    let fileUrl = 'https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/geo/detector_geo.root'\r\n    let options = 'clipxyz;transp30;zoom100;ROTY0;ROTZ0;trz100;trr0;ctrl;all'\r\n    let viewerUrl = `geo.htm?browser&file=${fileUrl}?job=report&item=default;1&opt=${options}&`;\r\n    console.log(viewerUrl);\r\n    //file=https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/geo/detector_geo.root\r\n    renderGeoViewer(imagesDiv, viewerUrl);\r\n}\r\n\r\nasync function showArtifactsByPipeline(pipeline ,gitlabServer, view, artStore) {\r\n    console.log(pipeline);\r\n    if(!pipeline) {\r\n        view.showWarning(`Pipeline with id ${reqPlId} is not found on server`);\r\n        return;\r\n    }\r\n\r\n    view.renderPipeline(pipeline);    \r\n          \r\n    // pull job out of the server\r\n    let reportJob = await gitlabServer.getJob(pipeline.id, \"report\");\r\n\r\n    if (reportJob === null) {\r\n        view.renderWarning(`Error loading job \"report\" for pipeline ${pipeline.id}`);\r\n        return;\r\n    };\r\n\r\n    view.renderJob(reportJob);\r\n\r\n    // Show artifacts knowing jobId\r\n    let imageArts = artStore.getImageArtifacts();\r\n    imageArts.forEach(art=>{\r\n        let imgRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${reportJob.id}/artifacts/raw/${art.path}`\r\n        let pdfRef = `https://eicweb.phy.anl.gov/EIC/detectors/athena/-/jobs/${reportJob.id}/artifacts/raw/${art.imagePdf}`\r\n        // TODO better image name than art.path! Like single file name\r\n        view.renderImage(art.path, art.desc, imgRef, pdfRef)\r\n    });\r\n}\r\n\r\nasync function pageArtifactsByBranch() {\r\n\r\n    // Connect to artifacts and repository\r\n    let artStore = new _artifactStore__WEBPACK_IMPORTED_MODULE_1__.default(_artifacts__WEBPACK_IMPORTED_MODULE_0__.default);\r\n    let gitlabServer = new _gitlabServer__WEBPACK_IMPORTED_MODULE_2__.default(\"https://eicweb.phy.anl.gov/api/v4\", 473);\r\n    let view = new _view__WEBPACK_IMPORTED_MODULE_3__.default();\r\n\r\n\r\n    // Load branches \r\n    let branches = await gitlabServer.getBranches();\r\n    // Render branches\r\n    view.renderBranches(branches);     // Вывести все ветки\r\n       \r\n    // let imagesDiv = document.getElementById(\"images-id\"); //где используем?\r\n    \r\n    // What branch we want?       \r\n    let branch = findGetParameter(\"br\"); \r\n    if(!branch) branch = \"master\"; \r\n\r\n    let branchSelect = document.querySelector(`#branch`);\r\n\r\n    setSelectedBranch(branchSelect, branch);  // Выбрать ту, которую мы смотрим\r\n\r\n    let pipeline = await gitlabServer.getLatestPipelineForBranch(branch); \r\n    \r\n    showArtifactsByPipeline(pipeline, gitlabServer, view, artStore);\r\n}\r\n\r\nasync function pageArtifactsByPipelineId() {\r\n\r\n        // Connect to artifacts and repository\r\n        let artStore = new _artifactStore__WEBPACK_IMPORTED_MODULE_1__.default(_artifacts__WEBPACK_IMPORTED_MODULE_0__.default);\r\n        let gitlabServer = new _gitlabServer__WEBPACK_IMPORTED_MODULE_2__.default(\"https://eicweb.phy.anl.gov/api/v4\", 473);\r\n        let view = new _view__WEBPACK_IMPORTED_MODULE_3__.default();\r\n\r\n        // Requiested Pipeline ID\r\n        let reqPlId = findGetParameter(\"pid\", \"0\");\r\n        console.log(reqPlId);\r\n\r\n        // Show pipeline\r\n        let pipeline = await gitlabServer.getPipelineById(reqPlId);\r\n\r\n        showArtifactsByPipeline(pipeline, gitlabServer, view, artStore);\r\n}\r\n\r\nasync function pageTest() {\r\n\r\n    let imagesDiv = document.getElementById(\"images-id\"); \r\n    let url = \"https://www.digitalphotomentor.com/photography/2018/05/famous-photographs-Dorothea.Lange_.1936-migrant-mother-750x975.jpg\"\r\n    renderImage(imagesDiv, \"Mother\", \"1936 Migrant mother\", url, url);\r\n}\r\n\r\n\r\nwindow.onload = function() {\r\n    const operation = findGetParameter(\"op\", \"index\");\r\n    let pageGenerator = pageArtifactsByBranch;\r\n\r\n    switch (operation) {\r\n        case 'geo':\r\n            pageGenerator = pageRootGeometry;\r\n            break;\r\n        case 'pl':\r\n            pageGenerator = pageArtifactsByPipelineId;\r\n            break;\r\n        case 'test':\r\n            pageGenerator = pageTest;\r\n            break;\r\n    };\r\n\r\n    pageGenerator().then(()=>{\r\n        console.log(\"Done page generation!\");\r\n    })\r\n}\n\n//# sourceURL=webpack://artifactviewer/./src/index.js?");
 
 /***/ }),
 
@@ -56,7 +56,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _art
   \*********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/**\r\n * Application view manipulation\r\n *  \r\n */\r\nclass AppView {\r\n    constructor() {\r\n        // artifacts container\r\n        this.cntDiv = document.getElementById(\"main-content\");\r\n        this.msgDiv = document.getElementById(\"messages\");\r\n        this.plDiv = document.getElementById(\"pipeline\");\r\n        this.jobDiv = document.getElementById(\"job\");\r\n        this.branchesDiv = document.getElementById(\"branches\");\r\n        this.imagesDiv = document.getElementById(\"images\");\r\n        this.statusDiv = document.getElementById(\"status\");\r\n\r\n    }\r\n\r\n\r\n    renderBranches(branches) {\r\n        let options = `<option value=\"master\">master</option>`;\r\n\r\n        branches.forEach(branch=>{\r\n            options +=`<option value=\"${branch.name}\">${branch.name}</option>`;\r\n        })\r\n\r\n        this.branchesDiv.innerHTML = `\r\n            <div class=\"row mb-4\">\r\n            <form id=\"branchesForm\">\r\n            <select id=\"branches\" name=\"br\"class=\"form-select\" aria-label=\".form-select-lg example\">${options}</select>\r\n              <div class=\"col-6 flex-row\" style=\"display: flex;\">\r\n                <button input class=\"btn btn-primary\" type=\"submit\" value=\"Submit\" style=\"margin-left: 1em;\">Submit</button>\r\n              </div>\r\n            </form>\r\n            </div>\r\n        `;\r\n    }\r\n\r\n\r\n    renderGeoViewer(fileUrl) {    \r\n        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>`;\r\n    }\r\n\r\n\r\n    renderImage(name, desc, imgRef, pdfRef) {\r\n        this.imagesDiv.innerHTML +=`\r\n        <div class=\"col\">\r\n            <div class=\"card shadow-sm\">\r\n                <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\">\r\n                <image x=\"0\" y=\"0\" width=\"100%\" height=\"100%\"  href='${imgRef}'/>\r\n                </svg>       \r\n                <div class=\"card-body\">\r\n                    <h1>${name}</h1>\r\n                    <p class=\"card-text\">${desc}</p>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        <div class=\"btn-group\">\r\n                        <!-- <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">watch</button> -->\r\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"><a href='${pdfRef}' target=\"_blank\">pdf</a></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>`;\r\n    }\r\n\r\n    renderPipeline(pipeline) {\r\n        this.plDiv.innerHTML += `\r\n        <div>\r\n        Pipeline <a href=\"${pipeline.web_url}\" target=\"_blank\">${pipeline.id}</a> status: ${pipeline.status}\r\n        </div>\r\n        `;\r\n    }\r\n\r\n    renderJob(job) {\r\n        this.jobDiv.innerHTML += `\r\n        <div>\r\n        Job <a href=\"${job.web_url}\" target=\"_blank\">${job.name}</a> status: ${job.status} arts expire at: ${job.artifacts_expire_at}\r\n        </div>\r\n        <div class=\"tr\"></div>\r\n        `;\r\n        \r\n    }\r\n\r\n    renderWarning(text) {\r\n        \r\n    }\r\n\r\n    renderError(text) {\r\n        this.msgDiv.innerHTML += `\r\n            <div class=\"alert alert-error d-flex align-items-center\" role=\"alert\">\r\n                <svg class=\"bi flex-shrink-0 me-2\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"Error:\"><use xlink:href=\"#exclamation-triangle-fill\"/></svg>\r\n                <div>${text}</div>\r\n            </div>`;\r\n    }\r\n\r\n\r\n    showWarning(text) {\r\n        this.msgDiv.innerHTML += `\r\n            <div class=\"alert alert-warning d-flex align-items-center\" role=\"alert\">\r\n                <svg class=\"bi flex-shrink-0 me-2\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"Warning:\"><use xlink:href=\"#exclamation-triangle-fill\"/></svg>\r\n                <div>${text}</div>\r\n            </div>`;\r\n    }\r\n}\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AppView);\n\n//# sourceURL=webpack://artifactviewer/./src/view.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/**\r\n * Application view manipulation\r\n *  \r\n */\r\nclass AppView {\r\n    constructor() {\r\n        // artifacts container\r\n        this.cntDiv = document.getElementById(\"main-content\");\r\n        this.msgDiv = document.getElementById(\"messages\");\r\n        this.plDiv = document.getElementById(\"pipeline\");\r\n        this.jobDiv = document.getElementById(\"job\");\r\n        this.branchesDiv = document.getElementById(\"branches\");\r\n        this.imagesDiv = document.getElementById(\"images\");\r\n        this.statusDiv = document.getElementById(\"status\");\r\n\r\n    }\r\n\r\n\r\n    renderBranches(branches) {\r\n        let options = `<option value=\"master\">master</option>`;\r\n\r\n        branches.forEach(branch=>{\r\n            options +=`<option value=\"${branch.name}\">${branch.name}</option>`;\r\n        })\r\n\r\n        this.branchesDiv.innerHTML = `\r\n            <div class=\"row mb-4\">\r\n            <form id=\"branchesForm\">\r\n                <div class=\"col-6 flex-row\" style=\"display: flex;\">\r\n                <select id=\"branch\" name=\"br\" class=\"form-select\" aria-label=\".form-select-lg example\">\r\n                    ${options}\r\n                </select>\r\n                <button input class=\"btn btn-primary\" type=\"submit\" value=\"Submit\" style=\"margin-left: 1em;\">Submit</button>\r\n                </div>\r\n            </form>\r\n            </div>\r\n        `;\r\n    }\r\n\r\n\r\n    renderGeoViewer(fileUrl) {    \r\n        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>`;\r\n    }\r\n\r\n\r\n    renderImage(name, desc, imgRef, pdfRef) {\r\n        this.imagesDiv.innerHTML +=`\r\n        <div class=\"col\">\r\n            <div class=\"card shadow-sm\">\r\n                <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\">\r\n                <image x=\"0\" y=\"0\" width=\"100%\" height=\"100%\"  href='${imgRef}'/>\r\n                </svg>       \r\n                <div class=\"card-body\">\r\n                    <h1>${name}</h1>\r\n                    <p class=\"card-text\">${desc}</p>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        <div class=\"btn-group\">\r\n                        <!-- <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">watch</button> -->\r\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"><a href='${pdfRef}' target=\"_blank\">pdf</a></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>`;\r\n    }\r\n\r\n    renderPipeline(pipeline) {\r\n        this.plDiv.innerHTML += `\r\n        <div>\r\n        Pipeline <a href=\"${pipeline.web_url}\" target=\"_blank\">${pipeline.id}</a> status: ${pipeline.status}\r\n        </div>\r\n        `;\r\n    }\r\n\r\n    renderJob(job) {\r\n        this.jobDiv.innerHTML += `\r\n        <div>\r\n        Job <a href=\"${job.web_url}\" target=\"_blank\">${job.name}</a> status: ${job.status} arts expire at: ${job.artifacts_expire_at}\r\n        </div>\r\n        <div class=\"tr\"></div>\r\n        `;\r\n        \r\n    }\r\n\r\n    renderWarning(text) {\r\n        \r\n    }\r\n\r\n    renderError(text) {\r\n        this.msgDiv.innerHTML += `\r\n            <div class=\"alert alert-error d-flex align-items-center\" role=\"alert\">\r\n                <svg class=\"bi flex-shrink-0 me-2\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"Error:\"><use xlink:href=\"#exclamation-triangle-fill\"/></svg>\r\n                <div>${text}</div>\r\n            </div>`;\r\n    }\r\n\r\n\r\n    showWarning(text) {\r\n        this.msgDiv.innerHTML += `\r\n            <div class=\"alert alert-warning d-flex align-items-center\" role=\"alert\">\r\n                <svg class=\"bi flex-shrink-0 me-2\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"Warning:\"><use xlink:href=\"#exclamation-triangle-fill\"/></svg>\r\n                <div>${text}</div>\r\n            </div>`;\r\n    }\r\n}\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AppView);\n\n//# sourceURL=webpack://artifactviewer/./src/view.js?");
 
 /***/ })
 

artifacts/dist/index.html

@@ -88,7 +88,7 @@
       // A $( document ).ready() block.
       $( document ).ready(function() {
         console.log("Enabling select2")
-        $('#branches').select2();
+        $('#branch').select2();
       });      
     </script>
 

artifacts/src/index.html

@@ -88,7 +88,7 @@
       // A $( document ).ready() block.
       $( document ).ready(function() {
         console.log("Enabling select2")
-        $('#branches').select2();
+        $('#branch').select2();
       });      
     </script>
 

artifacts/src/index.js

@@ -45,8 +45,9 @@ async function pageRootGeometry() {
 }
 
 async function showArtifactsByPipeline(pipeline ,gitlabServer, view, artStore) {
+    console.log(pipeline);
     if(!pipeline) {
-        showWarning(`Pipeline with id ${reqPlId} is not found on server`);
+        view.showWarning(`Pipeline with id ${reqPlId} is not found on server`);
         return;
     }
 
@@ -54,7 +55,6 @@ async function showArtifactsByPipeline(pipeline ,gitlabServer, view, artStore) {
           
     // pull job out of the server
     let reportJob = await gitlabServer.getJob(pipeline.id, "report");
-    // console.log(reportJob);
 
     if (reportJob === null) {
         view.renderWarning(`Error loading job "report" for pipeline ${pipeline.id}`);
@@ -82,22 +82,20 @@ async function pageArtifactsByBranch() {
 
 
     // Load branches 
-    let branchSelect = document.querySelector(`#branches`);
-
     let branches = await gitlabServer.getBranches();
-
     // Render branches
     view.renderBranches(branches);     // Вывести все ветки
        
-    let imagesDiv = document.getElementById("images-id"); //где используем?
+    // let imagesDiv = document.getElementById("images-id"); //где используем?
     
     // What branch we want?       
     let branch = findGetParameter("br"); 
     if(!branch) branch = "master"; 
 
+    let branchSelect = document.querySelector(`#branch`);
+
     setSelectedBranch(branchSelect, branch);  // Выбрать ту, которую мы смотрим
 
-    // 
     let pipeline = await gitlabServer.getLatestPipelineForBranch(branch); 
     
     showArtifactsByPipeline(pipeline, gitlabServer, view, artStore);
@@ -112,11 +110,12 @@ async function pageArtifactsByPipelineId() {
 
         // Requiested Pipeline ID
         let reqPlId = findGetParameter("pid", "0");
+        console.log(reqPlId);
 
         // Show pipeline
         let pipeline = await gitlabServer.getPipelineById(reqPlId);
 
-        showArtifactsByPipeline(pipeline, gitlabServer, view);
+        showArtifactsByPipeline(pipeline, gitlabServer, view, artStore);
 }
 
 async function pageTest() {

artifacts/src/view.js

@@ -27,7 +27,7 @@ class AppView {
             <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">
+                <select id="branch" 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>