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

This commit is contained in:
ssongliu 2023-09-21 17:20:20 +08:00 committed by GitHub
parent a5b3067cc7
commit 04eb8191ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 16 deletions

View File

@ -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":

View File

@ -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);
};

View File

@ -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,

View File

@ -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>

View File

@ -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);
};

View File

@ -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);
};