Add iframe visuals from Kibana

osg-htc · Aug 28, 2024 · 3e4d9cf · 3e4d9cf
1 parent 233e554
commit 3e4d9cf
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 3 deletions.
diff --git a/registry/public.py b/registry/public.py
@@ -19,3 +19,11 @@ def public_projects():
 @bp.route("/projects/<project>/repositories")
 def public_project_repositories(project: str):
     return flask.render_template("/public/repositories.html", project=project)
+
+@bp.route("/projects/<project>/repositories/<repository>/tags")
+def public_project_repository_tags(project: str, repository: str):
+    return flask.render_template("/public/tags.html", project=project, repository=repository)
+
+@bp.route("/projects/<project>/repositories/<repository>/tags/<tag>")
+def public_project_repository_image(project: str, repository: str, tag: str):
+    return flask.render_template("/public/image.html", project=project, repository=repository, tag=tag)
diff --git a/registry/static/images/icons/download.svg b/registry/static/images/icons/download.svg
diff --git a/registry/static/images/icons/tags-white.svg b/registry/static/images/icons/tags-white.svg
diff --git a/registry/static/images/icons/tags.svg b/registry/static/images/icons/tags.svg
diff --git a/registry/static/images/icons/upload.svg b/registry/static/images/icons/upload.svg
diff --git a/registry/static/js/components/card.js b/registry/static/js/components/card.js
@@ -159,7 +159,7 @@ export const RepositoryCard = ({
     let [project, repository] = name.split("/")
 
     return (
-        h("a", {href: `https://hub.opensciencegrid.org/harbor/projects/${project_id}/repositories/${repository}`, className:"text-decoration-none"},
+        h("a", {href: `/public/projects/${project}/repositories/${repository}/tags`, className:"text-decoration-none"},
             h(
                 ImageCard,
                 {src: "/static/images/icons/Repo_Icon.svg", alt: "Building Graphic", className: "project-card  mb-1 mb-sm-2 p-3 rounded bg-light"},
@@ -208,3 +208,67 @@ export const RepositoryCard = ({
         )
     )
 }
+
+export const TagCard = ({
+  project,
+  repository,
+  digest,
+  pull_time,
+  push_time,
+  tags
+}) => {
+    let localePushTime = new Date(Date.parse(push_time)).toLocaleString("en-US")
+    let localePullTime = new Date(Date.parse(pull_time)).toLocaleString("en-US")
+
+    if(tags === null) {
+        return null
+    }
+
+    return (
+        h("a", {href: `/public/projects/${project}/repositories/${repository}/tags/${tags?.[0].name}`, className:"text-decoration-none"},
+            h(
+                ImageCard,
+                {src: "/static/images/icons/tags-white.svg", alt: "Tag Graphic", className: "project-card  mb-1 mb-sm-2 p-3 rounded bg-light"},
+                h("div", {className: "description"}, ...[
+                    h("div", {className: "row gx-2"}, ...[
+                        h("h4", {className: "col-12 col-md-auto fw-bold mb-1"}, digest.substring(0, 10)),
+                    ]),
+                    h("div", {className: "row gx-2"}, ...[
+                        ... push_time ? [h(ImageTextRow, {
+                            className: "col-auto",
+                            src: "/static/images/icons/upload.svg",
+                            alt: "Repository Graphic",
+                            tag: "h6",
+                            "data-bs-toggle": "tooltip",
+                            "data-bs-placement": "top",
+                            title: `Push Time: ${localePushTime}`,
+                            text: `Push Time: ${localePushTime}`
+                        })] : [],
+                    ]),
+                    h("div", {className: "row gx-2  text-truncate"}, ...[
+                        ... push_time ? [h(ImageTextRow, {
+                            className: "col-auto",
+                            src: "/static/images/icons/download.svg",
+                            alt: "Repository Graphic",
+                            tag: "h6",
+                            "data-bs-toggle": "tooltip",
+                            "data-bs-placement": "top",
+                            title: `Pull Time: ${localePullTime}`,
+                            text: `Pull Time: ${localePullTime}`
+                        })] : [],
+                    ]),
+                    h("div", {className: "row gx-2  text-truncate"}, ...[
+                        ... tags ? [h(ImageTextRow, {
+                            className: "col-auto",
+                            src: "/static/images/icons/tags.svg",
+                            alt: "Download Graphic",
+                            tag: "h6",
+                            title: `${tags.length} Tags`,
+                            text: `${tags.length} Tags: ${tags.reverse().map(x => x.name).join(", ")}`
+                        })] : [],
+                    ])
+                ])
+            )
+        )
+    )
+}
diff --git a/registry/templates/public/image.html b/registry/templates/public/image.html
@@ -0,0 +1,16 @@
+{% extends "layout/base.html" %}
+{% from "macros/layout/title.html" import title %}
+{% from "macros/card.html" import card %}
+{% block title %}SOTERIA: Public Projects{% endblock %}
+{% block page_class %}subpage{% endblock %}
+{% block body_class %}container{% endblock %}
+{% block body %}
+    <div class="row justify-content-center">
+        <div class="col-12 col-md-12 col-lg-11 col-xl-10 col-xxl-8">
+            {{ title("Tag Statistics") }}
+            <iframe src="https://atlas-kibana.mwt2.org:5601/s/soteria/app/dashboards?auth_provider_hint=anonymous1#/view/39fc9f20-4d9f-11ee-aeb0-9f90ba762c30?embed=true&_g=()&_a=(controlGroupInput:(chainingSystem:HIERARCHICAL,controlStyle:oneLine,ignoreParentSettings:(ignoreFilters:!f,ignoreQuery:!f,ignoreTimerange:!f,ignoreValidations:!f),panels:('0b9ed559-6ccf-4d20-aa66-129ac39538b6':(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),existsSelected:!t,fieldName:Hash,id:'0b9ed559-6ccf-4d20-aa66-129ac39538b6',selectedOptions:!(),singleSelect:!t,title:Hash),grow:!t,order:3,type:optionsListControl,width:medium),'68dae7ac-601b-4399-a607-9c9a10347225':(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),fieldName:Image_tag,id:'68dae7ac-601b-4399-a607-9c9a10347225',selectedOptions:!('{{ tag }}'),singleSelect:!t,title:Image_tag),grow:!t,order:2,type:optionsListControl,width:medium),'85da83db-b01d-49dc-af7b-b870a4d00ad8':(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),fieldName:Image_name,id:'85da83db-b01d-49dc-af7b-b870a4d00ad8',selectedOptions:!({{ repository }}),singleSelect:!t,title:Image_name),grow:!t,order:1,type:optionsListControl,width:medium),e05b51c0-a062-4d66-aec8-1a3eb62a07d1:(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),fieldName:Project,id:e05b51c0-a062-4d66-aec8-1a3eb62a07d1,selectedOptions:!({{ project }}),singleSelect:!t,title:Project),grow:!t,order:0,type:optionsListControl,width:medium))))&hide-filter-bar=true" height="600" width="800"></iframe>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+{% endblock %}
diff --git a/registry/templates/public/repositories.html b/registry/templates/public/repositories.html
@@ -9,6 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-12 col-md-12 col-lg-11 col-xl-10 col-xxl-8">
             {{ title(project + " Repositories") }}
+            <iframe src="https://atlas-kibana.mwt2.org:5601/s/soteria/app/dashboards?auth_provider_hint=anonymous1#/view/bdc195e0-4da4-11ee-aeb0-9f90ba762c30?embed=true&_g=()&_a=(controlGroupInput:(chainingSystem:HIERARCHICAL,controlStyle:oneLine,ignoreParentSettings:(ignoreFilters:!f,ignoreQuery:!f,ignoreTimerange:!f,ignoreValidations:!f),panels:('9719ad97-0c87-4708-9f20-77ec43f51b56':(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),fieldName:Project,id:'9719ad97-0c87-4708-9f20-77ec43f51b56',selectedOptions:!({{ project }}),title:Project),grow:!t,order:0,type:optionsListControl,width:medium),c794eb11-d9f1-45d3-9b04-79da547f29d7:(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),existsSelected:!f,fieldName:Image_name,id:c794eb11-d9f1-45d3-9b04-79da547f29d7,selectedOptions:!(),title:Image_name),grow:!t,order:1,type:optionsListControl,width:medium))))" height="600" width="100%"></iframe>
             <div id="repositories"></div>
         </div>
     </div>

diff --git a/registry/templates/public/tags.html b/registry/templates/public/tags.html
@@ -0,0 +1,50 @@
+{% extends "layout/base.html" %}
+{% from "macros/layout/title.html" import title %}
+{% from "macros/card.html" import card %}
+{% block title %}SOTERIA: Public Projects{% endblock %}
+{% block page_class %}subpage{% endblock %}
+{% block body_class %}container{% endblock %}
+{% block body %}
+    <div class="row justify-content-center">
+        <div class="col-12 col-md-12 col-lg-11 col-xl-10 col-xxl-8">
+            {{ title(project + "/" + repository) }}
+            <iframe src="https://atlas-kibana.mwt2.org:5601/s/soteria/app/dashboards?auth_provider_hint=anonymous1#/view/f3339290-4da5-11ee-aeb0-9f90ba762c30?embed=true&_g=()&_a=(controlGroupInput:(chainingSystem:HIERARCHICAL,controlStyle:oneLine,ignoreParentSettings:(ignoreFilters:!f,ignoreQuery:!f,ignoreTimerange:!f,ignoreValidations:!f),panels:('9719ad97-0c87-4708-9f20-77ec43f51b56':(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),fieldName:Project,id:'9719ad97-0c87-4708-9f20-77ec43f51b56',selectedOptions:!({{ project }}),title:Project),grow:!t,order:0,type:optionsListControl,width:medium),c794eb11-d9f1-45d3-9b04-79da547f29d7:(explicitInput:(dataViewId:bfb237db-54b3-450a-8558-866d0d871631,enhancements:(),existsSelected:!f,fieldName:Image_name,id:c794eb11-d9f1-45d3-9b04-79da547f29d7,selectedOptions:!({{ repository }}),title:Image_name),grow:!t,order:1,type:optionsListControl,width:medium))))&hide-filter-bar=true" height="600" width="100%"></iframe>
+            <div id="tags"></div>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+<script type="module" async>
+    import { h, Component, render } from 'https://cdn.skypack.dev/[email protected]';
+    import { TagCard } from "/static/js/components/card.js";
+    import { HarborList} from "/static/js/components/list.js";
+
+    const TagList = () => {
+
+        return (
+            h(HarborList, {
+                url: "/harbor/get/projects/{{ project }}/repositories/{{ repository }}/artifacts",
+                card: TagCard,
+                cardOptions: (data) => {
+                    console.log(data)
+                    return {
+                    href: `/public/projects/${data['name']}/repositories`,
+                    project: '{{ project }}',
+                    repository: '{{ repository }}',
+                    ...data
+                }},
+                pageSize:10,
+                paginatorOptions: {
+                    className: "pt-3"
+                },
+                sortOptions: {
+                    "": "Default",
+                    "-update_time": "Recently Updated"
+                }
+            })
+        )
+    }
+
+    render(h(TagList, {}), document.getElementById("tags"))
+</script>
+{% endblock %}