cc-backend/web/frontend/src/HistogramSelection.svelte

<script>
  import {
    Modal,
    ModalBody,
    ModalHeader,
    ModalFooter,
    Button,
    ListGroup,
    ListGroupItem,
  } from "@sveltestrap/sveltestrap";
  import { gql, getContextClient, mutationStore } from "@urql/svelte";

  export let cluster;
  export let metricsInHistograms;
  export let isOpen;

  let availableMetrics = ["cpu_load", "flops_any", "mem_used", "mem_bw"]; // 'net_bw', 'file_bw'
  let pendingMetrics = [...metricsInHistograms]; // Copy
  const client = getContextClient();

  const updateConfigurationMutation = ({ name, value }) => {
    return mutationStore({
      client: client,
      query: gql`
        mutation ($name: String!, $value: String!) {
          updateConfiguration(name: $name, value: $value)
        }
      `,
      variables: { name, value },
    });
  };

  function updateConfiguration(data) {
    updateConfigurationMutation({
      name: data.name,
      value: JSON.stringify(data.value),
    }).subscribe((res) => {
      if (res.fetching === false && res.error) {
        throw res.error;
        // console.log('Error on subscription: ' + res.error)
      }
    });
  }

  function closeAndApply() {
    metricsInHistograms = [...pendingMetrics]; // Set for parent
    isOpen = !isOpen;
    updateConfiguration({
      name: cluster
        ? `user_view_histogramMetrics:${cluster}`
        : "user_view_histogramMetrics",
      value: metricsInHistograms,
    });
  }
</script>

<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
  <ModalHeader>Select metrics presented in histograms</ModalHeader>
  <ModalBody>
    <ListGroup>
      {#each availableMetrics as metric (metric)}
        <ListGroupItem>
          <input type="checkbox" bind:group={pendingMetrics} value={metric} />
          {metric}
        </ListGroupItem>
      {/each}
    </ListGroup>
  </ModalBody>
  <ModalFooter>
    <Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
    <Button color="secondary" on:click={() => (isOpen = !isOpen)}>Close</Button>
  </ModalFooter>
</Modal>