Merge pull request #16983 from dannon/persistent-toggle-section

Persistent toggle sections of job info

client/src/components/Common/Heading.vue

@@ -14,14 +14,27 @@ interface Props {
     inline?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "text";
     icon?: string | [string, string];
+    collapse?: "open" | "closed" | "none";
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    collapse: "none",
+});
+
+defineEmits(["click"]);
 
 const sizeClass = computed(() => {
     return `h-${props.size ?? "lg"}`;
 });
 
+const collapsible = computed(() => {
+    return props.collapse !== "none";
+});
+
+const collapsed = computed(() => {
+    return props.collapse === "closed";
+});
+
 const element = computed(() => {
     for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
         if (props[key as keyof typeof props]) {
@@ -34,8 +47,15 @@ const element = computed(() => {
 
 <template>
     <div v-if="props.separator" class="separator heading">
-        <div class="stripe"></div>
-        <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+        <b-button v-if="collapsible" variant="link" size="sm" @click="$emit('click')">
+            <FontAwesomeIcon v-if="collapsed" fixed-width :icon="faAngleDoubleDown" />
+            <FontAwesomeIcon v-else fixed-width :icon="faAngleDoubleUp" />
+        </b-button>
+        <div v-else class="stripe"></div>
+        <component
+            :is="element"
+            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '']"
+            @click="$emit('click')">
             <slot />
         </component>
         <div class="stripe"></div>
@@ -44,7 +64,17 @@ const element = computed(() => {
         :is="element"
         v-else
         class="heading"
-        :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']">
+        :class="[
+            sizeClass,
+            props.bold ? 'font-weight-bold' : '',
+            props.inline ? 'inline' : '',
+            collapsible ? 'collapsible' : '',
+        ]"
+        @click="$emit('click')">
+        <b-button v-if="collapsible" variant="link" size="sm">
+            <icon v-if="collapsed" fixed-width icon="angle-double-down" />
+            <icon v-else fixed-width icon="angle-double-up" />
+        </b-button>
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <slot />
     </component>
@@ -69,6 +99,10 @@ h1, h2, h3, h4, h5, h6 {
     }
 }
 
+.collapsible {
+    cursor: pointer;
+}
+
 .separator {
     display: grid;
     grid-template-columns: 1rem auto 1fr;

client/src/components/JobMetrics/AwsEstimate.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { usePersistentToggle } from "@/composables/persistentToggle";
+
+import Heading from "@/components/Common/Heading.vue";
+
 const props = defineProps<{
     jobRuntimeInSeconds: number;
     coresAllocated: number;
@@ -20,6 +24,8 @@ const props = defineProps<{
     }[];
 }>();
 
+const { toggled, toggle } = usePersistentToggle("aws-estimate");
+
 const computedAwsEstimate = computed(() => {
     const { coresAllocated, jobRuntimeInSeconds, memoryAllocatedInMebibyte } = props;
 
@@ -50,24 +56,28 @@ const computedAwsEstimate = computed(() => {
 
 <template>
     <div v-if="computedAwsEstimate" id="aws-estimate" class="mt-4">
-        <h2>AWS estimate</h2>
+        <Heading h2 size="md" separator :collapse="toggled ? 'closed' : 'open'" @click="toggle()">
+            AWS estimate
+        </Heading>
 
-        <strong id="aws-cost">{{ computedAwsEstimate.price }} USD</strong>
+        <template v-if="!toggled">
+            <strong id="aws-cost">{{ computedAwsEstimate.price }} USD</strong>
 
-        <br />
+            <br />
 
-        This job requested {{ computedAwsEstimate.requestedVCpuCount }} core(s) and
-        {{ computedAwsEstimate.memory.toFixed(3) }} GiB of memory. Given this information, the smallest EC2 machine we
-        could find is:
+            This job requested {{ computedAwsEstimate.requestedVCpuCount }} core(s) and
+            {{ computedAwsEstimate.memory.toFixed(3) }} GiB of memory. Given this information, the smallest EC2 machine
+            we could find is:
 
-        <span id="aws-name">{{ computedAwsEstimate.instance.name }}</span>
-        (<span id="aws-mem">{{ computedAwsEstimate.instance.mem }}</span> GB /
-        <span id="aws-vcpus">{{ computedAwsEstimate.instance.vCpuCount }}</span> vCPUs /
-        <span id="aws-cpu">{{ computedAwsEstimate.instance.cpu.map(({ cpuModel }) => cpuModel).join(", ") }}</span
-        >). This instance is priced at {{ computedAwsEstimate.instance.price }} USD/hour.
+            <span id="aws-name">{{ computedAwsEstimate.instance.name }}</span>
+            (<span id="aws-mem">{{ computedAwsEstimate.instance.mem }}</span> GB /
+            <span id="aws-vcpus">{{ computedAwsEstimate.instance.vCpuCount }}</span> vCPUs /
+            <span id="aws-cpu">{{ computedAwsEstimate.instance.cpu.map(({ cpuModel }) => cpuModel).join(", ") }}</span
+            >). This instance is priced at {{ computedAwsEstimate.instance.price }} USD/hour.
 
-        <br />
+            <br />
 
-        &ast;Please note, that these numbers are only estimates, all jobs are always free of charge for all users.
+            &ast;Please note, that these numbers are only estimates, all jobs are always free of charge for all users.
+        </template>
     </div>
 </template>

client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue

@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { GetComponentPropTypes } from "types/utilityTypes";
 import { computed, unref } from "vue";
 
+import { usePersistentToggle } from "@/composables/persistentToggle";
+
 import * as carbonEmissionsConstants from "./carbonEmissionConstants.js";
 
 import BarChart from "./BarChart.vue";
@@ -34,6 +36,8 @@ const props = withDefaults(defineProps<CarbonEmissionsProps>(), {
     memoryAllocatedInMebibyte: 0,
 });
 
+const { toggled, toggle } = usePersistentToggle("carbonEmissions");
+
 const carbonEmissions = computed(() => {
     const memoryPowerUsed = carbonEmissionsConstants.memoryPowerUsage;
     const runtimeInHours = props.jobRuntimeInSeconds / (60 * 60); // Convert to hours
@@ -270,9 +274,11 @@ function getEnergyNeededText(energyNeededInKiloWattHours: number) {
 
 <template v-if="carbonEmissions && carbonEmissionsComparisons">
     <div class="mt-4">
-        <Heading h2 separator inline bold> Carbon Footprint </Heading>
+        <Heading h2 separator size="md" inline :collapse="toggled ? 'closed' : 'open'" @click="toggle()">
+            Carbon Footprint
+        </Heading>
 
-        <section class="carbon-emission-values my-4">
+        <section v-if="!toggled" class="carbon-emission-values my-4">
             <div class="emissions-grid">
                 <!-- Carbon Footprint Totals -->
                 <CarbonEmissionsCard

client/src/components/JobMetrics/JobMetrics.vue

@@ -203,7 +203,6 @@ const estimatedServerInstance = computed(() => {
         <AwsEstimate
             v-if="jobRuntimeInSeconds && coresAllocated && ec2Instances && shouldShowAwsEstimate"
             :ec2-instances="ec2Instances"
-            :should-show-aws-estimate="shouldShowAwsEstimate"
             :job-runtime-in-seconds="jobRuntimeInSeconds"
             :cores-allocated="coresAllocated"
             :memory-allocated-in-mebibyte="memoryAllocatedInMebibyte" />

client/src/composables/persistentToggle.ts

@@ -0,0 +1,23 @@
+import { type Ref } from "vue";
+
+import { useUserLocalStorage } from "./userLocalStorage";
+
+interface ToggleStateInterface {
+    toggled: Ref<boolean>;
+    toggle: () => void;
+}
+
+export function usePersistentToggle(uniqueId: string): ToggleStateInterface {
+    const localStorageKey = `toggle-state-${uniqueId}`;
+    const toggled = useUserLocalStorage(localStorageKey, false);
+
+    // Expose a function for toggling state
+    const toggle = () => {
+        toggled.value = !toggled.value;
+    };
+
+    return {
+        toggled,
+        toggle,
+    };
+}