Merge pull request #177 from inab/login_branch

ADD status to test

components/Dashboard/entries/events/challenges/metrics/AddMetric.vue

@@ -518,9 +518,11 @@ async function search() {
   searchList.value = [];
 
   const searchFilter = metricDataList.value.filter((metric) => {
-    return metric.title
+    if(metric.title) {
+      return metric.title
       .toLowerCase()
       .includes(searchMetric.value.toLowerCase());
+    }
   });
   loadingInput.value = false;
   isShowSearchTable.value = true;

components/Header/HeaderMenu.vue

@@ -83,6 +83,9 @@
                       </li>
                     </ul>
                   </li>
+                  <li>
+                    <NavbarStatus />
+                  </li>
                 </ul>
               </div>
               <div class="nav-list-items-direct top-full hidden sm:flex">
@@ -168,6 +171,7 @@ import { useRouter } from "vue-router";
 import subMenuEntriesObservatory from "./HeaderMenu/subMenuEntriesObservatory";
 import subMenuEntriesAbout from "./HeaderMenu/subMenuEntriesAbout";
 import { activeTabIndex } from '@/components/Common/state.js';
+import NavbarStatus from "@/components/status/NavbarStatus";
 
 
 const router = useRouter();
@@ -281,7 +285,6 @@ function handleLogout() {
 }
 
 function getUserNameIcon() {
-  console.log(data.value)
   if (data?.value?.user?.name) {
     return data.value.user.name;
   }

components/status/NavbarStatus.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="nav-link flex md:inline-flex items-center hover:bg-gray-50 space-x-2"
+  >
+    <div class="">
+      <NuxtLink v-if="globalStatus" to="/status/" title="Server status is OK">
+        <span class="status-ok" alt="Server status is OK"
+          ><font-awesome-icon :icon="['fas', 'signal']"
+        /></span>
+      </NuxtLink>
+      <NuxtLink v-else to="/status/" title="There is an error in some service">
+        <span class="status-error" alt="Server status error"
+          ><font-awesome-icon :icon="['fas', 'signal']"
+        /></span>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+
+const runtimeConfig = useRuntimeConfig();
+const vreServicesUrl = `${runtimeConfig.public.VRE_URI}`;
+const scientificUrl = `${runtimeConfig.public.SCIENTIFIC_SERVICE_URL}`;
+const keycloakUrl = `${runtimeConfig.public.KEYCLOAK_HOST}`;
+const observatoryUrl = `${runtimeConfig.public.OBSERVATORY_API_URL}`;
+
+const isVreServicesUp = ref(null);
+const isScientificServicesUp = ref(null);
+const isKeycloakServiceUp = ref(null);
+const isObservatoryServiceUp = ref(null);
+
+const globalStatus = computed(() => {
+  if (
+    isVreServicesUp.value &&
+    isScientificServicesUp.value &&
+    isKeycloakServiceUp.value &&
+    isObservatoryServiceUp.value
+  ) {
+    return true;
+  }
+  return false;
+});
+
+const checkVreServices = async () => {
+  return fetch(`https://api.allorigins.win/raw?url=${vreServicesUrl}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "text/html",
+    },
+  })
+    .then(async (response) => {
+      const text = await response.text();
+      isVreServicesUp.value = response.ok && text.trim().length > 0;
+    })
+    .catch((error) => {
+      return false;
+    });
+};
+
+const checkScientificServices = async () => {
+  return fetch(`https://api.allorigins.win/raw?url=${scientificUrl}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "text/html",
+    },
+  })
+    .then(async (response) => {
+      const text = await response.text();
+      isScientificServicesUp.value = response.ok && text.trim().length > 0;
+    })
+    .catch((error) => {
+      console.log("Error on fetch");
+      return false;
+    });
+};
+const checkKeycloakServices = async () => {
+  return fetch(`https://thingproxy.freeboard.io/fetch/${keycloakUrl}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "text/html",
+    },
+  })
+    .then(async (response) => {
+      const text = await response.text();
+      isKeycloakServiceUp.value = response.ok && text.trim().length > 0;
+    })
+    .catch((error) => {
+      return false;
+    });
+};
+
+const checkObservatoryServices = async () => {
+  return fetch(`${observatoryUrl}/stats/tools/count_total`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then(async (response) => {
+      const text = await response.json();
+      isObservatoryServiceUp.value = response.ok && text.length > 0;
+    })
+    .catch((error) => {
+      console.log("Observatory error: ", error);
+      return false;
+    });
+};
+
+onMounted(() => {
+  checkVreServices();
+  checkScientificServices();
+  checkObservatoryServices();
+  checkKeycloakServices();
+});
+</script>
+
+<style scoped lang="scss">
+.status-ok {
+  color: #a0c878;
+}
+.status-error {
+  color: #e52020;
+  animation: pulseanim 1.7s 3 ease-in-out;
+}
+@keyframes pulseanim {
+  0% {
+    transform: scale(0);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+</style>

components/status/StatusTable.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="status-table">
+    <UTable
+      :columns="columns"
+      :rows="services"
+      :loading="isTableLoading"
+      :loading-state="{
+        icon: 'i-heroicons-arrow-path-20-solid',
+        label: 'Loading...',
+      }"
+      :progress="{ color: 'primary', animation: 'carousel' }"
+    >
+      <template #service-data="{ row }">
+        <span v-if="row.status" class="status-ok">
+          <font-awesome-icon :icon="['fas', 'circle-check']" />
+        </span>
+        <span v-else class="status-error">
+          <font-awesome-icon :icon="['fas', 'triangle-exclamation']" />
+        </span>
+        {{ row.service }}
+      </template>
+      <template #status-data="{ row }">
+        {{ row.status ? "Operational" : "Down" }}
+      </template>
+      <template #response-data="{ row }">
+        {{ row.response }}
+      </template>
+      <template #page-data="{ row }">
+        <a target="_blank" :href="row.page">{{ row.page }}</a>
+      </template>
+    </UTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  services: any,
+  isTableLoading: boolean
+}>();
+
+const columns = [
+  {
+    key: "service",
+    label: "Service",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "response",
+    label: "Response time (ms)",
+  },
+  {
+    key: "page",
+    label: "Go to page",
+  },
+];
+</script>
+<style scoped lang="scss">
+.status-ok {
+  color: #a0c878;
+}
+.status-error {
+  color: #e52020;
+}
+.status-table {
+  padding: 30px 0 50px;
+}
+</style>