Add conditional messages when not supported

Author: johnsimons

src/Frontend/src/components/audit/isAllMessagesSupported.ts

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+import { useIsSupported } from "@/composables/serviceSemVer";
+import { environment } from "@/composables/serviceServiceControl";
+
+export const minimumSCVersionForThroughput = "6.6.0";
+const isAllMessagesSupported = computed(() => useIsSupported(environment.sc_version, minimumSCVersionForThroughput));
+
+export default isAllMessagesSupported;

src/Frontend/src/views/AuditView.vue

@@ -2,22 +2,37 @@
 import { licenseStatus } from "../composables/serviceLicense";
 import LicenseExpired from "../components/LicenseExpired.vue";
 import AuditList from "@/components/audit/AuditList.vue";
+import isAllMessagesSupported, { minimumSCVersionForThroughput } from "@/components/audit/isAllMessagesSupported.ts";
+import ConditionalRender from "@/components/ConditionalRender.vue";
 </script>
 
 <template>
-  <LicenseExpired />
-  <template v-if="!licenseStatus.isExpired">
-    <div class="container">
-      <div class="row title">
-        <div class="col-12">
-          <h1>All Messages</h1>
+  <ConditionalRender :supported="isAllMessagesSupported">
+    <template #unsupported>
+      <div class="not-supported">
+        <p>
+          The minimum version of ServiceControl required to enable this feature is
+          <span> {{ minimumSCVersionForThroughput }} </span>.
+        </p>
+        <div>
+          <a class="btn btn-default btn-primary" href="https://particular.net/downloads" target="_blank">Update ServiceControl to latest version</a>
         </div>
       </div>
-      <div class="row">
-        <AuditList />
+    </template>
+    <LicenseExpired />
+    <template v-if="!licenseStatus.isExpired">
+      <div class="container">
+        <div class="row title">
+          <div class="col-12">
+            <h1>All Messages</h1>
+          </div>
+        </div>
+        <div class="row">
+          <AuditList />
+        </div>
       </div>
-    </div>
-  </template>
+    </template>
+  </ConditionalRender>
 </template>
 
 <style scoped>
@@ -34,4 +49,11 @@ import AuditList from "@/components/audit/AuditList.vue";
   flex: 0;
   min-height: fit-content;
 }
+
+.not-supported {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
 </style>