style: update status map

.eslintignore

@@ -1,4 +1,5 @@
 /*.json
 /*.js
 /src/assets/js/ace/*.js
+/src/assets/style/icon-font/*.js
 DIST

src/assets/style/custom.less

@@ -250,7 +250,7 @@ div#driver-highlighted-element-stage {
 // icon
 .arco-icon {
   font-size: 14px;
-  stroke-linecap: round;
+  // stroke-linecap: round;
   stroke-linejoin: bevel;
   stroke-width: 4;
 

src/assets/style/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 3892962 */
-  src: url('iconfont.woff2?t=1710141252463') format('woff2'),
-    url('iconfont.woff?t=1710141252463') format('woff'),
-    url('iconfont.ttf?t=1710141252463') format('truetype');
+  src: url('iconfont.woff2?t=1710219573328') format('woff2'),
+    url('iconfont.woff?t=1710219573328') format('woff'),
+    url('iconfont.ttf?t=1710219573328') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-copy-cloud::before {
+  content: '\e62f';
+}
+
 .icon-Connector::before {
   content: '\e62e';
 }

src/assets/style/icon-font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1089792",
+      "name": "cloudy",
+      "font_class": "copy-cloud",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
     {
       "icon_id": "10987954",
       "name": "Connector",

src/components/progress-loading/index.vue

@@ -4,7 +4,9 @@
   export default defineComponent({
     props: {
       type: {
-        type: String as PropType<'success' | 'error' | 'warning' | 'inactive'>,
+        type: String as PropType<
+          'success' | 'error' | 'warning' | 'inactive' | 'transitioning'
+        >,
         default() {
           return '';
         }
@@ -32,14 +34,12 @@
       const renderProgress = () => {
         if (props.type === 'warning') {
           return (
-            <a-progress
-              class="arco-icon-loading progress"
-              size="mini"
-              status="warning"
-              color="var(--seal-color-warning)"
-              width={props.size}
-              stroke-width={props.strokeWidth}
-              percent={props.percent}
+            <icon-bulb
+              style={{
+                color: 'rgba(var(--warning-3))',
+                fontSize: `${props.size}px`,
+                strokeWidth: props.strokeWidth
+              }}
             />
           );
         }
@@ -76,6 +76,23 @@
         return null;
       };
 
+      const renderTransitioning = () => {
+        if (props.type === 'transitioning') {
+          return (
+            <a-progress
+              class="arco-icon-loading progress"
+              size="mini"
+              status="normal"
+              color="rgba(var(--arcoblue-5),1)"
+              width={props.size}
+              stroke-width={props.strokeWidth}
+              percent={props.percent}
+            />
+          );
+        }
+        return null;
+      };
+
       const renderInactive = () => {
         if (props.type === 'inactive') {
           return (
@@ -96,6 +113,7 @@
           {renderError()}
           {renderSuccess()}
           {renderInactive()}
+          {renderTransitioning()}
         </span>
       );
     }

src/views/application-management/environments/components/service-summary.vue

@@ -48,17 +48,14 @@
       flex-basis: 40px;
       align-items: center;
       justify-content: center;
+      margin-right: 10px;
       padding: 0;
       font-size: 12px;
       line-height: 1.6;
       border-radius: var(--border-radius-small);
 
-      &.error {
-        margin-right: 10px;
-      }
-
-      &.transitioning {
-        margin: 0 10px;
+      &.inactive {
+        margin-right: 0;
       }
     }
   }

src/views/application-management/environments/config/index.ts

@@ -101,7 +101,7 @@ export const EnvironmentActions: MoreAction[] = [
   {
     label: 'common.button.clone',
     value: CommonButtonValue.Clone,
-    icon: 'icon-Clone-Cloud',
+    icon: 'icon-copy-cloud',
     iconfont: true,
     handler: '',
     status: 'normal',

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

@@ -276,7 +276,8 @@
     ready: 1,
     transitioning: 2,
     error: 3,
-    inactive: 4
+    warning: 4,
+    inactive: 5
   };
   let timer: any = null;
   const { rowSelection, selectedKeys, handleSelectChange } = useRowSelect();

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

@@ -50,14 +50,7 @@
             <>
               <StatusLabel
                 zoom={0.9}
-                status={{
-                  status: get(item, 'value.summaryStatus') || '',
-                  text: get(item, 'value.summaryStatus'),
-                  inactive: get(item, 'value.inactive'),
-                  message: get(item, 'value.summaryStatusMessage') || '',
-                  transitioning: get(item, 'value.transitioning'),
-                  error: get(item, 'value.error')
-                }}
+                status={get(item, 'value', {})}
               ></StatusLabel>
             </>
           );

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

@@ -9,15 +9,7 @@
           <div class="title">
             <span class="m-r-30"> {{ currentInfo.name }}</span>
             <StatusLabel
-              :status="{
-                inactive: _.get(currentInfo, 'status.inactive'),
-                status: _.get(currentInfo, 'status.summaryStatus') || '',
-                text: _.get(currentInfo, 'status.summaryStatus'),
-                message:
-                  _.get(currentInfo, 'status.summaryStatusMessage') || '',
-                transitioning: _.get(currentInfo, 'status.transitioning'),
-                error: _.get(currentInfo, 'status.error')
-              }"
+              :status="_.get(currentInfo, 'status', {})"
             ></StatusLabel>
           </div>
           <div v-if="actionList.length" class="dropdown">

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

@@ -75,14 +75,7 @@
             <span v-if="!_.get(record, 'status.summaryStatus')">-</span>
             <StatusLabel
               v-else
-              :status="{
-                status: _.get(record, 'status.summaryStatus'),
-                text: _.get(record, 'status.summaryStatus'),
-                message: _.get(record, 'status.summaryStatusMessage'),
-                transitioning: _.get(record, 'status.transitioning'),
-                error: _.get(record, 'status.error'),
-                inactive: _.get(record, 'status.inactive')
-              }"
+              :status="_.get(record, 'status', {})"
             ></StatusLabel>
           </template>
         </a-table-column>

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

@@ -149,16 +149,7 @@
           :title="$t('dashboard.table.status')"
         >
           <template #cell="{ record }">
-            <StatusLabel
-              :status="{
-                status: record.status?.summaryStatus,
-                text: record.status?.summaryStatus,
-                inactive: record.status?.inactive,
-                message: record.status?.summaryStatusMessage,
-                transitioning: record.status?.transitioning,
-                error: record.status?.error
-              }"
-            ></StatusLabel>
+            <StatusLabel :status="record.status"></StatusLabel>
           </template>
         </a-table-column>
         <a-table-column align="left" :title="$t('common.table.operation')">

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

@@ -13,14 +13,7 @@
               <span v-if="!_.get(record, 'status.summaryStatus')">-</span>
               <StatusLabel
                 v-else
-                :status="{
-                  status: _.get(record, 'status.summaryStatus'),
-                  text: _.get(record, 'status.summaryStatus'),
-                  message: _.get(record, 'status.summaryStatusMessage'),
-                  transitioning: _.get(record, 'status.transitioning'),
-                  error: _.get(record, 'status.error'),
-                  inactive: _.get(record, 'status.inactive')
-                }"
+                :status="_.get(record, 'status', {})"
               ></StatusLabel>
             </template>
             <template #actions="{ record }">

src/views/application-management/services/components/resource-item.vue

@@ -157,29 +157,6 @@
         );
       };
 
