82 lines
2.6 KiB
Vue
82 lines
2.6 KiB
Vue
<template>
|
|
<Section :title="t('diagnostics.config-issues')">
|
|
<p>{{ t('diagnostics.config-issues-description') }}</p>
|
|
|
|
<p v-if="!loading && configIssues.length === 0">
|
|
{{ t('diagnostics.config-issues-none') }}
|
|
</p>
|
|
|
|
<Table
|
|
v-else
|
|
:data="configIssueRows"
|
|
:headers="configIssueHeaders"
|
|
:show-pagination="false"
|
|
>
|
|
<template #cell-severity="{ value }">
|
|
<div
|
|
class="tag"
|
|
:class="value === 'error' ? 'fg-bad' : 'fg-warning'"
|
|
>
|
|
{{ value }}
|
|
</div>
|
|
</template>
|
|
</Table>
|
|
</Section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import Section from 'picocrank/vue/components/Section.vue'
|
|
import Table from 'picocrank/vue/components/Table.vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const configIssues = ref([])
|
|
const loading = ref(false)
|
|
|
|
const configIssueHeaders = computed(() => [
|
|
{ key: 'severity', label: t('diagnostics.config-issue-severity'), sortable: true, width: '7rem' },
|
|
{ key: 'configFile', label: t('diagnostics.config-issue-config-file'), sortable: true, width: '14rem' },
|
|
{ key: 'code', label: t('diagnostics.config-issue-code'), sortable: true, width: '12rem' },
|
|
{ key: 'message', label: t('diagnostics.config-issue-message'), sortable: false },
|
|
{ key: 'actionTitle', label: t('diagnostics.config-issue-action'), sortable: true, width: '10rem' },
|
|
{ key: 'argumentName', label: t('diagnostics.config-issue-argument'), sortable: true, width: '8rem' },
|
|
{ key: 'source', label: t('diagnostics.config-issue-source'), sortable: false, width: '12rem' }
|
|
])
|
|
|
|
const configIssueRows = computed(() => configIssues.value.map((issue) => ({
|
|
severity: issue.severity || '',
|
|
code: issue.code || '',
|
|
message: issue.message || '',
|
|
actionTitle: issue.actionTitle || '',
|
|
argumentName: issue.argumentName || '',
|
|
configFile: issue.configFile || '',
|
|
source: issue.source || ''
|
|
})))
|
|
|
|
async function fetchDiagnostics () {
|
|
loading.value = true
|
|
|
|
try {
|
|
const response = await window.client.getDiagnostics()
|
|
configIssues.value = response.configIssues || []
|
|
} catch (err) {
|
|
console.error('Failed to fetch diagnostics:', err)
|
|
configIssues.value = []
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDiagnostics()
|
|
window.addEventListener('EventConfigChanged', fetchDiagnostics)
|
|
window.addEventListener('EventEntityChanged', fetchDiagnostics)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('EventConfigChanged', fetchDiagnostics)
|
|
window.removeEventListener('EventEntityChanged', fetchDiagnostics)
|
|
})
|
|
</script>
|