feat: 容器镜像增加详情展示 (#2370)

backend/app/service/container.go

@@ -226,6 +226,8 @@ func (u *ContainerService) Inspect(req dto.InspectReq) (string, error) {
 	switch req.Type {
 	case "container":
 		inspectInfo, err = client.ContainerInspect(context.Background(), req.ID)
+	case "image":
+		inspectInfo, _, err = client.ImageInspectWithRaw(context.Background(), req.ID)
 	case "network":
 		inspectInfo, err = client.NetworkInspect(context.TODO(), req.ID, types.NetworkInspectOptions{})
 	case "volume":

frontend/src/views/container/container/index.vue

@@ -273,7 +273,6 @@ const props = withDefaults(defineProps<Filters>(), {
     filters: '',
 });
 
-const detailInfo = ref();
 const mydetail = ref();
 
 const dialogContainerLogRef = ref();
@@ -366,10 +365,10 @@ const onTerminal = (row: any) => {
 
 const onInspect = async (id: string) => {
     const res = await inspect({ id: id, type: 'container' });
-    detailInfo.value = JSON.stringify(JSON.parse(res.data), null, 2);
+    let detailInfo = JSON.stringify(JSON.parse(res.data), null, 2);
     let param = {
         header: i18n.global.t('commons.button.view'),
-        detailInfo: detailInfo.value,
+        detailInfo: detailInfo,
     };
     mydetail.value!.acceptParams(param);
 };

frontend/src/views/container/image/index.vue

@@ -41,9 +41,12 @@
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                    <el-table-column label="ID" prop="id" width="120">
+                    <el-table-column label="ID" prop="id" width="140">
                         <template #default="{ row }">
-                            <span>{{ row.id.replaceAll('sha256:', '').substring(0, 12) }}</span>
+                            <Tooltip
+                                @click="onInspect(row.id)"
+                                :text="row.id.replaceAll('sha256:', '').substring(0, 12)"
+                            />
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.status')" prop="isUsed" width="100">
@@ -74,10 +77,10 @@
                             </el-tag>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.size')" prop="size" min-width="70" fix />
+                    <el-table-column :label="$t('container.size')" prop="size" min-width="60" fix />
                     <el-table-column
                         prop="createdAt"
-                        min-width="90"
+                        min-width="80"
                         :label="$t('commons.table.date')"
                         :formatter="dateFormat"
                     />
@@ -91,6 +94,7 @@
             </template>
         </LayoutContent>
 
+        <CodemirrorDialog ref="mydetail" />
         <Pull ref="dialogPullRef" @search="search" />
         <Tag ref="dialogTagRef" @search="search" />
         <Push ref="dialogPushRef" @search="search" />
@@ -104,6 +108,7 @@
 
 <script lang="ts" setup>
 import TableSetting from '@/components/table-setting/index.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 import { reactive, onMounted, ref, computed } from 'vue';
 import { dateFormat } from '@/utils/util';
 import { Container } from '@/api/interface/container';
@@ -115,7 +120,8 @@ import Load from '@/views/container/image/load/index.vue';
 import Build from '@/views/container/image/build/index.vue';
 import Delete from '@/views/container/image/delete/index.vue';
 import Prune from '@/views/container/image/prune/index.vue';
-import { searchImage, listImageRepo, loadDockerStatus, imageRemove } from '@/api/modules/container';
+import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
+import { searchImage, listImageRepo, loadDockerStatus, imageRemove, inspect } from '@/api/modules/container';
 import i18n from '@/lang';
 import router from '@/routers';
 import { useDeleteData } from '@/hooks/use-delete-data';
@@ -159,6 +165,7 @@ const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
 };
 
+const mydetail = ref();
 const dialogPullRef = ref();
 const dialogTagRef = ref();
 const dialogPushRef = ref();
@@ -184,6 +191,16 @@ const loadRepos = async () => {
     repos.value = res.data || [];
 };
 
+const onInspect = async (id: string) => {
+    const res = await inspect({ id: id, type: 'image' });
+    let detailInfo = JSON.stringify(JSON.parse(res.data), null, 2);
+    let param = {
+        header: i18n.global.t('commons.button.view'),
+        detailInfo: detailInfo,
+    };
+    mydetail.value!.acceptParams(param);
+};
+
 const onOpenPull = () => {
     let params = {
         repos: repos.value,

frontend/src/views/container/image/prune/index.vue

@@ -17,7 +17,7 @@
             </span>
             <div v-if="!withTagAll">
                 <ul v-for="(item, index) in imageList" :key="index">
-                    <li v-if="item.tags.length === 1 && item.tags[0].indexOf(':<none>') !== -1">
+                    <li v-if="item.tags.length === 1 && item.tags[0].indexOf('<none>') !== -1">
                         {{ item.tags[0] }}
                     </li>
                 </ul>

frontend/src/views/container/network/index.vue

@@ -111,8 +111,6 @@ import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref();
-
-const detailInfo = ref();
 const codemirror = ref();
 
 const data = ref();
@@ -217,10 +215,10 @@ const batchDelete = async (row: Container.NetworkInfo | null) => {
 
 const onInspect = async (id: string) => {
     const res = await inspect({ id: id, type: 'network' });
-    detailInfo.value = JSON.stringify(JSON.parse(res.data), null, 2);
+    let detailInfo = JSON.stringify(JSON.parse(res.data), null, 2);
     let param = {
         header: i18n.global.t('commons.button.view'),
-        detailInfo: detailInfo.value,
+        detailInfo: detailInfo,
     };
     codemirror.value!.acceptParams(param);
 };

frontend/src/views/container/volume/index.vue

@@ -114,7 +114,6 @@ const mobile = computed(() => {
 });
 
 const loading = ref();
-const detailInfo = ref();
 const codemirror = ref();
 
 const data = ref();
@@ -178,10 +177,10 @@ const search = async () => {
 
 const onInspect = async (id: string) => {
     const res = await inspect({ id: id, type: 'volume' });
-    detailInfo.value = JSON.stringify(JSON.parse(res.data), null, 2);
+    let detailInfo = JSON.stringify(JSON.parse(res.data), null, 2);
     let param = {
         header: i18n.global.t('commons.button.view'),
-        detailInfo: detailInfo.value,
+        detailInfo: detailInfo,
     };
     codemirror.value!.acceptParams(param);
 };