fix: resource id not found

seal-io · Mar 5, 2024 · 7885278 · 7885278
1 parent 1be55ba
commit 7885278
Show file tree

Hide file tree

Showing 16 changed files with 157 additions and 187 deletions.
diff --git a/src/api/interceptor.ts b/src/api/interceptor.ts
@@ -46,6 +46,7 @@ axios.interceptors.request.use(
     if (some(NoBaseURLApiList, (api) => url.startsWith(api))) {
       config.baseURL = '';
     }
+
     return config;
   },
   (error) => {

diff --git a/src/components/ace-editor/style.less b/src/components/ace-editor/style.less
@@ -68,7 +68,7 @@
 
   .ace_tooltip {
     color: var(--color-text-2);
-    background-color: var(--color-fill-2);
+    background-color: var(--color-white-3);
     border: 1px solid var(--color-border-2);
     border-radius: 4px;
   }

diff --git a/src/views/application-management/services/components/instance/index.vue b/src/views/application-management/services/components/instance/index.vue
@@ -47,41 +47,10 @@
                 <a-grid-item
                   :span="{ xxl: 16, xl: 16, lg: 24, md: 24, sm: 24, xs: 24 }"
                 >
-                  <ComCard
-                    :title="$t('applications.applications.table.latestRun')"
-                    padding="0 20px 20px"
-                    :header-style="{ padding: '20px', height: 'auto' }"
-                    bordered
-                    style="height: 100%; border-radius: 16px"
-                  >
-                    <template #title>
-                      <div class="flex flex-justify-between flex-align-center">
-                        <span>{{
-                          $t('applications.applications.table.latestRun')
-                        }}</span>
-                        <a-link
-                          v-if="
-                            currentInfo?.status?.summaryStatus !==
-                            ServiceStatus.Undeployed
-                          "
-                          size="small"
-                          class="font-13"
-                          @click="
-                            () => {
-                              latestRunRef?.viewLogs?.();
-                            }
-                          "
-                        >
-                          <i class="size-16 m-r-5 iconfont icon-xiangqing"></i>
-                          {{ $t('common.button.detail') }}</a-link
-                        >
-                      </div>
-                    </template>
-                    <LatestRun
-                      ref="latestRunRef"
-                      :service-info="currentInfo"
-                    ></LatestRun>
-                  </ComCard>
+                  <LatestRun
+                    ref="latestRunRef"
+                    :service-info="currentInfo"
+                  ></LatestRun>
                 </a-grid-item>
 
                 <a-grid-item
@@ -149,12 +118,7 @@
                 @save="handleEditSucceed"
                 @cancel="handleEditCancel"
               ></serviceEdit>
-              <serviceInfo
-                v-else
-                ref="serviceInfoRef"
-                :is-collapsed="isCollapsed"
-              >
-              </serviceInfo>
+              <serviceInfo v-else :detail-info="currentInfo"> </serviceInfo>
             </a-tab-pane>
           </a-tabs>
         </ComCard>
@@ -263,7 +227,6 @@
   const serviceID = route.query.id || '';
   const isCollapsed = ref(false);
   const currentInfo = ref<ServiceRowData>({} as ServiceRowData);
-  const serviceInfoRef = ref();
   const instanceTabMap = {
     tabResource: markRaw(tabResource),
     tabOutput: markRaw(tabOutput)

diff --git a/src/views/application-management/services/components/instance/latest-run.vue b/src/views/application-management/services/components/instance/latest-run.vue
@@ -7,9 +7,11 @@
     PropType,
     watch,
     defineComponent,
-    computed
+    computed,
+    onBeforeUnmount
   } from 'vue';
   import useBasicInfoData from '@/views/application-management/projects/hooks/use-basicInfo-data';
+  import ComCard from '@/components/page-wrap/com-card.vue';
   import { StatusColor } from '@/views/config';
   import {
     latestRunConfig,
@@ -32,14 +34,14 @@
         revisionDetailId,
         revisionData,
         showDetailModal,
+        axiosToken,
         initialStatus,
         currentServiceInfo,
         loading,
         handleViewServiceLatestLogs
       } = useViewLatestLogs(false);
 
       const basicDataList = useBasicInfoData(latestRunConfig, revisionData);
-      const runFlag = ref(true);
 
       // logs
       provide(ProvideServiceInfoKey, currentServiceInfo);
@@ -62,10 +64,10 @@
       });
 
       watch(
-        () => props.serviceInfo,
+        () => props.serviceInfo.id,
         (data) => {
-          if (data.id) {
-            debounceViewLatestLogs(props.serviceInfo);
+          if (data) {
+            handleViewServiceLatestLogs(props.serviceInfo);
           }
         },
         {
@@ -77,15 +79,15 @@
         () => showDetailModal.value,
         () => {
           if (props.serviceInfo.id && showDetailModal.value) {
-            handleViewServiceLatestLogs(props.serviceInfo);
+            // handleViewServiceLatestLogs(props.serviceInfo);
           }
         },
         {
           immediate: true
         }
       );
-      expose({
-        viewLogs
+      onBeforeUnmount(() => {
+        axiosToken?.cancel?.();
       });
       const renderNoRunData = () => {
         return (
@@ -146,11 +148,42 @@
         );
       };
       return () => (
-        <a-spin style={{ width: '100%' }}>
-          {!_.keys(revisionData.value).length && !loading.value
-            ? renderNoRunData()
-            : renderLatestRun()}
-        </a-spin>
+        <ComCard
+          title={i18n.global.t('applications.applications.table.latestRun')}
+          header-style={{ padding: '20px', height: 'auto' }}
+          style={{ 'height': '100%', 'border-radius': '16px' }}
+          padding="0 20px 20px"
+          bordered={true}
+          v-slots={{
+            title: () => {
+              return (
+                <div class="flex flex-justify-between flex-align-center">
+                  <span>
+                    {i18n.global.t('applications.applications.table.latestRun')}
+                  </span>
+                  {_.keys(revisionData.value).length && !loading.value ? (
+                    <a-link
+                      size="small"
+                      class="font-13"
+                      onClick={() => {
+                        viewLogs();
+                      }}
+                    >
+                      <i class="size-16 m-r-5 iconfont icon-xiangqing"></i>
+                      {i18n.global.t('common.button.detail')}
+                    </a-link>
+                  ) : null}
+                </div>
+              );
+            }
+          }}
+        >
+          <a-spin style={{ width: '100%' }}>
+            {!_.keys(revisionData.value).length && !loading.value
+              ? renderNoRunData()
+              : renderLatestRun()}
+          </a-spin>
+        </ComCard>
       );
     }
   });

diff --git a/src/views/application-management/services/components/instance/service-revisions.vue b/src/views/application-management/services/components/instance/service-revisions.vue
@@ -233,15 +233,9 @@
       @change="handlePageChange"
       @page-size-change="handlePageSizeChange"
     />
-    <!-- <revisionDetail
-      v-model:show="showDetailModal"
-      :data-info="revisionData"
-      :revision-id="revisionDetailId"
-      :initial-status="initialStatus"
-    ></revisionDetail> -->
     <RunDetailModal
       v-model:show="showDetailModal"
-      title="Run Details"
+      :title="$t('applications.applications.history.detail')"
       :data="runData"
     ></RunDetailModal>
     <serviceSpecDiff
@@ -329,7 +323,7 @@
   const projectID = route.params.projectId || '';
   const environmentID = route.params.environmentId as string;
   const title = ref('');
-  const serviceId = inject(ProvideServiceIDKey, ref(''));
+  const serviceId = ref(route.query.id as string);
   const revisionDetailId = ref('');
   const revisionData = ref({});
   const total = ref(0);

diff --git a/src/views/application-management/services/components/resource-item.vue b/src/views/application-management/services/components/resource-item.vue
@@ -63,7 +63,7 @@
             _.startsWith(item.value, 'http') ||
             _.startsWith(item.value, 'https')
         );
