feat: add operate log

[shaohuzhang1]

feat: add operate log

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The code looks good overall, but there are a few areas that could be optimized or improved:

1. Code Duplication: The filter logic is repeated for both menu and operate. Consider refactoring this into a separate function to make it cleaner.

2. Empty Check in Filter Change: Ensure that when val is 'clear', the checkbox array is properly cleared before resetting the list of options.

3. API Call Optimization: If fetching menu data from /api/operate-log/getMenuList is expensive or frequently needed, consider caching the results locally.

4. Loading State Handling: It might be beneficial to introduce more granular loading states based on different API requests.

Here's an updated version of the code with some optimizations:

<template>
  <!-- Table component remains mostly unchanged -->
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import getOperateLog from '@/api/operate-log'
import DetailDialog from './component/DetailDialog.vue'
import { t } from '@/locales'
import { beforeDay, datetimeFormat, nowDate } from '@/utils/time'

const popoverVisible = ref(false)
const operateTypeArr = ref<any[]>([])
const DetailDialogRef = ref()
const loading = ref(false)

// Other variables remain mostly unchanged

onMounted(() => {
  getMenuList()
  changeDayHandle(history_day.value)
  getList()
})

async function fetchData(params: any): Promise<void> {
  try {
    const response = await getOperateLog.getOperateLog(paginationConfig, params, loading);
    tableData.value = response.data.records;
    paginationConfig.total = response.data.total;
  } catch (error) {
    // Handle error appropriately
  }
}

function filterChange(val: string) {
  if (val === 'clear') {
    operateTypeArr.value = [];
  } else {
    const filteredParams: Record<string, any> = {};
    
    if (filter_type.value === 'status') {
      filteredParams['status'] = filter_status.value;
    }

    if (operateTypeArr.value.length > 0 && filter_type.value === 'menu') {
      filteredParams['menu'] = JSON.stringify(operateTypeArr.value);
    }

    fetchData(filteredParams);
  }
  popoverVisible.value = false;
}

// ...

Explanation of Changes:

1. Moved Fetch Logic to Separate Function: Created fetchData to encapsulate the API call logic, making it reusable and clean.

2. Updated Filter Functionality: The filter function no longer needs checks for each property separately; they all use the same pattern now.

This should improve maintainability and reduce redundancy while keeping the app responsive and efficient.

[shaohuzhang1]

The provided code looks clean and well-structured. However, there is one minor suggestion to make it more concise:

@@ -22,7 +22,6 @@ const getOperateLog: (
 export default {
-  getOperateLog,
+  ...getOperateLog,
 } 

This will import ...getOperateLog from wherever it is defined, effectively including all properties of the getOperateLog function object into the exported module. This can be useful if you want to avoid listing each property individually.

For other checks, such as type checking or security considerations, I would need additional context about how these functions are used and what kind of operations they perform with their parameters. If the endpoint requires specific types or handles sensitive data properly, ensure that this is accounted for in your environment. Additionally, consider adding input validation before making API calls to prevent common errors like missing or incorrect parameters.