Merge pull request #884 from colinin/click-on-column-fill-query-logs-condition

feat(log): click on the column to fill the query condition.

apps/vue/src/api/auditing/model/auditLogModel.ts

@@ -71,6 +71,8 @@ export interface GetAuditLogPagedRequest extends PagedAndSortedResultRequestDto
   url?: string;
   userName?: string;
   correlationId?: string;
+  clientId?: string;
+  clientIpAddress?: string;
   applicationName?: string;
   maxExecutionDuration?: number;
   minExecutionDuration?: number;

apps/vue/src/views/auditing/components/AuditLogTable.vue

@@ -3,11 +3,33 @@
     <BasicTable @register="registerTable">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'url'">
-          <Tag :color="httpStatusCodeColor(record.httpStatusCode)">{{ record.httpStatusCode }}</Tag>
+          <Tag
-          <Tag style="margin-left: 5px" :color="httpMethodColor(record.httpMethod)">{{
+            :color="httpStatusCodeColor(record.httpStatusCode)"
+            @click="handleFilter('httpStatusCode', record.httpStatusCode)"
+          >{{ record.httpStatusCode }}</Tag>
+          <Tag
+            style="margin-left: 5px"
+            :color="httpMethodColor(record.httpMethod)"
+            @click="handleFilter('httpMethod', record.httpMethod)"
+          >{{
             record.httpMethod
           }}</Tag>
-          <span style="margin-left: 5px">{{ record.url }}</span>
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('url', record.url)">{{ record.url }}</a>
+        </template>
+        <template v-else-if="column.key === 'applicationName'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('applicationName', record.applicationName)">{{ record.applicationName }}</a>
+        </template>
+        <template v-else-if="column.key === 'userName'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('userName', record.userName)">{{ record.userName }}</a>
+        </template>
+        <template v-else-if="column.key === 'clientIpAddress'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('clientIpAddress', record.clientIpAddress)">{{ record.clientIpAddress }}</a>
+        </template>
+        <template v-else-if="column.key === 'clientId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('clientId', record.clientId)">{{ record.clientId }}</a>
+        </template>
+        <template v-else-if="column.key === 'correlationId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('correlationId', record.correlationId)">{{ record.correlationId }}</a>
         </template>
         <template v-else-if="column.key === 'action'">
           <TableAction
@@ -50,7 +72,7 @@
 
   const { createMessage, createConfirm } = useMessage();
   const { L } = useLocalization('AbpAuditLogging');
-  const [registerTable, { reload }] = useTable({
+  const [registerTable, { reload, getForm }] = useTable({
     rowKey: 'id',
     title: L('AuditLog'),
     columns: getDataColumns(),
@@ -75,6 +97,14 @@
   const [registerModal, { openModal }] = useModal();
   const { httpMethodColor, httpStatusCodeColor } = useAuditLog();
 
+  function handleFilter(field: string, value: any) {
+    const form = getForm();
+    const setField: Recordable = {};
+    setField[`${field}`] = value;
+    form?.setFieldsValue(setField);
+    form?.submit();
+  }
+
   function handleShow(record) {
     openModal(true, record, true);
   }
@@ -94,3 +124,10 @@
     });
   }
 </script>
+
+<style lang="less" scoped>
+  .link {
+    cursor: pointer;
+    margin-left: 5px;
+  }
+</style>

apps/vue/src/views/auditing/components/ModalData.ts

@@ -1,7 +1,16 @@
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { FormProps } from '/@/components/Form';
 
-const { L } = useLocalization('AbpAuditLogging');
+const { L } = useLocalization(['AbpAuditLogging']);
+
+const httpMethodOptions = [
+  { value: 'GET', label: 'GET' },
+  { value: 'POST', label: 'POST' },
+  { value: 'PATCH', label: 'PATCH' },
+  { value: 'DELETE', label: 'DELETE' },
+  { value: 'OPTIONS', label: 'OPTIONS' },
+  { value: 'HEAD', label: 'HEAD' },
+];
 
 const httpStatusCodeOptions = [
   { value: 100, label: '100 - Continue' },
@@ -52,6 +61,7 @@ const httpStatusCodeOptions = [
 export function getSearchFormSchemas(): Partial<FormProps> {
   return {
     labelWidth: 100,
+    alwaysShowLines: 3,
     fieldMapToTime: [
       ['dateRange', ['startTime', 'endTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
     ],
@@ -69,9 +79,15 @@ export function getSearchFormSchemas(): Partial<FormProps> {
         colProps: { span: 6 },
       },
       {
-        field: 'httpMethod',
+        field: 'clientId',
         component: 'Input',
-        label: L('HttpMethod'),
+        label: L('ClientId'),
+        colProps: { span: 6 },
+      },
+      {
+        field: 'clientIpAddress',
+        component: 'Input',
+        label: L('ClientIpAddress'),
         colProps: { span: 6 },
       },
       {
@@ -83,6 +99,15 @@ export function getSearchFormSchemas(): Partial<FormProps> {
           options: httpStatusCodeOptions,
         },
       },
+      {
+        field: 'httpMethod',
+        component: 'Select',
+        label: L('HttpMethod'),
+        colProps: { span: 6 },
+        componentProps: {
+          options: httpMethodOptions,
+        }
+      },
       {
         field: 'url',
         component: 'Input',
@@ -90,21 +115,33 @@ export function getSearchFormSchemas(): Partial<FormProps> {
         colProps: { span: 12 },
       },
       {
-        field: 'minExecutionDuration',
+        field: 'dateRange',
-        component: 'InputNumber',
+        component: 'RangePicker',
-        label: L('MinExecutionDuration'),
+        label: L('StartTime'),
-        labelWidth: 180,
         colProps: { span: 6 },
         componentProps: {
           style: {
-            width: '100%',
+            width: '100%'
           },
         },
       },
       {
-        field: 'maxExecutionDuration',
+        field: 'correlationId',
+        component: 'Input',
+        label: L('CorrelationId'),
+        colProps: { span: 12 },
+      },
+      {
+        field: 'hasException',
+        component: 'Checkbox',
+        label: L('HasException'),
+        colProps: { span: 6 },
+        renderComponentContent: L('HasException'),
+      },
+      {
+        field: 'minExecutionDuration',
         component: 'InputNumber',
-        label: L('MaxExecutionDuration'),
+        label: L('MinExecutionDuration'),
         labelWidth: 180,
         colProps: { span: 6 },
         componentProps: {
@@ -114,28 +151,16 @@ export function getSearchFormSchemas(): Partial<FormProps> {
         },
       },
       {
-        field: 'correlationId',
+        field: 'maxExecutionDuration',
-        component: 'Input',
+        component: 'InputNumber',
-        label: L('CorrelationId'),
+        label: L('MaxExecutionDuration'),
+        labelWidth: 180,
         colProps: { span: 6 },
-      },
-      {
-        field: 'dateRange',
-        component: 'RangePicker',
-        label: L('StartTime'),
-        colProps: { span: 12 },
         componentProps: {
           style: {
-            width: '100%'
+            width: '100%',
-          },
           },
         },
-      {
-        field: 'hasException',
-        component: 'Checkbox',
-        label: L('HasException'),
-        colProps: { span: 6 },
-        renderComponentContent: L('HasException'),
       },
     ],
   };

apps/vue/src/views/auditing/components/TableData.ts

@@ -28,11 +28,18 @@ export function getDataColumns(): BasicColumn[] {
       width: 120,
       sorter: true,
     },
+    {
+      title: L('ClientId'),
+      dataIndex: 'clientId',
+      align: 'left',
+      width: 100,
+      sorter: true,
+    },
     {
       title: L('ClientIpAddress'),
       dataIndex: 'clientIpAddress',
       align: 'left',
-      width: 120,
+      width: 140,
       sorter: true,
     },
     {
@@ -59,6 +66,13 @@ export function getDataColumns(): BasicColumn[] {
       width: 100,
       sorter: true,
     },
+    {
+      title: L('CorrelationId'),
+      dataIndex: 'correlationId',
+      align: 'left',
+      width: 160,
+      sorter: true,
+    },
     {
       title: L('TenantName'),
       dataIndex: 'tenantName',

apps/vue/src/views/sys/logging/components/LoggingTable.vue

@@ -3,7 +3,37 @@
     <BasicTable @register="registerTable">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'level'">
-          <Tag :color="LogLevelColor[record.level]">{{ LogLevelLabel[record.level] }}</Tag>
+          <Tag :color="LogLevelColor[record.level]" @click="handleFilter('level', record.level)">{{ LogLevelLabel[record.level] }}</Tag>
+        </template>
+        <template v-else-if="column.key === 'application'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('application', record.fields.application)">{{ record.fields.application }}</a>
+        </template>
+        <template v-else-if="column.key === 'machineName'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('machineName', record.fields.machineName)">{{ record.fields.machineName }}</a>
+        </template>
+        <template v-else-if="column.key === 'environment'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('environment', record.fields.environment)">{{ record.fields.environment }}</a>
+        </template>
+        <template v-else-if="column.key === 'connectionId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('connectionId', record.fields.connectionId)">{{ record.fields.connectionId }}</a>
+        </template>
+        <template v-else-if="column.key ==='correlationId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('correlationId', record.fields.correlationId)">{{ record.fields.correlationId }}</a>
+        </template>
+        <template v-else-if="column.key ==='requestId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('requestId', record.fields.requestId)">{{ record.fields.requestId }}</a>
+        </template>
+        <template v-else-if="column.key ==='requestPath'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('requestPath', record.fields.requestPath)">{{ record.fields.requestPath }}</a>
+        </template>
+        <template v-else-if="column.key ==='processId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('processId', record.fields.processId)">{{ record.fields.processId }}</a>
+        </template>
+        <template v-else-if="column.key ==='threadId'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('threadId', record.fields.threadId)">{{ record.fields.threadId }}</a>
+        </template>
+        <template v-else-if="column.key === 'context'">
+          <a class="link" href="javaScript:void(0);" @click="handleFilter('context', record.fields.level)">{{ record.fields.level }}</a>
         </template>
         <template v-else-if="column.key === 'action'">
           <TableAction
@@ -37,7 +67,7 @@
 
   const { L } = useLocalization('AbpAuditLogging');
   const [registerModal, { openModal }] = useModal();
-  const [registerTable] = useTable({
+  const [registerTable, { getForm }] = useTable({
     rowKey: 'fields.id',
     title: L('Logging'),
     columns: getDataColumns(),
@@ -60,7 +90,22 @@
     },
   });
 
+  function handleFilter(field: string, value: any) {
+    const form = getForm();
+    const setField: Recordable = {};
+    setField[`${field}`] = value;
+    form?.setFieldsValue(setField);
+    form?.submit();
+  }
+
   function handleShow(record) {
     openModal(true, record);
   }
 </script>
+
+<style lang="less" scoped>
+  .link {
+    cursor: pointer;
+    margin-left: 5px;
+  }
+</style>

apps/vue/src/views/sys/logging/datas/ModalData.ts

@@ -7,28 +7,28 @@ const { L } = useLocalization('AbpAuditLogging');
 export function getSearchFormSchemas(): Partial<FormProps> {
   return {
     labelWidth: 100,
+    alwaysShowLines: 3,
+    fieldMapToTime: [
+      ['dateRange', ['startTime', 'endTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
+    ],
     schemas: [
       {
-        field: 'startTime',
+        field: 'machineName',
-        component: 'DatePicker',
+        component: 'Input',
-        label: L('StartTime'),
+        label: L('MachineName'),
-        colProps: { span: 9 },
+        colProps: { span: 6 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
       },
       {
-        field: 'endTime',
+        field: 'application',
-        component: 'DatePicker',
+        component: 'Input',
-        label: L('EndTime'),
+        label: L('Application'),
-        colProps: { span: 9 },
+        colProps: { span: 6 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
       },
+      {
+        field: 'environment',
+        component: 'Input',
+        label: L('Environment'),
+        colProps: { span: 6 },
       },
       {
         field: 'level',
@@ -50,6 +50,29 @@ export function getSearchFormSchemas(): Partial<FormProps> {
           ],
         },
       },
+      {
+        field: 'dateRange',
+        component: 'RangePicker',
+        label: L('StartTime'),
+        colProps: { span: 6 },
+        componentProps: {
+          style: {
+            width: '100%',
+          },
+        },
+      },
+      {
+        field: 'requestId',
+        component: 'Input',
+        label: L('RequestId'),
+        colProps: { span: 6 },
+      },
+      {
+        field: 'requestPath',
+        component: 'Input',
+        label: L('RequestPath'),
+        colProps: { span: 12 },
+      },
       {
         field: 'hasException',
         component: 'Select',
@@ -67,40 +90,34 @@ export function getSearchFormSchemas(): Partial<FormProps> {
         },
       },
       {
-        field: 'machineName',
+        field: 'connectionId',
         component: 'Input',
-        label: L('MachineName'),
+        label: L('ConnectionId'),
         colProps: { span: 6 },
       },
       {
-        field: 'environment',
+        field: 'correlationId',
         component: 'Input',
-        label: L('Environment'),
+        label: L('CorrelationId'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
       },
       {
-        field: 'application',
+        field: 'processId',
-        component: 'Input',
+        component: 'InputNumber',
-        label: L('Application'),
+        label: L('ProcessId'),
         colProps: { span: 6 },
       },
       {
-        field: 'requestPath',
+        field: 'threadId',
-        component: 'Input',
+        component: 'InputNumber',
-        label: L('RequestPath'),
+        label: L('ThreadId'),
-        colProps: { span: 12 },
-      },
-      {
-        field: 'requestId',
-        component: 'Input',
-        label: L('RequestId'),
         colProps: { span: 6 },
       },
       {
-        field: 'correlationId',
+        field: 'context',
         component: 'Input',
-        label: L('CorrelationId'),
+        label: L('Context'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
       },
     ],
   };

apps/vue/src/views/sys/logging/datas/TableData.ts

@@ -9,6 +9,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('MachineName'),
       dataIndex: ['fields', 'machineName'],
+      key: 'machineName',
       align: 'left',
       width: 150,
       sorter: true,
@@ -16,6 +17,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('Application'),
       dataIndex: ['fields', 'application'],
+      key: 'application',
       align: 'left',
       width: 150,
       sorter: true,
@@ -46,6 +48,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('Environment'),
       dataIndex: ['fields', 'environment'],
+      key: 'environment',
       align: 'left',
       width: 150,
       sorter: true,
@@ -53,6 +56,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('ProcessId'),
       dataIndex: ['fields', 'processId'],
+      key: 'processId',
       align: 'left',
       width: 150,
       sorter: true,
@@ -60,6 +64,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('ThreadId'),
       dataIndex: ['fields', 'threadId'],
+      key: 'threadId',
       align: 'left',
       width: 150,
       sorter: true,
@@ -67,6 +72,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('Context'),
       dataIndex: ['fields', 'context'],
+      key: 'context',
       align: 'left',
       width: 330,
       sorter: true,
@@ -74,6 +80,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('ConnectionId'),
       dataIndex: ['fields', 'connectionId'],
+      key: 'connectionId',
       align: 'left',
       width: 200,
       sorter: true,
@@ -81,6 +88,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('CorrelationId'),
       dataIndex: ['fields', 'correlationId'],
+      key: 'correlationId',
       align: 'left',
       width: 200,
       sorter: true,
@@ -88,6 +96,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('RequestId'),
       dataIndex: ['fields', 'requestId'],
+      key: 'requestId',
       align: 'left',
       width: 200,
       sorter: true,
@@ -95,6 +104,7 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('RequestPath'),
       dataIndex: ['fields', 'requestPath'],
+      key: 'requestPath',
       align: 'left',
       width: 300,
       sorter: true,