-        return [{ label: 1, value: 2 }];
+        return list;
       });
 
       const handleCheckboxChange = (checked, id) => {

diff --git a/src/views/application-management/services/components/revision-detail.vue b/src/views/application-management/services/components/revision-detail.vue
@@ -145,7 +145,7 @@
       }
     }
   });
-  const emit = defineEmits(['update:show']);
+  const emit = defineEmits(['update:show', 'close']);
   const { t } = useCallCommon();
   const loading = ref(false);
   const showTimer = ref(true);
@@ -224,6 +224,7 @@
     showTimer.value = false;
     fullscreen.value = false;
     emit('update:show', false);
+    emit('close');
   };
 </script>
 

diff --git a/src/views/application-management/services/components/runs/detail-modal/run-attributes.vue b/src/views/application-management/services/components/runs/detail-modal/run-attributes.vue
@@ -1,13 +1,14 @@
 <script lang="tsx">
   import _ from 'lodash';
-  import { defineComponent, ref, PropType, computed, watch } from 'vue';
+  import { defineComponent, ref, PropType, computed, watch, inject } from 'vue';
   import AceEditor from '@/components/ace-editor/index.vue';
   import IconBtnGroup from '@/components/icon-btn-group/index.vue';
   import {
     yaml2Json,
     json2Yaml
   } from '@/components/form-create/config/yaml-parse';
   import ServiceInfo from '@/views/application-management/services/components/service-info.vue';