-      const renderEdit = () => {
-        return (
-          <>
-            {props.rowData.isModified ? (
-              <StatusLabel
-                style={{
-                  transform: 'scale(0.8)',
-                  marginRight: '-6px'
-                }}
-                bordered={true}
-                status={{
-                  status: i18n.global.t('common.status.edited'),
-                  inactive: false,
-                  text: i18n.global.t('common.status.edited'),
-                  message: '',
-                  transitioning: true,
-                  error: false
-                }}
-              ></StatusLabel>
-            ) : null}
-          </>
-        );
-      };
       const renderComponents = () => {
         if (!collapse.value) return null;
         return (

src/views/application-management/services/components/revision-detail.vue

@@ -46,11 +46,12 @@
             v-if="item.key === 'status'"
             style="display: flex; align-items: center"
             :zoom="0.9"
-            :status="{
+            :status-detail="{
               status: item.value?.summaryStatus || '',
               text: item.value?.summaryStatus,
               message: '',
               transitioning: get(item, 'value.transitioning'),
+              warning: get(item, 'value.warning'),
               error: get(item, 'value.error')
             }"
           ></StatusLabel>

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

@@ -55,8 +55,10 @@
       });
       const renderStatusIcon = () => {
         let type: any = '';
-        if (_.get(props.runData, 'status.transitioning')) {
+        if (_.get(props.runData, 'status.warning')) {
           type = 'warning';
+        } else if (_.get(props.runData, 'status.transitioning')) {
+          type = 'transitioning';
         } else if (_.get(props.runData, 'status.error')) {
           type = 'error';
         } else if (_.get(props.runData, 'status.inactive')) {
@@ -79,14 +81,7 @@
           <>
             <StatusLabel
               zoom={0.9}
-              status={{
-                status: _.get(props.runData, 'status.summaryStatus') || '',
-                inactive: _.get(props.runData, 'status.inactive'),
-                text: _.get(props.runData, 'status.summaryStatus'),
-                message: '',
-                transitioning: _.get(props.runData, 'status.transitioning'),
-                error: _.get(props.runData, 'status.error')
-              }}
+              status={_.get(props.runData, 'status', {})}
             ></StatusLabel>
           </>
         );

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

@@ -38,10 +38,6 @@
       });
 
       const renderStaticLogs = () => {
-        if (props.runData?.status?.summaryStatus === RevisionStatus.Running) {
-          return null;
-        }
-
         if (props.runData?.record) {
           return (
             <StaticLogs
@@ -68,26 +64,21 @@
       const renderWatchLogs = () => {
         return (
           <>
-            {RevisionWatchStatus.includes(
-              props.runData?.status?.summaryStatus
-            ) ? (
-              <>
-                <WatchLogs
-                  maxHeight={maxHeight.value}
-                  show={props.show}
-                  fullscreen={props.fullscreen}
-                  runData={props.runData}
-                ></WatchLogs>
-              </>
-            ) : null}
+            <WatchLogs
+              maxHeight={maxHeight.value}
+              show={props.show}
+              fullscreen={props.fullscreen}
+              runData={props.runData}
+            ></WatchLogs>
           </>
         );
       };
 
       return () => (
         <div class="logs-box">
-          {renderStaticLogs()}
-          {renderWatchLogs()}
+          {RevisionWatchStatus.includes(props.runData?.status?.summaryStatus)
+            ? renderWatchLogs()
+            : renderStaticLogs()}
         </div>
       );
     }

src/views/application-management/services/components/runs/logs/watch-logs.vue

@@ -62,6 +62,7 @@
   const scroller = ref();
   const isWheeled = ref(false);
   const timeGap = ref(Date.now());
+  const requestId: any = null;
   let axiosToken: any = null;
   const { setChunkRequest } = useSetChunkRequest();
 
@@ -72,14 +73,17 @@
   const updateScrollerPosition = () => {
     const scrollerContainer = scroller.value || {};
     const { scrollHeight, clientHeight, scrollTop } = scrollerContainer;
+    const t = Date.now();
     if (!isWheeled.value && scrollHeight > clientHeight + scrollTop) {
-      scroller.value.scrollTop += 10;
+      scroller.value.scrollTop += 5;
+      timeGap.value = t;
       window.requestAnimationFrame(updateScrollerPosition);
     }
   };
 
   const updateContent = (newVal) => {
     content.value = `${newVal}`;
+
     if (!isWheeled.value) {
       window.requestAnimationFrame(updateScrollerPosition);
     }
@@ -139,6 +143,7 @@
   );
   onBeforeUnmount(() => {
     axiosToken?.cancel?.();
+    window.cancelAnimationFrame(requestId);
   });
 </script>