таблица для просмотра логов

This commit is contained in:
Vladislav Ostapov 2025-01-29 16:32:31 +03:00
parent 3f9f1ff839
commit 77a159a1a8
2 changed files with 33 additions and 10 deletions

View File

@ -28,6 +28,7 @@
.l3-proto-label input[type=checkbox] { .l3-proto-label input[type=checkbox] {
width: auto; width: auto;
} }
.
</style> </style>
</head> </head>
<body> <body>
@ -87,13 +88,24 @@
<option :value="604800000">7 суток</option> <option :value="604800000">7 суток</option>
</select> </select>
</label> </label>
<button class="action-button" @click="settingsSubmitLoggingStatistics()">Сохранить <span class="submit-spinner" v-show="submitStatus.loggingIps"></span></button> <button class="action-button" @click="settingsSubmitLoggingStatistics()">Сохранить <span class="submit-spinner" v-show="submitStatus.loggingStatistics"></span></button>
</div> </div>
<div class="settings-set-container"> <div class="settings-set-container">
<h2>Просмотр логов</h2> <h2>Просмотр логов</h2>
<button class="action-button" @click="logView()">Обновить <span class="submit-spinner" v-show="submitStatus.logView"></span></button> <button class="action-button" @click="logView()">Обновить <span class="submit-spinner" v-show="submitStatus.logView"></span></button>
<a href="/dev/logs.csv" class="action-button" download>Скачать</a> <a href="/dev/logs.csv" class="action-button" download>Скачать</a>
<pre style="overflow-x: auto">{{ logfileContent }}</pre> <div v-if="logsTable.headers.length != 0" style="overflow-x: auto;">
<table>
<tbody>
<tr>
<th v-for="h in logsTable.headers">{{ h }}</th>
</tr>
<tr v-for="r in logsTable.rows">
<td v-for="value in r">{{ value }}</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -120,7 +132,10 @@
maxAgeMs: 0 maxAgeMs: 0
} }
}, },
logfileContent: "", logsTable: {
headers: [],
rows: []
},
settingFetchComplete: false settingFetchComplete: false
} }
@ -173,7 +188,16 @@
this.submitStatus.logView = true this.submitStatus.logView = true
fetch(`/dev/logs.csv`, {method: 'GET', credentials: 'same-origin' }) fetch(`/dev/logs.csv`, {method: 'GET', credentials: 'same-origin' })
.then(async (resp) => { this.logfileContent = await resp.text() }) .then(async (resp) => {
let logfileContent = await resp.text()
const lines = logfileContent.split(/\r\n|\n/)
// Первая строка содержит заголовки
this.logsTable.headers = lines.shift().split('\t')
// Остальные строки содержат данные
this.logsTable.rows = lines.map(line => line.split('\t'))
})
.catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) }) .catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) })
.finally(() => { this.submitStatus.logView = false }) .finally(() => { this.submitStatus.logView = false })
}, },

View File

@ -84,15 +84,14 @@
padding: 1em; padding: 1em;
} }
.settings-set-container th { .statistics-container th {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
padding: 0.2em 1em 0.2em 0.2em;
}
.settings-set-container td {
min-width: 10em;
padding: 0.2em;
} }
th { padding: 0.2em 1em 0.2em 0.2em; }
.statistics-container td { min-width: 10em; }
td { padding: 0.2em; }
.tabs-item-flex-container h2 { .tabs-item-flex-container h2 {
margin-top: 0; margin-top: 0;
} }