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

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

@ -1,152 +1,172 @@
<template>
<template v-if="auditEntries">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
&nbsp;
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Timestamp
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Subsystem
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Operation
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Client
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Secret
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Message
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Origin
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<template v-for="entry in auditEntries" :key="entry.id">
<tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
<td>
<sl-icon-button
name="chevron-right"
@click="toggle(entry.id)"
:class="{ 'rotate-90': isExpanded(entry.id) }"
></sl-icon-button>
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.timestamp }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.subsystem }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.operation }}
</td>
<td class="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 class="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 class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ entry.message }}
</td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ entry.origin }}
</td>
<div id="audit-table">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr class="audit-table-row">
<th
scope="col"
class="audit-col-chevron p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
&nbsp;
</th>
<th
scope="col"
class="audit-col-timestamp p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Timestamp
</th>
<th
scope="col"
class="audit-col-subsystem p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Subsystem
</th>
<th
scope="col"
class="audit-col-operation p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Operation
</th>
<th
scope="col"
class="audit-col-client p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Client
</th>
<th
scope="col"
class="audit-col-secret p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Secret
</th>
<th
scope="col"
class="audit-col-message p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Message
</th>
<th
scope="col"
class="audit-col-origin p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Origin
</th>
</tr>
<tr v-if="isExpanded(entry.id)" class="auditRow">
<td></td>
<td colspan="8">
<dl
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
</thead>
<tbody class="bg-white dark:bg-gray-800">
<template v-for="entry in auditEntries" :key="entry.id">
<tr class="audit-table-row auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="audit-col-chevron">
<sl-icon-button
name="chevron-right"
@click="toggle(entry.id)"
:class="{ 'rotate-90': isExpanded(entry.id) }"
></sl-icon-button>
</td>
<td
class="audit-col-timestamp p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
<dd class="text-xs font-semibold">{{ entry.id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
<dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
<dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
<dd class="text-xs font-semibold">{{ entry.operation }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
<dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
<dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
<dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
<dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
<dd class="text-xs font-semibold">{{ entry.message }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
<dd class="text-xs font-semibold">{{ entry.origin }}</dd>
</div>
<template v-if="entry.data">
<template v-for="(value, key) in entry.data">
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
<dd class="text-xs font-semibold">{{ value }}</dd>
</div>
{{ entry.timestamp }}
</td>
<td
class="audit-col-subsystem p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
{{ entry.subsystem }}
</td>
<td
class="audit-col-operation p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
>
{{ entry.operation }}
</td>
<td
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
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
class="audit-col-message p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
>
{{ entry.message }}
</td>
<td
class="audit-col-operation p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{{ entry.origin }}
</td>
</tr>
<tr v-if="isExpanded(entry.id)" class="auditRow">
<td></td>
<td colspan="8">
<dl
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
<dd class="text-xs font-semibold">{{ entry.id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
<dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
<dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
<dd class="text-xs font-semibold">{{ entry.operation }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
<dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
<dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
<dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
<dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
<dd class="text-xs font-semibold">{{ entry.message }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
<dd class="text-xs font-semibold">{{ entry.origin }}</dd>
</div>
<template v-if="entry.data">
<template v-for="(value, key) in entry.data">
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
<dd class="text-xs font-semibold">{{ value }}</dd>
</div>
</template>
</template>
</template>
</dl>
</td>
</tr>
</template>
</tbody>
</table>
</dl>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<template v-if="shouldPaginate">
<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"
@ -250,10 +270,44 @@ watch([offset, pageNum, auditFilter], loadLogs)
onMounted(loadLogs)
</script>
<style>
@reference "tailwindcss";
tr.auditRow {
background-color: var(--color-white);
}
tr.auditRow:nth-child(even) {
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>

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

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