feat: 1.14 在线调试 (TencentBlueKing#68)

* feat: 1.14 开发

* feat: 1.14 开发

* feat: 1.14 开发

* feat: 1.14 开发

* feat: 1.14 在线调试开发

* feat: 1.14 在线调试

* feat: 1.14 在线调试

src/dashboard-front/src/components/online-test-top.vue

@@ -2,28 +2,30 @@
   <div class="resource-top-bar" :style="stage.getNotUpdatedStages?.length ? 'top: 42px' : 'top: -1px'">
     <div class="top-title-wrapper">
       <div class="title">{{ t('在线调试') }}</div>
-      <div class="history">
+      <div class="history" @click="showHistory">
         <i class="apigateway-icon icon-ag-cc-history history-icon"></i>
-        <span>请求记录</span>
+        <span>{{ t('请求记录') }}</span>
       </div>
     </div>
   </div>
+
+  <!-- 调用历史 -->
+  <request-record ref="requestRecordRef" />
 </template>
 
 <script setup lang="ts">
-// import { computed } from 'vue';
-// import { useRoute } from 'vue-router';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStage } from '@/store';
+import requestRecord from '@/views/online-debug/components/request-record.vue';
 
 const { t } = useI18n();
 const stage = useStage();
+const requestRecordRef = ref(null);
 
-// const route = useRoute();
-// const apigwId = computed(() => +route.params.id);
-
-// const props = defineProps({
-// });
+const showHistory = () => {
+  requestRecordRef.value?.show();
+};
 </script>
 
 <style lang="scss" scoped>

src/dashboard-front/src/http/online-test.ts

@@ -37,3 +37,12 @@ export const getApiDetail = (apigwId: number) => fetch.get(`${BK_DASHBOARD_URL}/
  * @returns
  */
 export const getUserAuthType = () => fetch.get(`${BK_DASHBOARD_URL}/settings/user_auth_type/`);
+
+/**
+ * 获取环境下可用的某个资源接口schema(在线调试)
+ * @param gatewayId 网关id
+ * @param stageId 环境id
+ * @param resourceId 资源id
+ * @returns
+ */
+export const resourceSchema = (gatewayId: number, stageId: number, resourceId: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${gatewayId}/releases/stages/${stageId}/resources/${resourceId}/schema/`);

src/dashboard-front/src/language/lang.ts

@@ -776,6 +776,18 @@ const lang: ILANG = {
   '详情文档': ['More'],
   '分': ['Minute'],
   '时': ['Hour'],
+  '查看文档': ['View document'],
+  '发送': ['send'],
+  '说明': ['Instructions'],
+  '参数名': ['Parameter name'],
+  '参数值': ['Parameter value'],
+  'Path 参数': ['Path parameter'],
+  'Query 参数': ['Query parameter'],
+  'Headers 参数': ['Headers parameter'],
+  '资源列表': ['Resource list'],
+  '调用历史': ['Call history'],
+  '查看文档详情': ['View document Details'],
+  '请输入 Cookies 中，字段 bk_token 的值': ['Please enter the value of the field bk_token in the cookie'],
   '不能多于50个字符': ['No more than 50 characters'],
   '由字母、数字、下划线（_） 组成，首字符必须是字母，长度小于50个字符': ['Consists of letters, numbers, underscore(_), first character must be a letter, length less than 50'],
   '请输入合法Host，如：http://example.com': ['Please input valid Host，such as: http://example.com'],
@@ -1014,6 +1026,8 @@ const lang: ILANG = {
   '最近12小时': ['Last 12 hours'],
   '最近1天': ['Last 1 day'],
   '最近7天': ['Last 7 days'],
+  '请确认{name}参数名输入正确': ['Please make sure the {name} parameter name is entered correctly'],
+  '请确认{name}参数值输入正确': ['Please make sure the {name} parameter value is entered correctly'],
   '确定要删除蓝鲸应用【{appCode}】的权限？': ['Confirm to delete permissions for app [{appCode}]?'],
   '无': ['None'],
   'Python SDK信息': ['Python SDK Info'],

src/dashboard-front/src/router/index.ts

@@ -23,7 +23,7 @@ const apigwStageDetail = () => import(/* webpackChunkName: 'apigw-env'*/'@/views
 const apigwReleaseHistory = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/stage/published/index.vue');
 // const apigwStageResourceInfo = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/stage/overview/detail-mode/resource-info.vue');
 // const apigwStagePluginManage = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/stage/overview/detail-mode/plugin-manage.vue');
-const apigwOnlineTest = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/online-test/index.vue');
+const apigwOnlineTest = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/online-debug/index.vue');
 // const apigwStageVariableManage = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/stage/overview/detail-mode/variable-manage.vue');
 const ApigwPermissionApplys = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/permission/apply/index.vue');
 const ApigwPermissionApps = () => import(/* webpackChunkName: 'apigw-env'*/'@/views/permission/app/index.vue');