add logs view

berntpopp · Nov 10, 2023 · 6826525 · 6826525
1 parent 97714cc
commit 6826525
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 0 deletions.
diff --git a/app/src/assets/js/constants/main_nav_constants.js b/app/src/assets/js/constants/main_nav_constants.js
@@ -51,6 +51,7 @@ export default {
         { text: 'Manage user', path: '/ManageUser', icons: ['gear', 'person-circle'] },
         { text: 'Manage annotations', path: '/ManageAnnotations', icons: ['gear', 'table'] },
         { text: 'Manage about', path: '/ManageAbout', icons: ['gear', 'question-circle-fill'] },
+        { text: 'View logs', path: '/ViewLogs', icons: ['eye', 'clipboard-plus'] },
       ],
     },
     {

diff --git a/app/src/components/tables/TablesLogs.vue b/app/src/components/tables/TablesLogs.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="container-fluid">
+    <b-spinner
+      v-if="loading"
+      label="Loading..."
+      class="float-center m-5"
+    />
+    <b-container
+      v-else
+      fluid
+    >
+      <b-row class="justify-content-md-center py-2">
+        <b-col
+          col
+          md="12"
+        >
+          <b-table
+            :items="logsData"
+            :fields="logFields"
+            :per-page="perPage"
+            :current-page="currentPage"
+            small
+            striped
+            hover
+          >
+            <template v-slot:cell(last_modified)="data">
+              {{ new Date(data.item.last_modified).toLocaleString() }}
+            </template>
+          </b-table>
+
+          <b-pagination
+            v-model="currentPage"
+            :total-rows="totalItems"
+            :per-page="perPage"
+            align="center"
+            size="sm"
+            class="my-0"
+          />
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'TablesLogs',
+  data() {
+    // Initialize with placeholder data
+    const placeholderData = Array(10).fill().map(() => ({
+      remote_addr: 'Loading...',
+      http_user_agent: 'Loading...',
+      http_host: 'Loading...',
+      request_method: 'Loading...',
+      path_info: 'Loading...',
+      query_string: 'Loading...',
+      status: 'Loading...',
+      duration: 'Loading...',
+      filename: 'Loading...',
+      last_modified: new Date().toISOString(),
+    }));
+
+    return {
+      logsData: placeholderData,
+      logFields: [
+        // ... your field definitions ...
+      ],
+      currentPage: 1,
+      perPage: 10,
+      totalItems: 0,
+      loading: false, // Start with false as we're showing placeholder data
+    };
+  },
+  watch: {
+    currentPage() {
+      this.loadLogsData();
+    },
+  },
+  mounted() {
+    this.loadLogsData();
+  },
+  methods: {
+    loadLogsData() {
+      this.loading = true; // Start loading when actual API call is made
+
+      const apiUrl = `${process.env.VUE_APP_API_URL}/api/logs`;
+
+      axios.get(apiUrl, {
+        params: {
+          page_after: this.currentPage === 1 ? 0 : this.logsData[this.logsData.length - 1].last_modified,
+          page_size: this.perPage,
+        },
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      }).then((response) => {
+        this.logsData = response.data.data;
+        this.totalItems = response.data.meta[0].totalItems;
+      }).catch((error) => {
+        console.error('Error fetching logs:', error);
+      }).finally(() => {
+        this.loading = false; // Stop loading once API call is complete
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.btn-group-xs > .btn,
+.btn-xs {
+  padding: 0.25rem 0.4rem;
+  font-size: 0.875rem;
+  line-height: 0.5;
+  border-radius: 0.2rem;
+}
+.input-group > .input-group-prepend {
+  flex: 0 0 35%;
+}
+.input-group .input-group-text {
+  width: 100%;
+}
+.badge-container .badge {
+  width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:deep(.vue-treeselect__placeholder) {
+  color: #6C757D !important;
+}
+:deep(.vue-treeselect__control) {
+  color: #6C757D !important;
+}
+</style>
diff --git a/app/src/global-components.js b/app/src/global-components.js
@@ -6,6 +6,7 @@ const components = {
   TablesEntities: () => import(/* webpackChunkName: "TableComponentsEntities" */ '@/components/tables/TablesEntities.vue'),
   TablesGenes: () => import(/* webpackChunkName: "TableComponentsGenes" */ '@/components/tables/TablesGenes.vue'),
   TablesPhenotypes: () => import(/* webpackChunkName: "TableComponentsPhenotypes" */ '@/components/tables/TablesPhenotypes.vue'),
+  TablesLogs: () => import(/* webpackChunkName: "TableComponentsLogs" */ '@/components/tables/TablesLogs.vue'),
   AnalyseGeneClusters: () => import(/* webpackChunkName: "AnalysesComponentsClusters" */ '@/components/analyses/AnalyseGeneClusters.vue'),
   AnalysesPhenotypeClusters: () => import(/* webpackChunkName: "AnalysesPhenotypeClusters" */ '@/components/analyses/AnalysesPhenotypeClusters.vue'),
   AnalysesCurationComparisonsTable: () => import(/* webpackChunkName: "AnalysesComponentsCuration" */ '@/components/analyses/AnalysesCurationComparisonsTable.vue'),

diff --git a/app/src/router/routes.js b/app/src/router/routes.js
@@ -566,6 +566,32 @@ export const routes = [
       ) { next({ name: 'Login' }); } else next();
     },
   },
+  {
+    path: '/ViewLogs',
+    name: 'ViewLogs',
+    component: () => import(
+      /* webpackChunkName: "Administration" */ '@/views/admin/ViewLogs.vue'
+    ),
+    meta: { sitemap: { ignoreRoute: true } },
+    beforeEnter: (to, from, next) => {
+      const allowed_roles = ['Administrator'];
+      let expires = 0;
+      let timestamp = 0;
+      let user_role = 'Viewer';
+
+      if (localStorage.token) {
+        expires = JSON.parse(localStorage.user).exp;
+        user_role = JSON.parse(localStorage.user).user_role;
+        timestamp = Math.floor(new Date().getTime() / 1000);
+      }
+
+      if (
+        !localStorage.user
+        || timestamp > expires
+        || !allowed_roles.includes(user_role[0])
+      ) { next({ name: 'Login' }); } else next();
+    },
+  },
   {
     path: '/Entities/:entity_id',
     name: 'Entity',

diff --git a/app/src/views/admin/ViewLogs.vue b/app/src/views/admin/ViewLogs.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="container-fluid">
+    <b-container fluid>
+      <b-row class="justify-content-md-center py-2">
+        <b-col
+          col
+          md="12"
+        >
+          <h3>View Log Files</h3>
+          <!-- Include TablesLogs Component Here -->
+          <TablesLogs />
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ViewLogs',
+};
+</script>
+
+<style scoped>
+  .btn-group-xs > .btn, .btn-xs {
+    padding: .25rem .4rem;
+    font-size: .875rem;
+    line-height: .5;
+    border-radius: .2rem;
+  }
+</style>