<template>
    <div class="content-l">
        <div class="content-s">
            <h2>{{ createLabel(monitoring.type) }} Monitoring: {{ monitoring.configName }}</h2>
            <p>{{ monitoring.volumeConfig!.mountPath }}</p>
        </div>
        <div class="col-3">
          <MonitoredPodComponent class="tile-l" v-for="pod in pods" :pod="pod"></MonitoredPodComponent>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { VolumeMonitoringConfig } from '../MonitoringConfig';
import MonitoredPodComponent from './VolumeMonitoredPodComponent.vue';
import { MonitoredPod } from '../MonitoredResource';

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

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

onMounted(() => {
     MonitoredPod.get(props.monitoring.id, (_pods: MonitoredPod[]) => {
        pods.value = _pods;
    });
});

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