From 04eb8191edfa03b9ff656aa51e466f72efbb80cb Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 21 Sep 2023 17:20:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=B9=E5=99=A8=E9=95=9C=E5=83=8F?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AF=A6=E6=83=85=E5=B1=95=E7=A4=BA=20(#2370?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/service/container.go              |  2 ++
 .../src/views/container/container/index.vue   |  5 ++--
 frontend/src/views/container/image/index.vue  | 27 +++++++++++++++----
 .../src/views/container/image/prune/index.vue |  2 +-
 .../src/views/container/network/index.vue     |  6 ++---
 frontend/src/views/container/volume/index.vue |  5 ++--
 6 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/backend/app/service/container.go b/backend/app/service/container.go
index 14a5f7c2b..f9400bb32 100644
--- a/backend/app/service/container.go
+++ b/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":
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 216f0bbc1..4a8966b10 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/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);
 };
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index e40af65d7..0e5665c26 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/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,
diff --git a/frontend/src/views/container/image/prune/index.vue b/frontend/src/views/container/image/prune/index.vue
index c787bdbb0..2aad463b4 100644
--- a/frontend/src/views/container/image/prune/index.vue
+++ b/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>
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index a9beaeb44..c072276c8 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/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);
 };
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index e89582ee4..1e6758d63 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/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);
 };