mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-28 05:15:04 +08:00
feat: 容器镜像增加详情展示 (#2370)
This commit is contained in:
parent
a5b3067cc7
commit
04eb8191ed
@ -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":
|
||||
|
@ -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);
|
||||
};
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
};
|
||||
|
@ -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);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user