Merge pull request #352 from PrivateAIM/refactor-data-store

Refactor data store workflow

Author: brucetony

.gitignore

@@ -99,4 +99,5 @@ sw.*
 .output
 
 # Claude
-.claude/
+.claude/
+docs/

app/components/data-stores/DataStoreList.vue

@@ -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();
 }
 </script>