Merge pull request #5712 from xiaobo121388/main

feat: add Ollama Cloud usage query action

frontend/src/components/account/AccountUsageCell.vue

@@ -562,6 +562,7 @@
       <OllamaCloudUsageCell
         v-if="account.ollama_cloud_usage?.eligible"
         :account="account"
+        @updated="handleOllamaCloudUsageUpdated"
       />
       <!-- Today stats row (requests, tokens, cost, user_cost) -->
       <div
@@ -1513,6 +1514,10 @@ const handleQuotaResetAccountUpdated = (account: Account) => {
   emit('account-updated', account)
 }
 
+const handleOllamaCloudUsageUpdated = (state: NonNullable<Account['ollama_cloud_usage']>) => {
+  emit('account-updated', { ...props.account, ollama_cloud_usage: state })
+}
+
 // ===== Key account today stats formatters =====
 
 const formatKeyRequests = computed(() => {

frontend/src/components/account/OllamaCloudUsageCell.vue

@@ -20,16 +20,64 @@
       color="emerald"
       data-testid="ollama-cloud-seven-day"
     />
+    <div v-if="state.configured" class="flex items-center pt-0.5">
+      <button
+        type="button"
+        class="inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-blue-400 dark:hover:bg-blue-900/30"
+        :disabled="refreshing"
+        data-testid="ollama-cloud-usage-query"
+        @click="refreshUsage"
+      >
+        <svg
+          class="h-2.5 w-2.5"
+          :class="{ 'animate-spin': refreshing }"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+          />
+        </svg>
+        {{ t('admin.accounts.usageWindow.activeQuery') }}
+      </button>
+    </div>
   </div>
   <span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Account } from '@/types'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { adminAPI } from '@/api/admin'
+import type { Account, OllamaCloudUsageState } from '@/types'
 import UsageProgressBar from './UsageProgressBar.vue'
 
 const props = defineProps<{ account: Account }>()
-const state = computed(() => props.account.ollama_cloud_usage)
+const emit = defineEmits<{ updated: [state: OllamaCloudUsageState] }>()
+const { t } = useI18n()
+const state = ref(props.account.ollama_cloud_usage)
+const refreshing = ref(false)
 const snapshot = computed(() => state.value?.snapshot)
+
+watch(() => props.account.ollama_cloud_usage, (next) => {
+  state.value = next
+})
+
+const refreshUsage = async () => {
+  if (refreshing.value) return
+  refreshing.value = true
+  try {
+    const next = await adminAPI.accounts.refreshOllamaCloudUsage(props.account.id)
+    state.value = next
+    emit('updated', next)
+  } catch (error) {
+    console.error('Failed to refresh Ollama Cloud usage:', error)
+  } finally {
+    refreshing.value = false
+  }
+}
 </script>

frontend/src/components/account/__tests__/AccountUsageCell.spec.ts

@@ -72,7 +72,7 @@ describe('AccountUsageCell', () => {
     })
   })
 
