Skip to content

Commit 64cd556

Browse files
marle3003marle3003
committed
fix: add missing files
1 parent b13e712 commit 64cd556

6 files changed

Lines changed: 342 additions & 0 deletions

File tree

‎webui/src/components/dashboard/search/Event.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script setup lang="ts">
2+
import { usePrettyHttp } from '@/composables/http';
3+
import { usePrettyDates } from '@/composables/usePrettyDate';
4+
import { usePrettyText } from '@/composables/usePrettyText';
5+
import { computed } from 'vue';
6+
7+
const props = defineProps<{
8+
item: SearchItem
9+
}>()
10+
11+
const { formatStatusCode, getClassByStatusCode } = usePrettyHttp()
12+
const { adaptiveTruncate } = usePrettyText()
13+
const { format } = usePrettyDates()
14+
15+
const title = computed(() => {
16+
let title = props.item.title
17+
return adaptiveTruncate(title)
18+
})
19+
20+
function isHttp() {
21+
return props.item.params['traits.namespace'] === 'http'
22+
}
23+
function isKafka() {
24+
return props.item.params['traits.namespace'] === 'kafka'
25+
}
26+
function isLdap() {
27+
return props.item.params['traits.namespace'] === 'ldap'
28+
}
29+
function isMail() {
30+
return props.item.params['traits.namespace'] === 'mail'
31+
}
32+
</script>
33+
34+
<template>
35+
<div class="card-body">
36+
37+
<div class="d-flex justify-content-between align-items-center small">
38+
<div v-if="item.time" class="text-muted">⏱ {{ format(item.time) }}</div>
39+
<span v-if="isKafka()" class="fw-semibold text-dark">Message received</span>
40+
<span v-if="isHttp()" class="fw-semibold text-dark">Request received</span>
41+
</div>
42+
43+
<h6 class="mb-1 mt-1">
44+
<span v-if="isKafka()" class="badge me-2 text-capitalize" :class="item.params['traits.namespace']">{{ item.params['traits.namespace'] }}</span>
45+
<span v-if="isHttp()" class="badge me-2 text-uppercase operation" :class="item.params['traits.method']">{{ item.params['traits.method'] }}</span>
46+
<span v-if="isLdap()" class="badge me-2 text-uppercase ldap operation" :class="item.params['traits.operation']">{{ item.params['traits.operation'] }}</span>
47+
<span>{{ title }}</span>
48+
</h6>
49+
<div class="text-end small" v-if="item.params.statusCode">
50+
<span class="badge status-code text-dark" :class="getClassByStatusCode(item.params.statusCode)">{{ formatStatusCode(item.params.statusCode) }}</span>
51+
</div>
52+
53+
<div class="text-muted small mb-1">
54+
<span v-if="item.domain"> {{ item.domain }}</span>
55+
<span v-if="item.params['traits.topic']"> &middot; Topic {{ item.params['traits.topic'] }}</span>
56+
<span v-if="item.params['traits.namespace'] == 'kafka'"> &middot; Partition {{ item.params['traits.partition'] }}</span>
57+
<span v-if="isLdap() && item.params['baseDn']"> &middot; {{ item.params['baseDn'] }}</span>
58+
<span> &middot; {{ item.type }}</span>
59+
</div>
60+
61+
<p class="small mb-0" v-html="item.fragments?.join(' ... ')"></p>
62+
63+
</div>
64+
</template>
65+
66+
<style scoped>
67+
.bg-purple, .kafka {
68+
background-color: #6f42c1;
69+
}
70+
.http {
71+
background-color: #1E88E5;
72+
}
73+
.ldap {
74+
background-color: #2E7D32;
75+
}
76+
.mail {
77+
background-color: #F9A825;
78+
}
79+
.text-capitalize {
80+
text-transform: capitalize;
81+
}
82+
</style>

