Skip to content

Commit

Permalink
Merge pull request #94 from PrivateAIM/87-sort-by-creationupdate-time…
Browse files Browse the repository at this point in the history 
…-not-present-for-analyses

87 sort by creation/update time not present for analyses
  • Loading branch information
@brucetony
brucetony authored Aug 29, 2024
2 parents c4f88b2 + 9cdcd7f commit e5a2bf9
Show file tree
Hide file tree
Showing 9 changed files with 405 additions and 132 deletions.
10 changes: 10 additions & 0 deletions assets/css/table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,13 @@
width: 100%;
justify-content: space-between;
}

.search-bar {
display: flex;
width: 50%;
justify-content: left;
}

.search-text-bar {
margin-right: 10px;
}
98 changes: 62 additions & 36 deletions components/analysis/AnalysesTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,54 @@ import TableRowMetadata from "~/components/TableRowMetadata.vue";
import ExpandRowButtons from "~/components/table/ExpandRowButtons.vue";
import { showHubAdapterConnectionErrorToast } from "~/composables/connectionErrorToast";
import { FilterMatchMode } from "primevue/api";
import type { AnalysisNode } from "~/services/Api";
import SearchBar from "~/components/table/SearchBar.vue";
const expandedRows = ref();
const analyses = ref();
const expandRowEntries = [
"id",
"project_id",
"node_id",
"created_at",
"updated_at",
];
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
// Below are more examples
// "analysis.name": { value: null, matchMode: FilterMatchMode.CONTAINS },
// status: { value: null, matchMode: FilterMatchMode.CONTAINS },
// verified: { value: null, matchMode: FilterMatchMode.EQUALS },
// name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
});
const expandRowEntries = ["project_id", "node_id"];
const { data: response, status, error } = await getAnalysisNodes();
if (status.value === "success") {
const formattedData = formatDataRow(
analyses.value = formatDataRow(
response.value!.data,
["created_at", "updated_at"],
expandRowEntries,
);
analyses.value = formattedData.map((analysisNode: AnalysisNode) => ({
...analysisNode,
uniqueId: analysisNode.analysis_id + "-" + analysisNode.node.id,
}));
} else if (error.value?.statusCode === 500) {
showHubAdapterConnectionErrorToast();
}
function onToggleRowExpansion(rowIds) {
expandedRows.value = rowIds;
}
// Table filters
const defaultFilters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
// Below are more examples
// "analysis.name": { value: null, matchMode: FilterMatchMode.CONTAINS },
// status: { value: null, matchMode: FilterMatchMode.CONTAINS },
// verified: { value: null, matchMode: FilterMatchMode.EQUALS },
// name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
};
const filters = ref(defaultFilters);
function resetFilters() {
const clearedFilters = {};
for (const filterKey in defaultFilters) {
clearedFilters[filterKey] = {
...defaultFilters[filterKey],
};
clearedFilters[filterKey].value = null;
}
filters.value = clearedFilters;
}
const updateFilters = (filterText: string) => {
filters.value.global.value = filterText;
};
</script>

