kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate TanStack Query for data fetching (Task F)

Browse Source 
Add composables for API integration with TanStack Query:

1. useShadowRuns.ts (shadow-run feature)
   - useShadowRunsList() with pagination & filtering
   - useShadowRunDetail() for detail view
   - useCreateShadowRun() mutation
   - useRefreshShadowRuns() for manual refresh
   - shadowRunQueryKeys factory for cache management

2. useModels.ts (models feature)
   - useModelsList() with filtering by phase/active
   - useModelDetail() for detail view
   - useActivateModel() / useDeactivateModel() mutations
   - useTransitionPhase() for lifecycle transitions
   - modelQueryKeys factory

3. Updated pages (ShadowRunList, ShadowRunDetail, ModelsList, ModelDetail)
   - Replace mock data with useQuery hooks
   - Auto-refetch on filter changes
   - Optimistic updates (activate/deactivate/transition)
   - Computed state management (idle/pending/ready/error/empty)
   - Cache invalidation on mutations

Features:
- Stale time: 5 minutes, garbage collection: 10 minutes
- Query key factories for cache management
- Mock API client (replace with real HTTP endpoints)
- Support for pagination, filtering, sorting
- Keyboard shortcuts still functional

Mock API client provides realistic data for testing.
Replace apiClient.* functions with actual HTTP calls in next phase.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-12 01:46:25 +09:00
parent d29f0e7df9
commit b7ee740f71
6 changed files with 601 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/models/pages/ModelDetail.vue
+31 -52
View File
@@ -1,8 +1,9 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import KbxButton from '@shared/ui/adapter/KbxButton.vue'
import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
import { useModelDetail, useActivateModel, useDeactivateModel, useTransitionPhase } from '../composables/useModels'
const route = useRoute()
const router = useRouter()
@@ -29,46 +30,27 @@ const phases = [
'Manual Activation',
]
// Mock model data (will be replaced with TanStack Query)
const model = ref({
modelId: '00000000-0000-0000-0000-000000000001',
name: 'Alpha Strategy v1',
description: 'Quantitative trading strategy based on technical analysis',
phase: 'Validate',
// TanStack Query hooks
const modelQuery = useModelDetail(modelId.value)
const activateMutation = useActivateModel()
const deactivateMutation = useDeactivateModel()
const transitionMutation = useTransitionPhase()
// Computed property for model data
const model = computed(() => modelQuery.data.value || {
modelId: modelId.value,
name: 'Loading...',
description: '',
phase: 'Freeze' as const,
active: false,
lastValidation: '2026-08-10',
pbo: 15.2,
dsr: 96.5,
oos: 1.8,
returnMtd: 12.5,
createdAt: '2026-06-15',
updatedAt: '2026-08-10',
validationHistory: [
{
date: '2026-08-10',
phase: 'Validate',
pbo: 15.2,
dsr: 96.5,
oos: 1.8,
status: 'approved',
},
{
date: '2026-08-05',
phase: 'Review',
pbo: 16.1,
dsr: 95.2,
oos: 2.1,
status: 'approved',
},
{
date: '2026-07-28',
phase: 'Challenger',
pbo: 18.5,
dsr: 93.8,
oos: 2.9,
status: 'approved',
},
],
lastValidation: '',
pbo: 0,
dsr: 0,
oos: 0,
returnMtd: 0,
createdAt: '',
updatedAt: '',
validationHistory: [],
configuration: {
lookbackPeriod: 252,
rebalanceFrequency: 'daily',
@@ -78,9 +60,6 @@ const model = ref({
},
})
const isLoading = ref(false)
const error = ref<string | null>(null)
// Find current phase index
const currentPhaseIndex = computed(() => {
return phases.findIndex(p => p === model.value.phase)
@@ -111,23 +90,25 @@ const handleEdit = () => {
router.push(`/model-ops/models/${modelId.value}/edit`)
}
const handleActivate = () => {
const handleActivate = async () => {
if (canActivate.value) {
console.log('Activating model:', modelId.value)
await activateMutation.mutateAsync(modelId.value)
}
}
const handleDeactivate = () => {
console.log('Deactivating model:', modelId.value)
const handleDeactivate = async () => {
await deactivateMutation.mutateAsync(modelId.value)
}
const handlePhaseTransition = (newPhase: string) => {
const handlePhaseTransition = async (newPhase: string) => {
const currentIndex = currentPhaseIndex.value
const newIndex = phases.indexOf(newPhase)
if (newIndex > currentIndex) {
console.log(`Transitioning from ${model.value.phase} to ${newPhase}`)
model.value.phase = newPhase
await transitionMutation.mutateAsync({
modelId: modelId.value,
phase: newPhase as any,
})
}
}
@@ -141,8 +122,6 @@ const handleKeydown = (e: KeyboardEvent) => {
}
}
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
window.addEventListener('keydown', handleKeydown)
})
frontend/src/features/models/pages/ModelsList.vue
+41 -74
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import KbxListPage from '@shared/ui/adapter/KbxListPage.vue'
import KbxDataGrid from '@shared/ui/adapter/KbxDataGrid.vue'
import KbxButton from '@shared/ui/adapter/KbxButton.vue'
import KbxInput from '@shared/ui/adapter/KbxInput.vue'
import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
import { useModelsList } from '../composables/useModels'
import type { ModelListParams } from '../composables/useModels'
const route = useRoute()
const router = useRouter()
@@ -25,84 +27,51 @@ const activeFilter = ref('all')
const currentPage = ref(1)
const pageSize = ref(50)
// Mock data state
const isLoading = ref(false)
const error = ref<string | null>(null)
// Query parameters
const queryParams = computed<ModelListParams>(() => ({
page: currentPage.value,
pageSize: pageSize.value,
search: searchQuery.value || undefined,
phase: phaseFilter.value === 'all' ? undefined : phaseFilter.value,
active: activeFilter.value === 'active' ? true : undefined,
}))
// TanStack Query hook
const modelsQuery = useModelsList(queryParams.value)
const dataState = computed<'idle' | 'pending' | 'ready' | 'error' | 'empty'>(() => {
if (isLoading.value) return 'pending'
if (error.value) return 'error'
if (models.value.length === 0) return 'empty'
if (modelsQuery.isPending.value) return 'pending'
if (modelsQuery.isError.value) return 'error'
if (modelsQuery.data.value?.items.length === 0) return 'empty'
return 'ready'
})
// Mock models data (will be replaced with TanStack Query)
const models = ref([
{
modelId: '00000000-0000-0000-0000-000000000001',
name: 'Alpha Strategy v1',
phase: 'Validate',
active: false,
lastValidation: '2026-08-10',
pbo: 15.2,
dsr: 96.5,
returnMtd: 12.5,
createdAt: '2026-06-15',
},
{
modelId: '00000000-0000-0000-0000-000000000002',
name: 'Beta Model v2',
phase: 'Review',
active: false,
lastValidation: '2026-08-09',
pbo: 18.3,
dsr: 94.2,
returnMtd: 8.3,
createdAt: '2026-07-01',
},
{
modelId: '00000000-0000-0000-0000-000000000003',
name: 'Gamma Arbitrage',
phase: 'Mature',
active: true,
lastValidation: '2026-08-08',
pbo: 8.5,
dsr: 98.1,
returnMtd: 18.7,
createdAt: '2026-05-10',
},
])
// Phase counts
const phaseCounts = computed(() => {
const counts: Record<string, number> = {}
models.value.forEach(m => {
counts[m.phase] = (counts[m.phase] || 0) + 1
})
return counts
// Quick filters
const quickFilters = computed(() => {
const items = modelsQuery.data.value?.items || []
return [
{ id: 'all', label: 'All', active: phaseFilter.value === 'all', badge: items.length },
{ id: 'active', label: 'Active', active: activeFilter.value === 'active', badge: items.filter(m => m.active).length },
{ id: 'ready', label: 'Ready to Deploy', active: phaseFilter.value === 'ready', badge: 2 },
]
})
// Quick filters
const quickFilters = computed(() => [
{ id: 'all', label: 'All', active: phaseFilter.value === 'all', badge: models.value.length },
{ id: 'active', label: 'Active', active: activeFilter.value === 'active', badge: models.value.filter(m => m.active).length },
{ id: 'ready', label: 'Ready to Deploy', active: phaseFilter.value === 'ready', badge: 2 },
])
// Summary items
const summaryItems = computed(() => [
{ label: 'Total Models', value: models.value.length },
{ label: 'Active', value: models.value.filter(m => m.active).length },
{ label: 'Ready to Deploy', value: 2 },
{ label: 'Avg PBO', value: (models.value.reduce((sum, m) => sum + m.pbo, 0) / models.value.length).toFixed(1) },
])
const summaryItems = computed(() => {
const items = modelsQuery.data.value?.items || []
const avgPbo = items.length > 0 ? (items.reduce((sum, m) => sum + m.pbo, 0) / items.length).toFixed(1) : '0'
return [
{ label: 'Total Models', value: items.length },
{ label: 'Active', value: items.filter(m => m.active).length },
{ label: 'Ready to Deploy', value: 2 },
{ label: 'Avg PBO', value: avgPbo },
]
})
// Actions
const handleSearch = () => {
isLoading.value = true
setTimeout(() => {
isLoading.value = false
}, 500)
modelsQuery.refetch()
}
const handleNewModel = () => {
@@ -136,8 +105,6 @@ const handleKeydown = (e: KeyboardEvent) => {
}
}
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
window.addEventListener('keydown', handleKeydown)
})
@@ -206,11 +173,11 @@ onUnmounted(() => {
<!-- Content Area -->
<template #content>
<KbxDataGrid
v-if="screenDef.grid"
v-if="screenDef.grid && modelsQuery.data.value?.items"
:columns="screenDef.grid.columnDefs"
:rows="models"
:loading="isLoading"
@row-click="(modelId) => handleRowClick(modelId)"
:rows="modelsQuery.data.value.items"
:loading="modelsQuery.isPending.value"
@row-click="handleRowClick"
/>
</template>
</KbxListPage>