‎webui/src/components/dashboard/search/Http.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script setup lang="ts">
2+
import { usePrettyHttp } from '@/composables/http';
3+
import { usePrettyText } from '@/composables/usePrettyText';
4+
import { computed } from 'vue';
5+
6+
const props = defineProps<{
7+
item: SearchItem
8+
}>()
9+
10+
const { formatStatusCode, getClassByStatusCode } = usePrettyHttp()
11+
const { adaptiveTruncate } = usePrettyText()
12+
13+
const title = computed(() => {
14+
let title = props.item.title
15+
return adaptiveTruncate(title)
16+
})
17+
const type = computed(() => {
18+
if (props.item.params.method) {
19+
return 'method'
20+
}
21+
if (props.item.params.path) {
22+
return 'path'
23+
}
24+
return 'api'
25+
})
26+
const methods = computed(() => {
27+
return props.item.params.methods.split(',')
28+
})
29+
</script>
30+
31+
<template>
32+
<div class="card-body">
33+
34+
<div class="d-flex justify-content-between">
35+
<h6 class="mb-1">
36+
<span v-if="type === 'method'" class="badge operation me-1 text-uppercase" :class="item.params.method.toLowerCase()">{{ item.params.method }}</span>
37+
<span v-else-if="type === 'path'" class="text-muted small">Path</span>
38+
<span v-else class="badge bg-api me-1">API</span>
39+
{{ title }}
40+
</h6>
41+
<div class="text-end small" v-if="item.params.statusCode">
42+
<span class="badge status-code text-dark" :class="getClassByStatusCode(item.params.statusCode)">{{ formatStatusCode(item.params.statusCode) }}</span>
43+
</div>
44+
</div>
45+
46+
<div class="text-muted small mb-1">
47+
<span v-if="type !== 'api'"> {{ item.domain }} &middot; </span>
48+
<span v-if="type === 'path'">
49+
<span v-for="m of methods" :key="m" class="badge operation me-1 text-uppercase" :class="m">{{ m }}</span>
50+
&middot;
51+
</span>
52+
53+
{{ item.type }}
54+
</div>
55+
56+
<p class="small mb-0" v-html="item.fragments?.join(' ... ')"></p>
57+
58+
</div>
59+
</template>
60+
61+
<style scoped>
62+
.bg-api {
63+
background-color: #343a40;
64+
}
65+
.bg-path {
66+
background-color: #6f42c1;
67+
}
68+
</style>

‎webui/src/components/dashboard/search/Kafka.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script setup lang="ts">
2+
import { usePrettyHttp } from '@/composables/http';
3+
import { usePrettyText } from '@/composables/usePrettyText';
4+
import { computed } from 'vue';
5+
6+
const props = defineProps<{
7+
item: SearchItem
8+
}>()
9+
10+
const { adaptiveTruncate } = usePrettyText()
11+
12+
const title = computed(() => {
13+
let title = props.item.title
14+
return adaptiveTruncate(title)
15+
})
16+
</script>
17+
18+
<template>
19+
<div class="card-body">
20+
21+
<div class="d-flex justify-content-between">
22+
<h6 class="mb-1">
23+
<span class="badge bg-topic me-1" v-if="item.params.topic">Topic</span>
24+
<span class="badge bg-cluster me-1" v-else>Cluster</span>
25+
{{ title }}
26+
</h6>
27+
</div>
28+
29+
<div class="text-muted small mb-1">
30+
<span v-if="item.domain"> {{ item.domain }} &middot; </span>
31+
<span v-if="item.params.topics"> Topics {{ item.params['topics'] }} &middot; </span>
32+
<span>{{ item.type }}</span>
33+
</div>
34+
35+
<p class="small mb-0" v-html="item.fragments?.join(' ... ')"></p>
36+
37+
</div>
38+
</template>
39+
40+
<style scoped>
41+
.bg-topic {
42+
background-color: #6f42c1;
43+
}
44+
.bg-cluster {
45+
background-color: #343a40;
46+
}
47+
</style>

