<template>
    <div class="content-l">
        <p>{{ pod.resource.metadata.namespace }} / {{ pod.resource.metadata.name }}</p>
        <Chart :datasets="dataset" :config="VOLUME_CHART_CONFIG(new Date(period.from * 1000), new Date(period.to * 1000))"></Chart>
    </div>
</template>

<script setup lang="ts">
import { Data, Dataset } from '~/components/chart/Dataset';
import { MonitoredResource } from '../MonitoredResource';
import { VOLUME_CHART_CONFIG } from './ChartConfig';
import type { Pod } from '~/classes/Pod';
import type { Period } from '../Period';


const props = defineProps<{
    pod: MonitoredResource<Pod>,
    period: Period
}>();

const dataset = computed(() => {
    const result = [] as Data[];
    for (const job of props.pod.jobs)
    {
        result.push(new Data(job.metrics["VOLUME"].average, new Date(job.unix * 1000)));
    }
    return new Dataset("", result);
});
</script>