eising/sshecret
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Make audit-table responsive

Browse Source
This commit is contained in:
Allan Eising
2025-07-16 06:54:48 +02:00
parent 3efc4d7fa5
commit 45ae0929e6
2 changed files with 198 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
packages/sshecret-frontend/src/components/audit/AuditTable.vue
View File

@ -1,53 +1,54 @@
<template> <template>
<template v-if="auditEntries"> <template v-if="auditEntries">
<div id="audit-table">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700"> <thead class="bg-gray-50 dark:bg-gray-700">
<tr> <tr class="audit-table-row">
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-chevron p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
&nbsp; &nbsp;
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-timestamp p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Timestamp Timestamp
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-subsystem p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Subsystem Subsystem
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-operation p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Operation Operation
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-client p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Client Client
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-secret p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Secret Secret
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-message p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Message Message
</th> </th>
<th <th
scope="col" scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white" class="audit-col-origin p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
> >
Origin Origin
</th> </th>
@ -55,35 +56,53 @@
</thead> </thead>
<tbody class="bg-white dark:bg-gray-800"> <tbody class="bg-white dark:bg-gray-800">
<template v-for="entry in auditEntries" :key="entry.id"> <template v-for="entry in auditEntries" :key="entry.id">
<tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700"> <tr class="audit-table-row auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
<td> <td class="audit-col-chevron">
<sl-icon-button <sl-icon-button
name="chevron-right" name="chevron-right"
@click="toggle(entry.id)" @click="toggle(entry.id)"
:class="{ 'rotate-90': isExpanded(entry.id) }" :class="{ 'rotate-90': isExpanded(entry.id) }"
></sl-icon-button> ></sl-icon-button>
</td> </td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"> <td
class="audit-col-timestamp p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
{{ entry.timestamp }} {{ entry.timestamp }}
</td> </td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"> <td
class="audit-col-subsystem p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
{{ entry.subsystem }} {{ entry.subsystem }}
</td> </td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"> <td
class="audit-col-operation p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
{{ entry.operation }} {{ entry.operation }}
</td> </td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"> <td
<abbr :title="entry.client_id" v-if="entry.client_name">{{ entry.client_name }}</abbr> class="audit-col-client p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
<abbr :title="entry.client_id" v-if="entry.client_name">{{
entry.client_name
}}</abbr>
</td> </td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"> <td
<abbr :title="entry.secret_id" v-if="entry.secret_name">{{ entry.secret_name }}</abbr> class="audit-col-secret p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
<abbr :title="entry.secret_id" v-if="entry.secret_name">{{
entry.secret_name
}}</abbr>
</td> </td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400"> <td
class="audit-col-message p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ entry.message }} {{ entry.message }}
</td> </td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400"> <td
class="audit-col-operation p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{{ entry.origin }} {{ entry.origin }}
</td> </td>
</tr> </tr>
@ -147,6 +166,7 @@
</template> </template>
</tbody> </tbody>
</table> </table>
</div>
<template v-if="shouldPaginate"> <template v-if="shouldPaginate">
<div <div
class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700" class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
@ -250,10 +270,44 @@ watch([offset, pageNum, auditFilter], loadLogs)
onMounted(loadLogs) onMounted(loadLogs)
</script> </script>
<style> <style>
@reference "tailwindcss";
tr.auditRow { tr.auditRow {
background-color: var(--color-white); background-color: var(--color-white);
} }
tr.auditRow:nth-child(even) { tr.auditRow:nth-child(even) {
background-color: var(--color-gray-50); background-color: var(--color-gray-50);
} }
th.audit-col-chevron,
td.audit-col-chevron {
}
th.audit-col-timestamp,
td.audit-col-timestamp {
@apply flex lg:table-cell;
}
th.audit-col-subsystem,
td.audit-col-subsystem {
@apply hidden 2xl:table-cell;
}
th.audit-col-operation,
td.audit-col-operation {
@apply hidden 2xl:table-cell;
}
th.audit-col-client,
td.audit-col-client {
@apply hidden lg:table-cell;
}
th.audit-col-secret,
td.audit-col-secret {
@apply hidden lg:table-cell;
}
td.audit-col-message,
th.audit-col-message {
@apply flex lg:table-cell md:text-clip;
}
th.audit-col-origin,
td.audit-col-origin {
@apply hidden 2xl:table-cell;
}
</style> </style>

1
packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
View File

@ -174,7 +174,6 @@ function itemSelected(event: Event) {
} else { } else {
const secretId = el.dataset.name const secretId = el.dataset.name
const parentId = el.dataset.parentId const parentId = el.dataset.parentId
console.log(el.dataset)
router.push({ router.push({
name: 'ClientSecret', name: 'ClientSecret',
params: { parentId: el.dataset.parentId, id: el.dataset.name }, params: { parentId: el.dataset.parentId, id: el.dataset.name },