intermediate save

- DOES NOT COMPILE

web/frontend/src/HistogramSelection.svelte

@@ -0,0 +1,73 @@
+<script>
+    import { Modal, ModalBody, ModalHeader, ModalFooter,
+             Button, ListGroup, ListGroupItem, Icon } from 'sveltestrap'
+    import { gql, getContextClient , mutationStore } from '@urql/svelte'
+
+    export let cluster
+    export let availableMetrics
+    export let metricsInHistograms
+
+    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 }
+        })
+    }
+
+    let isHistogramConfigOpen = false
+
+    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)
+            }
+        })
+    }
+</script>
+
+<Button outline
+    on:click={() => (isHistogramConfigOpen = true)}>
+    <Icon name=""/>
+    Select Histograms
+</Button>
+
+<Modal isOpen={isHistogramConfigOpen}
+    toggle={() => (isHistogramConfigOpen = !isHistogramConfigOpen)}>
+    <ModalHeader>
+        Select metrics presented in histograms
+    </ModalHeader>
+    <ModalBody>
+        <ListGroup>
+            <!-- <li class="list-group-item">
+                <input type="checkbox" bind:checked={pendingShowFootprint}> Show Footprint
+            </li>
+            <hr/> -->
+            {#each availableMetrics as metric (metric)}
+                <ListGroupItem>
+                    <input type="checkbox" bind:group={metricsInHistograms}
+                        value={metric}
+                        on:change={() => updateConfiguration({
+                            name: cluster ? `user_view_histogramMetrics:${cluster}` : 'user_view_histogramMetrics',
+                            value: metricsInHistograms
+                        })} />
+
+                    {metric}
+                </ListGroupItem>
+            {/each}
+        </ListGroup>
+    </ModalBody>
+    <ModalFooter>
+        <Button color="primary"
+            on:click={() => (isHistogramConfigOpen = false)}>
+            Close
+        </Button>
+    </ModalFooter>
+</Modal>

web/frontend/src/Status.root.svelte

@@ -63,6 +63,8 @@
                 option.key == ccconfig.status_view_selectedTopUserCategory
         );
 
+    let metricsInHistograms = ccconfig[`status_view_histogramMetrics:${cluster}`] || ccconfig.status_view_histogramMetrics
+
     const client = getContextClient();
     $: mainQuery = queryStore({
         client: client,

web/frontend/src/User.root.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount, getContext } from 'svelte'
     import { init, convert2uplot } from './utils.js'
-    import { Table, Row, Col, Button, Icon, Card, Spinner, Input } from 'sveltestrap'
+    import { Table, Row, Col, Button, Icon, Card, Spinner } from 'sveltestrap'
     import { queryStore, gql, getContextClient } from '@urql/svelte'
     import Filters from './filters/Filters.svelte'
     import JobList from './joblist/JobList.svelte'
@@ -9,11 +9,14 @@
     import Refresher from './joblist/Refresher.svelte'
     import Histogram from './plots/Histogram.svelte'
     import MetricSelection from './MetricSelection.svelte'
+    import HistogramSelection from './HistogramSelection.svelte'
+    import PlotTable from './PlotTable.svelte'
     import { scramble, scrambleNames } from './joblist/JobInfo.svelte'
 
     const { query: initq } = init()
 
     const ccconfig = getContext('cc-config')
+    // const metricConfig = getContext('metrics')
 
     export let user
     export let filterPresets
@@ -25,21 +28,23 @@
     let metrics = ccconfig.plot_list_selectedMetrics, isMetricsSelectionOpen = false
     let w1, w2, histogramHeight = 250
     let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
+    let metricsInHistograms = ccconfig[`user_view_histogramMetrics:${cluster}`] || ccconfig.user_view_histogramMetrics
 
     const client = getContextClient();
     $: stats = queryStore({
         client: client,
         query: gql`
-            query($jobFilters: [JobFilter!]!) {
-            jobsStatistics(filter: $jobFilters) {
+            query($jobFilters: [JobFilter!]!, $metricsInHistograms: [String!]!) {
+            jobsStatistics(filter: $jobFilters, metrics: $metricsInHistograms) {
                 totalJobs
                 shortJobs
                 totalWalltime
                 totalCoreHours
                 histDuration { count, value }
                 histNumNodes { count, value }
+                histMetrics  { metric, data { count, value } }
             }}`,
-        variables: { jobFilters }
+        variables: { jobFilters, metricsInHistograms}
     })
 
     onMount(() => filterComponent.update())
@@ -68,6 +73,11 @@
             on:click={() => (isMetricsSelectionOpen = true)}>
             <Icon name="graph-up"/> Metrics
         </Button>
+
+        <HistogramSelection
+        bind:cluster={selectedCluster}
+        bind:availableMetrics={metrics}
+        bind:metricsInHistograms={metricsInHistograms}/>
     </Col>
     <Col xs="auto">
         <Filters
@@ -159,6 +169,29 @@
         </div>
     {/if}
 </Row>
+<Row>
+    <Col>
+        <PlotTable
+            let:item
+            let:width
+            renderFor="analysis"
+            items={$stats.data.jobsStatistics[0].hostMetrics}>
+
+            {item}
+
+            <!-- <Histogram
+                data={convert2uplot(item.bins)}
+                width={width} height={250}
+                title="Average Distribution of '{item.metric}'"
+                xlabel={`${item.metric} bin maximum [${(metricConfig(selectedCluster, item.metric)?.unit?.prefix ? metricConfig(selectedCluster, item.metric)?.unit?.prefix : '') +
+                                                   (metricConfig(selectedCluster, item.metric)?.unit?.base   ? metricConfig(selectedCluster, item.metric)?.unit?.base   : '')}]`}
+                xunit={`${(metricConfig(selectedCluster, item.metric)?.unit?.prefix ? metricConfig(selectedCluster, item.metric)?.unit?.prefix : '') +
+                          (metricConfig(selectedCluster, item.metric)?.unit?.base   ? metricConfig(selectedCluster, item.metric)?.unit?.base   : '')}`}
+                ylabel="Normalized Hours"
+                yunit="Hours"/> -->
+        </PlotTable>
+    </Col>
+</Row>
 <br/>
 <Row>
     <Col>