fix: update lates run when rollback

src/assets/style/custom.less

@@ -285,6 +285,10 @@ div#driver-highlighted-element-stage {
   }
 }
 
+.arco-spin-tip {
+  font-size: var(--font-size-small);
+}
+
 .arco-btn-size-medium {
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-normal) !important;

src/assets/style/global.less

@@ -531,4 +531,4 @@ html[arco-theme='dark'] {
 @import url('./arco-descriptions.less');
 @import url('./flex.less');
 @import url('./margin.less');
-@import url('//at.alicdn.com/t/c/font_3892962_bkkd0hcjfbl.css');
+@import url('//at.alicdn.com/t/c/font_3892962_vbgcoshnb3s.css');

src/assets/style/variable.less

@@ -59,8 +59,8 @@ body {
   --color-control-bg: var(--color-neutral-3);
 
   // result view color
-  --color-result-tip: rgb(var(--primary-6));
-  --color-result-tip-bg: var(--color-primary-light-1);
+  --color-result-tip: var(--color-text-2);
+  --color-result-tip-bg: var(--color-fill-1);
 
   // avatar icon color
   --color-avatar-icon: rgb(var(--arcoblue-5));

src/components/dynamic-form/components/boolean-field.vue

@@ -202,6 +202,7 @@
             >
               <SealViewItemWrap label={props.schema.title} style="width: 100%">
                 <a-checkbox
+                  disabled={true}
                   modelValue={_.get(props.uiFormData, props.fieldPath)}
                   size="small"
                 ></a-checkbox>

src/components/header-info/index.vue

@@ -1,47 +1,75 @@
-<template>
-  <div>
-    <div class="header-info" :class="{ 'top-gap': topGap }">
-      <div class="left">
-        <div class="img">
-          <slot name="icon"></slot>
-          <span v-if="showImgIcon" class="custom-icon">
-            <slot name="img"></slot>
-          </span>
-        </div>
-      </div>
-      <div class="right">
-        <slot name="title" class="title">
-          <div class="title">{{ info?.name }}</div>
-        </slot>
-        <slot name="status"></slot>
-        <slot name="description" class="desc"></slot>
-      </div>
-      <div class="extra">
-        <slot name="extra"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  defineProps({
-    topGap: {
-      type: Boolean,
-      default() {
-        return false;
-      }
-    },
-    info: {
-      type: Object,
-      default() {
-        return {};
+<script lang="tsx">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    props: {
+      topGap: {
+        type: Boolean,
+        default() {
+          return false;
+        }
+      },
+      info: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      iconType: {
+        type: String,
+        default() {
+          return '';
+        }
+      },
+      showImgIcon: {
+        type: Boolean,
+        default() {
+          return false;
+        }
       }
     },
-    showImgIcon: {
-      type: Boolean,
-      default() {
-        return false;
-      }
+    setup(props, { slots }) {
+      const renderIcon = () => {
+        if (props.iconType === 'line') {
+          return <span class="line-icon">{slots.icon?.()}</span>;
+        }
+        if (slots.icon) {
+          return slots.icon();
+        }
+        return null;
+      };
+
+      const renderImgIcon = () => {
+        if (props.showImgIcon) {
+          return <span class="custom-icon">{slots.img?.()}</span>;
+        }
+        return null;
+      };
+
+      const renderTitle = () => {
+        if (slots.title) {
+          return <div class="title">{slots.title()}</div>;
+        }
+        return <div class="title">{props.info?.name}</div>;
+      };
+      return () => (
+        <div>
+          <div class={['header-info', { 'top-gap': props.topGap }]}>
+            <div class="left">
+              <div class="img">
+                {renderIcon()}
+                {renderImgIcon()}
+              </div>
+            </div>
+            <div class="right">
+              {renderTitle()}
+              {slots.status?.()}
+              {slots.description?.()}
+            </div>
+            <div class="extra">{slots.extra?.()}</div>
+          </div>
+        </div>
+      );
     }
   });
 </script>
@@ -79,6 +107,21 @@
           border-radius: 50%;
         }
 
+        .line-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 42px;
+          height: 42px;
+          background-color: rgb(var(--arcoblue-5));
+          border-radius: 50%;
+
+          :deep(.iconfont) {
+            color: var(--color-white-2);
+            font-size: 22px;
+          }
+        }
+
         .custom-icon {
           display: flex;
           align-items: center;

src/components/index.ts

@@ -24,7 +24,7 @@ import ResultView from './result-view/index.vue';
 import SealSpin from './seal-spin/index.vue';
 
 const IconFont = Icon.addFromIconFontCn({
-  src: '//at.alicdn.com/t/c/font_3892962_bkkd0hcjfbl.js'
+  src: '//at.alicdn.com/t/c/font_3892962_vbgcoshnb3s.js'
 });
 // Manually introduce ECharts modules to reduce packing size
 

src/views/application-management/environments/pages/detail.vue

@@ -10,9 +10,9 @@
       ></Breadcrumb>
     </BreadWrapper>
     <ComCard padding="0">
-      <HeaderInfo :info="currentInfo">
+      <HeaderInfo :info="currentInfo" icon-type="line">
         <template #icon>
-          <i class="iconfont icon-rongqiyunfuwu"></i>
+          <i class="iconfont icon-server"></i>
         </template>
         <template #title>
           <div class="title">

src/views/application-management/services/components/instance/index.vue

@@ -49,6 +49,7 @@
                 >
                   <LatestRun
                     ref="latestRunRef"
+                    :key="latestKey"
                     :service-info="currentInfo"
                   ></LatestRun>
                 </a-grid-item>
@@ -98,7 +99,9 @@
               :key="ResourceDetailTabs.REVISIONS"
               :title="$t('applications.applications.instance.history')"
             >
-              <serviceRevisions></serviceRevisions>
+              <serviceRevisions
+                @rollback="handleRollbackSuccess"
+              ></serviceRevisions>
             </a-tab-pane>
             <a-tab-pane
               :key="ResourceDetailTabs.SETTINGS"
@@ -211,6 +214,7 @@
   });
   // 1: create 2: update 3: delete
   const settingKey = ref(Date.now());
+  const latestKey = ref(Date.now());
   const actionMap = new Map();
   const latestRunRef = ref();
   const showCommentModal = ref(false);
@@ -294,8 +298,9 @@
     }
   };
 
