Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion frontend/src/views/setting/license/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -216,11 +216,20 @@ const search = async () => {
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
console.log(data.value);
for (const item of data.value) {
item.productName = 'product-1panel-pro';
item.expiresAt = item.productPro === '0' ? '' : timestampToDate(Number(item.productPro));
}
data.value.sort((a, b) => {
const masterLabel = i18n.global.t('xpack.node.master');
const nodeA = loadBindNode(a);
const nodeB = loadBindNode(b);

if (nodeA === masterLabel || nodeB === masterLabel) {
return Number(nodeB === masterLabel) - Number(nodeA === masterLabel);
}
return a.status.localeCompare(b.status);
});
paginationConfig.total = res.data.total;
})
.catch(() => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are several areas that could be optimized or addressed:

  1. Sorting Logic: The sorting logic can be simplified to avoid nested function calls inside the localeCompare method.

  2. Variable Naming: Consider renaming variables like timestampToDate, loadBindNode, and other similar functions for clarity.

  3. Handling Empty Data Conditionally: Ensure that the code handles empty data gracefully to prevent potential errors.

  4. Comments for Clarity: Add comments for better understanding of the code flow.

Here is an improved version of your code snippet:

async function search() {
    try {
        loading.value = true;
        const response = await fetch('/api/data'); // Replace with actual API call URL

        if (!response.ok) {
            throw new Error(`Error fetching data: ${response.statusText}`);
        }

        const { items, total } = await response.json();

        data.value = items || [];

        const masterNodes = ['node-1', 'node-2'];

        if (masterNodes.includes(loadBindNode())) {
            data.value.sort((a, b) => a.status.localeCompare(b.status));
        } else {
            data.value.sort((a, b) => (b.status < a.status ? -1 : 1)); // Sort statuses in descending order
        }

        paginationConfig.total = total;
    } catch (error) {
        console.error('An error occurred:', error);
        data.value = [];
        paginationConfig.total = 0;
    } finally {
        loading.value = false;
    }
}

// Example helper function for demonstration purposes
function loadBindNode() {
    // Implement logic here to determine the node bind value
    return 'node-1'; // Placeholder value
}

function timestampToDate(timestamp) {
    // Implement time conversion logic here
    return ''; // Placeholder value
}

Key Improvements:

  • Simplified Sorting: Directly use localeCompare without additional checks.
  • Function Simplification: Removed redundant functions and combined them where possible.
  • Graceful Handling: Added conditionals to handle empty data and network failures more effectively.
  • Clarity: Added comments to explain key parts of the code.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you provided has a few minor issues that can be addressed:

  1. Unnecessary Console Log: The line console.log(data.value); is unnecessary and can be removed to improve performance.

  2. Potential Performance Issue: Sorting an array with a custom comparator function can be less efficient than using a default sort if the data is already partially sorted or uses a natural ordering like strings. If data.value is expected to have some predefined order, this might not be necessary.

  3. Code Reusability: Consider extracting helper functions like loadBindNode() and the locale compare logic into separate utility methods to improve readability and maintainability.

Here's the revised code with these improvements:

const search = async () => {
    loading.value = false;
    data.value = res.data.items || [];
    
    for (const item of data.value) {
        item.productName = 'product-1panel-pro';
        item.expiresAt = item.productPro === '0' ? '' : timestampToDate(Number(item.productPro));
    }
    
    // Remove the unnecessary console log
//     console.log(data.value);

    // Optimize sorting by first handling special cases
    const masterLabel = i18n.global.t('xpack.node.master');
        
    // Use Array.prototype.map for efficiency
    const sortedData = data.value
        .map(item => loadBindNode(item));

    // Custom comparison logic considering masterLabel
    sortedData.sort((a, b) => {
        if (a === masterLabel || b === masterLabel) {
            return Number(b === masterLabel) - Number(a === masterLabel);
        }
        return a.status.localeCompare(b.status);
    });

    paginationConfig.total = res.data.total;

    // Optionally replace original data with sortedData
    /* 
    data.value = sortedData;
    */
};

These changes should help clean up the code, make it more readable, and potentially optimize performance depending on the specific use case.

Expand Down
Loading