-  it('renders eligible Ollama Cloud state inside the unified usage cell', () => {
+  it('renders eligible Ollama Cloud state and forwards query updates', async () => {
     const wrapper = mount(AccountUsageCell, {
       props: {
         account: makeAccount({
@@ -101,7 +101,8 @@ describe('AccountUsageCell', () => {
         stubs: {
           OllamaCloudUsageCell: {
             props: ['account'],
-            template: '<div data-test="embedded-ollama">{{ account.ollama_cloud_usage.snapshot.data.five_hour.used_percent }}</div>'
+            emits: ['updated'],
+            template: '<button data-test="embedded-ollama" @click="$emit(\'updated\', { ...account.ollama_cloud_usage, auto_refresh_enabled: false })">{{ account.ollama_cloud_usage.snapshot.data.five_hour.used_percent }}</button>'
           },
           UsageProgressBar: true,
           AccountQuotaInfo: true
@@ -111,6 +112,12 @@ describe('AccountUsageCell', () => {
 
     expect(wrapper.get('[data-test="embedded-ollama"]').text()).toBe('12')
     expect(getUsage).not.toHaveBeenCalled()
+
+    await wrapper.get('[data-test="embedded-ollama"]').trigger('click')
+
+    const updatedAccount = wrapper.emitted<Account[]>('account-updated')?.[0]?.[0]
+    expect(updatedAccount?.id).toBe(9001)
+    expect(updatedAccount?.ollama_cloud_usage?.auto_refresh_enabled).toBe(false)
   })
 
   it('Antigravity 图片用量会聚合新旧 image 模型', async () => {

frontend/src/components/account/__tests__/OllamaCloudUsageCell.spec.ts

@@ -1,9 +1,21 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import OllamaCloudUsageCell from '../OllamaCloudUsageCell.vue'
 import UsageProgressBar from '../UsageProgressBar.vue'
 import type { Account, OllamaCloudUsageState } from '@/types'
 
+const { refreshOllamaCloudUsage } = vi.hoisted(() => ({
+  refreshOllamaCloudUsage: vi.fn()
+}))
+
+vi.mock('@/api/admin', () => ({
+  adminAPI: {
+    accounts: {
+      refreshOllamaCloudUsage
+    }
+  }
+}))
+
 vi.mock('vue-i18n', async () => {
   const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
   return {
@@ -64,7 +76,11 @@ const account = (state = usageState()): Account => ({
 })
 
 describe('OllamaCloudUsageCell', () => {
-  it('renders only native 5h and 7d windows in a shrinkable mobile-safe cell', () => {
+  beforeEach(() => {
+    refreshOllamaCloudUsage.mockReset()
+  })
+
+  it('renders native 5h and 7d windows with the configured-account query action', () => {
     const wrapper = mount(OllamaCloudUsageCell, { props: { account: account() } })
     const cell = wrapper.get('[data-testid="ollama-cloud-usage-cell"]')
     expect(cell.classes()).toEqual(expect.arrayContaining(['min-w-0', 'max-w-full']))
@@ -84,14 +100,15 @@ describe('OllamaCloudUsageCell', () => {
     })
 
     expect(wrapper.find('[data-testid="ollama-cloud-usage-details"]').exists()).toBe(false)
-    expect(wrapper.find('[data-testid="ollama-cloud-usage-refresh"]').exists()).toBe(false)
-    expect(wrapper.findAll('button')).toHaveLength(0)
+    const query = wrapper.get('[data-testid="ollama-cloud-usage-query"]')
+    expect(query.classes()).toEqual(expect.arrayContaining(['text-blue-600', 'hover:bg-blue-50']))
+    expect(query.text()).toContain('admin.accounts.usageWindow.activeQuery')
     expect(wrapper.text()).not.toContain('max')
     expect(wrapper.text()).not.toContain('$0')
     expect(wrapper.text()).not.toContain('gpt-oss:120b-cloud')
   })
 
-  it('reacts to an account snapshot update without a list-cell refresh action', async () => {
+  it('reacts to an account snapshot update', async () => {
     const wrapper = mount(OllamaCloudUsageCell, { props: { account: account() } })
     const next = usageState()
     next.snapshot!.data!.five_hour!.used_percent = 43
@@ -99,6 +116,28 @@ describe('OllamaCloudUsageCell', () => {
     await wrapper.setProps({ account: account(next) })
 
     expect(wrapper.findAllComponents(UsageProgressBar)[0].props('utilization')).toBe(43)
-    expect(wrapper.findAll('button')).toHaveLength(0)
+  })
+
+  it('queries through the edit-page refresh endpoint and emits the updated state', async () => {
+    const next = usageState()
+    next.snapshot!.data!.five_hour!.used_percent = 43
+    refreshOllamaCloudUsage.mockResolvedValueOnce(next)
+    const wrapper = mount(OllamaCloudUsageCell, { props: { account: account() } })
+
+    await wrapper.get('[data-testid="ollama-cloud-usage-query"]').trigger('click')
+    await flushPromises()
+
+    expect(refreshOllamaCloudUsage).toHaveBeenCalledWith(7)
+    expect(wrapper.findAllComponents(UsageProgressBar)[0].props('utilization')).toBe(43)
+    expect(wrapper.emitted<OllamaCloudUsageState[]>('updated')?.[0]?.[0]).toEqual(next)
+  })
+
+  it('hides the query action until a browser session is configured', () => {
+    const state = usageState()
+    state.configured = false
+
+    const wrapper = mount(OllamaCloudUsageCell, { props: { account: account(state) } })
+
+    expect(wrapper.find('[data-testid="ollama-cloud-usage-query"]').exists()).toBe(false)
   })
 })