Skip to content

S
spring-boot-admin
Commit 997ee850 by Johannes Edmeier
Options

Add details for caches

parent 40351b50
Showing with 332 additions and 14 deletions
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/cache-chart.vue 0 → 100644
<!--
- Copyright 2014-2018 the original author or authors.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<template>
<div class="cache-chart">
<svg class="cache-chart__svg"></svg>
</div>
</template>
<script>
import d3 from '@/utils/d3';
import moment from 'moment';
export default {
props: ['data'],
data: () => ({}),
methods: {
drawChart(_data) {
const vm = this;
const data = _data.length === 1 ? _data.concat([{..._data[0], timestamp: _data[0].timestamp + 1}]) : _data;
///setup x and y scale
const extent = d3.extent(data, d => d.timestamp);
const x = d3.scaleTime()
.range([0, vm.width])
.domain(extent);
const y = d3.scaleLinear()
.range([vm.height, 0])
.domain([0, d3.max(data, d => d.total) * 1.05]);
//draw areas
const miss = vm.areas.selectAll('.cache-chart__area--miss')
.data([data]);
miss.enter().append('path')
.merge(miss)
.attr('class', 'cache-chart__area--miss')
.attr('d', d3.area()
.x(d => x(d.timestamp))
.y0(d => y(d.hit))
.y1(d => y(d.total)));
miss.exit().remove();
const hit = vm.areas.selectAll('.cache-chart__area--hit')
.data([data]);
hit.enter().append('path')
.merge(hit)
.attr('class', 'cache-chart__area--hit')
.attr('d', d3.area()
.x(d => x(d.timestamp))
.y0(y(0))
.y1(d => y(d.hit)));
hit.exit().remove();
//draw axis
vm.xAxis.call(d3.axisBottom(x)
.ticks(5)
.tickFormat(d => moment(d).format("HH:mm:ss"))
);
vm.yAxis.call(d3.axisLeft(y)
.ticks(5)
.tickFormat(d => d <= 1000 ? d : (d / 1000).toFixed(1) + 'K')
);
},
},
mounted() {
const margin = {
top: 5,
right: 5,
bottom: 30,
left: 50,
};
this.width = this.$el.getBoundingClientRect().width - margin.left - margin.right;
this.height = this.$el.getBoundingClientRect().height - margin.top - margin.bottom;
this.chartLayer = d3.select(this.$el.querySelector('.cache-chart__svg'))
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
this.xAxis = this.chartLayer.append('g')
.attr('class', 'cache-chart__axis-x')
.attr('transform', `translate(0,${this.height})`);
this.yAxis = this.chartLayer.append('g')
.attr('class', 'cache-chart__axis-y')
.attr('stroke', null);
this.areas = this.chartLayer.append('g');
this.drawChart(this.data);
},
watch: {
data(newVal) {
this.drawChart(newVal);
}
}
}
</script>
<style lang="scss">
@import "~@/assets/css/utilities";
.cache-chart {
&__svg {
height: 159px;
width: 100%;
}
&__area {
&--miss {
fill: $warning;
opacity: 0.8;
}
&--hit {
fill: $info;
opacity: 0.8;
}
}
}
</style>
\ No newline at end of file
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/datasource-chart.vue
......@@ -39,7 +39,7 @@
const y = d3.scaleLinear()
.range([vm.height, 0])
.domain([0, d3.max(data, d => d.active) * 1.1]);
.domain([0, d3.max(data, d => d.active) * 1.05]);
//draw max
const max = vm.areas.selectAll('.datasource-chart__line--max')
......@@ -80,7 +80,7 @@
top: 5,
right: 5,
bottom: 30,
left: 25,
left: 50,
};
this.width = this.$el.getBoundingClientRect().width - margin.left - margin.right;
......
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue 0 → 100644
<!--
- Copyright 2014-2018 the original author or authors.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<template>
<sba-panel :title="`Cache: ${cacheName}`" v-if="current">
<div slot="text">
<div class="level cache-current">
<div class="level-item has-text-centered">
<div>
<p class="heading has-bullet has-bullet-info">Hits</p>
<p v-text="current.hit"></p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading has-bullet has-bullet-warning">Total</p>
<p v-text="current.total"></p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Hit ratio</p>
<p v-text="ratio"></p>
</div>
</div>
</div>
<cache-chart :data="chartData"></cache-chart>
</div>
</sba-panel>
</template>
<script>
import subscribing from '@/mixins/subscribing';
import {Observable} from '@/utils/rxjs';
import moment from 'moment';
import cacheChart from './cache-chart';
export default {
props: ['instance', 'cacheName'],
mixins: [subscribing],
components: {cacheChart},
data: () => ({
current: null,
chartData: [],
}),
computed: {
ratio() {
if (this.current.total > 0) {
return (this.current.hit / this.current.total * 100).toFixed(2) + '%';
}
return '-';
}
},
watch: {
instance() {
this.subscribe()
},
dataSource() {
this.current = null;
this.chartData = [];
}
},
methods: {
async fetchMetrics() {
const responseHit = this.instance.fetchMetric('cache.requests', {name: this.cacheName, result: 'hit'});
const responseMiss = this.instance.fetchMetric('cache.requests', {name: this.cacheName, result: 'miss'});
const hit = (await responseHit).data.measurements[0].value;
const miss = (await responseMiss).data.measurements[0].value;
return {
hit,
miss,
total: hit + miss
};
},
createSubscription() {
const vm = this;
if (this.instance) {
return Observable.timer(0, 2500)
.concatMap(this.fetchMetrics)
.subscribe({
next: data => {
vm.current = data;
vm.chartData.push({...data, timestamp: moment.now().valueOf()});
},
errors: err => {
vm.unsubscribe();
}
});
}
}
}
}
</script>
<style lang="scss">
.datasource-current {
margin-bottom: 0 !important;
}
</style>
\ No newline at end of file
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-caches.vue 0 → 100644
<!--
- Copyright 2014-2018 the original author or authors.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<template>
<div>
<details-cache v-for="cache in caches" :key="cache"
:instance="instance" :cache-name="cache"></details-cache>
</div>
</template>
<script>
import subscribing from '@/mixins/subscribing';
import {Observable} from '@/utils/rxjs';
import _ from 'lodash';
import detailsCache from './details-cache';
export default {
props: ['instance', 'type'],
mixins: [subscribing],
components: {detailsCache},
data: () => ({
caches: [],
}),
watch: {
instance() {
this.subscribe();
}
},
methods: {
async fetchcaches() {
if (this.instance) {
try {
const response = await this.instance.fetchMetric('cache.requests');
return _.uniq(response.data.availableTags.filter(tag => tag.tag === 'name')[0].values);
} catch (error) {
return [];
}
}
},
createSubscription() {
const vm = this;
if (this.instance) {
return Observable.timer(0, 2500)
.concatMap(this.fetchcaches)
.subscribe({
next: names => {
vm.caches = names
},
errors: err => {
vm.unsubscribe();
}
});
}
}
}
}
</script>
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
......@@ -15,7 +15,7 @@
-->
<template>
<sba-panel :title="`Datasource: ${upperFirst(dataSource)}`" v-if="current">
<sba-panel :title="`Datasource: ${dataSource}`" v-if="current">
<div slot="text">
<div class="level datasource-current">
<div class="level-item has-text-centered">
......@@ -46,7 +46,6 @@
<script>
import subscribing from '@/mixins/subscribing';
import {Observable} from '@/utils/rxjs';
import _ from 'lodash';
import moment from 'moment';
import datasourceChart from './datasource-chart';
......@@ -68,7 +67,6 @@
}
},
methods: {
upperFirst: _.upperFirst,
async fetchMetrics() {
const responseActive = this.instance.fetchMetric('data.source.active.connections', {name: this.dataSource});
const responseMin = this.instance.fetchMetric('data.source.min.connections', {name: this.dataSource});
......
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
......@@ -47,6 +47,7 @@
<details-datasources :instance="instance"></details-datasources>
</div>
<div class="column">
<details-caches :instance="instance"></details-caches>
</div>
</div>
</div>
......@@ -54,6 +55,7 @@
</template>
<script>
import detailsCaches from './details-caches';
import detailsDatasources from './details-datasources';
import detailsGc from './details-gc';
import detailsHealth from './details-health';
......@@ -70,11 +72,9 @@
detailsThreads,
detailsDatasources,
detailsMemory,
detailsGc
detailsGc,
detailsCaches
},
props: ['instance']
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
</script>
\ No newline at end of file
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/mem-chart.vue
......@@ -41,7 +41,7 @@
const y = d3.scaleLinear()
.range([vm.height, 0])
.domain([0, d3.max(data, d => d.committed) * 1.1]);
.domain([0, d3.max(data, d => d.committed) * 1.05]);
//draw max
const max = vm.areas.selectAll('.mem-chart__line--max')
......
spring-boot-admin-server-ui/src/main/frontend/views/instances/details/threads-chart.vue
......@@ -39,7 +39,7 @@
const y = d3.scaleLinear()
.range([vm.height, 0])
.domain([0, d3.max(data, d => d.live) * 1.1]);
.domain([0, d3.max(data, d => d.live) * 1.05]);
//draw max
const live = vm.areas.selectAll('.threads-chart__area--live')
......@@ -81,7 +81,7 @@
top: 5,
right: 5,
bottom: 30,
left: 25,
left: 50,
};
this.width = this.$el.getBoundingClientRect().width - margin.left - margin.right;
......
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