‎webui/src/components/dashboard/search/Ldap.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script setup lang="ts">
2+
import { usePrettyHttp } from '@/composables/http';
3+
import { usePrettyText } from '@/composables/usePrettyText';
4+
import { computed } from 'vue';
5+
6+
const props = defineProps<{
7+
item: SearchItem
8+
}>()
9+
10+
const { adaptiveTruncate } = usePrettyText()
11+
12+
const title = computed(() => {
13+
let title = props.item.title
14+
return adaptiveTruncate(title)
15+
})
16+
</script>
17+
18+
<template>
19+
<div class="card-body">
20+
21+
<div class="d-flex justify-content-between">
22+
<h6 class="mb-1">
23+
<span class="badge bg-success me-1" v-if="item.params.entry">Topic</span>
24+
<span class="badge bg-cluster me-1" v-else>LDAP</span>
25+
{{ title }}
26+
</h6>
27+
</div>
28+
29+
<div class="text-muted small mb-1">
30+
<span v-if="item.domain"> {{ item.domain }} &middot; </span>
31+
<span v-if="item.params.entries"> Entries {{ item.params.entries }} &middot; </span>
32+
<span>{{ item.type }}</span>
33+
</div>
34+
35+
<p class="small mb-0" v-html="item.fragments?.join(' ... ')"></p>
36+
37+
</div>
38+
</template>
39+
40+
<style scoped>
41+
.bg-topic {
42+
background-color: #6f42c1;
43+
}
44+
.bg-cluster {
45+
background-color: #343a40;
46+
}
47+
</style>

‎webui/src/components/dashboard/search/Mail.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup lang="ts">
2+
import { usePrettyHttp } from '@/composables/http';
3+
import { usePrettyText } from '@/composables/usePrettyText';
4+
import { computed } from 'vue';
5+
6+
const props = defineProps<{
7+
item: SearchItem
8+
}>()
9+
10+
const { adaptiveTruncate } = usePrettyText()
11+
12+
const title = computed(() => {
13+
let title = props.item.title
14+
return adaptiveTruncate(title)
15+
})
16+
</script>
17+
18+
<template>
19+
<div class="card-body">
20+
21+
<div class="d-flex justify-content-between">
22+
<h6 class="mb-1">
23+
<span class="badge bg-cluster me-1">Mail</span>
24+
{{ title }}
25+
</h6>
26+
</div>
27+
28+
<div class="text-muted small mb-1">
29+
<span v-if="item.domain"> {{ item.domain }} &middot; </span>
30+
<span>{{ item.type }}</span>
31+
</div>
32+
33+
<p class="small mb-0" v-html="item.fragments?.join(' ... ')"></p>
34+
35+
</div>
36+
</template>
37+
38+
<style scoped>
39+
.bg-topic {
40+
background-color: #6f42c1;
41+
}
42+
.bg-cluster {
43+
background-color: #343a40;
44+
}
45+
</style>

‎webui/src/composables/useProgressiveLoading.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ref } from 'vue'
2+
3+
export function useProgressiveLoading(options = {}) {
4+
const {
5+
steps = [
6+
{ delay: 0, text: 'Searching…' },
7+
{ delay: 3000, text: 'Still searching…' },
8+
{ delay: 8000, text: 'Taking longer than usual…' }
9+
]
10+
}: { steps?: { delay: number, text: string }[] } = options
11+
12+
const isLoading = ref(false)
13+
const statusText = ref('')
14+
15+
let timers: number[] = []
16+
let currentId = 0
17+
18+
function start() {
19+
clear()
20+
21+
isLoading.value = true
22+
const id = ++currentId
23+
24+
steps.forEach(step => {
25+
const t = setTimeout(() => {
26+
if (id !== currentId) return
27+
statusText.value = step.text
28+
}, step.delay)
29+
30+
timers.push(t)
31+
})
32+
33+
34+
}
35+
36+
function stop() {
37+
clear()
38+
isLoading.value = false
39+
statusText.value = ''
40+
}
41+
42+
function clear() {
43+
timers.forEach(t => clearTimeout(t))
44+
timers = []
45+
}
46+
47+
return {
48+
isLoading,
49+
statusText,
50+
start,
51+
stop
52+
}
53+
}

0 commit comments

Comments
 (0)