6985c39874
I can't think of any reason why this isnt currently the case as the extra lines are still there, just not displayed, meaning theres no difference in performance/memory usage Also means that sometimes entries are cut off which is weird Also, sometimes there is reason to wish to view older entries that may have scrolled off the page/keep reading something which was pushed too far down.
109 lines
2 KiB
Vue
109 lines
2 KiB
Vue
<template>
|
|
<div class="hyhctythnmwihguaaapnbrbszsjqxpio">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th><fa :icon="faExchangeAlt"/> In/Out</th>
|
|
<th><fa :icon="faBolt"/> Activity</th>
|
|
<th><fa icon="server"/> Host</th>
|
|
<th><fa icon="user"/> Actor</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="log in logs" :key="log.id">
|
|
<td :class="log.direction">{{ log.direction == 'in' ? '<' : '>' }} {{ log.direction }}</td>
|
|
<td>{{ log.activity }}</td>
|
|
<td>{{ log.host }}</td>
|
|
<td>@{{ log.actor }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import { faBolt, faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
logs: [],
|
|
connection: null,
|
|
faBolt, faExchangeAlt
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.connection = this.$root.stream.useSharedConnection('apLog');
|
|
this.connection.on('log', this.onLog);
|
|
this.connection.on('logs', this.onLogs);
|
|
this.connection.send('requestLog', {
|
|
id: Math.random().toString().substr(2, 8),
|
|
length: 50
|
|
});
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.connection.dispose();
|
|
},
|
|
|
|
methods: {
|
|
onLog(log) {
|
|
log.id = Math.random();
|
|
this.logs.unshift(log);
|
|
if (this.logs.length > 50) this.logs.pop();
|
|
},
|
|
|
|
onLogs(logs) {
|
|
for (const log of logs.reverse()) {
|
|
this.onLog(log)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.hyhctythnmwihguaaapnbrbszsjqxpio
|
|
display block
|
|
padding 12px 16px 16px 16px
|
|
height 250px
|
|
overflow auto
|
|
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
|
background var(--adminDashboardCardBg)
|
|
border-radius 8px
|
|
|
|
> table
|
|
width 100%
|
|
max-width 100%
|
|
overflow auto
|
|
border-spacing 0
|
|
border-collapse collapse
|
|
color var(--adminDashboardCardFg)
|
|
font-size 14px
|
|
|
|
thead
|
|
border-bottom solid 1px var(--adminDashboardCardDivider)
|
|
|
|
tr
|
|
th
|
|
font-weight normal
|
|
text-align left
|
|
|
|
tbody
|
|
tr
|
|
&:nth-child(odd)
|
|
background rgba(0, 0, 0, 0.025)
|
|
|
|
th, td
|
|
padding 8px 16px
|
|
min-width 128px
|
|
|
|
td.in
|
|
color #d26755
|
|
|
|
td.out
|
|
color #55bb83
|
|
|
|
</style>
|