Skip to content

Refactor data store workflow #352

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

Merged
brucetony merged 17 commits into from
Apr 7, 2026
Merged

Refactor data store workflow #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d8e9d35
docs: add data-stores refactor design spec
brucetony Apr 2, 2026
3910c74
docs: add data-stores refactor implementation plan
brucetony Apr 2, 2026
64098dd
feat(data-stores): extract useDataStoreList composable
brucetony Apr 2, 2026
2bb21e8
fix(data-stores): clear loading flag on any completed fetch status
brucetony Apr 2, 2026
b16f0e9
refactor(data-stores): DataStoreList delegates to useDataStoreList
brucetony Apr 2, 2026
5f3fbdb
feat(data-stores): add DataStoreHelpPanel sub-component
brucetony Apr 2, 2026
8bcd50e
refactor(data-stores): deduplicate DataStoreHelpBox using DataStoreHe…
brucetony Apr 2, 2026
50f4309
refactor(data-stores): move availableProject to index.ts, self-fetch …
brucetony Apr 2, 2026
ea25658
fix(data-stores): add computed to explicit vue imports in DataStorePr…
brucetony Apr 2, 2026
5231602
refactor(data-stores): delete ResourceManagerTabs, page uses DataStor…
brucetony Apr 2, 2026
6329856
refactor(data-stores): PascalCase AvailableProject interface, remove …
brucetony Apr 2, 2026
0395768
test(analyses): add missing prop
brucetony Apr 2, 2026
42eeac1
chore: fix typing
brucetony Apr 2, 2026
e7c5472
chore: remove markdown
brucetony Apr 7, 2026
9e2d00d
chore: update API definitions
brucetony Apr 7, 2026
df6089f
feat(cleanup): add kong service cleanup endpoint to menu options
brucetony Apr 7, 2026
0b9c8f2
chore: typing
brucetony Apr 7, 2026
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
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,4 +99,5 @@ sw.*
.output

# Claude
.claude/
.claude/
docs/
101 changes: 4 additions & 97 deletions app/components/data-stores/DataStoreList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,12 @@
<script lang="ts" setup>
import { watchEffect } from "vue";
import { getDataStores, getProjects } from "~/composables/useAPIFetch";
import { formatDataRow } from "~/utils/format-data-row";
import type { ModifiedDetailedService } from "~/services/modifiedApiInterfaces";
import type {
DetailedAnalysis,
ListServices,
Project,
Route,
} from "~/services/Api";
import { useDataStoreList } from "~/composables/useDataStoreList";
import DetailedDataStoreTable from "~/components/data-stores/DetailedDataStoreTable.vue";

const dataStores = ref<ModifiedDetailedService[]>([]);
const projectNameMap = ref<Map<string, string | undefined>>(
new Map<string, string | undefined>(),
);

const loading = ref(true);

const dataRowUnixCols = ["created_at", "updated_at"];
const expandRowEntries = [];

const {
data: dsResp,
status: dsStatus,
error: dsError,
refresh: dsRefresh,
} = await getDataStores(true, { lazy: true });

const { data: projectResp } = await getProjects({ lazy: true });

watchEffect(() => {
if (dsResp.value?.data) {
const dataStoreData = dsResp.value.data as ListServices;
loadDetailedDataStoreTable(dataStoreData, dsStatus.value, dsError);
}
});

watchEffect(() => {
if (projectResp.value) {
const projects = projectResp.value || [];
projectNameMap.value = mapDataFromHub(projects);
}
});

async function loadDetailedDataStoreTable(
responseData: ListServices,
status: string,
error,
) {
if (status === "success") {
let formattedDataStores = formatDataRow(
responseData,
dataRowUnixCols,
expandRowEntries,
) as ModifiedDetailedService[];

formattedDataStores = formattedDataStores.filter(
(store: ModifiedDetailedService) => store.name !== "kong-admin-service",
);

formattedDataStores.forEach((store: ModifiedDetailedService) => {
if (store.routes) {
store.routes = formatDataRow(
store.routes,
dataRowUnixCols,
expandRowEntries,
);
store.routes?.forEach((proj: Route) => {
proj["projectId"] = extractProjectIdFromPath(proj.paths! as string[]);
});
}
});
dataStores.value = formattedDataStores;
} else if (error.value?.statusCode === 500) {
dataStores.value = [];
}
loading.value = false;
}

function mapDataFromHub(hubData: Project[] | DetailedAnalysis[]) {
let mappedNames = new Map<string, string | undefined>();
if (hubData && hubData.length > 0) {
hubData.forEach((entry: Project | DetailedAnalysis) => {
if (entry.id) {
mappedNames.set(entry.id, entry.name ? entry.name : "N/A");
}
});
}
return mappedNames;
}

function extractProjectIdFromPath(paths: string[]): string {
return paths[0].split("/")[1];
}
const { dataStores, projectNameMap, loading, refresh } = await useDataStoreList();

function onDeleteDataStore(dsName: string) {
dataStores.value = dataStores.value.filter(
(store: ModifiedDetailedService) => store.name !== dsName,
);
dsRefresh();
dataStores.value = dataStores.value.filter((store) => store.name !== dsName);
refresh();
Comment on lines +8 to +9
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid overwriting the optimistic delete with an immediate refresh.

refresh() causes useDataStoreList() to repopulate dataStores.value from the server. If the deletion has not propagated yet, the just-filtered row gets written back and the table shows the deleted store again. Refresh only after the delete is confirmed, or keep a pending-deletions filter when applying fresh data.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/components/data-stores/DataStoreList.vue` around lines 8 - 9, You are
optimistically removing an item by filtering dataStores.value then immediately
calling refresh(), which repopulates dataStores from the server and can
reintroduce the just-deleted store; instead, either delay calling refresh()
until the delete API confirms success (call refresh() in the delete promise's
success handler) or maintain a pending-deletions set (e.g., track dsName in a
pendingDeletes collection used to filter incoming data in useDataStoreList) so
that refresh() respects optimistic removals until the server acknowledges
deletion; update the code paths around dataStores.value, refresh(),
useDataStoreList(), and the delete handler to implement one of these approaches.

}
</script>

Expand Down
Loading
Loading