Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix farm ip pagination #3507

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Fix farm ip pagination #3507

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e710072
convert public ip table to data-server table for pagination
amiraabouhadid Oct 7, 2024
9585443
move delete button from table bottom to allow pagination,
amiraabouhadid Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 71 additions & 24 deletions packages/playground/src/dashboard/components/public_ips_table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,32 @@
<template>
<div>
<ListTable :headers="headers" :items="publicIps" :loading="loading" :deleting="isRemoving" v-model="selectedItems">
<v-data-table-server
:headers="headers"
:items="publicIpsPag"
:loading="loading"
:deleting="isRemoving"
v-model="selectedItems"
:items-length="publicIpsCount"
v-model:items-per-page="pageSize"
:items-per-page-options="[
{ value: 5, title: '5' },
{ value: 10, title: '10' },
{ value: 20, title: '20' },
{ value: 50, title: '50' },
]"
v-model:page="page"
@update:options="loadPubIps"
>
<template v-slot:top>
<v-alert>
<h4 class="text-center font-weight-medium">Public IPs</h4>
</v-alert>
</template>

<template #[`item.ip`]="{ item }">
{{ item.ip || "-" }}
<div class="d-flex row align-baseline justify-center">
<v-checkbox v-model="selectedItems" :value="item" :label="item.ip || '-'"></v-checkbox>
</div>
</template>
<template #[`item.gateway`]="{ item }">
{{ item.gateway || "-" }}
Expand All @@ -16,23 +35,21 @@
<template #[`item.contractId`]="{ item }">
{{ item.contractId ?? "-" }}
</template>
<template #bottom>
<div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
<v-btn
class="ma-3"
color="error"
prepend-icon="mdi-delete"
:disabled="selectedItems.length === 0 || isRemoving"
@click="showDialogue = true"
>
Delete
</v-btn>
</div>
<div v-else>
<p class="my-4">No IPs added on this farm.</p>
</div>
</template>
</ListTable>
</v-data-table-server>
<div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
<v-btn
class="ma-3"
color="error"
prepend-icon="mdi-delete"
:disabled="selectedItems.length === 0 || isRemoving"
@click="showDialogue = true"
>
Delete
</v-btn>
</div>
<div v-else>
<p class="my-4">No IPs added on this farm.</p>
</div>
<v-dialog v-model="showDialogue" max-width="600" attach="#modals">
<v-card>
<v-card-title class="text-subtitle-1">
Expand Down Expand Up @@ -61,17 +78,15 @@

<script lang="ts">
import type { RemoveFarmIPModel } from "@threefold/grid_client";
import type { PublicIp } from "@threefold/tfchain_client";
import type { Farm, PublicIp } from "@threefold/tfchain_client";
import { onMounted, ref, watch } from "vue";

import ListTable from "@/components/list_table.vue";
import { useGrid } from "@/stores";
import { IPType } from "@/utils/types";

import { createCustomToast, ToastType } from "../../utils/custom_toast";
export default {
name: "PublicIPsTable",
components: { ListTable },
props: {
farmId: {
type: Number,
Expand All @@ -81,6 +96,8 @@ export default {
},
setup(props) {
const gridStore = useGrid();
const page = ref<number>(1);
const pageSize = ref(10);
const headers = [
{
title: "IP",
Expand All @@ -101,6 +118,7 @@ export default {
},
] as any;
const publicIps = ref<PublicIp[]>([]);
const publicIpsCount = ref(0);
const loading = ref(false);
const loadingIps = ref(false);
const showDialogue = ref(false);
Expand All @@ -111,21 +129,45 @@ export default {
const isRemoving = ref(false);
const selectedItems = ref<any[]>([]);
const items = ref<RemoveFarmIPModel[]>([]);
const publicIpsPag = ref<PublicIp[]>([]);

onMounted(async () => {
await getFarmByID(props.farmId);
});

async function getFarmByID(id: number) {
function getTotalPubIps(farm: Farm) {
loadingIps.value = true;
try {
const farm = await gridStore.grid.farms.getFarmByID({ id });
publicIps.value = farm.publicIps as unknown as PublicIp[];
if (publicIps.value) {
loadPubIps();
}
} catch (error) {
createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
}
loadingIps.value = false;
}
function loadPubIps() {
loadingIps.value = true;
try {
publicIpsCount.value = publicIps.value.length;
const start = (page.value - 1) * pageSize.value;
const end = start + pageSize.value;
publicIpsPag.value = publicIps.value.slice(start, end);
} catch (error) {
createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
}
loadingIps.value = false;
}

async function getFarmByID(id: number) {
try {
const farm = await gridStore.grid.farms.getFarmByID({ id });
getTotalPubIps(farm);
} catch (error) {
createCustomToast(`Failed to get Farm details! ${error}`, ToastType.danger);
}
}
async function removeFarmIps() {
try {
isRemoving.value = true;
Expand Down Expand Up @@ -167,6 +209,11 @@ export default {
removeFarmIps,
selectedItems,
loadingIps,
page,
pageSize,
publicIpsCount,
loadPubIps,
publicIpsPag,
};
},
};
Expand Down
Loading