add independent config keys for nodeList

internal/api/rest.go

@@ -1419,7 +1419,7 @@ func (api *RestApi) updateConfiguration(rw http.ResponseWriter, r *http.Request)
 	rw.Header().Set("Content-Type", "text/plain")
 	key, value := r.FormValue("key"), r.FormValue("value")
 
-	fmt.Printf("REST > KEY: %#v\nVALUE: %#v\n", key, value)
+	// fmt.Printf("REST > KEY: %#v\nVALUE: %#v\n", key, value)
 
 	if err := repository.GetUserCfgRepo().UpdateConfig(key, value, repository.GetUserFromContext(r.Context())); err != nil {
 		http.Error(rw, err.Error(), http.StatusUnprocessableEntity)

web/frontend/src/config/AdminSettings.svelte

@@ -4,7 +4,7 @@
 
 <script>
   import { Row, Col } from "@sveltestrap/sveltestrap";
-  import { onMount } from "svelte";
+  import { onMount, getContext } from "svelte";
   import EditRole from "./admin/EditRole.svelte";
   import EditProject from "./admin/EditProject.svelte";
   import AddUser from "./admin/AddUser.svelte";
@@ -17,6 +17,8 @@
   let users = [];
   let roles = [];
 
+  const ccconfig = getContext("cc-config");
+
   function getUserList() {
     fetch("/config/users/?via-ldap=false&not-just-user=true")
       .then((res) => res.json())
@@ -54,6 +56,6 @@
   <Col>
     <EditProject on:reload={getUserList} />
   </Col>
-  <Options />
+  <Options config={ccconfig}/>
   <NoticeEdit {ncontent}/>
 </Row>

web/frontend/src/config/admin/Options.svelte

@@ -4,8 +4,13 @@
 
 <script>
   import { getContext, onMount } from "svelte";
-  import { Col, Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
+  import { Col, Card, CardBody, CardTitle, Button} from "@sveltestrap/sveltestrap";
+  import { fade } from "svelte/transition";
 
+  export let config;
+
+  let message;
+  let displayMessage;
   let scrambled;
 
   const resampleConfig = getContext("resampling");
@@ -23,6 +28,33 @@
       window.localStorage.removeItem("cc-scramble-names");
     }
   }
+
+  async function handleSettingSubmit(selector, target) {
+    let form = document.querySelector(selector);
+    let formData = new FormData(form);
+    try {
+      const res = await fetch(form.action, { method: "POST", body: formData });
+      if (res.ok) {
+        let text = await res.text();
+        popMessage(text, target, "#048109");
+      } else {
+        let text = await res.text();
+        throw new Error("Response Code " + res.status + "-> " + text);
+      }
+    } catch (err) {
+      popMessage(err, target, "#d63384");
+    }
+
+    return false;
+  }
+
+  function popMessage(response, restarget, rescolor) {
+    message = { msg: response, target: restarget, color: rescolor };
+    displayMessage = true;
+    setTimeout(function () {
+      displayMessage = false;
+    }, 3500);
+  }
 </script>
 
 <Col>
@@ -41,11 +73,58 @@
   </Card>
 </Col>
 
+<Col>
+  <Card class="h-100">
+    <form
+      id="node-paging-form"
+      method="post"
+      action="/frontend/configuration/"
+      class="card-body"
+      on:submit|preventDefault={() =>
+        handleSettingSubmit("#node-paging-form", "npag")}
+    >
+      <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
+      <CardTitle
+        style="margin-bottom: 1em; display: flex; align-items: center;"
+      >
+        <div>Node List Paging Type</div>
+        {#if displayMessage && message.target == "npag"}<div
+            style="margin-left: auto; font-size: 0.9em;"
+          >
+            <code style="color: {message.color};" out:fade
+              >Update: {message.msg}</code
+            >
+          </div>{/if}
+      </CardTitle>
+      <input type="hidden" name="key" value="node_list_usePaging" />
+      <div class="mb-3">
+        <div>
+          {#if config?.node_list_usePaging}
+            <input type="radio" id="nodes-true-checked" name="value" value="true" checked />
+          {:else}
+            <input type="radio" id="nodes-true" name="value" value="true" />
+          {/if}
+          <label for="true">Paging with selectable count of nodes.</label>
+        </div>
+        <div>
+          {#if config?.node_list_usePaging}
+            <input type="radio" id="nodes-false" name="value" value="false" />
+          {:else}
+            <input type="radio" id="nodes-false-checked" name="value" value="false" checked />
+          {/if}
+          <label for="false">Continuous scroll iteratively adding 10 nodes.</label>
+        </div>
+      </div>
+      <Button color="primary" type="submit">Submit</Button>
+    </form>
+  </Card>
+</Col>
+
 {#if resampleConfig}
   <Col> 
     <Card class="h-100">
       <CardBody>
-        <CardTitle class="mb-3">Metric Plot Resampling</CardTitle>
+        <CardTitle class="mb-3">Metric Plot Resampling Info</CardTitle>
         <p>Triggered at {resampleConfig.trigger} datapoints.</p>
         <p>Configured resolutions: {resampleConfig.resolutions}</p>
       </CardBody>

web/frontend/src/config/user/UserOptions.svelte

@@ -74,7 +74,7 @@
         <CardTitle
           style="margin-bottom: 1em; display: flex; align-items: center;"
         >
-          <div>Paging Type</div>
+          <div>Job List Paging Type</div>
           {#if displayMessage && message.target == "pag"}<div
               style="margin-left: auto; font-size: 0.9em;"
             >

web/frontend/src/systems/NodeList.svelte

@@ -28,8 +28,8 @@
   export let to = null;
 
   // Decouple from Job List Paging Params?
-  let usePaging = ccconfig.job_list_usePaging
+  let usePaging = ccconfig?.node_list_usePaging || false
-  let itemsPerPage = usePaging ? ccconfig.plot_list_jobsPerPage : 10;
+  let itemsPerPage = usePaging ? (ccconfig?.plot_list_nodesPerPage || 10) : 10;
   let page = 1;
   let paging = { itemsPerPage, page };
 
@@ -106,7 +106,7 @@
   // Decouple from Job List Paging Params?
   function updateConfiguration(value, page) {
     updateConfigurationMutation({
-      name: "plot_list_jobsPerPage",
+      name: "plot_list_nodesPerPage",
       value: value,
     }).subscribe((res) => {
       if (res.fetching === false && !res.error) {