ベンチマーク関連ページの実装

client/package.json

@@ -16,7 +16,9 @@
     "openapi": "openapi-typescript ../openapi/openapi.yml -o src/api/openapi.ts"
   },
   "dependencies": {
+    "@tanstack/vue-query": "^5.62.16",
     "openapi-fetch": "^0.13.4",
+    "uuidv7": "^1.0.2",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },

client/src/assets/base.css

@@ -25,6 +25,29 @@
   --ct-slate-950: #020617;
   --ct-slate-950-rgb: 2, 6, 23;
 
+  --ct-red-50: #fff5f5;
+  --ct-red-50-rgb: 255, 245, 245;
+  --ct-red-100: #fee2e2;
+  --ct-red-100-rgb: 254, 226, 226;
+  --ct-red-200: #fecaca;
+  --ct-red-200-rgb: 254, 202, 202;
+  --ct-red-300: #fca5a5;
+  --ct-red-300-rgb: 252, 165, 165;
+  --ct-red-400: #f87171;
+  --ct-red-400-rgb: 248, 113, 113;
+  --ct-red-500: #ef4444;
+  --ct-red-500-rgb: 239, 68, 68;
+  --ct-red-600: #dc2626;
+  --ct-red-600-rgb: 220, 38, 38;
+  --ct-red-700: #b91c1c;
+  --ct-red-700-rgb: 185, 28, 28;
+  --ct-red-800: #991b1b;
+  --ct-red-800-rgb: 153, 27, 27;
+  --ct-red-900: #7f1d1d;
+  --ct-red-900-rgb: 127, 29, 29;
+  --ct-red-950: #450a0a;
+  --ct-red-950-rgb: 69, 10, 10;
+
   --color-primary: #005bac;
   --color-primary-background: var(--ct-slate-200);
 }
