blob: b9b6a92af504f555e8ffa67c1ffeb67894d80d3b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<template>
<div class="row no-gutters">
<div class="col-12">
<div class="search-box mb-3">
<input class="w-100 px-3 py-2" v-model="filterPattern" type="text" placeholder="filter">
<span class="search-stats">{{ searchStats }}</span>
</div>
</div>
<div class="col-12">
<card v-if="matchedMetrics.length > 0">
<div class="row no-gutters" v-for="(metric, index) in matchedMetrics" :key="metric.search">
<div class="col-12 px-3 pt-1 pb-3">
<div class="text-uppercase text-label">{{ metric.type }}</div>
<h5>{{ metric.name }}</h5>
<div class="tag-container">
<span class="tag" v-for="tag in Object.keys(metric.tags)" :key="tag">
{{ tag }}=<span class="tag-value">{{ metric.tags[tag] }}</span>
</span>
</div>
</div>
<hr v-if="index < (matchedMetrics.length - 1)" class="w-100">
</div>
</card>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import {Metric} from '../api/StatusApi'
import Card from './Card.vue'
@Component({
components: {
card: Card
}
})
export default class MetricList extends Vue {
@Prop() private metrics!: Metric[]
private filterPattern: string = ''
get totalMetrics(): number {
return this.metrics.length
}
get filterRegex(): RegExp {
return new RegExp(this.filterPattern)
}
get searchStats(): string {
if (this.filterPattern.length > 0) {
return this.matchedMetrics.length + ' matched'
} else {
return this.totalMetrics + ' metrics'
}
}
get matchedMetrics(): Metric[] {
if (this.filterPattern.length > 0) {
return this.metrics.filter(m => m.search.match(this.filterRegex) != null)
} else {
return this.metrics
}
}
}
</script>
<style scoped lang="scss">
.search-box {
input {
color: #676767;
height: 2.5rem;
border: none;
border-radius: 0.3rem;
background-color: #efefef;
&:focus {
outline: none;
}
}
::placeholder {
color: #929292;
}
.search-stats {
position: absolute;
line-height: 2.5rem;
right: 0;
padding-right: 1rem;
}
}
</style>
|
