James keycloak integration

components/compose-web-app/modules/app_old.js

@@ -18,7 +18,7 @@
 */
 
 import { LibDetail } from "./library.js";
-import { FormLayout, SetupTable, TextArea } from "./util.js";
+import { FormLayout, SetupTable, TextArea, OwnerGroupSelector } from "./util.js";
 
 export async function BuildApplicationTable() {
     const response = await fetch('compose/v1alpha1/applications');
@@ -152,13 +152,16 @@ async function AppForm() {
         }
     }
 
+    const ownerGroupSelector = await OwnerGroupSelector();
+
     const form = await FormLayout(
         //
         // Form fields
         //
         [
             ['Application Name:', appName],
             ['Root Block:',       rootSelector],
+            ['Owner Group:', ownerGroupSelector]
         ],
 
         //
@@ -173,6 +176,7 @@ async function AppForm() {
                 body: JSON.stringify({
                     name      : appName.value,
                     rootblock : rootSelector.value,
+                    ownerGroup: ownerGroupSelector.value
                 }),
             });
 

components/compose-web-app/modules/backbone.js

@@ -18,7 +18,7 @@
 */
 
 import { toBackboneTab } from "../page.js";
-import { FormLayout, LayoutRow, PollObject, PollTable, SetupTable, TimeAgo, ConfirmDialog } from "./util.js";
+import { FormLayout, LayoutRow, PollObject, PollTable, SetupTable, TimeAgo, ConfirmDialog, OwnerGroupSelector } from "./util.js";
 
 export async function BuildBackboneTable() {
     const response = await fetch('api/v1alpha1/backbones');
@@ -69,12 +69,15 @@ async function BackboneForm() {
     let bbName = document.createElement('input');
     bbName.type = 'text';
 
+    const ownerGroupSelector = await OwnerGroupSelector();
+
     const form = await FormLayout(
         //
         // Form fields
         //
         [
             ['Backbone Name:', bbName],
+            ['Owner Group:', ownerGroupSelector],
         ],
 
         //
@@ -88,6 +91,7 @@ async function BackboneForm() {
                 },
                 body: JSON.stringify({
                     name : bbName.value,
+                    ownerGroup : ownerGroupSelector.value,
                 }),
             });
 
@@ -624,8 +628,9 @@ async function SiteForm(backbone) {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    name     : siteName.value,
-                    platform : platformSelector.value,
+                    name       : siteName.value,
+                    platform   : platformSelector.value,
+                    ownerGroup : backbone.ownergroup
                 }),
             });
 
