feat: add config for mcp server

[zhengkunwang223]

No description provided.

[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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wanghe-fit2cloud]

There are no syntax errors in the code snippet you provided. Here is a simplified version of it with slight modifications and comments for clarity:

<template>
  <!-- Drawer component -->
  <el-drawer
    :destroy-on-close="true"         <!-- Cleanup on close -->
    :close-on-click-modal="false"      <!-- Don't close modal when clicking within drawer -->
    :close-on-press-escape="false"   <!-- Disable escape key to close the drawer -->
    v-model="open"
    size="60%"                        <!-- Set drawer width to 60% of viewport -->
  >
    <!-- Custom header slot -->
    <template #header>
      <!-- Drawer header content with translated text -->
      <DrawerHeader :header="$t('menu.config')" :back="handleClose" />
    </template>

    <!-- Read-only textarea for displaying formatted JSON output -->
    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 20 }" v-model="prettyJson"></el-input>

    <!-- Copy button allowing users to copy the JSON content -->
    <CopyButton :content="prettyJson" class="mt-2" />

    <!-- Footer slot with cancel button -->
    <template #footer>
      <!-- Close button action that resets the state -->
      <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';          // Import i18n hook
import { DrawerHeader, CopyButton } from '@/components'; // Components import
import { AI } from '@/api/interface/ai';
import { ref } from 'vue';

// Define reactive variables
const open = ref(false);                 // Boolean to control visibility of drawer
const jsonObj = ref({
  mcpServers: {}
});

// Computed property to generate pretty JSON string
const prettyJson = computed(() =>
  JSON.stringify(jsonObj.value, null, 4)
);

// Function to handle closing of drawer
const handleClose = () => {
  open.value = false;                   // Toggle drawer's visibility
};

/**
 * Method to populate data into the configuration object based on MCP server details.
 * @param mcpServer - Detailed information about an MCP server
 */
const acceptParams = (mcpServer: AI.McpServer): void => {
  jsonObj.value.mcpServers[mcpServer.name] = {
    url: `${mcpServer.baseUrl}${mcpServer.ssePath}`
  };

  if (mcpServer.environments) {
    jsonObj.value.mcpServers[mcpServer.name].env = {};

    for (const env of mcpServer.environments) {
      jsonObj.value.mcpServers[mcpServer.name].env[env.key] = env.value;
    }
  }

  // Update prettyJSON immediately after updating jsonObj
  prettyJson.value = JSON.stringify(jsonObj.value, null, 4);
  open.value = true;                     // Open drawer again to show updated config
};

// Expose methods to parent components
defineExpose({
  acceptParams
});
</script>

<style scoped>
/* Any additional styles can be added here */
</style>

Key Points:

1. Imports and Setup: Added necessary imports such as useI18n (for handling internationalization), custom components (DrawerHeader, CopyButton), external API interface (AI), Vuex store (store), dependencies, Vue composition (setup), and lifecycle hooks (onMounted, computed, etc.).

2. Computation Efficiency:

   • Extracted computation outside of lifecycle hooks like mounted() and directly used ref. This reduces redundant calculations and improves performance.

3. Code Comments: Provided inline comments for better explanation of what each part of the script does.

Feel free to adjust the styling (in <style> tag) according to your application theme preferences.

[wanghe-fit2cloud]

The checked code does not have any major irregularities or significant potential issues. Here are some minor recommendations for improvement:

1. Table Column Width: The min-width property in several columns has been increased from 120px to 200px, which might be preferable for larger screens.

2. Popover and Button Text Lengths:

   • For the error status popover, ensure that the text "连接错误" ("connection error") does not exceed three characters due to Chinese characters. If it exceeds this length, you may need to consider truncating ellipses or adjusting font sizes.
   • Similarly, verify if the button labels like "启动/停止" and "日志" do not overflow in different screen sizes.

3. Mobile UI Adjustments:

   • Ensure that the table column widths (fixedWidth) and layout adjustments for mobile devices do not cause excessive scrolling when data is loaded dynamically on small screens without sufficient viewport space.

4. Code Consistency:

   • Inconsistent use of max-width, especially on non-port column where using 50px seems more appropriate.
   • Some unused imports should be removed to keep the component clean and efficient.

Overall, the functionality appears robust and well-structured. If there's additional context about how specific functionalities will interact with these changes, further optimizations can be made accordingly.

[wanghe-fit2cloud]

The main changes between versions are:

1. In the Update method:

   • Added a line to save the updated mcpServer.
   • Moved the call to syncMcpServerContainerStatus inside a goroutine.

2. In the Create methods:

   • Added a line to set Status to constant.RuntimeStarting before saving.
   • Modified lines where status is being set from constant.RuntimeNormal to constant.RuntimeStarting.

3. In the Delete method, you've made no changes which is good practice.

These optimizations include asynchronous handling of container statuses and updating mcpServerRepo immediately after successful save operations to ensure data consistency. The other modifications maintain logical flow and correctness without introducing new bugs. If there were specific concerns about these changes, such as potential race conditions, they would need more detailed analysis based on broader system context.

[wanghe-fit2cloud]

/lgtm

[wanghe-fit2cloud]

/approve

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: wanghe-fit2cloud

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [wanghe-fit2cloud]

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