|
| 1 | +<!-- Copyright (C) 2022 Intel Corporation --> |
| 2 | +<!-- SPDX-License-Identifier: MIT --> |
| 3 | + |
| 4 | +<script setup lang="ts"> |
| 5 | +import { computed, onMounted, ref } from 'vue'; |
| 6 | +import { Api } from '@/core/api'; |
| 7 | +import { signature as preferencesSignature } from '@/core/preferences'; |
| 8 | +import { signature as loadoutSignature } from '@/core/loadout'; |
| 9 | +import { type AppInfo } from '@/core/app-info'; |
| 10 | +
|
| 11 | +interface InfoRow { |
| 12 | + label: string; |
| 13 | + value: string; |
| 14 | +} |
| 15 | +
|
| 16 | +defineOptions({ name: 'AboutConfigView' }); |
| 17 | +
|
| 18 | +const appInfo = ref<AppInfo|null>(null); |
| 19 | +const errorMessage = ref(''); |
| 20 | +
|
| 21 | +function boolText(value: boolean): string { |
| 22 | + return value ? 'Yes' : 'No'; |
| 23 | +} |
| 24 | +
|
| 25 | +const applicationRows = computed<InfoRow[]>(() => { |
| 26 | + if (appInfo.value === null) { |
| 27 | + return []; |
| 28 | + } |
| 29 | + return [ |
| 30 | + { label: 'Product', value: appInfo.value.productName }, |
| 31 | + { label: 'Product Version', value: appInfo.value.productVersion }, |
| 32 | + { label: 'API Version', value: appInfo.value.apiVersion }, |
| 33 | + { label: 'Middleware API Version', value: appInfo.value.middlewareApiVersion }, |
| 34 | + { label: 'Preferences Format', value: preferencesSignature.version }, |
| 35 | + { label: 'Loadout Format', value: loadoutSignature.version }, |
| 36 | + { label: 'UI Dev Mode', value: boolText(appInfo.value.devModeEnabled) }, |
| 37 | + { label: 'Chromium Debugging', value: boolText(appInfo.value.chromiumDebugEnabled) }, |
| 38 | + { label: 'Debug Blocklist', value: boolText(appInfo.value.debugBlocklistEnabled) }, |
| 39 | + { label: 'Log Level', value: appInfo.value.logLevel }, |
| 40 | + { label: 'Verbose Modules', value: appInfo.value.verboseModules }, |
| 41 | + ]; |
| 42 | +}); |
| 43 | +
|
| 44 | +const buildRows = computed<InfoRow[]>(() => { |
| 45 | + if (appInfo.value === null) { |
| 46 | + return []; |
| 47 | + } |
| 48 | + return [ |
| 49 | + { label: 'Git Hash', value: appInfo.value.buildHash }, |
| 50 | + { label: 'Short Hash', value: appInfo.value.buildHashShort }, |
| 51 | + { label: 'Build Date/Time', value: appInfo.value.buildDateTime }, |
| 52 | + { label: 'Build Config', value: appInfo.value.buildConfig }, |
| 53 | + { label: 'Dirty Build', value: boolText(appInfo.value.buildDirty) }, |
| 54 | + ]; |
| 55 | +}); |
| 56 | +
|
| 57 | +const serviceRows = computed<InfoRow[]>(() => { |
| 58 | + if (appInfo.value === null) { |
| 59 | + return []; |
| 60 | + } |
| 61 | + return [ |
| 62 | + { label: 'Service Build ID', value: appInfo.value.serviceBuildId }, |
| 63 | + { label: 'Service Build Time', value: appInfo.value.serviceBuildTime }, |
| 64 | + { label: 'Service Version', value: appInfo.value.serviceVersion }, |
| 65 | + ]; |
| 66 | +}); |
| 67 | +
|
| 68 | +const runtimeRows = computed<InfoRow[]>(() => { |
| 69 | + if (appInfo.value === null) { |
| 70 | + return []; |
| 71 | + } |
| 72 | + return [ |
| 73 | + { label: 'CEF Version', value: appInfo.value.cefVersion }, |
| 74 | + { label: 'MSVC Version', value: appInfo.value.msvcVersion }, |
| 75 | + { label: 'Windows SDK', value: appInfo.value.winSdkVersion }, |
| 76 | + { label: 'CRT Version', value: appInfo.value.crtVersion }, |
| 77 | + { label: 'CRT Runtime', value: appInfo.value.crtRuntime }, |
| 78 | + ]; |
| 79 | +}); |
| 80 | +
|
| 81 | +onMounted(async () => { |
| 82 | + try { |
| 83 | + appInfo.value = await Api.getAppInfo(); |
| 84 | + } |
| 85 | + catch (e) { |
| 86 | + errorMessage.value = e instanceof Error ? e.message : String(e); |
| 87 | + } |
| 88 | +}); |
| 89 | +</script> |
| 90 | + |
| 91 | +<template> |
| 92 | + <div class="page-wrap"> |
| 93 | + <h2 class="mt-5 ml-5 header-top"> |
| 94 | + About |
| 95 | + </h2> |
| 96 | + |
| 97 | + <v-card class="page-card"> |
| 98 | + <v-progress-linear v-if="appInfo === null && errorMessage === ''" indeterminate color="primary" class="mt-4"></v-progress-linear> |
| 99 | + |
| 100 | + <v-alert v-if="errorMessage !== ''" type="error" variant="tonal" class="mt-5"> |
| 101 | + {{ errorMessage }} |
| 102 | + </v-alert> |
| 103 | + |
| 104 | + <template v-if="appInfo !== null"> |
| 105 | + <v-card-title class="section-title">Application</v-card-title> |
| 106 | + <v-table density="compact" class="info-table"> |
| 107 | + <tbody> |
| 108 | + <tr v-for="row in applicationRows" :key="row.label"> |
| 109 | + <td class="info-label">{{ row.label }}</td> |
| 110 | + <td class="info-value">{{ row.value }}</td> |
| 111 | + </tr> |
| 112 | + </tbody> |
| 113 | + </v-table> |
| 114 | + |
| 115 | + <v-card-title class="section-title">Build</v-card-title> |
| 116 | + <v-table density="compact" class="info-table"> |
| 117 | + <tbody> |
| 118 | + <tr v-for="row in buildRows" :key="row.label"> |
| 119 | + <td class="info-label">{{ row.label }}</td> |
| 120 | + <td class="info-value">{{ row.value }}</td> |
| 121 | + </tr> |
| 122 | + </tbody> |
| 123 | + </v-table> |
| 124 | + |
| 125 | + <v-card-title class="section-title">Service</v-card-title> |
| 126 | + <v-table density="compact" class="info-table"> |
| 127 | + <tbody> |
| 128 | + <tr v-for="row in serviceRows" :key="row.label"> |
| 129 | + <td class="info-label">{{ row.label }}</td> |
| 130 | + <td class="info-value">{{ row.value }}</td> |
| 131 | + </tr> |
| 132 | + </tbody> |
| 133 | + </v-table> |
| 134 | + |
| 135 | + <v-card-title class="section-title">Runtime</v-card-title> |
| 136 | + <v-table density="compact" class="info-table"> |
| 137 | + <tbody> |
| 138 | + <tr v-for="row in runtimeRows" :key="row.label"> |
| 139 | + <td class="info-label">{{ row.label }}</td> |
| 140 | + <td class="info-value">{{ row.value }}</td> |
| 141 | + </tr> |
| 142 | + </tbody> |
| 143 | + </v-table> |
| 144 | + </template> |
| 145 | + </v-card> |
| 146 | + </div> |
| 147 | +</template> |
| 148 | + |
| 149 | +<style scoped> |
| 150 | +.header-top { |
| 151 | + color: white; |
| 152 | + user-select: none; |
| 153 | +} |
| 154 | +.page-card { |
| 155 | + margin: 15px 0; |
| 156 | + padding: 0 15px 15px; |
| 157 | +} |
| 158 | +.page-wrap { |
| 159 | + max-width: 750px; |
| 160 | + flex-grow: 1; |
| 161 | +} |
| 162 | +.section-title { |
| 163 | + color: rgba(255, 255, 255, 0.7); |
| 164 | + font-size: 16px; |
| 165 | + padding: 18px 0 6px; |
| 166 | +} |
| 167 | +.info-table { |
| 168 | + background: transparent; |
| 169 | +} |
| 170 | +.info-label { |
| 171 | + width: 210px; |
| 172 | + color: rgba(255, 255, 255, 0.7); |
| 173 | + white-space: nowrap; |
| 174 | +} |
| 175 | +.info-value { |
| 176 | + overflow-wrap: anywhere; |
| 177 | + user-select: text; |
| 178 | +} |
| 179 | +</style> |
0 commit comments