+  import { ProvideServiceInfoKey } from '@/views/application-management/services/config';
 
   export default defineComponent({
     name: 'AttributesContent',
@@ -35,6 +36,14 @@
 
       const activeKey = ref('form');
       const yamlAttributes = ref('');
+      const serviceInfo = inject(ProvideServiceInfoKey, ref<any>({}));
+
+      const serviceDetail = computed(() => {
+        return {
+          ...serviceInfo.value,
+          attributes: props.runData.attributes
+        };
+      });
 
       watch(
         () => props.runData?.computedAttributes,
@@ -55,7 +64,7 @@
           ></IconBtnGroup>
           <div>
             {activeKey.value === 'form' ? (
-              <ServiceInfo></ServiceInfo>
+              <ServiceInfo detail-info={serviceDetail.value}></ServiceInfo>
             ) : (
               <AceEditor
                 ref="yaml_editor"

diff --git a/...views/application-management/services/components/runs/detail-modal/run-change-history.vue b/...views/application-management/services/components/runs/detail-modal/run-change-history.vue
@@ -23,6 +23,9 @@
       const loading = ref(false);
 
       const getRevisionChange = async () => {
+        if (!props.runData.id || !props.runData.resource?.id) {
+          return;
+        }
         try {
           loading.value = true;
           const { data } = await queryRevisionChange({

diff --git a/src/views/application-management/services/components/service-info.vue b/src/views/application-management/services/components/service-info.vue
@@ -21,6 +21,7 @@
   import {
     onMounted,
     nextTick,
+    toRef,
     provide,
     ref,
     watch,
@@ -41,14 +42,16 @@
   import { ServiceDataType, ProvideServiceInfoKey } from '../config';
 
   const props = defineProps({
-    isCollapsed: {
-      type: Boolean,
-      default: false
+    detailInfo: {
+      type: Object,
+      default() {
+        return {};
+      }
     }
   });
 
   const { route } = useCallCommon();
-  const serviceInfo = inject(ProvideServiceInfoKey, ref<any>({}));
+  const serviceInfo = ref(props.detailInfo);
   const schema = ref<any>({});
   const loaded = ref(false);
   const templateList = ref<any[]>([]);
@@ -177,21 +180,10 @@
     await getSchema();
     loading.value = false;
   };
+
   watch(
-    () => props.isCollapsed,
-    (val) => {
-      if (val) {
-        getSchema();
-      }
-    },
-    {
-      immediate: true
-    }
-  );
-  watch(
-    () => serviceInfo.value,
+    () => serviceInfo.value.id,
     () => {
-      console.log('serviceInfo.value.id', serviceInfo.value);
       if (serviceInfo.value.id && requestFlag.value) {
         requestFlag.value = false;
         init();

diff --git a/src/views/application-management/services/components/table-list.vue b/src/views/application-management/services/components/table-list.vue
@@ -213,6 +213,11 @@
       :data-info="revisionData"
       :revision-id="revisionDetailId"
       :initial-status="initialStatus"
+      @close="
+        () => {
+          axiosToken?.cancel?.();
+        }
+      "
     ></revisionDetail>
     <driftResource
       v-model:show="showDriftModal"
@@ -349,6 +354,7 @@
     revisionDetailId,
     revisionData,
     showDetailModal,
+    axiosToken,
     initialStatus,
     currentServiceInfo,
     handleViewServiceLatestLogs

diff --git a/src/views/application-management/services/config/index.ts b/src/views/application-management/services/config/index.ts
@@ -121,14 +121,14 @@ export const latestRunConfig = [
     span: 1
   },
   {
-    label: 'common.table.createdBy',
-    key: 'createdBy',
+    label: 'applications.applications.history.changes',
+    key: 'componentChangeSummary',
     value: '',
     span: 1
   },
   {
-    label: 'applications.applications.history.changes',
-    key: 'componentChangeSummary',
+    label: 'common.table.createdBy',
+    key: 'createdBy',
     value: '',
     span: 1
   },