frontend/components/RescaleDeploymentPopup.vue

62 lines
1.6 KiB
Vue

<template>
<SmallPopupTemplate :heading="'Rescale ' + deployment.metadata?.name" ref="base">
<div class="content-l">
<div class="tile-m">
<p class="grayed-out">Deployment</p>
<p>{{ deployment.metadata?.namespace }}/{{ deployment.metadata?.name }}</p>
</div>
<UiInput>
<div class="rescale-input" v-if="deployment.spec?.replicas">
<UiButton class="square" icon="remove" @click="deployment.spec.replicas--"></UiButton>
<input type="number" v-model="deployment.spec.replicas" min="1">
<UiButton class="square" icon="add" @click="deployment.spec.replicas++"></UiButton>
</div>
</UiInput>
<div class="center">
<UiButton @click="() => rescale(deployment)">Rescale</UiButton>
</div>
</div>
</SmallPopupTemplate>
</template>
<script setup lang="ts">
import type { Deployment } from '~/classes/Deployment';
import { rescaleDeployment } from '~/requests/deployments';
const base = ref();
defineProps<{
deployment: Deployment
}>();
function open()
{
base.value.open();
}
defineExpose({
open
})
function rescale(deployment: Deployment)
{
if(deployment.spec && deployment.spec.replicas)
{
rescaleDeployment(deployment, deployment.spec.replicas, () => {
base.value.close();
});
}
else
{
throw new Error("Replica count is null");
}
}
</script>
<style scoped>
.rescale-input {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
}
</style>