110 lines
2 KiB
Vue
110 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>
|