-
Notifications
You must be signed in to change notification settings - Fork 153
/
BuildAnalyzeDetails.vue
131 lines (123 loc) · 3.85 KB
/
BuildAnalyzeDetails.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<script setup lang="ts">
import { formatTimeAgo } from '@vueuse/core'
import type { AnalyzeBuildMeta } from '../../src/types'
const props = defineProps<{
current: AnalyzeBuildMeta
prev?: AnalyzeBuildMeta
}>()
const ROUTE_ANALYZE = '/__nuxt_devtools__/analyze/'
const tabs = computed(() => {
const items = [
{ name: 'Overview', id: 'overview' },
]
if (props.current.features.bundleClient)
items.push({ name: 'Client Bundle', id: 'bundle-client' })
if (props.current.features.bundleNitro)
items.push({ name: 'Nitro Bundle', id: 'bundle-nitro' })
if (props.current.features.viteInspect)
items.push({ name: 'Vite Inspect', id: 'vite-inspect' })
return items
})
const selectedTab = ref(tabs.value[0])
const openInEditor = useOpenInEditor()
function formatFileSize(bytes: number) {
if (bytes < 1024)
return `${bytes}B`
if (bytes < 1024 * 1024)
return `${(bytes / 1024).toFixed(1)}KB`
if (bytes < 1024 * 1024 * 1024)
return `${(bytes / 1024 / 1024).toFixed(1)}MB`
return `${(bytes / 1024 / 1024 / 1024).toFixed(1)}GB`
}
function formatDuration(build: AnalyzeBuildMeta) {
return `${((build.endTime - build.startTime) / 1000).toFixed(1)}s`
}
</script>
<template>
<div h-full grid="~ rows-[max-content_1fr]">
<div flex="~ wrap" w-full>
<template v-for="tab, idx of tabs" :key="idx">
<button
px4 py2 border="r base"
hover="bg-active"
:class="tab.id === selectedTab.id ? '' : 'border-b'"
@click="selectedTab = tab"
>
<div :class="tab.id === selectedTab.id ? '' : 'op30' ">
{{ tab.name }}
</div>
</button>
</template>
<div border="b base" flex-auto />
</div>
<div
v-if="selectedTab.id === 'overview'"
flex="~ col gap-4 items-center justify-center" p4
>
<div flex-auto />
<div grid="~ cols-[30px_1fr] gap-x-2 gap-y-3 items-center justify-center" w-100>
<div i-carbon-commit text-xl />
<div>
<div text-sm op50>
Name
</div>
<div>{{ current.name }}</div>
</div>
<div i-carbon-time text-xl />
<div>
<div text-sm op50>
Build duration
</div>
<div>{{ formatDuration(current) }}</div>
</div>
<template v-if="current.size?.clientBundle">
<div i-carbon-cics-program text-xl />
<div>
<div text-sm op50>
Client bundle size
</div>
<div>{{ formatFileSize(current.size.clientBundle) }}</div>
</div>
</template>
<template v-if="current.size.nitroBundle">
<div i-carbon-bare-metal-server text-xl />
<div>
<div text-sm op50>
Nitro bundle size
</div>
<div>{{ formatFileSize(current.size.nitroBundle) }}</div>
</div>
</template>
<div i-carbon-edge-node text-xl />
<div>
<div text-sm op50>
Built
</div>
<div>{{ formatTimeAgo(new Date(current.endTime)) }}</div>
</div>
</div>
<NButton n="primary" icon="carbon-launch" @click="openInEditor(current.analyzeDir)">
Open in Editor
</NButton>
<div flex-auto />
<NButton n="rose" icon="carbon-delete" @click="rpc.clearAnalyzeBuilds([current.name])">
Delete this report
</NButton>
</div>
<iframe
v-lazy-show="selectedTab.id === 'bundle-client'"
:src="`${ROUTE_ANALYZE}${current.slug}/client.html`"
h-full w-full
/>
<iframe
v-lazy-show="selectedTab.id === 'bundle-nitro'"
:src="`${ROUTE_ANALYZE}${current.slug}/nitro.html`"
h-full w-full
/>
<iframe
v-lazy-show="selectedTab.id === 'vite-inspect'"
:src="`${ROUTE_ANALYZE}${current.slug}/.vite-inspect/`"
h-full w-full
/>
</div>
</template>