<template>
Expand All @@ -58,7 +64,7 @@ function onToggleRowExpansion(rowIds) {
<DataTable
:value="analyses"
v-model:expandedRows="expandedRows"
dataKey="uniqueId"
dataKey="id"
:pt="{
table: 'table table-striped',
}"
Expand All @@ -77,21 +83,15 @@ function onToggleRowExpansion(rowIds) {
<template #empty> No analyses found. </template>
<template #header>
<div class="table-header-row">
<div class="flex justify-content-end search-bar">
<IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText
v-model="filters['global'].value"
placeholder="Keyword Search"
/>
</IconField>
</div>
<SearchBar
:searchTerm="defaultFilters.global.value"
@clearFilters="resetFilters"
@updateSearch="updateFilters"
/>
<div class="expand-buttons">
<ExpandRowButtons
:rows="analyses"
:uniqueId="'uniqueId'"
:uniqueId="'id'"
@expandedRowList="onToggleRowExpansion"
/>
</div>
Expand Down Expand Up @@ -119,6 +119,32 @@ function onToggleRowExpansion(rowIds) {
header="Project"
:sortable="true"
/>
<Column
header="Created On"
field="created_at.long"
filterField="created_at.date"
dataType="date"
:sortable="true"
>
<template #body="{ data }">
<p v-tooltip.top="data.created_at.long">
{{ data.created_at.short }}
</p>
</template>
</Column>
<Column
header="Last Updated"
field="updated_at.long"
filterField="updated_at.date"
dataType="date"
:sortable="true"
>
<template #body="{ data }">
<p v-tooltip.top="data.updated_at.long">
{{ data.updated_at.short }}
</p>
</template>
</Column>
<Column field="node.name" header="Node" :sortable="true" />
<Column
field="expand.id"
Expand Down
59 changes: 41 additions & 18 deletions components/data-stores/tables/DetailedAnalysisTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { Consumer } from "~/services/Api";
import { formatDataRow } from "~/utils/format-data-row";
import { extractUuid } from "~/utils/extract-uuid-from-kong-username";
import { FilterMatchMode } from "primevue/api";
import SearchBar from "~/components/table/SearchBar.vue";
const props = defineProps({
detailedAnalysisList: {
Expand Down Expand Up @@ -34,10 +35,6 @@ const loading = ref(false);
const toast = useToast();
const confirm = useConfirm();
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
});
onMounted(() => {
compileAnalysisTable();
});
Expand Down Expand Up @@ -124,6 +121,30 @@ function compileAnalysisTable() {
}
analysisTable.value = elongatedTableRows;
}
// Table filters
const defaultFilters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
"created_at.short": { value: null, matchMode: FilterMatchMode.DATE_IS },
"updated_at.short": { value: null, matchMode: FilterMatchMode.DATE_IS },
};
const filters = ref(defaultFilters);
function resetFilters() {
const clearedFilters = {};
for (const filterKey in defaultFilters) {
clearedFilters[filterKey] = {
...defaultFilters[filterKey],
};
clearedFilters[filterKey].value = null;
}
filters.value = clearedFilters;
}
const updateFilters = (filterText: string) => {
filters.value.global.value = filterText;
};
</script>

<template>
Expand All @@ -146,17 +167,11 @@ function compileAnalysisTable() {
<template #empty> No associated linked analyses found.</template>
<template #header>
<div class="table-header-row">
<div class="flex justify-content-end search-bar">
<IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText
v-model="filters['global'].value"
placeholder="Keyword Search"
/>
</IconField>
</div>
<SearchBar
:searchTerm="defaultFilters.global.value"
@clearFilters="resetFilters"
@updateSearch="updateFilters"
/>
</div>
</template>
<Column
Expand All @@ -180,10 +195,18 @@ function compileAnalysisTable() {
:sortable="true"
></Column>
<Column
field="kongProjCreatedAt"
header="Created"
header="Created On"
field="kongProjCreatedAt.long"
filterField="kongAnalysisCreatedAt.long"
dataType="date"
:sortable="true"
></Column>
>
<template #body="{ data }">
<p v-tooltip.top="data.kongAnalysisCreatedAt.long">
{{ data.kongAnalysisCreatedAt.short }}
</p>
</template>
</Column>
<Column field="hubAnalysisUuid" header="Delete?" :exportable="false">
<template #body="slotProps">
<ConfirmPopup group="templating">
Expand Down
78 changes: 59 additions & 19 deletions components/data-stores/tables/DetailedDataStoreTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { deleteDataStore } from "~/composables/useAPIFetch";
import { useConfirm } from "primevue/useconfirm";
import type { DetailedService } from "~/services/Api";
import { FilterMatchMode } from "primevue/api";
import SearchBar from "~/components/table/SearchBar.vue";
const props = defineProps({
stores: Array<DetailedService>,
Expand All @@ -14,10 +15,6 @@ const confirm = useConfirm();
const toast = useToast();
const deleteLoading = ref(false);
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
});
async function onConfirmDeleteDataStore(dsName: string) {
deleteLoading.value = true;
const { status } = await deleteDataStore(dsName);
Expand Down Expand Up @@ -58,6 +55,30 @@ const confirmDelete = (event, dsName: string) => {
reject: () => {},
});
};
// Table filters
const defaultFilters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
"created_at.short": { value: null, matchMode: FilterMatchMode.DATE_IS },
"updated_at.short": { value: null, matchMode: FilterMatchMode.DATE_IS },
};
const filters = ref(defaultFilters);
function resetFilters() {
const clearedFilters = {};
for (const filterKey in defaultFilters) {
clearedFilters[filterKey] = {
...defaultFilters[filterKey],
};
clearedFilters[filterKey].value = null;
}
filters.value = clearedFilters;
}
const updateFilters = (filterText: string) => {
filters.value.global.value = filterText;
};
</script>

<template>
Expand All @@ -76,30 +97,49 @@ const confirmDelete = (event, dsName: string) => {
<template #empty> No data stores found. </template>
<template #header>
<div class="table-header-row">
<div class="flex justify-content-end search-bar">
<IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText
v-model="filters['global'].value"
placeholder="Keyword Search"
/>
</IconField>
</div>
<SearchBar
:searchTerm="defaultFilters.global.value"
@clearFilters="resetFilters"
@updateSearch="updateFilters"
/>
</div>
</template>
<Column field="name" header="Name" :sortable="true"></Column>
<Column
field="name"
header="Name"
:sortable="true"
style="width: 30rem"
></Column>
<Column field="path" header="Path"></Column>
<Column field="host" header="Host" :sortable="true"></Column>
<Column field="port" header="Port"></Column>
<Column field="protocol" header="Protocol" :sortable="true"></Column>
<Column field="created_at" header="Created" :sortable="true"></Column>
<Column
field="updated_at"
header="Created On"
field="created_at.long"
filterField="created_at.date"
dataType="date"
:sortable="true"
>
<template #body="{ data }">
<p v-tooltip.top="data.created_at.long">
{{ data.created_at.short }}
</p>
</template>
</Column>
<Column
header="Last Updated"
field="updated_at.long"
filterField="updated_at.date"
dataType="date"
:sortable="true"
></Column>
>
<template #body="{ data }">
<p v-tooltip.top="data.updated_at.long">
{{ data.updated_at.short }}
</p>
</template>
</Column>
<Column field="name" header="Delete?" :exportable="false">
<template #body="slotProps">
<ConfirmPopup group="templating">
Expand Down
Loading

0 comments on commit e5a2bf9

Please sign in to comment.