<template>
    <div class="content-m">
        <div class="left-center">
            <h3>{{ monitoring.configName }}</h3>
            <p v-if="monitoring.type === 'WORKLOAD'" class="label">Memory</p>
        </div>
        <div class="col-3">
          <MemoryMonitoredPodComponent class="tile-l" v-for="pod in pods" :pod="pod" :period="period"></MemoryMonitoredPodComponent>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Pod } from '~/classes/Pod';
import { MonitoredResource } from '../MonitoredResource';
import { VolumeMonitoringConfig } from '../MonitoringConfig';
import MemoryMonitoredPodComponent from './MemoryMonitoredPodComponent.vue';
import type { Period } from '../Period';

const props = defineProps<{
    monitoring: VolumeMonitoringConfig,
    period: Period
}>();

const pods: Ref<MonitoredResource<Pod>[] | undefined> = ref(undefined);

onMounted(() => {
     MonitoredResource.getMonitorings(props.monitoring.id, props.period.from, props.period.to, (_pods: MonitoredResource<Pod>[]) => {
        pods.value = _pods;
    });
});

function createLabel(input: string)
{
    return input.at(0)?.toUpperCase() + input.substring(1, input.length).toLowerCase();
}
</script>