Make audit-table responsive
This commit is contained in:
@ -1,152 +1,172 @@
|
|||||||
<template>
|
<template>
|
||||||
<template v-if="auditEntries">
|
<template v-if="auditEntries">
|
||||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
|
<div id="audit-table">
|
||||||
<thead class="bg-gray-50 dark:bg-gray-700">
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
|
||||||
<tr>
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
||||||
<th
|
<tr class="audit-table-row">
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
scope="col"
|
||||||
>
|
class="audit-col-chevron p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
||||||
|
>
|
||||||
</th>
|
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Timestamp
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Subsystem
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Operation
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Client
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Secret
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Message
|
||||||
<th
|
</th>
|
||||||
scope="col"
|
<th
|
||||||
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
|
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>
|
Origin
|
||||||
</tr>
|
</th>
|
||||||
</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>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-if="isExpanded(entry.id)" class="auditRow">
|
</thead>
|
||||||
<td></td>
|
<tbody class="bg-white dark:bg-gray-800">
|
||||||
<td colspan="8">
|
<template v-for="entry in auditEntries" :key="entry.id">
|
||||||
<dl
|
<tr class="audit-table-row auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||||
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
|
<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">
|
{{ entry.timestamp }}
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
|
</td>
|
||||||
<dd class="text-xs font-semibold">{{ entry.id }}</dd>
|
<td
|
||||||
</div>
|
class="audit-col-subsystem 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">Subsystem</dt>
|
{{ entry.subsystem }}
|
||||||
<dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
|
</td>
|
||||||
</div>
|
|
||||||
<div class="flex flex-col pb-3">
|
<td
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
|
class="audit-col-operation p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
<dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
|
>
|
||||||
</div>
|
{{ entry.operation }}
|
||||||
<div class="flex flex-col pb-3">
|
</td>
|
||||||
<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>
|
<td
|
||||||
</div>
|
class="audit-col-client 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">Client ID</dt>
|
<abbr :title="entry.client_id" v-if="entry.client_name">{{
|
||||||
<dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
|
entry.client_name
|
||||||
</div>
|
}}</abbr>
|
||||||
<div class="flex flex-col pb-3">
|
</td>
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
|
<td
|
||||||
<dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
|
class="audit-col-secret p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
</div>
|
>
|
||||||
<div class="flex flex-col pb-3">
|
<abbr :title="entry.secret_id" v-if="entry.secret_name">{{
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
|
entry.secret_name
|
||||||
<dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
|
}}</abbr>
|
||||||
</div>
|
</td>
|
||||||
<div class="flex flex-col pb-3">
|
<td
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
|
class="audit-col-message p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
|
||||||
<dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
|
>
|
||||||
</div>
|
{{ entry.message }}
|
||||||
<div class="flex flex-col pb-3">
|
</td>
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
|
<td
|
||||||
<dd class="text-xs font-semibold">{{ entry.message }}</dd>
|
class="audit-col-operation p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400"
|
||||||
</div>
|
>
|
||||||
<div class="flex flex-col pb-3">
|
{{ entry.origin }}
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
|
</td>
|
||||||
<dd class="text-xs font-semibold">{{ entry.origin }}</dd>
|
</tr>
|
||||||
</div>
|
<tr v-if="isExpanded(entry.id)" class="auditRow">
|
||||||
<template v-if="entry.data">
|
<td></td>
|
||||||
<template v-for="(value, key) in entry.data">
|
<td colspan="8">
|
||||||
<div class="flex flex-col pb-3">
|
<dl
|
||||||
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
|
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
|
||||||
<dd class="text-xs font-semibold">{{ value }}</dd>
|
>
|
||||||
</div>
|
<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>
|
||||||
</template>
|
</dl>
|
||||||
</dl>
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
</tr>
|
</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>
|
||||||
|
|||||||
@ -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 },
|
||||||
|
|||||||
Reference in New Issue
Block a user