Skip to content

S
spring-boot-admin
Commit 5461aeaa by Johannes Edmeier
Options

fix navigating to sessions with parameter set

also fix table styling in httptraces, auditevents and sessions
parent ac420c8c
Showing with 126 additions and 65 deletions
spring-boot-admin-server-ui/src/main/frontend/services/instance.js
......@@ -149,7 +149,7 @@ class Instance {
});
}
async fetchSessions(username) {
async fetchSessionsByUsername(username) {
return axios.get(uri`instances/${this.id}/actuator/sessions`, {
headers: {'Accept': actuatorMimeTypes},
params: {username}
......
spring-boot-admin-server-ui/src/main/frontend/views/instances/auditevents/auditevents-list.vue
......@@ -15,7 +15,7 @@
-->
<template>
<table class="table is-hoverable is-fullwidth">
<table class="auditevents table is-hoverable is-fullwidth">
<thead>
<tr>
<th>Timestamp</th>
......@@ -28,7 +28,7 @@
<tbody>
<template v-for="event in events">
<tr class="is-selectable"
:class="{ 'event--is-detailed' : showDetails[event.key] }"
:class="{ 'auditevents__event--is-detailed' : showDetails[event.key] }"
@click="showDetails[event.key] ? $delete(showDetails, event.key) : $set(showDetails, event.key, true)"
:key="event.key">
<td v-text="event.timestamp.format('L HH:mm:ss.SSS')"/>
......@@ -48,9 +48,9 @@
</td>
<td v-else v-text="event.sessionId"/>
</tr>
<tr class="event__detail" :key="`${event.key}-detail`" v-if="showDetails[event.key]">
<tr :key="`${event.key}-detail`" v-if="showDetails[event.key]">
<td colspan="5">
<pre v-text="toJson(event.data)"/>
<pre class="auditevents__event-detail" v-text="toJson(event.data)"/>
</td>
</tr>
</template>
......@@ -94,14 +94,19 @@
</script>
<style lang="scss">
@import "~@/assets/css/utilities";
.auditevents {
table-layout: fixed;
.event--is-detailed td {
border: none !important;
}
td {
vertical-align: middle;
}
.event__detail td {
overflow-x: auto;
max-width: 1024px;
&__event--is-detailed td {
border: none !important;
}
&__event-detail {
overflow: auto;
}
}
</style>
spring-boot-admin-server-ui/src/main/frontend/views/instances/httptrace/traces-list.vue
......@@ -15,39 +15,40 @@
-->
<template>
<table class="table is-hoverable is-fullwidth">
<table class="httptraces table is-hoverable is-fullwidth">
<thead>
<tr>
<th>Timestamp</th>
<th>Method</th>
<th>Path</th>
<th>Status</th>
<th>Content-Type</th>
<th>Content-Length</th>
<th>Time</th>
<th class="httptraces__trace-timestamp">Timestamp</th>
<th class="httptraces__trace-method">Method</th>
<th class="httptraces__trace-uri">Path</th>
<th class="httptraces__trace-status">Status</th>
<th class="httptraces__trace-contentType">Content-Type</th>
<th class="httptraces__trace-contentLength">Length</th>
<th class="httptraces__trace-timeTaken">Time</th>
</tr>
</thead>
<tbody>
<template v-for="trace in traces">
<tr class="is-selectable"
:class="{ 'trace--is-detailed' : showDetails[trace.key] }"
:class="{ 'httptraces__trace---is-detailed' : showDetails[trace.key] }"
@click="showDetails[trace.key] ? $delete(showDetails, trace.key) : $set(showDetails, trace.key, true)"
:key="trace.key">
<td v-text="trace.timestamp.format('L HH:mm:ss.SSS')"/>
<td v-text="trace.request.method"/>
<td v-text="trace.request.uri"/>
<td>
<td class="httptraces__trace-timestamp" v-text="trace.timestamp.format('L HH:mm:ss.SSS')"/>
<td class="httptraces__trace-method" v-text="trace.request.method"/>
<td class="httptraces__trace-uri" v-text="trace.request.uri"/>
<td class="httptraces__trace-status">
<span v-text="trace.response.status" class="tag"
:class="{ 'is-success' : trace.isSuccess(), 'is-warning' : trace.isClientError(), 'is-danger' : trace.isServerError() }"/>
</td>
<td v-text="trace.contentType"/>
<td v-text="trace.contentLength ? prettyBytes(trace.contentLength) : ''"/>
<td
v-text="trace.timeTaken !== null && typeof trace.timeTaken !== 'undefined' ? `${trace.timeTaken} ms` : ''"/>
<td class="httptraces__trace-contentType" v-text="trace.contentType"/>
<td class="httptraces__trace-contentLength"
v-text="trace.contentLength ? prettyBytes(trace.contentLength) : ''"/>
<td class="httptraces__trace-timeTaken"
v-text="trace.timeTaken !== null && typeof trace.timeTaken !== 'undefined' ? `${trace.timeTaken} ms` : ''"/>
</tr>
<tr class="trace__detail" :key="`${trace.key}-detail`" v-if="showDetails[trace.key]">
<tr :key="`${trace.key}-detail`" v-if="showDetails[trace.key]">
<td colspan="7">
<pre v-text="toJson(trace)"/>
<pre class="httptraces__trace-detail" v-text="toJson(trace)"/>
</td>
</tr>
</template>
......@@ -83,12 +84,53 @@
<style lang="scss">
@import "~@/assets/css/utilities";
.trace--is-detailed td {
border: none !important;
}
.httptraces {
table-layout: fixed;
td {
vertical-align: middle;
overflow: hidden;
word-wrap: break-word;
}
&__trace {
&--is-detailed td {
border: none !important;
}
&-timestamp {
width: 130px;
}
&-method {
width: 100px;
}
.trace__detail td {
overflow-x: auto;
max-width: 1024px;
&-uri {
width: auto;
}
&-status {
width: 80px;
}
&-contentType {
width: 200px;
}
&-contentLength {
width: 100px;
}
&-timeTaken {
width: 120px;
}
&-detail {
overflow: auto;
}
}
}
</style>
spring-boot-admin-server-ui/src/main/frontend/views/instances/sessions/index.vue
......@@ -27,7 +27,8 @@
</span>
</div>
<div class="control is-expanded">
<input class="input" type="text" v-model="filter.value" @keyup.enter="fetchSessions()">
<input class="input" type="text" v-model="filter.value"
@keyup.enter="fetchSessionsByUsername()" @paste="handlePaste">
</div>
</div>
<div v-if="error" class="message is-danger">
......@@ -39,7 +40,7 @@
<p v-text="error.message"/>
</div>
</div>
<sba-sessions-list :instance="instance" :sessions="sessions"
<sba-sessions-list :instance="instance" :sessions="sessions" :is-loading="isLoading"
@deleted="fetch"/>
</div>
</section>
......@@ -88,14 +89,13 @@
if (this.filter.type === 'sessionId') {
this.sessions = await this.fetchSession()
} else {
this.sessions = await this.fetchSessions()
this.sessions = await this.fetchSessionsByUsername()
}
} catch (error) {
console.warn('Fetching sessions failed:', error);
this.error = error
} finally {
this.isLoading = false
}
this.isLoading = false
}, 250),
async fetchSession() {
try {
......@@ -109,32 +109,33 @@
}
}
},
async fetchSessions() {
const response = await this.instance.fetchSessions(this.filter.value);
async fetchSessionsByUsername() {
const response = await this.instance.fetchSessionsByUsername(this.filter.value);
return response.data.sessions.map(session => new Session(session))
},
updateFilter() {
this.filter = _.entries(this.$route.query)
.reduce((acc, [name, value]) => {
acc.type = name;
acc.value = value;
return acc;
}, {type: null, value: ''});
handlePaste(event) {
const looksLikeSessionId = event.clipboardData.getData('text').match(regexUuid);
if (looksLikeSessionId) {
this.filter.type = 'sessionId';
}
}
},
watch: {
'$route.query': {
handler: 'updateFilter',
immediate: true
immediate: true,
handler() {
this.filter = _.entries(this.$route.query)
.reduce((acc, [name, value]) => {
acc.type = name;
acc.value = value;
return acc;
}, {type: 'username', value: ''});
}
},
filter: {
deep: true,
immediate: true,
handler() {
if (this.filter.type === null) {
const looksLikeSessionId = this.filter.value.match(regexUuid);
this.filter.type = looksLikeSessionId ? 'sessionId' : 'username';
}
const query = {[this.filter.type]: this.filter.value};
if (!_.isEqual(query, !this.$route.query)) {
this.$router.replace({
......@@ -142,7 +143,6 @@
query: query
});
}
this.fetch();
}
}
......
spring-boot-admin-server-ui/src/main/frontend/views/instances/sessions/sessions-list.vue
......@@ -15,13 +15,13 @@
-->
<template>
<table class="table is-fullwidth">
<table class="sessions table is-fullwidth">
<thead>
<tr>
<th/>
<th>Session Id</th>
<th>Created at</th>
<th>Last accessed at</th>
<th>Expiry</th>
<th>Max. inactive<br>interval
</th>
<th>Attributes</th>
......@@ -39,15 +39,15 @@
</thead>
<tr v-for="session in sessions" :key="session.id">
<td>
<span v-if="session.expired" class="tag is-info">Expired</span>
</td>
<td>
<router-link v-text="session.id"
:to="{ name: 'instance/sessions', params: { 'instanceId' : instance.id}, query: { sessionId : session.id } }"/>
</td>
<td v-text="session.creationTime.format('L HH:mm:ss.SSS')"/>
<td v-text="session.lastAccessedTime.format('L HH:mm:ss.SSS')"/>
<td>
<span v-if="session.expired" class="tag is-info">Expired</span>
</td>
<td>
<span v-if="session.maxInactiveInterval >= 0" v-text="`${session.maxInactiveInterval}s`"/>
<span v-else>unlimited</span>
</td>
......@@ -66,7 +66,10 @@
</td>
</tr>
<tr v-if="sessions.length === 0">
<td class="is-muted" colspan="7 ">No sessions found.</td>
<td class="is-muted" colspan="7 ">
<p v-if="isLoading" class="is-loading">Loading Sessions...</p>
<p v-else>No Sessions found.</p>
</td>
</tr>
</table>
</template>
......@@ -85,6 +88,10 @@
instance: {
type: Instance,
required: true
},
isLoading: {
type: Boolean,
default: false
}
},
data: () => ({
......@@ -135,3 +142,10 @@
}
}
</script>
<style lang="scss">
.sessions {
& td {
vertical-align: middle;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment