feat: ✨ add admin log page

.eslintignore

@@ -32,7 +32,8 @@ apps/server/src/init/db/imports/data.js
 
 # vitest
 coverage
-apps/client/vite.config.js.timestamp-*.mjs
+apps/client/vite.config.*.timestamp-*.mjs
+apps/server/vite.config.*.timestamp-*.mjs
 
 # sonarqube
 .scannerwork

.gitignore

@@ -32,7 +32,8 @@ apps/server/src/init/db/imports/data.js
 
 # vitest
 coverage
-apps/client/vite.config.js.timestamp-*.mjs
+apps/client/vite.config.*.timestamp-*.mjs
+apps/server/vite.config.*.timestamp-*.mjs
 
 # sonarqube
 .scannerwork

apps/client/cypress/e2e/specs/admin/logs.e2e.js

@@ -0,0 +1,26 @@
+describe('Administration logs', () => {
+  let logCount
+  let logs
+
+  beforeEach(() => {
+    cy.intercept('GET', 'api/v1/admin/logs/count').as('countLogs')
+    cy.intercept('GET', 'api/v1/admin/logs/0/5').as('getAllLogs')
+
+    cy.kcLogin('tcolin')
+    cy.visit('/admin/logs')
+    cy.url().should('contain', '/admin/logs')
+    cy.wait('@countLogs', { timeout: 10000 }).its('response').then(response => {
+      logCount = response?.body
+    })
+    cy.wait('@getAllLogs', { timeout: 10000 }).its('response').then(response => {
+      logs = response?.body
+    })
+  })
+
+  it('Should display logs list, loggedIn as admin', () => {
+    cy.getByDataTestid('logCountInfo').should('contain', `Total : ${logCount} logs`)
+    logs.forEach(log => {
+      cy.getByDataTestid(`${log.id}-json`)
+    })
+  })
+})

apps/client/package.json

@@ -34,14 +34,16 @@
     "shared": "workspace:^1.0.0",
     "typescript": "^5.1.3",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.2",
+    "vue3-json-viewer": "^2.2.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.1",
     "@types/jsdom": "^21.1.1",
     "@types/markdown-it-emoji": "^2.0.2",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/node": "^18.16.16",
+    "@unocss/transformer-directives": "^0.53.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-v8": "^0.32.0",
     "@vue/eslint-config-typescript": "^11.0.3",

apps/client/src/api/api.js

@@ -155,3 +155,14 @@ export const getAllProjects = async () => {
   const response = await apiClient.get('/admin/projects')
   return response.data
 }
+
+// Admin - Logs
+export const getAllLogs = async ({ offset, limit }) => {
+  const response = await apiClient.get(`/admin/logs/${offset}/${limit}`)
+  return response.data
+}
+
+export const countAllLogs = async () => {
+  const response = await apiClient.get('/admin/logs/count')
+  return response.data
+}

apps/client/src/components/CIForm.vue

@@ -95,6 +95,7 @@ const prepareForDownload = async () => {
 const copyContent = async (key) => {
   try {
     await navigator.clipboard.writeText(generatedCI.value[key])
+    snackbarStore.setMessage('Fichier copié', 'success')
   } catch (error) {
     snackbarStore.setMessage(error?.message, 'error')
   }

apps/client/src/components/SideMenu.vue

@@ -31,7 +31,7 @@ function toggleExpand (key) {
 }
 
 watch(routePath, (routePath) => {
-  if (/projects*/.test(routePath)) {
+  if (/^\/projects*/.test(routePath)) {
     isExpanded.value.projects = true
     isExpanded.value.administration = false
     return
@@ -232,6 +232,15 @@ onMounted(() => {
               Liste des projets
             </DsfrSideMenuLink>
           </DsfrSideMenuListItem>
+          <DsfrSideMenuListItem>
+            <DsfrSideMenuLink
+              data-testid="menuAdministrationLogs"
+              :active="routeName === 'ListLogs'"
+              to="/admin/logs"
+            >
+              Liste des logs
+            </DsfrSideMenuLink>
+          </DsfrSideMenuListItem>
         </DsfrSideMenuList>
       </DsfrSideMenuListItem>
 

apps/client/src/icons.js

@@ -24,4 +24,8 @@ export {
   RiArchiveFill,
   RiHeartPulseLine,
   RiLoader4Line,
+  RiArrowDropRightLine,
+  RiArrowDropLeftLine,
+  RiArrowDropLeftFill,
+  RiArrowDropRightFill,
 } from 'oh-vue-icons/icons/ri/index.js'

apps/client/src/main.ts

@@ -2,6 +2,7 @@ import '@gouvfr/dsfr/dist/dsfr.min.css'
 import '@gouvfr/dsfr/dist/utility/icons/icons.min.css'
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 import '@gouvminint/vue-dsfr/styles'
+import 'vue3-json-viewer/dist/index.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -12,6 +13,7 @@ import VueDsfr from '@gouvminint/vue-dsfr'
 import App from './App.vue'
 import router from './router/index'
 import * as icons from './icons'
+import JsonViewer from 'vue3-json-viewer'
 
 import 'virtual:uno.css'
 import 'uno.css'
@@ -29,5 +31,6 @@ import './main.css'
     .use(createPinia())
     .use(router)
     .use(VueDsfr, { icons: Object.values(icons) })
+    .use(JsonViewer)
     .mount('#app')
 })()

apps/client/src/router/index.js

@@ -3,7 +3,7 @@ import { useUserStore } from '@/stores/user.js'
 import { useProjectStore } from '@/stores/project.js'
 import { useSnackbarStore } from '@/stores/snackbar.js'
 
-import DsoHome from '@/views/DsoHome.vue'
+const DsoHome = () => import('@/views/DsoHome.vue')
 const ServicesHealth = () => import('@/views/ServicesHealth.vue')
 const CreateProject = () => import('@/views/CreateProject.vue')
 const ManageEnvironments = () => import('@/views/projects/ManageEnvironments.vue')
@@ -16,6 +16,7 @@ const DsoDoc = () => import('@/views/DsoDoc.vue')
 const ListUser = () => import('@/views/admin/ListUser.vue')
 const ListOrganizations = () => import('@/views/admin/ListOrganizations.vue')
 const ListProjects = () => import('@/views/admin/ListProjects.vue')
+const ListLogs = () => import('@/views/admin/ListLogs.vue')
 
 const MAIN_TITLE = 'Console Cloud π Native'
 
@@ -101,6 +102,11 @@ const routes = [
     name: 'ListProjects',
     component: ListProjects,
   },
+  {
+    path: '/admin/logs',
+    name: 'ListLogs',
+    component: ListLogs,
+  },
   {
     path: '/doc',
     name: 'Doc',

apps/client/src/stores/admin/log.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import api from '@/api/index.js'
+
+export const useAdminLogStore = defineStore('admin-log', () => {
+  const getAllLogs = async ({ offset, limit } = { offset: 0, limit: 100 }) => {
+    return api.getAllLogs({ offset, limit })
+  }
+
+  const countAllLogs = async () => {
+    return api.countAllLogs()
+  }
+
+  return {
+    getAllLogs,
+    countAllLogs,
+  }
+})

apps/client/src/stores/admin/log.spec.js

@@ -0,0 +1,45 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { apiClient } from '../../api/xhr-client.js'
+import { useAdminLogStore } from './log.js'
+
+vi.spyOn(apiClient, 'get')
+vi.spyOn(apiClient, 'post')
+vi.spyOn(apiClient, 'put')
+vi.spyOn(apiClient, 'patch')
+vi.spyOn(apiClient, 'delete')
+
+describe('Counter Store', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    // creates a fresh pinia and make it active so it's automatically picked
+    // up by any useStore() call without having to pass it to it: `useStore(pinia)`
+    setActivePinia(createPinia())
+  })
+
+  it('Should get organization list by api call', async () => {
+    const data = [
+      { id: 'thisIsAnId', data: {}, action: 'Create Project', userId: 'cb8e5b4b-7b7b-40f5-935f-594f48ae6565' },
+    ]
+    apiClient.get.mockReturnValueOnce(Promise.resolve({ data }))
+    const adminLogStore = useAdminLogStore()
+
+    const res = await adminLogStore.getAllLogs({ offset: 5, limit: 10 })
+
+    expect(res).toBe(data)
+    expect(apiClient.get).toHaveBeenCalledTimes(1)
+    expect(apiClient.get.mock.calls[0][0]).toBe('/admin/logs/5/10')
+  })
+
+  it('Should count logs by api call', async () => {
+    const data = 12
+    apiClient.get.mockReturnValueOnce(Promise.resolve({ data }))
+    const adminLogStore = useAdminLogStore()
+
+    const res = await adminLogStore.countAllLogs()
+
+    expect(res).toBe(data)
+    expect(apiClient.get).toHaveBeenCalledTimes(1)
+    expect(apiClient.get.mock.calls[0][0]).toBe('/admin/logs/count')
+  })
+})

apps/client/src/views/ServicesHealth.vue

@@ -9,9 +9,9 @@ const services = computed(() => serviceStore.services)
 const servicesHealth = computed(() => serviceStore.servicesHealth)
 
 const checkServicesHealth = async () => {
-  isUpdating.value = ref(true)
+  isUpdating.value = true
   await serviceStore.checkServicesHealth()
-  isUpdating.value = ref(false)
+  isUpdating.value = false
 }
 
 onBeforeMount(async () => {
@@ -37,7 +37,7 @@ onBeforeMount(async () => {
       secondary
       icon-only
       icon="ri-refresh-fill"
-      :disabled="isUpdating.value === true"
+      :disabled="isUpdating === true"
       @click="checkServicesHealth()"
     />
   </div>