fix: unblock frontend logs directory in gitignore
Add exception rules to both root and subproject .gitignore files to allow tracking the frontend logs page component at src/Fengling.Console.Web.Vben/apps/web-ele/src/views/fengling/logs/
This commit is contained in:
Sam
parent
8f2e07a2cf
commit
ef599f9465
1
.gitignore
vendored
1
.gitignore
vendored
@ -29,6 +29,7 @@ package-lock.json
|
|||||||
.eslintcache
|
.eslintcache
|
||||||
|
|
||||||
logs
|
logs
|
||||||
|
!apps/web-ele/src/views/fengling/logs/
|
||||||
*.log
|
*.log
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
|
|||||||
227
apps/web-ele/src/views/fengling/logs/index.vue
Normal file
227
apps/web-ele/src/views/fengling/logs/index.vue
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ElTable,
|
||||||
|
ElTableColumn,
|
||||||
|
ElTabs,
|
||||||
|
ElTabPane,
|
||||||
|
ElButton,
|
||||||
|
ElInput,
|
||||||
|
ElSelect,
|
||||||
|
ElOption,
|
||||||
|
ElDatePicker,
|
||||||
|
ElTag,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { LogApi, type FenglingApi } from '#/api/fengling';
|
||||||
|
|
||||||
|
const activeTab = ref('audit');
|
||||||
|
const loading = ref(false);
|
||||||
|
const auditTableData = ref<FenglingApi.Log.AuditLog[]>([]);
|
||||||
|
const accessTableData = ref<FenglingApi.Log.AccessLog[]>([]);
|
||||||
|
|
||||||
|
const searchParams = ref({
|
||||||
|
userId: undefined as number | undefined,
|
||||||
|
keyword: '',
|
||||||
|
action: '',
|
||||||
|
resourceType: '',
|
||||||
|
path: '',
|
||||||
|
statusCode: undefined as number | undefined,
|
||||||
|
startDate: '',
|
||||||
|
endDate: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadAuditLogs = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await LogApi.getAuditLogList({
|
||||||
|
page: pagination.value.page,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
userId: searchParams.value.userId,
|
||||||
|
action: searchParams.value.action || undefined,
|
||||||
|
resourceType: searchParams.value.resourceType || undefined,
|
||||||
|
startDate: searchParams.value.startDate || undefined,
|
||||||
|
endDate: searchParams.value.endDate || undefined,
|
||||||
|
});
|
||||||
|
auditTableData.value = response.items;
|
||||||
|
pagination.value.total = response.totalCount;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load audit logs', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadAccessLogs = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await LogApi.getAccessLogList({
|
||||||
|
page: pagination.value.page,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
userId: searchParams.value.userId,
|
||||||
|
path: searchParams.value.path || undefined,
|
||||||
|
statusCode: searchParams.value.statusCode,
|
||||||
|
startDate: searchParams.value.startDate || undefined,
|
||||||
|
endDate: searchParams.value.endDate || undefined,
|
||||||
|
});
|
||||||
|
accessTableData.value = response.items;
|
||||||
|
pagination.value.total = response.totalCount;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load access logs', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
if (activeTab.value === 'audit') {
|
||||||
|
loadAuditLogs();
|
||||||
|
} else {
|
||||||
|
loadAccessLogs();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadAuditLogs();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-5">
|
||||||
|
<h1 class="mb-5 text-2xl font-bold">Logs</h1>
|
||||||
|
|
||||||
|
<el-tabs v-model="activeTab" @tab-change="handleSearch">
|
||||||
|
<el-tab-pane label="Audit Logs" name="audit">
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<el-input
|
||||||
|
v-model="searchParams.action"
|
||||||
|
placeholder="Action"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
v-model="searchParams.resourceType"
|
||||||
|
placeholder="Resource Type"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchParams.startDate"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="Start Date"
|
||||||
|
style="width: 250px"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchParams.endDate"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="End Date"
|
||||||
|
style="width: 250px"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="handleSearch">Search</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="auditTableData" v-loading="loading" border stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="userId" label="User ID" width="100" />
|
||||||
|
<el-table-column prop="userName" label="Username" width="150" />
|
||||||
|
<el-table-column prop="action" label="Action" width="150" />
|
||||||
|
<el-table-column prop="resourceType" label="Resource Type" width="150" />
|
||||||
|
<el-table-column prop="resourceId" label="Resource ID" width="150" />
|
||||||
|
<el-table-column prop="details" label="Details" width="300" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="ipAddress" label="IP Address" width="150" />
|
||||||
|
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@change="loadAuditLogs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="Access Logs" name="access">
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<el-input
|
||||||
|
v-model="searchParams.path"
|
||||||
|
placeholder="Path"
|
||||||
|
clearable
|
||||||
|
style="width: 250px"
|
||||||
|
/>
|
||||||
|
<el-select v-model="searchParams.statusCode" placeholder="Status Code" clearable style="width: 150px">
|
||||||
|
<el-option label="200" :value="200" />
|
||||||
|
<el-option label="201" :value="201" />
|
||||||
|
<el-option label="400" :value="400" />
|
||||||
|
<el-option label="401" :value="401" />
|
||||||
|
<el-option label="403" :value="403" />
|
||||||
|
<el-option label="404" :value="404" />
|
||||||
|
<el-option label="500" :value="500" />
|
||||||
|
</el-select>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchParams.startDate"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="Start Date"
|
||||||
|
style="width: 250px"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchParams.endDate"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="End Date"
|
||||||
|
style="width: 250px"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="handleSearch">Search</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="accessTableData" v-loading="loading" border stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="userId" label="User ID" width="100" />
|
||||||
|
<el-table-column prop="userName" label="Username" width="150" />
|
||||||
|
<el-table-column prop="path" label="Path" width="300" />
|
||||||
|
<el-table-column prop="method" label="Method" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.method === 'GET' ? 'success' : row.method === 'POST' ? 'primary' : 'warning'" size="small">
|
||||||
|
{{ row.method }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="statusCode" label="Status Code" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.statusCode < 300 ? 'success' : row.statusCode < 400 ? 'warning' : 'danger'" size="small">
|
||||||
|
{{ row.statusCode }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="duration" label="Duration (ms)" width="120" />
|
||||||
|
<el-table-column prop="ipAddress" label="IP Address" width="150" />
|
||||||
|
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@change="loadAccessLogs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user