Add front end for caching new collections.

app/_components/AddCollectionSelectServer.js

@@ -0,0 +1,22 @@
+
+'use server'
+
+export async function pollJob(jobId) {
+
+    let res = await fetch(`http://production-tools/plot-navigator/cache/job/${jobId}`)
+    let data = await res.json()
+    return data
+}
+
+export async function putCollection(repo, collectionName) {
+
+    let res = await fetch("http://production-tools/plot-navigator/cache",
+        {method: "PUT",
+         body: JSON.stringify({repo: repo, collection: collectionName}),
+         headers: {"Content-Type": "application/json"}}
+    )
+    let data = await res.json()
+
+    return data.jobId
+
+}

app/_components/addCollectionSelect.js

@@ -0,0 +1,48 @@
+'use client'
+
+import React from 'react';
+import { useState } from 'react'
+
+import {putCollection, pollJob} from './AddCollectionSelectServer.js'
+
+export default function AddCollectionSelect({repos}) {
+
+    const [repo, setRepo] = useState(repos[0]);
+    const [collectionName, setCollectionName] = useState("");
+    const [jobId, setJobId] = useState("");
+
+    const pollUpdates = async () => {
+        await new Promise(r => setTimeout(r, 5000));
+        console.log(`Polling ${jobId}`)
+        const res = await pollJob(jobId)
+        console.log(`Status ${res.status}`)
+        if(res.status == "in_progress") {
+            await pollUpdates()
+        }
+
+
+    }
+
+    const submitForm = async () => {
+        const jobId = await putCollection(repo, collectionName)
+        setJobId(jobId)
+        await new Promise(r => setTimeout(r, 5000));
+        await pollUpdates()
+
+    }
+
+    return (
+        <div className="p-2">
+            <select className="p-1 m-2" value={repo} onChange={(e) => {
+                  setRepo(e.target.value);
+            }}>
+                {repos.map(
+                    (repo) => <option value={repo} key={repo}>{repo}</option>
+                )}
+            </select>
+            <input className="m-2 border-2" type="text" size={40} value={collectionName} onChange={(e) => setCollectionName(e.target.value)} />
+            <button className="p-1 m-2" onClick={submitForm}>Add</button>
+        </div>
+    )
+}
+

app/addcollection/page.js

@@ -0,0 +1,23 @@
+
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+
+import AddCollectionSelect from '@/components/addCollectionSelect'
+
+export default async function AddCollection() {
+
+
+    const repoUrls = JSON.parse(process.env.REPO_URLS ?? "[]")
+
+    /* REPO_URLS */
+    return (
+        <div>
+            <div className="text-m m-5"><Link href={"/"}>&lt;- Back to collections</Link></div>
+            <div className="text-2xl m-5">Add a Collection:</div>
+            <AddCollectionSelect repos={Object.keys(repoUrls)} />
+        </div>
+
+    )
+
+}

app/layout.js

@@ -20,8 +20,9 @@ export default function RootLayout({ children }) {
           <div className="bg-black text-rubin-blue text-3xl p-2">Rubin Plot Navigator</div>
           <ul className="flex flex-row p-2">
             <li className="p-2 px-3 text-xl"><a href="/plot-navigator">Plots</a></li>
-            <li className="p-2 px-3 text-xl"><a href="/plot-navigator/metrics">Metrics</a></li>
-            <li className="p-2 px-3 text-xl"><a href="/plot-navigator/bokeh">Bokeh</a></li>
+            {(process.env.PAGE_LINKS ?? "").split(',').map((page) =>
+                <li className="p-2 px-3 text-xl" key={page}><a href={`/plot-navigator/${page.toLowerCase()}`}>{page}</a></li>
+            )}
           </ul>
         </div>
         {children}

env.local.example

@@ -3,5 +3,6 @@ BASE_URL=
 BUTLER_URL=
 BUCKET_NAME=
 BUCKET_URL=
+PAGE_LINKS=
 S3_KEY=
 S3_SECRET=