@@ -37,6 +60,7 @@
 }
 
 body {
+  color: var(--ct-slate-800);
   font-family: 'Noto Sans JP', sans-serif;
   min-height: 100vh;
   font-size: 16px;

client/src/components/BenchmarkDetail.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import BenchmarkStatusChip from '@/components/BenchmarkStatusChip.vue'
+import ErrorMessage from '@/components/ErrorMessage.vue'
+import { formatDate } from '@/lib/formatDate'
+import { useTeamBench, useTeamInstances, useUsers } from '@/lib/useServerData'
+import { computed, watch } from 'vue'
+
+const { teamId, benchId } = defineProps<{
+  teamId: string
+  benchId: string
+}>()
+
+const { data: bench, error: benchError, refetch } = useTeamBench(teamId, benchId)
+const { data: instances } = useTeamInstances(teamId)
+const { data: users } = useUsers()
+
+const instance = computed(() => instances.value?.find((i) => i.id === bench.value?.instanceId))
+const user = computed(() => users.value?.find((u) => u.id === bench.value?.userId))
+
+watch(
+  bench,
+  () => {
+    if (bench.value?.status === 'running' || bench.value?.status === 'waiting') {
+      const interval = setInterval(() => {
+        refetch()
+      }, 1000)
+      return () => clearInterval(interval)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <ErrorMessage v-if="benchError"></ErrorMessage>
+  <div v-if="bench" class="bench-detail-container">
+    <div class="bench-score-container">
+      <div class="bench-score-label">スコア</div>
+      <div v-if="bench.score !== undefined" class="bench-score-content">{{ bench.score }}</div>
+      <div v-else class="bench-score-content-dimmed">未計測</div>
+    </div>
+    <div class="bench-detail-element-container">
+      <div class="bench-detail-element">
+        <div class="bench-detail-label">ステータス</div>
+        <BenchmarkStatusChip :status="bench.status" />
+      </div>
+      <div class="bench-detail-element">
+        <div class="bench-detail-label">実行ユーザー</div>
+        <div class="bench-detail-content">@{{ user?.name }}</div>
+      </div>
+      <div class="bench-detail-element">
+        <div class="bench-detail-label">対象サーバー</div>
+        <div class="bench-detail-content">サーバー{{ instance?.serverId }}</div>
+      </div>
+      <div class="bench-detail-element">
+        <div class="bench-detail-label">リクエスト時刻</div>
+        <div class="bench-detail-content">
+          {{ formatDate(bench.createdAt, 'YYYY/MM/DD hh:mm:ss') }}
+        </div>
+      </div>
+      <div class="bench-detail-element">
+        <div class="bench-detail-label">開始時刻</div>
+        <div class="bench-detail-content" v-if="bench.startedAt">
+          {{ formatDate(bench.startedAt, 'YYYY/MM/DD hh:mm:ss') }}
+        </div>
+        <div class="bench-detail-content-dimmed" v-else>まだ開始していません</div>
+      </div>
+      <div class="bench-detail-element">
+        <div class="bench-detail-label">終了時刻</div>
+        <div class="bench-detail-content" v-if="bench.finishedAt">
+          {{ formatDate(bench.finishedAt, 'YYYY/MM/DD hh:mm:ss') }}
+        </div>
+        <div class="bench-detail-content-dimmed" v-else>まだ終了していません</div>
+      </div>
+    </div>
+    <div class="bench-log-container">
+      <pre><code>{{ bench.log }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bench-detail-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bench-score-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ct-slate-300);
+  border-radius: 2px;
+  padding: 0.5rem;
+}
+.bench-score-label {
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+.bench-score-content {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+.bench-score-content-dimmed {
+  font-size: 1.5rem;
+  color: var(--ct-slate-500);
+}
+
+.bench-detail-element-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+.bench-detail-element {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ct-slate-300);
+  border-radius: 2px;
+  padding: 0.5rem;
+}
+.bench-detail-label {
+  font-weight: 700;
+  font-size: 0.8rem;
+}
+.bench-detail-content {
+  font-size: 0.9rem;
+}
+.bench-detail-content-dimmed {
+  font-size: 0.9rem;
+  color: var(--ct-slate-500);
+}
+
+.bench-log-container {
+  border-radius: 2px;
+  background-color: var(--ct-slate-800);
+  color: var(--ct-slate-200);
+  font-size: 0.8rem;
+  padding: 1rem;
+  overflow-x: auto;
+}
+</style>

client/src/components/BenchmarkList.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useTeamBenches, useTeamInstances, useUsers } from '@/lib/useServerData'
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { formatDate } from '@/lib/formatDate'
+import { Icon } from '@iconify/vue'
+import ErrorMessage from '@/components/ErrorMessage.vue'
+import BenchmarkStatusChip from '@/components/BenchmarkStatusChip.vue'
+
+const { teamId } = defineProps<{ teamId: string }>()
+
+const { data: benches, error: benchesError } = useTeamBenches(teamId)
+const sortedBenches = computed(() =>
+  [...(benches.value ?? [])].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  ),
+)
+const { data: instances } = useTeamInstances(teamId)
+const { data: users } = useUsers()
+</script>
+
+<template>
+  <div class="bench-list">
+    <div class="list-label">
+      <Icon icon="mdi:score" width="24" height="24" />
+      <span>スコア</span>
+    </div>
+    <div class="list-label">
+      <Icon icon="mdi:calendar-clock" width="24" height="24" />
+      <span>日時</span>
+    </div>
+    <div class="list-label">
+      <Icon icon="mdi:server-network" width="24" height="24" />
+      <span>対象サーバー</span>
+    </div>
+    <div class="list-label">
+      <Icon icon="mdi:account" width="24" height="24" />
+      <span>実行ユーザー</span>
+    </div>
+    <div class="list-label">
+      <Icon icon="mdi:progress-clock" width="24" height="24" />
+      <span>ステータス</span>
+    </div>
+    <div class="list-label"></div>
+    <template v-for="bench in sortedBenches" :key="bench.id">
+      <div v-if="bench.score !== undefined" class="bench-score">
+        {{ bench.score }}
+      </div>
+      <div v-else class="bench-score-loading">計測中</div>
+      <div>
+        {{ formatDate(bench.createdAt, 'YYYY/MM/DD hh:mm:ss.SSS') }}
+      </div>
+      <div class="bench-server">
+        サーバー{{ instances?.find((i) => i.id === bench.instanceId)?.serverId ?? '?' }}
+      </div>
+      <div class="bench-user">
+        <img
+          :src="`https://q.trap.jp/api/v3/public/icon/${users?.find((u) => u.id === bench.userId)?.name}`"
+          alt=""
+          width="24"
+          height="24"
+        />
+        <span>@{{ users?.find((u) => u.id === bench.userId)?.name }}</span>
+      </div>
+      <div>
+        <BenchmarkStatusChip :status="bench.status" />
+      </div>
+      <div>
+        <RouterLink :to="`/benches/${bench.id}`" class="bench-link">
+          <span>詳細を見る</span>
+          <Icon icon="mdi:chevron-right" width="24" height="24" />
+        </RouterLink>
+      </div>
+    </template>
+  </div>
+  <ErrorMessage v-if="benchesError" />
+</template>
+
+<style scoped>
+.bench-list {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
+}
+
+.bench-skeleton {
+  height: 2rem;
+  border-bottom: 1px solid var(--ct-slate-300);
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.bench-list > div {
+  border-bottom: 1px solid var(--ct-slate-300);
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.list-label {
+  font-weight: 700;
+  gap: 0.25rem;
+}
+
+.bench-score {
+  font-weight: 700;
+}
+.bench-score-loading {
+  color: var(--ct-slate-500);
+  font-size: 0.8rem;
+}
+
+.bench-user {
+  font-weight: 600;
+  font-size: 0.9rem;
+  gap: 0.25rem;
+}
+
+.bench-link {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0rem;
+  text-decoration: none;
+  color: var(--color-primary);
+  font-weight: 700;
+}
+
+.bench-link svg {
+  margin-top: 0.15rem;
+}
+</style>

client/src/components/BenchmarkStatusChip.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { components } from '@/api/openapi'
+type Status = components['schemas']['BenchmarkStatus']
+const { status } = defineProps<{ status: Status }>()
+
+const labels: Record<Status, string> = {
+  waiting: 'WAITING',
+  running: 'RUNNING',
+  finished: 'FINISHED',
+}
+</script>
+
+<template>
+  <div class="status-chip" :class="status">
+    {{ labels[status] }}
+  </div>
+</template>
+
+<style scoped>
+.status-chip {
+  line-height: 2;
+  border-radius: 2px;
+  width: 72px;
+  color: white;
+  font-weight: 600;
+  font-size: 0.7rem;
+  text-align: center;
+}
+.status-chip.waiting {
+  background-color: #f0ad4e33;
+  color: #f0ad4e;
+}
+.status-chip.running {
+  background-color: #5bc0de33;
+  color: #5bc0de;
+}
+.status-chip.finished {
+  background-color: #5cb85c33;
+  color: #5cb85c;
+}
+</style>

client/src/components/ErrorMessage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+  <div class="error-message">
+    <Icon icon="mdi:alert-octagon" width="48" height="48" />
+    <span>エラーが発生しました</span>
+  </div>
+</template>
+
+<style scoped>
+.error-message {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.2rem;
+  color: var(--ct-red-500);
+  font-weight: 700;
+  text-align: center;
+}
+</style>