Skip to content

Commit

Permalink
Merge pull request #1348 from threefoldtech/development_313_fix_sorting
Browse files Browse the repository at this point in the history 
fix sorting
  • Loading branch information
@mohamedamer453
mohamedamer453 authored Nov 16, 2023
2 parents 28e90ba + c9690f0 commit a0c4980
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 106 deletions.
178 changes: 88 additions & 90 deletions packages/playground/src/components/k8s_deployment_table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,74 @@
<template>
<v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
Failed to load <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.

<span>
This might happen because the node is down or it's not reachable
<span v-if="showEncryption"
>or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span
>.
</span>
<v-icon class="custom-icon" @click="showDialog = true">mdi-file-document-outline </v-icon>

<v-dialog transition="dialog-bottom-transition" v-model="showDialog" persistent max-width="500px">
<v-card>
<v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
<v-divider color="#FFCC00" />
<v-card-text>
<li v-for="deployment in failedDeployments" :key="deployment.name">
{{
deployment.nodes.length > 0
? `${deployment.name} on node${deployment.nodes.length > 1 ? "s" : ""}: ${deployment.nodes.join(", ")}`
: deployment.name
}}
<template v-if="deployment.contracts && deployment.contracts.length > 0">
with contract id:
<span v-for="contract in deployment.contracts" :key="contract.contract_id">
{{ contract.contract_id }} .
</span>
</template>
</li>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn @click="showDialog = false" class="grey lighten-2 black--text" color="#FFCC00">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-alert>

<ListTable
:headers="[
{ title: 'PLACEHOLDER', key: 'data-table-select' },
{ title: 'Name', key: 'name' },
{ title: 'Public IPv4', key: 'ipv4' },
{ title: 'Public IPv6', key: 'ipv6' },
{ title: 'Planetary Network IP', key: 'planetary' },
{ title: 'Workers', key: 'workers' },
{ title: 'Billing Rate', key: 'billing' },
{ title: 'Actions', key: 'actions' },
]"
:items="items"
:loading="loading"
:deleting="deleting"
:model-value="$props.modelValue"
@update:model-value="$emit('update:model-value', $event)"
:no-data-text="`No Kubernetes deployments found on this account.`"
@click:row="$attrs['onClick:row']"
>
<template #[`item.name`]="{ item }">
{{ item.value.deploymentName }}
</template>

<template #[`item.ipv4`]="{ item }">
{{ item.value.masters[0].publicIP?.ip?.split("/")?.[0] || item.value.masters[0].publicIP?.ip || "None" }}
</template>

<template #[`item.ipv6`]="{ item }">
{{ item.value.masters[0].publicIP?.ip6 || "None" }}
</template>

<template #[`item.planetary`]="{ item }">
{{ item.value.masters[0].planetary || "None" }}
</template>

<template #[`item.workers`]="{ item }">
{{ item.value.workers.length }}
</template>

<template #[`item.billing`]="{ item }">
{{ item.value.masters[0].billing }}
</template>

<template #[`item.actions`]="{ item }">
<v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
Deleting...
</v-chip>
<v-btn-group variant="tonal" v-else>
<slot name="actions" :item="item"></slot>
</v-btn-group>
</template>
</ListTable>
<div>
<v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
Failed to load <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.

<span>
This might happen because the node is down or it's not reachable
<span v-if="showEncryption"
>or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span
>.
</span>
<v-icon class="custom-icon" @click="showDialog = true">mdi-file-document-outline </v-icon>

<v-dialog transition="dialog-bottom-transition" v-model="showDialog" persistent max-width="500px">
<v-card>
<v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
<v-divider color="#FFCC00" />
<v-card-text>
<li v-for="deployment in failedDeployments" :key="deployment.name">
{{
deployment.nodes.length > 0
? `${deployment.name} on node${deployment.nodes.length > 1 ? "s" : ""}: ${deployment.nodes.join(
", ",
)}`
: deployment.name
}}
<template v-if="deployment.contracts && deployment.contracts.length > 0">
with contract id:
<span v-for="contract in deployment.contracts" :key="contract.contract_id">
{{ contract.contract_id }} .
</span>
</template>
</li>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn @click="showDialog = false" class="grey lighten-2 black--text" color="#FFCC00">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-alert>

<ListTable
:headers="[
{ title: 'PLACEHOLDER', key: 'data-table-select' },
{ title: 'Name', key: 'name' },
{ title: 'Public IPv4', key: 'ipv4', sortable: false },
{ title: 'Public IPv6', key: 'ipv6', sortable: false },
{ title: 'Planetary Network IP', key: 'planetary', sortable: false },
{ title: 'Workers', key: 'workersLength' },
{ title: 'Billing Rate', key: 'billing' },
{ title: 'Actions', key: 'actions', sortable: false },
]"
:items="items"
:loading="loading"
:deleting="deleting"
:model-value="$props.modelValue"
@update:model-value="$emit('update:model-value', $event)"
:no-data-text="`No Kubernetes deployments found on this account.`"
@click:row="$attrs['onClick:row']"
:sort-by="sortBy"
>
<template #[`item.actions`]="{ item }">
<v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
Deleting...
</v-chip>
<v-btn-group variant="tonal" v-else>
<slot name="actions" :item="item"></slot>
</v-btn-group>
</template>
</ListTable>
</div>
</template>

