diff --git a/bigtop-manager-ui/src/components/job-info/custom-progress.vue b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
index 55e28d8af5df558e87b31cc520b7d5bd2985d4dd..b16971c9aceab908e347da951d58a9ecbf7c3bb0 100644
--- a/bigtop-manager-ui/src/components/job-info/custom-progress.vue
+++ b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
@@ -1,12 +1,21 @@
-<template>
-  <div>
-    <a-progress
-      :percent="percent"
-      :status="status"
-      :stroke-color="State[props.state]"
-    />
-  </div>
-</template>
+<!--
+  - Licensed to the Apache Software Foundation (ASF) under one
+  - or more contributor license agreements.  See the NOTICE file
+  - distributed with this work for additional information
+  - regarding copyright ownership.  The ASF licenses this file
+  - to you under the Apache License, Version 2.0 (the
+  - "License"); you may not use this file except in compliance
+  - with the License.  You may obtain a copy of the License at
+  -
+  -    https://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing,
+  - software distributed under the License is distributed on an
+  - "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  - KIND, either express or implied.  See the License for the
+  - specific language governing permissions and limitations
+  - under the License.
+  -->
 
 <script lang="ts" setup>
   import { computed, ref, reactive, watch, toRefs } from 'vue'
@@ -81,4 +90,14 @@
   )
 </script>
 
+<template>
+  <div>
+    <a-progress
+      :percent="percent"
+      :status="status"
+      :stroke-color="State[props.state]"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/components/job-info/stage-info.vue b/bigtop-manager-ui/src/components/job-info/stage-info.vue
index 24a7d573372605405dbaaaf863de033f6e58c7ba..165d08ef03dfa082cb1fcdd2456b15a04ce23280 100644
--- a/bigtop-manager-ui/src/components/job-info/stage-info.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage-info.vue
@@ -1,31 +1,21 @@
-<template>
-  <div class="stage-info">
-    <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
-      :scroll="{ y: 500 }"
-    >
-      <template #headerCell="{ column }">
-        <span>{{ $t(column.title) }}</span>
-      </template>
-      <template #bodyCell="{ column, text, record }">
-        <template v-if="column.dataIndex === 'name'">
-          <a @click="clickStage(record)">
-            {{ text }}
-          </a>
-        </template>
-        <template v-if="column.dataIndex === 'state'">
-          <custom-progress
-            :key="record.id"
-            :state="text"
-            :progress="record.tasks"
-          />
-        </template>
-      </template>
-    </a-table>
-  </div>
-</template>
+<!--
+  - Licensed to the Apache Software Foundation (ASF) under one
+  - or more contributor license agreements.  See the NOTICE file
+  - distributed with this work for additional information
+  - regarding copyright ownership.  The ASF licenses this file
+  - to you under the Apache License, Version 2.0 (the
+  - "License"); you may not use this file except in compliance
+  - with the License.  You may obtain a copy of the License at
+  -
+  -    https://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing,
+  - software distributed under the License is distributed on an
+  - "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  - KIND, either express or implied.  See the License for the
+  - specific language governing permissions and limitations
+  - under the License.
+  -->
 
 <script lang="ts" setup>
   import { StageVO } from '@/api/job/types.ts'
@@ -67,4 +57,33 @@
   }
 </script>
 
+<template>
+  <div class="stage-info">
+    <a-table
+      :pagination="paginationProps"
+      :data-source="pagedList"
+      :columns="props.columns"
+      :scroll="{ y: 500 }"
+    >
+      <template #headerCell="{ column }">
+        <span>{{ $t(column.title) }}</span>
+      </template>
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a @click="clickStage(record)">
+            {{ text }}
+          </a>
+        </template>
+        <template v-if="column.dataIndex === 'state'">
+          <custom-progress
+            :key="record.id"
+            :state="text"
+            :progress="record.tasks"
+          />
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+
 <style lang="scss" scoped></style>
diff --git a/bigtop-manager-ui/src/components/job-info/task-info.vue b/bigtop-manager-ui/src/components/job-info/task-info.vue
index a5d59f50256fdf5cfd6bc97e3f7586c081ed42e0..c63cdcd4ecb6a17b74d7b1d2a3c2704d0c591956 100644
--- a/bigtop-manager-ui/src/components/job-info/task-info.vue
+++ b/bigtop-manager-ui/src/components/job-info/task-info.vue
@@ -1,39 +1,21 @@
-<template>
-  <div class="task-info">
-    <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
-      :scroll="{ y: 500 }"
-    >
-      <template #headerCell="{ column }">
-        <span>{{ $t(column.title) }}</span>
-      </template>
-      <template #bodyCell="{ column, text, record }">
-        <template v-if="column.dataIndex === 'name'">
-          <a @click="clickTask(record)">
-            {{ text }}
-          </a>
-        </template>
-        <template v-if="column.dataIndex === 'state'">
-          <CheckCircleTwoTone
-            v-if="text === 'Successful'"
-            :two-tone-color="State[text as keyof typeof State]"
-          />
-          <CloseCircleTwoTone
-            v-else-if="text === 'Failed'"
-            :two-tone-color="State[text as keyof typeof State]"
-          />
-          <MinusCircleTwoTone
-            v-else-if="text === 'Canceled'"
-            :two-tone-color="State[text as keyof typeof State]"
-          />
-          <LoadingOutlined v-else />
-        </template>
-      </template>
-    </a-table>
-  </div>
-</template>
+<!--
+  - Licensed to the Apache Software Foundation (ASF) under one
+  - or more contributor license agreements.  See the NOTICE file
+  - distributed with this work for additional information
+  - regarding copyright ownership.  The ASF licenses this file
+  - to you under the Apache License, Version 2.0 (the
+  - "License"); you may not use this file except in compliance
+  - with the License.  You may obtain a copy of the License at
+  -
+  -    https://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing,
+  - software distributed under the License is distributed on an
+  - "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  - KIND, either express or implied.  See the License for the
+  - specific language governing permissions and limitations
+  - under the License.
+  -->
 
 <script setup lang="ts">
   import { computed, reactive, ref } from 'vue'
@@ -80,4 +62,41 @@
   }
 </script>
 
+<template>
+  <div class="task-info">
+    <a-table
+      :pagination="paginationProps"
+      :data-source="pagedList"
+      :columns="props.columns"
+      :scroll="{ y: 500 }"
+    >
+      <template #headerCell="{ column }">
+        <span>{{ $t(column.title) }}</span>
+      </template>
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a @click="clickTask(record)">
+            {{ text }}
+          </a>
+        </template>
+        <template v-if="column.dataIndex === 'state'">
+          <CheckCircleTwoTone
+            v-if="text === 'Successful'"
+            :two-tone-color="State[text as keyof typeof State]"
+          />
+          <CloseCircleTwoTone
+            v-else-if="text === 'Failed'"
+            :two-tone-color="State[text as keyof typeof State]"
+          />
+          <MinusCircleTwoTone
+            v-else-if="text === 'Canceled'"
+            :two-tone-color="State[text as keyof typeof State]"
+          />
+          <LoadingOutlined v-else />
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+
 <style scoped></style>