fix(datasource-metrics): update metric name to show datasource details (#4076)

Co-authored-by: Andreas Fritz <[email protected]>
Co-authored-by: Stephan Köninger <[email protected]>

Author: 3 people

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue

@@ -21,41 +21,46 @@
       $t('instances.details.datasource.title', { dataSource: dataSource })
     "
   >
-    <div>
-      <sba-alert v-if="error" :error="error" :title="$t('term.fetch_failed')" />
+    <sba-alert v-if="error" :error="error" :title="$t('term.fetch_failed')" />
 
-      <div v-if="current" class="level datasource-current">
-        <div class="level-item has-text-centered">
-          <div>
-            <p
-              class="heading has-bullet has-bullet-info"
-              v-text="$t('instances.details.datasource.active_connections')"
-            />
-            <p v-text="current.active" />
-          </div>
-        </div>
-        <div class="level-item has-text-centered">
-          <div>
-            <p
-              class="heading"
-              v-text="$t('instances.details.datasource.min_connections')"
-            />
-            <p v-text="current.min" />
-          </div>
-        </div>
-        <div class="level-item has-text-centered">
-          <div>
-            <p
-              class="heading"
-              v-text="$t('instances.details.datasource.max_connections')"
-            />
-            <p v-if="current.max >= 0" v-text="current.max" />
-            <p v-else v-text="$t('instances.details.datasource.unlimited')" />
-          </div>
-        </div>
-      </div>
-      <datasource-chart v-if="chartData.length > 0" :data="chartData" />
-    </div>
+    <dl
+      v-if="current"
+      class="px-4 py-3 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+    >
+      <dt
+        class="text-sm font-medium text-gray-500 sm:col-span-4"
+        v-text="$t('instances.details.datasource.active_connections')"
+      />
+      <dd
+        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+        v-text="current.active"
+      />
+
+      <dt
+        class="text-sm font-medium text-gray-500 sm:col-span-4"
+        v-text="$t('instances.details.datasource.min_connections')"
+      />
+      <dd
+        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+        v-text="current.min"
+      />
+
+      <dt
+        class="text-sm font-medium text-gray-500 sm:col-span-4"
+        v-text="$t('instances.details.datasource.max_connections')"
+      />
+      <dd
+        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+        v-if="current.max >= 0"
+        v-text="current.max"
+      />
+      <dd
+        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+        v-else
+        v-text="$t('instances.details.datasource.unlimited')"
+      />
+    </dl>
+    <datasource-chart v-if="chartData.length > 0" :data="chartData" />
   </sba-panel>
 </template>
 
@@ -91,17 +96,15 @@ export default {
   methods: {
     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 },
-      );
-      const responseMax = this.instance.fetchMetric(
-        'data.source.max.connections',
+        'jdbc.connections.active',
         { name: this.dataSource },
       );
+      const responseMin = this.instance.fetchMetric('jdbc.connections.min', {
+        name: this.dataSource,
+      });
+      const responseMax = this.instance.fetchMetric('jdbc.connections.max', {
+        name: this.dataSource,
+      });
 
       return {
         active: (await responseActive).data.measurements[0].value,

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasources.vue

@@ -49,7 +49,7 @@ export default {
   methods: {
     async fetchDataSources() {
       const response = await this.instance.fetchMetric(
-        'data.source.active.connections',
+        'jdbc.connections.active',
       );
       return response.data.availableTags.filter((tag) => tag.tag === 'name')[0]
         .values;

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue

@@ -117,7 +117,7 @@ export default {
       return this.hasMetric('cache.gets');
     },
     hasDatasources() {
-      return this.hasMetric('data.source.active.connections');
+      return this.hasMetric('jdbc.connections.active');
     },
     hasGc() {
       return this.hasMetric('jvm.gc.pause');