@@ -683,8 +688,9 @@ async function AccessPointForm(div, backbone, siteId) {
         //
         async () => {
             let body = {
-                name     : apName.value,
-                kind     : kindSelector.value,
+                name       : apName.value,
+                kind       : kindSelector.value,
+                ownerGroup : backbone.ownergroup,
             };
             if (bindHost.value != '') {
                 body.bindhost = bindHost.value;
@@ -775,6 +781,7 @@ async function LinkForm(div, backbone, siteId) {
             let body = {
                 connectingsite : siteId,
                 cost           : cost.value,
+                ownerGroup     : backbone.ownergroup,
             };
             const response = await fetch(`api/v1alpha1/accesspoints/${peerSelector.value}/links`, {
                 method: 'POST',

components/compose-web-app/modules/deploy.js

@@ -19,7 +19,7 @@
 
 import { toDeploymentTab } from "../page.js";
 import { AppDetail } from "./app_old.js";
-import { FormLayout, SetupTable, TextArea } from "./util.js";
+import { FormLayout, SetupTable, TextArea, OwnerGroupSelector } from "./util.js";
 
 export async function BuildDeploymentTable() {
     const response = await fetch('compose/v1alpha1/deployments');
@@ -39,7 +39,7 @@ export async function BuildDeploymentTable() {
 
             anchor = document.createElement('a');
             anchor.setAttribute('href', '#');
-            anchor.addEventListener('click', () => { AppDetail(item.applicaion); });
+            anchor.addEventListener('click', () => { AppDetail(item.application); });
             anchor.textContent = item.appname;
             row.insertCell().appendChild(anchor);
 
@@ -158,6 +158,7 @@ async function DeploymentForm() {
 
     let appSelector = document.createElement('select');
     let vanSelector = document.createElement('select');
+    let ownerGroupSelector = await OwnerGroupSelector();
 
     //
     // Populate the application selector
@@ -186,6 +187,7 @@ async function DeploymentForm() {
         [
             ['Application:', appSelector],
             ['VAN:',         vanSelector],
+            ['Owner Group:', ownerGroupSelector],
         ],
 
         //
@@ -200,6 +202,7 @@ async function DeploymentForm() {
                 body: JSON.stringify({
                     app : appSelector.value,
                     van : vanSelector.value,
+                    ownerGroup: ownerGroupSelector.value,
                 }),
             });
 

components/compose-web-app/modules/library.js

@@ -25,7 +25,7 @@ import { LibraryHistory } from "./library-history.js";
 import { LibraryEditInterfaces } from "./library-interfaces.js";
 import { LibraryEditSimple } from "./library-simple.js";
 import { TabSheet } from "./tabsheet.js";
-import { FormLayout, LayoutRow, SetupTable, TextArea } from "./util.js";
+import { FormLayout, LayoutRow, SetupTable, TextArea, OwnerGroupSelector } from "./util.js";
 
 export async function BuildLibraryTable() {
     const response = await fetch('/compose/v1alpha1/library/blocks');
@@ -113,6 +113,8 @@ async function BlockForm(blockTypes, interfaceRoles) {
     composite.textContent = 'Composite';
     bodySelector.appendChild(composite);
 
+    const ownerGroupSelector = await OwnerGroupSelector();
+
     const form = await FormLayout(
         //
         // Form fields
@@ -122,6 +124,7 @@ async function BlockForm(blockTypes, interfaceRoles) {
             ['Block Type:',          btSelector],
             ['Provider (optional):', provider],
             ['Body Type:',           bodySelector],
+            ['Owner Group:',         ownerGroupSelector]
         ],
 
         //
@@ -139,6 +142,7 @@ async function BlockForm(blockTypes, interfaceRoles) {
                     type      : btSelector.value,
                     provider  : provider.value,
                     bodystyle : bodySelector.value,
+                    ownerGroup: ownerGroupSelector.value
                 }),
             });
             console.log('   fetch completed');

components/compose-web-app/modules/util.js

@@ -361,4 +361,48 @@ export function MultiSelectWithCheckbox(items) {
     }
 
     return layout;
+}
+
+export async function OwnerGroupSelector() {
+    let ownerGroupSelector = document.createElement('select');
+    ownerGroupSelector.id = 'ownerGroupSelector';
+
+    try {
+        const ownerGroupResult = await fetch('/api/v1alpha1/user/groups');
+        if (ownerGroupResult.ok) {
+            const ownerGroupList = await ownerGroupResult.json();
+
+            // Add a default/empty option
+            let defaultOption = document.createElement('option');
+            let publicOption = document.createElement('option');
+            defaultOption.textContent = '-- Select a group --';
+            defaultOption.value = '';
+            publicOption.textContent = 'public';
+            publicOption.value = 'public';
+            ownerGroupSelector.appendChild(defaultOption);
+            ownerGroupSelector.appendChild(publicOption);
+
+            // Add user's groups
+            for (const ownerGroup of ownerGroupList) {
+                let option = document.createElement('option');
+                option.textContent = ownerGroup.name;
+                option.value = ownerGroup.id;
+                ownerGroupSelector.appendChild(option);
+            }
+        } else {
+            // Handle error case
+            let errorOption = document.createElement('option');
+            errorOption.textContent = 'Error loading groups';
+            errorOption.disabled = true;
+            ownerGroupSelector.appendChild(errorOption);
+        }
+    } catch (error) {
+        console.error('Error fetching user groups:', error);
+        let errorOption = document.createElement('option');
+        errorOption.textContent = 'Error loading groups';
+        errorOption.disabled = true;
+        ownerGroupSelector.appendChild(errorOption);
+    }
+
+    return ownerGroupSelector;
 }

components/compose-web-app/modules/van.js

@@ -20,7 +20,7 @@
 import { InvitationsTab } from "./invitations.js";
 import { MembersTab } from "./members.js";
 import { TabSheet } from "./tabsheet.js";
-import { FormLayout, PollTable, SetupTable } from "./util.js";
+import { FormLayout, PollTable, SetupTable, OwnerGroupSelector } from "./util.js";
 import { ConfigTab } from "./vanconfig.js";
 import { DetailTab } from "./vandetail.js";
 
@@ -152,6 +152,8 @@ async function ExternalVanForm() {
     let vanName = document.createElement('input');
     vanName.type = 'text';
 
+    const ownerGroupSelector = await OwnerGroupSelector();
+
     let bbSelector = document.createElement('select');
     const bbResult = await fetch('/api/v1alpha1/backbones');
     const bbList   = await bbResult.json();
@@ -169,6 +171,7 @@ async function ExternalVanForm() {
         [
             ['VAN Name:', vanName],
             ['Backbone:', bbSelector],
+            ['Owner Group:', ownerGroupSelector],
         ],
 
         //
@@ -178,6 +181,7 @@ async function ExternalVanForm() {
             let body = {
                 name   : vanName.value,
                 tenant : 'false',
+                ownerGroup: ownerGroupSelector.value,
             };
             const response = await fetch(`api/v1alpha1/backbones/${bbSelector.value}/vans`, {
                 method: 'POST',
@@ -215,6 +219,8 @@ async function MultiTenantVanForm() {
     let vanName = document.createElement('input');
     vanName.type = 'text';
 
+    const ownerGroupSelector = await OwnerGroupSelector();
+
     let bbSelector = document.createElement('select');
     const bbResult = await fetch('/api/v1alpha1/backbones');
     const bbList   = await bbResult.json();
@@ -279,6 +285,7 @@ async function MultiTenantVanForm() {
             ['Backbone:',   bbSelector],
             ['Start Time:', startTimeGroup],
             ['End Time:',   endTimeGroup],
+            ['Owner Group:', ownerGroupSelector],
         ],
 
         //
@@ -288,6 +295,7 @@ async function MultiTenantVanForm() {
             let body = {
                 name   : vanName.value,
                 tenant : 'true',
+                ownerGroup: ownerGroupSelector.value,
             };
             if (!startNow.checked) {
                 body.starttime = startTime.value;