Skip to content

Commit 64b0441

Browse files
fotispvkefalas-exz
fotisp
and
vkefalas-exz
authored
Dev (#77)
* Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript * Mergin to cd (#49) * Dev (#46) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript --------- Co-authored-by: Vasilis Kefalas <[email protected]> * Dev (#47) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript --------- Co-authored-by: Vasilis Kefalas <[email protected]> --------- Co-authored-by: Vasilis Kefalas <[email protected]> * Dev (#47) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript --------- Co-authored-by: Vasilis Kefalas <[email protected]> * Dev (#50) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript * Mergin to cd (#49) * Dev (#46) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript --------- Co-authored-by: Vasilis Kefalas <[email protected]> * Dev (#47) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging * Added new button to duplicate application * Bug fixes and improvements * Added undeploy functionality * Bug fixes,refactoring resources and added max tries in app polling * Fix in files in order to run pipeline * Some Resource Modal ui fixes * feat-677 * feat-790 * Checking slot type to avoid typescript --------- Co-authored-by: Vasilis Kefalas <[email protected]> --------- Co-authored-by: Vasilis Kefalas <[email protected]> --------- Co-authored-by: Vasilis Kefalas <[email protected]> * #31 - Opendev 677 * Adding CFSB to the UI * Fixing colors for states * Opendev feat 784 Opendev feat 786 Github #55 * Correcting build errors * Correcting build errors and loosening strictness * Enabling clone button in all ocassions * Fixing RAW output slide options * https://openproject.nebulouscloud.eu/projects/nebulous-2nd-release-1/work_packages/702/activity * https://openproject.nebulouscloud.eu/projects/nebulous-2nd-release-1/work_packages/702/activity * Fixing platforms bug * Fixing conflict * AI integration v1 * Fixing Lucide component in order to be able to upgrade to newer versionof lucide-vue-next which has a conflict when providing the class attribute * #70 correcting double play button' * Adding search * Removing AI by typing and using a button * Removing AI by typing and using a button * Preparing Graph View * WIP - Working through the charts * Adding Registration integration and graph mockup * Fixing build for mock graph migration * Fixing build for mock graph migration * Changing all_applications to all-applications * Migrating to live version --------- Co-authored-by: Vasilis Kefalas <[email protected]>
1 parent e9c30fa commit 64b0441

File tree

3 files changed

+30
-98
lines changed

3 files changed

+30
-98
lines changed

‎gui/src/containers/Applications/Overview/ApplicationMonitoring.vue‎

Lines changed: 27 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,36 @@
11
<template>
22
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
3-
<template v-for="metric in metrics" :key="metric.metric">
4-
<!-- Count Type Metrics -->
3+
<template v-for="metric in metrics" :key="metric.title">
4+
<!-- Chart Type Metrics (line, bar) -->
55
<Card
6-
v-if="metric.type === 'count'"
7-
class="flex flex-col flex-grow items-center justify-between h-60"
8-
>
9-
<div class="mr-auto">
10-
<h1 class="text-base">{{ metric.title }}</h1>
11-
<h2 class="text-2xl">
12-
{{ formatValue(metric.data.value, metric.config.suffix) }}
13-
</h2>
14-
</div>
15-
16-
<!-- Use BaseChart for chart types -->
17-
<BaseChart
18-
:type="metric.type"
19-
:height="120"
20-
:width="metric.type === 'doughnut' ? 120 : 180"
21-
:data="metric.data"
22-
/>
23-
</Card>
24-
<Card
25-
v-if="metric.type === 'progress'"
26-
class="flex flex-col flex-grow items-center justify-between h-60"
27-
>
28-
<div class="mr-auto">
29-
<h1 class="text-base">{{ metric.title }}</h1>
30-
<h2 class="text-2xl">
31-
{{ formatValue(metric.data.value, metric.config.suffix) }}
32-
</h2>
33-
</div>
34-
<ProgressBar :height="120"
35-
:width="metric.type === 'doughnut' ? 120 : 180"
36-
:progressPercentage="metric.data.value"/>
37-
38-
</Card>
39-
<!-- Chart Type Metrics -->
40-
<Card
41-
v-else
42-
class="flex flex-col flex-grow items-center justify-between h-60"
6+
class="flex flex-col h-60 overflow-hidden"
437
:class="getCardSize(metric.type)"
448
>
45-
<div class="mr-auto w-full">
46-
<h2 class="text-base">{{ metric.title }}</h2>
47-
<!-- Show summary value for line charts if available -->
48-
<h2 v-if="metric.summary" class="text-2xl">
9+
<div class="mb-2">
10+
<h2 class="text-base font-semibold">{{ metric.title }}</h2>
11+
<h3 v-if="metric.summary" class="text-sm text-gray-600">
4912
{{ metric.summary }}
50-
</h2>
13+
</h3>
5114
</div>
5215

53-
<!-- Use BaseChart for chart types -->
54-
<BaseChart
55-
:type="metric.type"
56-
:height="120"
57-
:width="metric.type === 'doughnut' ? 120 : 180"
58-
:data="metric.config"
59-
/>
16+
<div class="flex-1 min-h-0">
17+
<BaseChart
18+
:type="metric.type"
19+
:height="160"
20+
:width="getChartWidth(metric.type)"
21+
:data="metric.config"
22+
/>
23+
</div>
6024
</Card>
6125
</template>
6226
</div>
6327
</template>
6428

65-
6629
<script setup lang="ts">
67-
68-
69-
import {computed, onMounted, onUnmounted} from "vue";
70-
import {useApplicationStore} from "@/store/modules/application.ts";
71-
72-
import BaseChart, {ProgressBar} from "@/base-components/Chart"
30+
import { computed, onMounted, onUnmounted } from "vue";
31+
import { useApplicationStore } from "@/store/modules/application.ts";
32+
import BaseChart from "@/base-components/Chart"
7333
import Card from "@/base-components/Card/Card.vue"
74-
import {
75-
violationsLineChartConfig,
76-
deploymentsDiagramConfig,
77-
reconfigDiagramConfig,
78-
latencyLineChartConfig
79-
} from "./applicationChartsConfigs.ts"
8034
8135
interface AppMonitoringProps {
8236
uuid: string,
@@ -85,51 +39,28 @@ interface AppMonitoringProps {
8539
const props = defineProps<AppMonitoringProps>()
8640
const applicationStore = useApplicationStore()
8741
88-
interface MetricData {
89-
title: string
90-
metric: string
91-
type: 'count' | 'line' | 'bar' | 'doughnut' | 'progress'
92-
config: any
93-
data: any
94-
}
95-
96-
const metrics = computed(() => applicationStore.monitorData?.metrics || [])
42+
const metrics = computed(() => applicationStore.monitorData || [])
9743
9844
const getCardSize = (type: string) => {
99-
// Doughnut charts can stay single width, others might need more space
100-
if (type === 'doughnut') {
101-
return 'col-span-1'
102-
}
103-
// Line and bar charts that need more horizontal space
104-
if (type === 'line' || (type === 'bar' && metrics.value.some(m => m.config?.indexAxis === 'y'))) {
105-
return 'col-span-1 sm:col-span-2'
45+
if (type === 'line' || type === 'bar') {
46+
return 'col-span-1 sm:col-span-2 lg:col-span-2'
10647
}
10748
return 'col-span-1'
10849
}
10950
110-
const getChartType = (type: string): string => {
111-
// BaseChart might use different naming convention
112-
113-
const typeMap: Record<string, string> = {
114-
'line': 'line',
115-
'bar': 'bar',
116-
'doughnut': 'doughnut'
51+
const getChartWidth = (type: string): number => {
52+
// For wider card spans, use larger width
53+
if (type === 'line' || type === 'bar') {
54+
return 400
11755
}
118-
return typeMap[type] || type
119-
}
120-
121-
const formatValue = (value: string | number, suffix?: string) => {
122-
const formattedValue = typeof value === 'number' ? value.toLocaleString() : value
123-
return suffix ? `${formattedValue}${suffix}` : formattedValue
56+
return 180
12457
}
12558
12659
onMounted(() => {
127-
console.log('Component mounted.')
12860
applicationStore.startMonitoring(props.uuid)
12961
})
62+
13063
onUnmounted(() => {
131-
console.log('Component un- mounted.')
13264
applicationStore.stopMonitoring()
13365
})
134-
13566
</script>

‎gui/src/containers/Applications/Resources/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,8 @@ const resources = computed<Array<IResource>>(() => resourceStore.resources.resul
146146
const nodeCandidates = computed<Array<INodeCandidate>>(() => resourceStore.candidates)
147147
148148
const resourceRegistrationUrl = computed(()=>{
149-
console.log(import.meta.env.VITE_EDGE_API_URL+`?nonce=${useStore.user?.uuid}&appId=all_applications`)
150-
return import.meta.env.VITE_EDGE_API_URL+`?nonce=${useStore.user?.uuid}&appId=all_applications`
149+
console.log(import.meta.env.VITE_EDGE_API_URL+`?nonce=${useStore.user?.uuid}&appId=all-applications`)
150+
return import.meta.env.VITE_EDGE_API_URL+`?nonce=${useStore.user?.uuid}&appId=all-applications`
151151
})
152152
153153
const currentPage = ref(1)

‎gui/src/store/modules/application.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export const useApplicationStore = defineStore("application", {
117117
console.log(`Monitoring deploying/undeploying applications. ${this.monitorUuid}`);
118118
try {
119119
this.monitorData = await applicationService.getMonitoringData(this.monitorUuid);
120+
console.log(`Monitoring deploying/undeploying applications. ${this.monitorData}`);
120121
} catch (err) {
121122
console.log(err);
122123
}

0 commit comments

Comments
 (0)