-  const handleBasicCollapse = async (val) => {
-    isCollapsed.value = val;
+  const handleRollbackSuccess = () => {
+    latestKey.value = Date.now();
+    settingKey.value = Date.now();
   };
 
   const handleExportYaml = () => {
@@ -407,6 +412,7 @@
 
     await getServiceItemInfo();
     settingKey.value = Date.now();
+    latestKey.value = Date.now();
     setPageTabActive(ResourceDetailTabs.OVERVIEW);
   };
 

src/views/application-management/services/components/instance/service-revisions.vue

@@ -304,6 +304,7 @@
     SERVICE_RESOURCE_API_PREFIX
   } from '../../api';
 
+  const emit = defineEmits(['rollback']);
   let timer: any = null;
   let axiosListInstance = createAxiosToken();
   const userStore = useUserStore();
@@ -363,6 +364,7 @@
         preview: data.preview
       });
       execSucceed();
+      emit('rollback');
     } catch (error) {
       //
     }

src/views/application-management/services/components/runs/detail-modal/index.vue

@@ -55,6 +55,7 @@
             <a-spin
               v-if="basicData.status?.summaryStatus === RevisionStatus.Planning"
               dot
+              style="padding-top: 20px"
               :tip="$t('resource.revisons.components.planning')"
             />
             <runComponents

src/views/application-management/services/components/runs/detail-modal/run-attributes.vue

@@ -41,7 +41,9 @@
       const serviceDetail = computed(() => {
         return {
           ...serviceInfo.value,
-          attributes: props.runData.attributes
+          attributes: {
+            ...props.runData.attributes
+          }
         };
       });
 

src/views/application-management/services/components/service-info.vue

@@ -51,7 +51,6 @@
   });
 
   const { route } = useCallCommon();
-  const serviceInfo = ref(props.detailInfo);
   const schema = ref<any>({});
   const loaded = ref(false);
   const templateList = ref<any[]>([]);
@@ -62,6 +61,10 @@
 
   provide(InjectSchemaFormStatusKey, ref(PageAction.VIEW));
 
+  const serviceInfo = computed(() => {
+    return props.detailInfo;
+  });
+
   // template options
   const getTemplates = async () => {
     try {
@@ -184,8 +187,7 @@
   watch(
     () => serviceInfo.value.id,
     () => {
-      if (serviceInfo.value.id && requestFlag.value) {
-        requestFlag.value = false;
+      if (serviceInfo.value.id) {
         init();
       }
     },

src/views/application-management/services/pages/clone.vue

@@ -92,8 +92,10 @@
       <EditPageFooter>
         <template #save>
           <GroupButtonMenu
+            trigger="hover"
+            position="br"
             :loading="submitLoading"
-            :actions="SaveActions"
+            :actions="actionList"
             @select="handleSelect"
           >
           </GroupButtonMenu>
@@ -117,7 +119,7 @@
   import { Resources, Actions } from '@/permissions/config';
   import EditPageFooter from '@/components/edit-page-footer/index.vue';
   import { PROJECT } from '@/router/config';
-  import { InputWidth, SaveActions } from '@/views/config';
+  import { InputWidth, SaveActions, ResourceSaveAction } from '@/views/config';
   import { ref, computed, reactive } from 'vue';
   import { useUserStore } from '@/store';
   import { onBeforeRouteLeave } from 'vue-router';
@@ -177,9 +179,12 @@
     environmentIDs: [],
     items: []
   });
-  const { labelList, handleAddLabel, handleDeleteLabel } =
-    useLabelsActions(formData);
 
+  const actionList = computed(() => {
+    return _.filter(SaveActions, (item) => {
+      return item.value !== ResourceSaveAction.Preview;
+    });
+  });
   const selectedEnvList = computed(() => {
     return _.filter(environments.value, (item) =>
       _.includes(formData.environmentIDs, item.id)