From fdf2a987a1bb25dc40471604173d724ae2606f48 Mon Sep 17 00:00:00 2001
From: Ulrich Schulte <ulrich.schulte@codecentric.de>
Date: Sat, 20 Jul 2024 20:07:36 +0200
Subject: [PATCH] Conditions evaluation report (#3474)

---
 spring-boot-admin-server-ui/package.json      |   2 +-
 .../src/main/frontend/services/instance.ts    |   4 +
 .../conditions-list-details.spec.ts           |  75 ++++++
 .../conditions/conditions-list-details.vue    |  72 ++++++
 .../instances/conditions/conditions-list.vue  | 112 +++++++++
 .../views/instances/conditions/i18n.de.json   |  13 ++
 .../views/instances/conditions/i18n.en.json   |  13 ++
 .../views/instances/conditions/index.vue      | 218 ++++++++++++++++++
 8 files changed, 508 insertions(+), 1 deletion(-)
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.spec.ts
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.vue
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list.vue
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.de.json
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.en.json
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/index.vue

diff --git a/spring-boot-admin-server-ui/package.json b/spring-boot-admin-server-ui/package.json
index b300c382884..de9bbff86f3 100644
--- a/spring-boot-admin-server-ui/package.json
+++ b/spring-boot-admin-server-ui/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "build": "vite build --emptyOutDir --sourcemap",
     "build:dev": "NODE_ENV=development vite build --emptyOutDir --sourcemap --mode development",
-    "build:watch": "NODE_ENV=development vite build --emptyOutDir --watch --mode development",
+    "build:watch": "NODE_ENV=development vite build --emptyOutDir --sourcemap --watch --mode development",
     "dev": "vite",
     "test": "vitest run --silent",
     "test:watch": "vitest",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
index d20106780d7..9f537913791 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
@@ -280,6 +280,10 @@ class Instance {
     return this.axios.get(uri`actuator/beans`);
   }
 
+  async fetchConditions() {
+    return this.axios.get(uri`actuator/conditions`);
+  }
+
   async fetchThreaddump() {
     return this.axios.get(uri`actuator/threaddump`);
   }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.spec.ts
new file mode 100644
index 00000000000..8724ad69a99
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.spec.ts
@@ -0,0 +1,75 @@
+import { screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+import { render } from '@/test-utils';
+import ConditionsListDetails from '@/views/instances/conditions/conditions-list-details.vue';
+
+describe('ConditionsListDetails', () => {
+  it('should display condition', async () => {
+    render(ConditionsListDetails, {
+      props: {
+        condition: {
+          condition: 'SpringBootAdminServerEnabledCondition',
+        },
+      },
+    });
+    expect(
+      await screen.findByLabelText('instances.conditions.condition'),
+    ).toHaveTextContent('SpringBootAdminServerEnabledCondition');
+  });
+
+  it('should display message', async () => {
+    render(ConditionsListDetails, {
+      props: {
+        condition: {
+          message: 'matched',
+        },
+      },
+    });
+    expect(
+      await screen.findByLabelText('instances.conditions.message'),
+    ).toHaveTextContent('matched');
+  });
+
+  it.each`
+    condition
+    ${undefined}
+    ${null}
+    ${''}
+  `(
+    'should not display condition if condition is $condition',
+    async ({ condition }) => {
+      render(ConditionsListDetails, {
+        props: {
+          condition: {
+            condition,
+          },
+        },
+      });
+      expect(
+        screen.queryByLabelText('instances.conditions.condition'),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it.each`
+    message
+    ${undefined}
+    ${null}
+    ${''}
+  `(
+    'should not display message if message is $message',
+    async ({ message }) => {
+      render(ConditionsListDetails, {
+        props: {
+          condition: {
+            message,
+          },
+        },
+      });
+      expect(
+        screen.queryByLabelText('instances.conditions.message'),
+      ).not.toBeInTheDocument();
+    },
+  );
+});
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.vue
new file mode 100644
index 00000000000..ab2995128d8
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list-details.vue
@@ -0,0 +1,72 @@
+<!--
+  - Copyright 2014-2024 the original author or authors.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <table>
+    <colgroup>
+      <col class="text-gray-500" />
+      <col class="py-3" />
+    </colgroup>
+    <tbody>
+      <!-- Condition -->
+      <tr v-if="condition.condition">
+        <th
+          :id="`conditions-label-${id}`"
+          class="label"
+          v-text="$t('instances.conditions.condition')"
+        />
+        <td
+          :aria-labelledby="`conditions-label-${id}`"
+          class="value"
+          v-text="condition.condition"
+        />
+      </tr>
+
+      <!-- Message -->
+      <tr v-if="condition.message">
+        <th
+          :id="`message-label-${id}`"
+          class="label"
+          v-text="$t('instances.conditions.message')"
+        />
+        <td
+          :aria-labelledby="`message-label-${id}`"
+          class="value"
+          v-text="condition.message"
+        />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  condition: {
+    condition: string;
+    message: string;
+  };
+}>();
+const id = Math.floor(Math.random() * 1_000_000);
+</script>
+
+<style>
+.label {
+  @apply text-gray-500 text-sm text-right px-2 align-top w-32;
+}
+.value {
+  @apply text-sm break-all;
+}
+</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list.vue
new file mode 100644
index 00000000000..8683db45f24
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/conditions-list.vue
@@ -0,0 +1,112 @@
+<!--
+  - Copyright 2014-2024 the original author or authors.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div class="-mx-4 -my-3">
+    <template
+      v-for="(conditionalBean, index) in conditionalBeans"
+      :key="conditionalBean.name"
+    >
+      <div class="m-1 border rounded shadow-sm">
+        <div
+          :key="conditionalBean.name"
+          class="flex items-center"
+          :class="{
+            'bg-gray-50':
+              index % 2 === 0 || showDetails[conditionalBean.name] === true,
+            'px-3 pt-2': showDetails[conditionalBean.name] === true,
+            'px-4 py-3': showDetails[conditionalBean.name] !== true,
+          }"
+        >
+          <div class="flex-1 sm:break-all">
+            <h4
+              :class="{
+                'font-bold': showDetails[conditionalBean.name] === true,
+              }"
+              :title="conditionalBean.name"
+              @click="toggle(conditionalBean.name)"
+              v-text="conditionalBean.name"
+            />
+            <template v-if="showDetails[conditionalBean.name] === true">
+              <h5
+                v-if="
+                  conditionalBean.matched.length &&
+                  conditionalBean.notMatched.length
+                "
+                class="px-2 py-1"
+              >
+                {{ $t('instances.conditions.matched') }}
+              </h5>
+              <template
+                v-for="matchedCondition in conditionalBean.matched"
+                :key="matchedCondition.condition"
+              >
+                <div class="py-2 m-1 border rounded">
+                  <conditions-list-details :condition="matchedCondition" />
+                </div>
+              </template>
+              <h5 v-if="conditionalBean.notMatched.length" class="px-2 py-1">
+                {{ $t('instances.conditions.not-matched') }}
+              </h5>
+              <template
+                v-for="notMatchedCondition in conditionalBean.notMatched"
+                :key="notMatchedCondition.condition"
+              >
+                <div class="py-2 m-1 border rounded">
+                  <conditions-list-details :condition="notMatchedCondition" />
+                </div>
+              </template>
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import ConditionsListDetails from '@/views/instances/conditions/conditions-list-details.vue';
+
+export default {
+  components: { ConditionsListDetails },
+  props: {
+    conditionalBeans: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showDetails: {},
+    };
+  },
+  methods: {
+    toggle(name) {
+      if (this.showDetails[name]) {
+        this.showDetails = {
+          ...this.showDetails,
+          [name]: null,
+        };
+      } else {
+        this.showDetails = {
+          ...this.showDetails,
+          [name]: true,
+        };
+      }
+    },
+  },
+};
+</script>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.de.json
new file mode 100644
index 00000000000..01bde66a49f
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.de.json
@@ -0,0 +1,13 @@
+{
+  "instances": {
+    "conditions": {
+      "label": "Bedingungen",
+      "positive-matches": "Übereinstimmungen",
+      "negative-matches": "Keine Übereinstimmungen",
+      "condition": "Bedingung",
+      "message": "Hinweis",
+      "not-matched": "Nicht übereinstimmend",
+      "matched": "Übereinstimmend"
+    }
+  }
+}
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.en.json
new file mode 100644
index 00000000000..b8d73f36d64
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/i18n.en.json
@@ -0,0 +1,13 @@
+{
+  "instances": {
+    "conditions": {
+      "label": "Conditions",
+      "positive-matches": "Positive matches",
+      "negative-matches": "Negative matches",
+      "condition": "Condition",
+      "message": "Message",
+      "not-matched": "Not matched",
+      "matched": "Matched"
+    }
+  }
+}
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/index.vue
new file mode 100644
index 00000000000..28392e6f421
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/index.vue
@@ -0,0 +1,218 @@
+<!--
+  - Copyright 2014-2024 the original author or authors.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <sba-instance-section :error="error" :loading="isLoading">
+    <template #before>
+      <sba-sticky-subnav>
+        <sba-input
+          v-model="filter"
+          :placeholder="$t('term.filter')"
+          name="filter"
+          type="search"
+        >
+          <template #prepend>
+            <font-awesome-icon icon="filter" />
+          </template>
+          <template #append>
+            {{ filterResultString }}
+          </template>
+        </sba-input>
+      </sba-sticky-subnav>
+    </template>
+
+    <template v-for="context in filteredContexts" :key="context.name">
+      <sba-panel
+        :id="`${context.name}-context`"
+        :header-sticks-below="'#subnavigation'"
+        :title="context.name"
+      >
+        <sba-panel
+          v-if="context.positiveMatches.length"
+          :title="$t('instances.conditions.positive-matches')"
+        >
+          <conditions-list
+            :key="`${context.name}-positiveMatches`"
+            :conditional-beans="context.positiveMatches"
+          />
+        </sba-panel>
+        <sba-panel
+          v-if="context.negativeMatches.length"
+          :title="$t('instances.conditions.negative-matches')"
+        >
+          <conditions-list
+            :key="`${context.name}-negativeMatches`"
+            :conditional-beans="context.negativeMatches"
+          />
+        </sba-panel>
+      </sba-panel>
+    </template>
+  </sba-instance-section>
+</template>
+
+<script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { isEmpty } from 'lodash-es';
+
+import SbaStickySubnav from '@/components/sba-sticky-subnav.vue';
+
+import Instance from '@/services/instance';
+import { compareBy } from '@/utils/collections';
+import { VIEW_GROUP } from '@/views/ViewGroup';
+import ConditionsList from '@/views/instances/conditions/conditions-list.vue';
+import SbaInstanceSection from '@/views/instances/shell/sba-instance-section';
+
+class ConditionalBean {
+  constructor(name, positiveMatches, negativeMatches) {
+    this.name = name;
+    this.matched = positiveMatches.map((condition) => new Condition(condition));
+    this.notMatched = negativeMatches.map(
+      (condition) => new Condition(condition),
+    );
+  }
+}
+
+class Condition {
+  constructor(condition) {
+    this.condition = condition.condition;
+    this.message = condition.message;
+  }
+}
+
+const mapPositiveMatches = (positiveMatches) => {
+  return Object.keys(positiveMatches).map(
+    (matchedBeanName) =>
+      new ConditionalBean(
+        matchedBeanName,
+        positiveMatches[matchedBeanName],
+        [],
+      ),
+  );
+};
+
+const mapNegativeMatches = (negativeMatches) => {
+  return Object.keys(negativeMatches).map(
+    (matchedBeanName) =>
+      new ConditionalBean(
+        matchedBeanName,
+        negativeMatches[matchedBeanName].matched,
+        negativeMatches[matchedBeanName].notMatched,
+      ),
+  );
+};
+
+const mapContexts = (conditionsData) => {
+  if (isEmpty(conditionsData.contexts)) {
+    return [];
+  }
+  return Object.keys(conditionsData.contexts).map((contextName) => ({
+    positiveMatches: mapPositiveMatches(
+      conditionsData.contexts[contextName].positiveMatches,
+    ),
+    negativeMatches: mapNegativeMatches(
+      conditionsData.contexts[contextName].negativeMatches,
+    ),
+    name: contextName,
+    parent: conditionsData.contexts[contextName].parentId,
+  }));
+};
+
+export default {
+  components: {
+    FontAwesomeIcon,
+    SbaStickySubnav,
+    ConditionsList,
+    SbaInstanceSection,
+  },
+  props: {
+    instance: {
+      type: Instance,
+      required: true,
+    },
+  },
+  data: () => ({
+    isLoading: false,
+    error: null,
+    contexts: [],
+    filter: '',
+  }),
+  computed: {
+    filterResultString() {
+      const totalMatches = this.contexts.reduce((count, ctx) => {
+        return (
+          count + ctx.positiveMatches?.length + ctx.negativeMatches?.length
+        );
+      }, 0);
+
+      const filteredMatches = this.filteredContexts.reduce((count, ctx) => {
+        return (
+          count + ctx.positiveMatches?.length + ctx.negativeMatches?.length
+        );
+      }, 0);
+
+      return `${filteredMatches}/${totalMatches}`;
+    },
+    filteredContexts() {
+      const filterFn = this.getFilterFn();
+      return this.contexts.map((ctx) => ({
+        ...ctx,
+        positiveMatches: ctx.positiveMatches
+          .filter(filterFn)
+          .sort(compareBy((conditionalBean) => conditionalBean.name)),
+        negativeMatches: ctx.negativeMatches
+          .filter(filterFn)
+          .sort(compareBy((conditionalBean) => conditionalBean.name)),
+      }));
+    },
+  },
+  created() {
+    this.fetchConditions();
+  },
+  methods: {
+    getFilterFn() {
+      if (!this.filter) {
+        return () => true;
+      }
+      const regex = new RegExp(this.filter, 'i');
+      return (conditionalBean) => conditionalBean.name.match(regex);
+    },
+    async fetchConditions() {
+      this.error = null;
+      this.isLoading = true;
+      try {
+        const res = await this.instance.fetchConditions();
+        this.contexts = mapContexts(res.data);
+      } catch (error) {
+        console.warn('Fetching conditions failed:', error);
+        this.error = error;
+      }
+      this.isLoading = false;
+    },
+  },
+  install({ viewRegistry }) {
+    viewRegistry.addView({
+      name: 'instances/conditions',
+      parent: 'instances',
+      path: 'conditions',
+      label: 'instances.conditions.label',
+      group: VIEW_GROUP.INSIGHTS,
+      component: this,
+      order: 120,
+      isEnabled: ({ instance }) => instance.hasEndpoint('conditions'),
+    });
+  },
+};
+</script>