refactor(mem-chart): simplify component structure and conditionally include metaspace

Author: SteKoe

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

@@ -23,73 +23,67 @@
  />
 </template>
 
-<script>
+<script setup lang="ts">
 import moment from 'moment';
 import prettyBytes from 'pretty-bytes';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import LineChart from '@/views/instances/details/LineChart';
 
-export default {
- components: { LineChart },
- props: {
- data: {
- type: Array,
- default: () => [],
+const { t } = useI18n();
+
+const { data } = defineProps<{
+ data: Array<any>;
+}>();
+
+const datasets = computed(() => {
+ const hasMetaspace = Object.values(data).some((d) => d.metaspace !== null);
+
+ const _datasets: Record<string, { label: string }> = {
+ used: {
+ label: 'instances.details.memory.used',
  },
- },
- setup(props) {
- const { t } = useI18n();
- return { ...props, t };
- },
- data() {
- return {
- chart: undefined,
- label: 'timestamp',
- datasets: {
- used: {
- label: 'instances.details.memory.used',
- },
- metaspace: {
- label: 'instances.details.memory.metaspace',
+ committed: {
+ label: 'instances.details.memory.committed',
+ },
+ };
+
+ if (hasMetaspace) {
+ _datasets.metaspace = {
+ label: 'instances.details.memory.metaspace',
+ };
+ }
+
+ return _datasets;
+});
+
+const config = {
+ options: {
+ plugins: {
+ tooltip: {
+ callbacks: {
+ title: (ctx) => {
+ return prettyBytes(ctx[0].parsed.y);
+ },
+ label: (ctx) => {
+ return t(ctx.dataset.label);
+ },
  },
- committed: {
- label: 'instances.details.memory.committed',
+ },
+ },
+ scales: {
+ y: {
+ ticks: {
+ callback: (label) => prettyBytes(label),
  },
  },
- config: {
- options: {
- plugins: {
- tooltip: {
- callbacks: {
- title: (ctx) => {
- return prettyBytes(ctx[0].parsed.y);
- },
- label: (ctx) => {
- return this.t(ctx.dataset.label);
- },
- },
- },
- },
- scales: {
- y: {
- ticks: {
- callback: (label) => {
- return prettyBytes(label);
- },
- },
- },
- x: {
- ticks: {
- callback: (label) => {
- return moment(label).format('HH:mm:ss');
- },
- },
- },
- },
+ x: {
+ ticks: {
+ callback: (label) => moment(label).format('HH:mm:ss'),
  },
  },
- };
+ },
  },
 };
 </script>