<script lang="ts" setup>
Expand Down Expand Up @@ -131,7 +112,15 @@ async function loadDeployments() {
];
count.value = clusters.count;
items.value = clusters.items;
items.value = clusters.items.map((item: any) => {
item.name = item.deploymentName;
item.ipv4 = item.masters[0].publicIP?.ip?.split("/")?.[0] || item.masters[0].publicIP?.ip || "None";
item.ipv6 = item.masters[0].publicIP?.ip6 || "None";
item.planetary = item.masters[0].planetary || "None";
item.workersLength = item.workers.length;
item.billing = item.masters[0].billing;
return item;
});
loading.value = false;
}
Expand All @@ -146,5 +135,14 @@ export default {
components: {
ListTable,
},
data() {
return {
sortBy: [
{ key: "name", order: "asc" },
{ key: "workersLength", order: "asc" },
{ key: "billing", order: "asc" },
],
};
},
};
</script>
4 changes: 2 additions & 2 deletions packages/playground/src/components/manage_gateway_dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,8 +204,8 @@ export default {
const passThrough = ref(false);
const valid = ref(false);
const ip = props.vm[0].interfaces[0].ip as string;
const networkName = props.vm[0].interfaces[0].network as string;
const ip = props.vm.interfaces[0].ip as string;
const networkName = props.vm.interfaces[0].network as string;
onMounted(async () => {
const grid = await getGrid(profileManager.profile!);
Expand Down
38 changes: 24 additions & 14 deletions packages/playground/src/components/vm_deployment_table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,39 +38,40 @@
@update:model-value="$emit('update:model-value', $event)"
:no-data-text="`No ${projectName} deployments found on this account.`"
@click:row="$attrs['onClick:row']"
:sort-by="sortBy"
>
<template #[`item.name`]="{ item }">
{{ item.value[0].name }}
{{ item.value.name }}
</template>

<template #[`item.ipv4`]="{ item }">
{{ item.value[0].publicIP?.ip?.split("/")?.[0] || item.value[0].publicIP?.ip || "-" }}
{{ item.value.publicIP?.ip?.split("/")?.[0] || item.value.publicIP?.ip || "-" }}
</template>

<template #[`item.ipv6`]="{ item }">
{{ item.value[0].publicIP?.ip6 || "-" }}
{{ item.value.publicIP?.ip6 || "-" }}
</template>

<template #[`item.planetary`]="{ item }">
{{ item.value[0].planetary || "-" }}
{{ item.value.planetary || "-" }}
</template>

<template #[`item.wireguard`]="{ item }">
{{ item.value[0].interfaces[0].ip || "-" }}
{{ item.value.interfaces.ip || "-" }}
</template>

<template #[`item.flist`]="{ item }">
<v-tooltip :text="item.value[0].flist" location="bottom right">
<v-tooltip :text="item.value.flist" location="bottom right">
<template #activator="{ props }">
<p v-bind="props">
{{ item.value[0].flist.replace("https://hub.grid.tf/", "").replace(".flist", "") }}
{{ item.value.flist.replace("https://hub.grid.tf/", "").replace(".flist", "") }}
</p>
</template>
</v-tooltip>
</template>

<template #[`item.billing`]="{ item }">
{{ item.value[0].billing }}
{{ item.value.billing }}
</template>
<template #[`item.actions`]="{ item }">
<v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
Expand Down Expand Up @@ -152,7 +153,7 @@ async function loadDeployments() {
];
count.value = vms.count;
items.value = vms.items;
items.value = vms.items.flat(1);
loading.value = false;
}
Expand All @@ -161,13 +162,13 @@ const filteredHeaders = computed(() => {
let headers = [
{ title: "PLACEHOLDER", key: "data-table-select" },
{ title: "Name", key: "name" },
{ title: "Public IPv4", key: "ipv4" },
{ title: "Public IPv6", key: "ipv6" },
{ title: "Planetary Network IP", key: "planetary" },
{ title: "WireGuard", key: "wireguard" },
{ title: "Public IPv4", key: "ipv4", sortable: false },
{ title: "Public IPv6", key: "ipv6", sortable: false },
{ title: "Planetary Network IP", key: "planetary", sortable: false },
{ title: "WireGuard", key: "wireguard", sortable: false },
{ title: "Flist", key: "flist" },
{ title: "Cost", key: "billing" },
{ title: "Actions", key: "actions" },
{ title: "Actions", key: "actions", sortable: false },
];
const IPV6Solutions = [ProjectName.VM, ProjectName.Fullvm] as string[];
Expand Down Expand Up @@ -248,6 +249,15 @@ export default {
components: {
ListTable,
},
data() {
return {
sortBy: [
{ key: "name", order: "asc" },
{ key: "flist", order: "asc" },
{ key: "billing", order: "asc" },
],
};
},
};
</script>

Expand Down

0 comments on commit a0c4980

Please sign in to comment.