Channels selector

kyma-project · Nov 16, 2023 · 314e91f · 314e91f
1 parent c824376
commit 314e91f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 21 deletions.
diff --git a/app/app.js b/app/app.js
@@ -2,9 +2,9 @@ var pods = []
 var groupVersions = {}
 const DEFAULT_CHANNEL = 'https://kyma-project.github.io/community-modules/latest.json'
 const CHANNELS = [
-  'https://kyma-project.github.io/community-modules/regular.json',
-  'https://kyma-project.github.io/community-modules/fast.json',
-  'https://kyma-project.github.io/community-modules/latest.json',
+  {name:'regular', url:'https://kyma-project.github.io/community-modules/regular.json'},
+  {name:'fast',url:'https://kyma-project.github.io/community-modules/fast.json'},
+  {name:'latest',url:'https://kyma-project.github.io/community-modules/latest.json'}
 ]
 const KYMA_PATH = '/apis/operator.kyma-project.io/v1beta2/namespaces/kyma-system/kymas/default'
 
@@ -16,13 +16,48 @@ async function apply(res) {
   let response = await fetch(path, { method: 'PATCH', headers: { 'content-type': 'application/apply-patch+yaml' }, body: JSON.stringify(res) })
   return response
 }
-async function openChannel(index) {
-  const channelUrl=CHANNELS[index]
+function channelDropdown() {
   const url = new URL(window.location);
-
-  url.searchParams.set("channel", channelUrl);
-  window.location=url
-
+  let channel = url.searchParams.get("channel") || DEFAULT_CHANNEL
+  let currentChannel = CHANNELS.find((ch)=>ch.url==channel) 
+  let channelName=channel
+  if (currentChannel) {
+    channelName=currentChannel.name
+  }
+  let div = document.getElementById("topButtons")
+  div.innerHTML=""
+  let a = document.createElement('a')
+  a.setAttribute('class','btn btn-secondary dropdown-toggle btn-sm')
+  a.setAttribute('role','button')
+  a.setAttribute('data-bs-toggle','dropdown')
+  a.setAttribute('aria-expanded','false')
+  a.textContent=channelName
+  let ul = document.createElement('a')
+  ul.setAttribute('class','dropdown-menu')
+  for (let ch of CHANNELS) {
+    if (ch.url!=channel) {
+      let li = document.createElement('li')
+      let a = document.createElement('a')
+      a.setAttribute('class','dropdown-item')
+      a.textContent=ch.name
+      a.addEventListener('click',()=>{
+        const url = new URL(window.location);
+        url.searchParams.set("channel", ch.url);
+        window.location=url
+      })
+      li.appendChild(a)
+      ul.appendChild(li)
+    }
+  }
+  let updateBtn = document.createElement('button')
+  updateBtn.setAttribute('class','btn btn-outline-primary btn-sm')
+  updateBtn.setAttribute('type','button')
+  updateBtn.textContent='Update status'
+  updateBtn.addEventListener('click',checkStatus)
+  div.appendChild(a)
+  div.appendChild(ul)
+  div.appendChild(updateBtn)
+  return div
 }
 
 async function applyModule(m) {
@@ -455,6 +490,7 @@ function renderNotManagedResources(list) {
   document.getElementById("unmanaged").innerHTML = list.join("<br/>")
 }
 
+channelDropdown()
 loadChannel()
   // .then(notManagedResources)
   // .then(renderNotManagedResources)
diff --git a/app/kyma.html b/app/kyma.html
@@ -7,6 +7,7 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+
   </head>
 
 <body class="p-3 m-0 border-0 bd-example m-1 border-0">
@@ -18,19 +19,10 @@
 
   </div>
   <br />
-  <div class="dropdown">
-    <a class="btn btn-secondary dropdown-toggle btn-sm" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-      Channel
-    </a>
-
-    <ul class="dropdown-menu">
-      <li><a class="dropdown-item" onclick="openChannel(0)"><small>regular</small></a></li>
-      <li><a class="dropdown-item" onclick="openChannel(1)"><small>fast</small></a></li>
-      <li><a class="dropdown-item" onclick="openChannel(2)"><small>latest</small></a></li>
-    </ul>
-    <button type="button" class="btn btn-outline-primary btn-sm" onclick="checkStatus()">Update status</button>
+  <div class="dropdown d-inline-flex gap-1" id="topButtons">
   </div>
   <br/>
+  <br/>
   <div id="modules" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
     The list of modules is loading. Please wait...
   </div>
@@ -65,7 +57,7 @@ <h1 class="modal-title fs-5" id="modalTitle">Modal title</h1>
   <script src="https://kyma-project.github.io/community-modules/app.js"></script>
 
   <!-- For local development replace the line above with this:  -->
-  <!-- <script src="app.js"></script>     -->
+  <!-- <script src="app.js"></script>     -->    
 
 </body>