gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-31 14:08:06 +08:00
Code

feat: 增加镜像 tag 功能

Browse Source
This commit is contained in:
ssongliu 2022-10-11 17:46:52 +08:00 committed by ssongliu
parent 1d2a00cc6e
commit 39f9de0b00
23 changed files with 1034 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
backend/app/api/v1/image.go
View File

@ -89,7 +89,7 @@ func (b *BaseApi) ImagePush(c *gin.Context) {
}
func (b *BaseApi) ImageRemove(c *gin.Context) {
var req dto.ImageRemove
var req dto.BatchDelete
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
@ -126,6 +126,25 @@ func (b *BaseApi) ImageSave(c *gin.Context) {
helper.SuccessWithData(c, nil)
}
func (b *BaseApi) ImageTag(c *gin.Context) {
var req dto.ImageTag
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := global.VALID.Struct(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := imageService.ImageTag(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, nil)
}
func (b *BaseApi) ImageLoad(c *gin.Context) {
var req dto.ImageLoad
if err := c.ShouldBindJSON(&req); err != nil {

12
backend/app/dto/container.go
View File

@ -34,10 +34,8 @@ type Network struct {
Labels []string `json:"labels"`
Driver string `json:"driver"`
IPAMDriver string `json:"ipamDriver"`
IPV4Subnet string `json:"ipv4Subnet"`
IPV4Gateway string `json:"ipv4Gateway"`
IPV6Subnet string `json:"ipv6Subnet"`
IPV6Gateway string `json:"ipv6Gateway"`
Subnet string `json:"subnet"`
Gateway string `json:"gateway"`
CreatedAt time.Time `json:"createdAt"`
Attachable bool `json:"attachable"`
}
@ -45,9 +43,9 @@ type NetworkCreat struct {
Name string `json:"name"`
Driver string `json:"driver"`
Options []string `json:"options"`
IPV4Subnet string `json:"ipv4Subnet"`
IPV4Gateway string `json:"ipv4Gateway"`
Scope string `json:"scope"`
Subnet string `json:"subnet"`
Gateway string `json:"gateway"`
IPRange string `json:"ipRange"`
Labels []string `json:"labels"`
}

17
backend/app/dto/image.go
View File

@ -5,8 +5,7 @@ import "time"
type ImageInfo struct {
ID string `json:"id"`
CreatedAt time.Time `json:"createdAt"`
Name string `json:"name"`
Version string `json:"version"`
Tags []string `json:"tags"`
Size string `json:"size"`
}
@ -14,10 +13,6 @@ type ImageLoad struct {
Path string `josn:"path" validate:"required"`
}
type ImageRemove struct {
ImageName string `josn:"imageName" validate:"required"`
}
type ImageBuild struct {
From string `josn:"from" validate:"required"`
Dockerfile string `josn:"dockerfile" validate:"required"`
@ -29,14 +24,20 @@ type ImagePull struct {
ImageName string `josn:"imageName" validate:"required"`
}
type ImageTag struct {
RepoID uint `josn:"repoID"`
SourceID string `json:"sourceID" validate:"required"`
TargetName string `josn:"targetName" validate:"required"`
}
type ImagePush struct {
RepoID uint `josn:"repoID" validate:"required"`
ImageName string `josn:"imageName" validate:"required"`
TagName string `json:"tagName" validate:"required"`
Name string `json:"name" validate:"required"`
}
type ImageSave struct {
ImageName string `josn:"imageName" validate:"required"`
TagName string `json:"tagName" validate:"required"`
Path string `josn:"path" validate:"required"`
Name string `json:"name" validate:"required"`
}

44
backend/app/service/container.go
View File

@ -178,15 +178,9 @@ func (u *ContainerService) PageNetwork(req dto.PageInfo) (int64, interface{}, er
for key, val := range item.Labels {
tag = append(tag, fmt.Sprintf("%s=%s", key, val))
}
var (
ipv4 network.IPAMConfig
ipv6 network.IPAMConfig
)
if len(item.IPAM.Config) > 1 {
ipv4 = item.IPAM.Config[0]
ipv6 = item.IPAM.Config[1]
} else if len(item.IPAM.Config) > 0 {
ipv4 = item.IPAM.Config[0]
var ipam network.IPAMConfig
if len(item.IPAM.Config) > 0 {
ipam = item.IPAM.Config[0]
}
data = append(data, dto.Network{
ID: item.ID,
@ -194,10 +188,8 @@ func (u *ContainerService) PageNetwork(req dto.PageInfo) (int64, interface{}, er
Name: item.Name,
Driver: item.Driver,
IPAMDriver: item.IPAM.Driver,
IPV4Subnet: ipv4.Subnet,
IPV4Gateway: ipv4.Gateway,
IPV6Subnet: ipv6.Subnet,
IPV6Gateway: ipv6.Gateway,
Subnet: ipam.Subnet,
Gateway: ipam.Gateway,
Attachable: item.Attachable,
Labels: tag,
})
@ -222,19 +214,31 @@ func (u *ContainerService) CreateNetwork(req dto.NetworkCreat) error {
if err != nil {
return err
}
ipv4 := network.IPAMConfig{
Subnet: req.IPV4Subnet,
Gateway: req.IPV4Gateway,
var (
ipam network.IPAMConfig
hasConf bool
)
if len(req.Subnet) != 0 {
ipam.Subnet = req.Subnet
hasConf = true
}
if len(req.Gateway) != 0 {
ipam.Gateway = req.Gateway
hasConf = true
}
if len(req.IPRange) != 0 {
ipam.IPRange = req.IPRange
hasConf = true
}
options := types.NetworkCreate{
Driver: req.Driver,
Scope: req.Scope,
IPAM: &network.IPAM{
Config: []network.IPAMConfig{ipv4},
},
Options: stringsToMap(req.Options),
Labels: stringsToMap(req.Labels),
}
if hasConf {
options.IPAM = &network.IPAM{Config: []network.IPAMConfig{ipam}}
}
if _, err := client.NetworkCreate(context.TODO(), req.Name, options); err != nil {
return err
}

50
backend/app/service/image.go
View File

@ -8,7 +8,6 @@ import (
"fmt"
"io"
"os"
"strings"
"time"
"github.com/1Panel-dev/1Panel/app/dto"
@ -25,7 +24,7 @@ type IImageService interface {
ImageLoad(req dto.ImageLoad) error
ImageSave(req dto.ImageSave) error
ImagePush(req dto.ImagePush) error
ImageRemove(req dto.ImageRemove) error
ImageRemove(req dto.BatchDelete) error
}
func NewIImageService() IImageService {
@ -48,18 +47,13 @@ func (u *ImageService) Page(req dto.PageInfo) (int64, interface{}, error) {
for _, image := range list {
size := formatFileSize(image.Size)
for _, item := range image.RepoTags {
name := item[0:strings.LastIndex(item, ":")]
tag := strings.ReplaceAll(item[strings.LastIndex(item, ":"):], ":", "")
records = append(records, dto.ImageInfo{
ID: image.ID,
Name: name,
Version: tag,
Tags: image.RepoTags,
CreatedAt: time.Unix(image.Created, 0),
Size: size,
})
}
}
total, start, end := len(records), (req.Page-1)*req.PageSize, req.Page*req.PageSize
if start > total {
backDatas = make([]dto.ImageInfo, 0)
@ -164,27 +158,39 @@ func (u *ImageService) ImageLoad(req dto.ImageLoad) error {
}
func (u *ImageService) ImageSave(req dto.ImageSave) error {
file, err := os.OpenFile(fmt.Sprintf("%s/%s.tar", req.Path, req.Name), os.O_WRONLY|os.O_CREATE|os.O_EXCL, 0666)
if err != nil {
return err
}
defer file.Close()
client, err := docker.NewDockerClient()
if err != nil {
return err
}
out, err := client.ImageSave(context.TODO(), []string{req.ImageName})
out, err := client.ImageSave(context.TODO(), []string{req.TagName})
if err != nil {
return err
}
defer out.Close()
file, err := os.OpenFile(fmt.Sprintf("%s/%s.tar", req.Path, req.Name), os.O_WRONLY|os.O_CREATE|os.O_EXCL, 0666)
if err != nil {
return err
}
defer file.Close()
if _, err = io.Copy(file, out); err != nil {
return err
}
return nil
}
func (u *ImageService) ImageTag(req dto.ImageTag) error {
client, err := docker.NewDockerClient()
if err != nil {
return err
}
if err := client.ImageTag(context.TODO(), req.SourceID, req.TargetName); err != nil {
return err
}
return nil
}
func (u *ImageService) ImagePush(req dto.ImagePush) error {
client, err := docker.NewDockerClient()
if err != nil {
@ -207,35 +213,37 @@ func (u *ImageService) ImagePush(req dto.ImagePush) error {
authStr := base64.URLEncoding.EncodeToString(encodedJSON)
options.RegistryAuth = authStr
}
newName := fmt.Sprintf("%s/%s", repo.DownloadUrl, req.TagName)
if newName != req.ImageName {
if err := client.ImageTag(context.TODO(), req.ImageName, newName); err != nil {
newName := fmt.Sprintf("%s/%s", repo.DownloadUrl, req.Name)
if newName != req.TagName {
if err := client.ImageTag(context.TODO(), req.TagName, newName); err != nil {
return err
}
}
go func() {
out, err := client.ImagePush(context.TODO(), newName, options)
if err != nil {
global.LOG.Errorf("image %s push failed, err: %v", req.ImageName, err)
global.LOG.Errorf("image %s push failed, err: %v", req.TagName, err)
return
}
defer out.Close()
buf := new(bytes.Buffer)
_, _ = buf.ReadFrom(out)
global.LOG.Debugf("image %s push stdout: %v", req.ImageName, buf.String())
global.LOG.Debugf("image %s push stdout: %v", req.TagName, buf.String())
}()
return nil
}
func (u *ImageService) ImageRemove(req dto.ImageRemove) error {
func (u *ImageService) ImageRemove(req dto.BatchDelete) error {
client, err := docker.NewDockerClient()
if err != nil {
return err
}
if _, err := client.ImageRemove(context.TODO(), req.ImageName, types.ImageRemoveOptions{Force: true}); err != nil {
for _, ids := range req.Ids {
if _, err := client.ImageRemove(context.TODO(), ids, types.ImageRemoveOptions{Force: true}); err != nil {
return err
}
}
return nil
}

21
backend/app/service/image_test.go
View File

@ -8,13 +8,10 @@ import (
"io/ioutil"
"os"
"testing"
"time"
"github.com/1Panel-dev/1Panel/app/dto"
"github.com/1Panel-dev/1Panel/constant"
"github.com/1Panel-dev/1Panel/utils/docker"
"github.com/docker/docker/api/types"
"github.com/docker/docker/api/types/filters"
"github.com/docker/docker/pkg/archive"
)
@ -95,24 +92,8 @@ func TestNetwork(t *testing.T) {
if err != nil {
fmt.Println(err)
}
var data []dto.Volume
list, err := client.VolumeList(context.TODO(), filters.NewArgs())
_, err = client.NetworkCreate(context.TODO(), "test", types.NetworkCreate{})
if err != nil {
fmt.Println(err)
}
for _, item := range list.Volumes {
tag := make([]string, 0)
for _, val := range item.Labels {
tag = append(tag, val)
}
createTime, _ := time.Parse("2006-01-02T15:04:05Z", item.CreatedAt)
data = append(data, dto.Volume{
CreatedAt: createTime,
Name: item.Name,
Driver: item.Driver,
Mountpoint: item.Mountpoint,
Labels: tag,
})
}
fmt.Println(data)
}

1
backend/router/ro_container.go
View File

@ -37,6 +37,7 @@ func (s *ContainerRouter) InitContainerRouter(Router *gin.RouterGroup) {
baRouter.POST("/image/save", baseApi.ImageSave)
baRouter.POST("/image/load", baseApi.ImageLoad)
baRouter.POST("/image/remove", baseApi.ImageRemove)
baRouter.POST("/image/tag", baseApi.ImageTag)
baRouter.POST("/network/del", baseApi.DeleteNetwork)
baRouter.POST("/network/search", baseApi.SearchNetwork)

25
frontend/src/api/interface/container.ts
View File

@ -21,7 +21,7 @@ export namespace Container {
id: string;
createdAt: Date;
name: string;
version: string;
tags: Array<string>;
size: string;
}
export interface ImageBuild {
@ -32,19 +32,20 @@ export namespace Container {
repoID: number;
imageName: string;
}
export interface ImageTag {
repoID: number;
sourceID: string;
targetName: string;
}
export interface ImagePush {
repoID: number;
imageName: string;
tagName: string;
}
export interface ImageRemove {
imageName: string;
}
export interface ImageLoad {
path: string;
}
export interface ImageSave {
imageName: string;
tagName: string;
path: string;
name: string;
}
@ -55,10 +56,8 @@ export namespace Container {
labels: Array<string>;
driver: string;
ipamDriver: string;
ipv4Subnet: string;
ipv4Gateway: string;
ipv6Subnet: string;
ipv6Gateway: string;
subnet: string;
gateway: string;
createdAt: string;
attachable: string;
}
@ -67,8 +66,8 @@ export namespace Container {
labels: Array<string>;
options: Array<string>;
driver: string;
ipv4Subnet: string;
ipv4Gateway: string;
subnet: string;
gateway: string;
scope: string;
}
@ -83,7 +82,7 @@ export namespace Container {
name: string;
driver: string;
options: Array<string>;
label: Array<string>;
labels: Array<string>;
}
export interface RepoCreate {

15
frontend/src/api/modules/container.ts
View File

@ -23,21 +23,24 @@ export const getImagePage = (params: ReqPage) => {
return http.post<ResPage<Container.ImageInfo>>(`/containers/image/search`, params);
};
export const imageBuild = (params: Container.ImageBuild) => {
return http.post<string>(`/containers/image/build`, params);
return http.post(`/containers/image/build`, params);
};
export const imagePull = (params: Container.ImagePull) => {
return http.post<string>(`/containers/image/pull`, params);
return http.post(`/containers/image/pull`, params);
};
export const imagePush = (params: Container.ImagePush) => {
return http.post<string>(`/containers/image/push`, params);
return http.post(`/containers/image/push`, params);
};
export const imageLoad = (params: Container.ImageLoad) => {
return http.post<string>(`/containers/image/load`, params);
return http.post(`/containers/image/load`, params);
};
export const imageSave = (params: Container.ImageSave) => {
return http.post<string>(`/containers/image/save`, params);
return http.post(`/containers/image/save`, params);
};
export const imageRemove = (params: Container.ImageRemove) => {
export const imageTag = (params: Container.ImageTag) => {
return http.post(`/containers/image/tag`, params);
};
export const imageRemove = (params: Container.BatchDelete) => {
return http.post(`/containers/image/remove`, params);
};

21
frontend/src/lang/modules/en.ts
View File

@ -161,8 +161,6 @@ export default {
reName: 'ReName',
remove: 'Remove',
container: 'Container',
network: 'Network',
storage: 'Storage',
schedule: 'Schedule',
upTime: 'UpTime',
all: 'All',
@ -178,18 +176,33 @@ export default {
imageName: 'Image name',
pull: 'Pull',
path: 'Path',
importImage: 'Import image',
importImage: 'Image import',
import: 'Import',
build: 'Build',
label: 'Label',
push: 'Push',
fileName: 'FileName',
export: 'Export',
exportImage: 'ExportImage',
exportImage: 'Image export',
version: 'Version',
size: 'Size',
from: 'From',
network: 'Network',
createNetwork: 'Create network',
networkName: 'Name',
driver: 'Driver',
option: 'Option',
attachable: 'Attachable',
subnet: 'Subnet',
scope: 'IP Scope',
gateway: 'Gateway',
volume: 'Volume',
volumeName: 'Name',
mountpoint: 'Mountpoint',
createVolume: 'Create volume',
repo: 'Repo',
name: 'Name',
protocol: 'protocol',

11
frontend/src/lang/modules/zh.ts
View File

@ -158,7 +158,6 @@ export default {
reName: '重命名',
remove: '移除',
container: '容器',
storage: '数据卷',
schedule: '编排',
upTime: '运行时长',
all: '全部',
@ -168,8 +167,9 @@ export default {
last10Min: '最近 10 分钟',
image: '镜像',
imagePull: '镜像拉取',
imagePush: '镜像推送',
imagePull: '拉取镜像',
imagePush: '推送镜像',
imageDelete: '删除镜像',
repoName: '仓库名',
imageName: '镜像名',
pull: '拉取',
@ -199,6 +199,11 @@ export default {
scope: 'IP 范围',
gateway: '网关',
volume: '存储卷',
volumeName: '名称',
mountpoint: '挂载点',
createVolume: '创建存储卷',
repo: '仓库',
name: '名称',
protocol: '协议',

86
frontend/src/views/container/image/build/index.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<el-dialog v-model="buildVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
<template #header>
<div class="card-header">
<span>{{ $t('container.importImage') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item label="Dockerfile" :rules="Rules.requiredSelect" prop="from">
<el-radio-group v-model="form.from">
<el-radio label="edit">{{ $t('container.edit') }}</el-radio>
<el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="form.dockerfile" />
</el-form-item>
<el-form-item v-else :rules="Rules.requiredInput">
<el-input clearable v-model="form.dockerfile">
<template #append>
<FileList @choose="loadBuildDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.tag" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onSubmit(formRef)">{{ $t('container.import') }}</el-button>
<el-button @click="buildVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import FileList from '@/components/file-list/index.vue';
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imageBuild } from '@/api/modules/container';
const buildVisiable = ref(false);
const form = reactive({
from: 'path',
dockerfile: '',
tag: '',
});
const acceptParams = async () => {
buildVisiable.value = true;
form.from = 'path';
form.dockerfile = '';
form.tag = '';
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
buildVisiable.value = false;
await imageBuild(form);
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
emit('search');
}
});
};
const loadBuildDir = async (path: string) => {
form.dockerfile = path;
};
defineExpose({
acceptParams,
});
</script>

432
frontend/src/views/container/image/index.vue
View File

@ -12,14 +12,19 @@
<el-button @click="onOpenBuild">
{{ $t('container.build') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete('byid')">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix></el-table-column>
<el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
<el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name" min-width="100" />
<el-table-column :label="$t('container.version')" prop="version" min-width="60" fix />
<el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
<template #default="{ row }">
<el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
{{ item }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('container.size')" prop="size" min-width="70" fix />
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
@ -30,160 +35,32 @@
</ComplexTable>
</el-card>
<el-dialog v-model="buildVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
<template #header>
<div class="card-header">
<span>{{ $t('container.importImage') }}</span>
</div>
</template>
<el-form ref="buildFormRef" :model="buildForm" label-position="left" label-width="80px">
<el-form-item label="Dockerfile" :rules="Rules.requiredSelect" prop="from">
<el-radio-group v-model="buildForm.from">
<el-radio label="edit">{{ $t('container.edit') }}</el-radio>
<el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="buildForm.from !== 'edit'" :rules="Rules.requiredInput">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="buildForm.dockerfile" />
</el-form-item>
<el-form-item v-else :rules="Rules.requiredInput">
<el-input clearable v-model="buildForm.dockerfile">
<template #append>
<FileList @choose="loadBuildDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="buildForm.tag" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="submitBuild(buildFormRef)">{{ $t('container.import') }}</el-button>
<el-button @click="buildVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
<Pull ref="dialogPullRef" @search="search" />
<Tag ref="dialogTagRef" @search="search" />
<Push ref="dialogPushRef" @search="search" />
<Save ref="dialogSaveRef" @search="search" />
<Load ref="dialogLoadRef" @search="search" />
<Build ref="dialogBuildRef" @search="search" />
<el-dialog v-model="pullVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<el-dialog v-model="deleteVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.imagePull') }}</span>
<span>{{ $t('container.imageDelete') }}</span>
</div>
</template>
<el-form ref="pullFormRef" :model="pullForm" label-width="80px">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="pullForm.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
<el-form-item
v-if="pullForm.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repoID"
>
<el-select style="width: 100%" filterable v-model="pullForm.repoID">
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="imageName">
<el-input v-model="pullForm.imageName">
<template v-if="pullForm.fromRepo" #prepend>{{ loadDetailInfo(pullForm.repoID) }}/</template>
</el-input>
<el-form :model="deleteForm" label-width="80px">
<el-form-item label="Tag" prop="tagName">
<el-checkbox-group v-model="deleteForm.deleteTags">
<el-checkbox v-for="item in deleteForm.tags" :key="item" :value="item" :label="item" />
</el-checkbox-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="submitPull(pullFormRef)">
{{ $t('container.pull') }}
<el-button :disabled="deleteForm.deleteTags.length === 0" @click="batchDelete('byname')">
{{ $t('commons.button.delete') }}
</el-button>
<el-button @click="pullVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="pushVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
<template #header>
<div class="card-header">
<span>{{ $t('container.imagePush') }} ({{ pushForm.imageName }})</span>
</div>
</template>
<el-form ref="pushFormRef" :model="pushForm" label-width="80px">
<el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
<el-select style="width: 100%" filterable v-model="pushForm.repoID">
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.label')" :rules="Rules.requiredInput" prop="tagName">
<el-input v-model="pushForm.tagName">
<template #prepend>{{ loadDetailInfo(pushForm.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="submitPush(pushFormRef)">
{{ $t('container.push') }}
</el-button>
<el-button @click="pushVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="saveVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
<template #header>
<div class="card-header">
<span>{{ $t('container.exportImage') }} ({{ saveForm.imageName }})</span>
</div>
</template>
<el-form ref="saveFormRef" :model="saveForm" label-width="80px">
<el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
<el-input clearable v-model="saveForm.path">
<template #append>
<FileList @choose="loadSaveDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.fileName')" :rules="Rules.requiredInput" prop="name">
<el-input v-model="saveForm.name">
<template #append>.tar</template>
</el-input>
</el-form-item>
<el-form-item v-if="saveForm.path !== '' && saveForm.name !== ''">
<el-tag>docker save {{ saveForm.imageName }} > {{ saveForm.path }}/{{ saveForm.name }}.tar</el-tag>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="submitSave(saveFormRef)">
{{ $t('container.export') }}
</el-button>
<el-button @click="saveVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="loadVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.importImage') }}</span>
</div>
</template>
<el-form ref="loadFormRef" :model="loadForm" label-width="80px">
<el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
<el-input clearable v-model="loadForm.path">
<template #append>
<FileList @choose="loadLoadDir" :dir="false"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="loadForm.path !== ''">
<el-tag>docker load &lt; {{ loadForm.path }}</el-tag>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="submitLoad(loadFormRef)">{{ $t('container.import') }}</el-button>
<el-button @click="loadVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="deleteVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
@ -193,22 +70,18 @@
<script lang="ts" setup>
import ComplexTable from '@/components/complex-table/index.vue';
import { reactive, onMounted, ref } from 'vue';
import FileList from '@/components/file-list/index.vue';
import { dateFromat } from '@/utils/util';
import { Container } from '@/api/interface/container';
import {
getImagePage,
getRepoOption,
imageBuild,
imageLoad,
imagePull,
imagePush,
imageRemove,
imageSave,
} from '@/api/modules/container';
import { Rules } from '@/global/form-rules';
import Pull from '@/views/container/image/pull/index.vue';
import Tag from '@/views/container/image/tag/index.vue';
import Push from '@/views/container/image/push/index.vue';
import Save from '@/views/container/image/save/index.vue';
import Load from '@/views/container/image/load/index.vue';
import Build from '@/views/container/image/build/index.vue';
import { getImagePage, getRepoOption, imageRemove } from '@/api/modules/container';
import i18n from '@/lang';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { ElForm } from 'element-plus';
import { useDeleteData } from '@/hooks/use-delete-data';
const loading = ref(false);
@ -221,44 +94,17 @@ const paginationConfig = reactive({
total: 0,
});
type FormInstance = InstanceType<typeof ElForm>;
const dialogPullRef = ref();
const dialogTagRef = ref();
const dialogPushRef = ref();
const dialogLoadRef = ref();
const dialogSaveRef = ref();
const dialogBuildRef = ref();
const buildVisiable = ref(false);
const buildFormRef = ref<FormInstance>();
const buildForm = reactive({
from: 'path',
dockerfile: '',
tag: '',
});
const pullVisiable = ref(false);
const pullFormRef = ref<FormInstance>();
const pullForm = reactive({
fromRepo: true,
repoID: 1,
imageName: '',
});
const pushVisiable = ref(false);
const pushFormRef = ref<FormInstance>();
const pushForm = reactive({
repoID: 1,
imageName: '',
tagName: '',
});
const saveVisiable = ref(false);
const saveFormRef = ref<FormInstance>();
const saveForm = reactive({
imageName: '',
path: '',
name: '',
});
const loadVisiable = ref(false);
const loadFormRef = ref<FormInstance>();
const loadForm = reactive({
path: '',
const deleteVisiable = ref(false);
const deleteForm = reactive({
deleteTags: [] as Array<string>,
tags: [] as Array<string>,
});
const search = async () => {
@ -278,183 +124,73 @@ const loadRepos = async () => {
repos.value = res.data;
};
const loadBuildDir = async (path: string) => {
buildForm.dockerfile = path;
};
const loadSaveDir = async (path: string) => {
saveForm.path = path;
};
const loadLoadDir = async (path: string) => {
loadForm.path = path;
};
const onOpenPull = () => {
pullVisiable.value = true;
pullForm.imageName = '';
pullForm.repoID = 1;
};
const submitPull = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
loading.value = true;
if (!pullForm.fromRepo) {
pullForm.repoID = 0;
}
pullVisiable.value = false;
await imagePull(pullForm);
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
loading.value = false;
search();
}
});
};
const submitPush = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
loading.value = true;
pushVisiable.value = false;
await imagePush(pushForm);
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
loading.value = false;
search();
}
});
let params = {
repos: repos,
};
dialogPullRef.value!.acceptParams(params);
};
const onOpenBuild = () => {
buildVisiable.value = true;
buildForm.from = 'path';
buildForm.dockerfile = '';
};
const submitBuild = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
loading.value = true;
loadVisiable.value = false;
await imageBuild(buildForm);
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
loading.value = false;
search();
}
});
dialogBuildRef.value!.acceptParams();
};
const onOpenload = () => {
loadVisiable.value = true;
loadForm.path = '';
};
const submitLoad = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
loading.value = true;
loadVisiable.value = false;
await imageLoad(loadForm);
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
loading.value = false;
search();
}
});
dialogLoadRef.value!.acceptParams();
};
const submitSave = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
loading.value = true;
saveVisiable.value = false;
await imageSave(saveForm);
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
loading.value = false;
search();
}
const batchDelete = async (option: string) => {
let ids: Array<string> = [];
if (option === 'byid') {
selects.value.forEach((item: Container.NetworkInfo) => {
ids.push(item.id);
});
} else {
for (const item of deleteForm.deleteTags) {
ids.push(item);
}
}
await useDeleteData(imageRemove, { ids: ids }, 'commons.msg.delete', true);
deleteVisiable.value = false;
search();
};
const onBatchDelete = async (row: Container.ImageInfo | null) => {
ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.msg.deleteTitle'), {
confirmButtonText: i18n.global.t('commons.button.confirm'),
cancelButtonText: i18n.global.t('commons.button.cancel'),
type: 'info',
}).then(async () => {
if (row) {
loading.value = true;
await imageRemove({ imageName: row.name + ':' + row.version });
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
return;
}
let ps = [];
for (const item of selects.value) {
ps.push(imageRemove({ imageName: item.name + ':' + item.version }));
}
loading.value = true;
Promise.all(ps)
.then(() => {
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
})
.catch(() => {
loading.value = false;
search();
});
});
};
function loadDetailInfo(id: number) {
for (const item of repos.value) {
if (item.id === id) {
return item.downloadUrl;
}
}
return '';
}
const buttons = [
{
label: 'Tag',
click: (row: Container.ImageInfo) => {
let params = {
repos: repos.value,
sourceID: row.id,
};
dialogTagRef.value!.acceptParams(params);
},
},
{
label: i18n.global.t('container.push'),
click: (row: Container.ImageInfo) => {
pushForm.imageName = row.name + ':' + row.version;
pushVisiable.value = true;
let params = {
repos: repos.value,
tags: row.tags,
};
dialogPushRef.value!.acceptParams(params);
},
},
{
label: i18n.global.t('container.export'),
click: (row: Container.ImageInfo) => {
saveForm.imageName = row.name + ':' + row.version;
saveVisiable.value = true;
let params = {
repos: repos.value,
tags: row.tags,
};
dialogSaveRef.value!.acceptParams(params);
},
},
{
label: i18n.global.t('commons.button.delete'),
click: (row: Container.ImageInfo) => {
onBatchDelete(row);
deleteForm.tags = row.tags;
deleteVisiable.value = true;
},
},
];

71
frontend/src/views/container/image/load/index.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<el-dialog v-model="loadVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.importImage') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
<el-input clearable v-model="form.path">
<template #append>
<FileList @choose="loadLoadDir" :dir="false"></FileList>
</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onSubmit(formRef)">{{ $t('container.import') }}</el-button>
<el-button @click="loadVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import FileList from '@/components/file-list/index.vue';
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imageLoad } from '@/api/modules/container';
const loadVisiable = ref(false);
const form = reactive({
path: '',
});
const acceptParams = () => {
loadVisiable.value = true;
form.path = '';
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
loadVisiable.value = false;
await imageLoad(form);
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
emit('search');
}
});
};
const loadLoadDir = async (path: string) => {
form.path = path;
};
defineExpose({
acceptParams,
});
</script>

104
frontend/src/views/container/image/pull/index.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<el-dialog v-model="pullVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.imagePull') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repoID"
>
<el-select style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in dialogData.repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="imageName">
<el-input v-model="form.imageName">
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onSubmit(formRef)">
{{ $t('container.pull') }}
</el-button>
<el-button @click="pullVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imagePull } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
const pullVisiable = ref(false);
const form = reactive({
fromRepo: true,
repoID: 1,
imageName: '',
});
interface DialogProps {
repos: Array<Container.RepoOptions>;
}
const dialogData = ref<DialogProps>({
repos: [] as Array<Container.RepoOptions>,
});
const acceptParams = async (params: DialogProps): Promise<void> => {
pullVisiable.value = true;
form.fromRepo = true;
form.repoID = 1;
form.imageName = '';
dialogData.value.repos = params.repos;
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
if (!form.fromRepo) {
form.repoID = 0;
}
pullVisiable.value = false;
await imagePull(form);
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
emit('search');
}
});
};
function loadDetailInfo(id: number) {
for (const item of dialogData.value.repos) {
if (item.id === id) {
return item.downloadUrl;
}
}
return '';
}
defineExpose({
acceptParams,
});
</script>

102
frontend/src/views/container/image/push/index.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<el-dialog v-model="pushVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.imagePush') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName">
<el-select filterable v-model="form.tagName">
<el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
<el-select style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in dialogData.repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.label')" :rules="Rules.requiredInput" prop="name">
<el-input v-model="form.name">
<template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onSubmit(formRef)">
{{ $t('container.push') }}
</el-button>
<el-button @click="pushVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imagePush } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
const pushVisiable = ref(false);
const form = reactive({
tags: [] as Array<string>,
tagName: '',
repoID: 1,
name: '',
});
interface DialogProps {
repos: Array<Container.RepoOptions>;
tags: Array<string>;
}
const dialogData = ref<DialogProps>({
repos: [] as Array<Container.RepoOptions>,
tags: [] as Array<string>,
});
const acceptParams = async (params: DialogProps): Promise<void> => {
pushVisiable.value = true;
form.tags = params.tags;
form.repoID = 1;
form.tagName = '';
form.name = '';
dialogData.value.repos = params.repos;
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
pushVisiable.value = false;
await imagePush(form);
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
emit('search');
}
});
};
function loadDetailInfo(id: number) {
for (const item of dialogData.value.repos) {
if (item.id === id) {
return item.downloadUrl;
}
}
return '';
}
defineExpose({
acceptParams,
});
</script>

106
frontend/src/views/container/image/save/index.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<el-dialog v-model="saveVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.exportImage') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName">
<el-select filterable v-model="form.tagName">
<el-option
:disabled="item.indexOf(':<none>') !== -1"
v-for="item in form.tags"
:key="item"
:value="item"
:label="item"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
<el-input clearable v-model="form.path">
<template #append>
<FileList @choose="loadSaveDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.fileName')" :rules="Rules.requiredInput" prop="name">
<el-input v-model="form.name">
<template #append>.tar</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onSubmit(formRef)">
{{ $t('container.export') }}
</el-button>
<el-button @click="saveVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import FileList from '@/components/file-list/index.vue';
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imageSave } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
const saveVisiable = ref(false);
const form = reactive({
tags: [] as Array<string>,
tagName: '',
path: '',
name: '',
});
interface DialogProps {
repos: Array<Container.RepoOptions>;
tags: Array<string>;
}
const dialogData = ref<DialogProps>({
repos: [] as Array<Container.RepoOptions>,
tags: [] as Array<string>,
});
const acceptParams = async (params: DialogProps): Promise<void> => {
saveVisiable.value = true;
form.tags = params.tags;
form.path = '';
form.tagName = '';
form.name = '';
dialogData.value.repos = params.repos;
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
saveVisiable.value = false;
await imageSave(form);
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
emit('search');
}
});
};
const loadSaveDir = async (path: string) => {
form.path = path;
};
defineExpose({
acceptParams,
});
</script>

106
frontend/src/views/container/image/tag/index.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<el-dialog v-model="tagVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>Tag {{ $t('container.image') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repoID"
>
<el-select style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in dialogData.repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="targetName">
<el-input v-model="form.targetName">
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onSubmit(formRef)">{{ $t('commons.button.save') }}</el-button>
<el-button @click="tagVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imageTag } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
const tagVisiable = ref(false);
const form = reactive({
sourceID: '',
fromRepo: true,
repoID: 1,
targetName: '',
});
interface DialogProps {
repos: Array<Container.RepoOptions>;
sourceID: string;
}
const dialogData = ref<DialogProps>({
repos: [] as Array<Container.RepoOptions>,
sourceID: '',
});
const acceptParams = async (params: DialogProps): Promise<void> => {
tagVisiable.value = true;
form.repoID = 1;
form.sourceID = params.sourceID;
form.targetName = '';
form.fromRepo = true;
dialogData.value.repos = params.repos;
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
try {
if (!form.fromRepo) {
form.repoID = 0;
}
tagVisiable.value = false;
await imageTag(form);
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
} catch {
emit('search');
}
});
};
function loadDetailInfo(id: number) {
for (const item of dialogData.value.repos) {
if (item.id === id) {
return item.downloadUrl;
}
}
return '';
}
defineExpose({
acceptParams,
});
</script>

8
frontend/src/views/container/index.vue
View File

@ -11,8 +11,8 @@
<el-radio-button class="topButton" size="large" label="network">
{{ $t('container.network') }}
</el-radio-button>
<el-radio-button class="topButton" size="large" label="storage">
{{ $t('container.storage') }}
<el-radio-button class="topButton" size="large" label="volume">
{{ $t('container.volume') }}
</el-radio-button>
<el-radio-button class="topButton" size="large" label="repo">
{{ $t('container.repo') }}
@ -26,7 +26,7 @@
<Repo v-if="activeNames === 'repo'" />
<Image v-if="activeNames === 'image'" />
<Network v-if="activeNames === 'network'" />
<Monitor v-if="activeNames === 'storage'" />
<Volume v-if="activeNames === 'volume'" />
<About v-if="activeNames === 'schedule'" />
</div>
</template>
@ -37,7 +37,7 @@ import Container from '@/views/container/container/index.vue';
import Repo from '@/views/container/repo/index.vue';
import Image from '@/views/container/image/index.vue';
import Network from '@/views/container/network/index.vue';
import Monitor from '@/views/setting/tabs/monitor.vue';
import Volume from '@/views/container/volume/index.vue';
import About from '@/views/setting/tabs/about.vue';
const activeNames = ref('container');

15
frontend/src/views/container/network/create/index.vue
View File

@ -20,11 +20,11 @@
<el-form-item :label="$t('container.option')" prop="optionStr">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.optionStr" />
</el-form-item>
<el-form-item :label="$t('container.subnet')" prop="ipv4Subnet">
<el-input clearable v-model="form.ipv4Subnet" />
<el-form-item :label="$t('container.subnet')" prop="subnet">
<el-input clearable v-model="form.subnet" />
</el-form-item>
<el-form-item :label="$t('container.gateway')" prop="ipv4Gateway">
<el-input clearable v-model="form.ipv4Gateway" />
<el-form-item :label="$t('container.gateway')" prop="gateway">
<el-input clearable v-model="form.gateway" />
</el-form-item>
<el-form-item :label="$t('container.scope')" prop="scope">
<el-input clearable v-model="form.scope" />
@ -59,8 +59,8 @@ const form = reactive({
optionStr: '',
options: [] as Array<string>,
driver: '',
ipv4Subnet: '',
ipv4Gateway: '',
subnet: '',
gateway: '',
scope: '',
});
@ -73,9 +73,6 @@ const emit = defineEmits<{ (e: 'search'): void }>();
const rules = reactive({
name: [Rules.requiredInput, Rules.name],
driver: [Rules.requiredSelect],
ipv4Subnet: [Rules.requiredInput],
ipv4Gateway: [Rules.requiredInput],
scope: [Rules.requiredInput],
});
type FormInstance = InstanceType<typeof ElForm>;

26
frontend/src/views/container/network/index.vue
View File

@ -25,30 +25,8 @@
<el-icon color="red" v-if="!row.attachable"><CloseBold /></el-icon>
</template>
</el-table-column>
<el-table-column :label="$t('container.subnet')" min-width="80" fix>
<template #default="{ row }">
<div v-if="row.ipv4Subnet.length !== 0">
ipv4
<el-tag>{{ row.ipv4Subnet }}</el-tag>
</div>
<div v-if="row.ipv6Subnet.length !== 0">
ipv6
<el-tag>{{ row.ipv6Subnet }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column :label="$t('container.gateway')" min-width="80" fix>
<template #default="{ row }">
<div v-if="row.ipv4Gateway.length !== 0">
ipv4
<el-tag>{{ row.ipv4Gateway }}</el-tag>
</div>
<div v-if="row.ipv6Gateway.length !== 0">
ipv6
<el-tag>{{ row.ipv6Gateway }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />
<el-table-column :label="$t('container.gateway')" min-width="80" prop="gateway" fix />
<el-table-column :label="$t('container.tag')" min-width="140" fix>
<template #default="{ row }">
<div v-for="(item, index) of row.labels" :key="index">

92
frontend/src/views/container/volume/create/index.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<el-dialog v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('container.createVolume') }}</span>
</div>
</template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('container.volumeName')" prop="name">
<el-input clearable v-model="form.name" />
</el-form-item>
<el-form-item :label="$t('container.driver')" prop="driver">
<el-select v-model="form.driver">
<el-option label="local" value="local" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.option')" prop="optionStr">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.optionStr" />
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelStr">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.labelStr" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { createVolume } from '@/api/modules/container';
const createVisiable = ref(false);
const form = reactive({
name: '',
driver: 'local',
labelStr: '',
labels: [] as Array<string>,
optionStr: '',
options: [] as Array<string>,
});
const acceptParams = (): void => {
createVisiable.value = true;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const rules = reactive({
name: [Rules.requiredInput, Rules.name],
driver: [Rules.requiredSelect],
});
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
function restForm() {
if (formRef.value) {
formRef.value.resetFields();
}
}
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
if (form.labelStr !== '') {
form.labels = form.labelStr.split('\n');
}
if (form.optionStr !== '') {
form.options = form.optionStr.split('\n');
}
await createVolume(form);
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
restForm();
emit('search');
createVisiable.value = false;
});
};
defineExpose({
acceptParams,
});
</script>

107
frontend/src/views/container/volume/index.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div>
<el-card style="margin-top: 20px">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button style="margin-left: 10px" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="80"
prop="name"
fix
/>
<el-table-column
:label="$t('container.mountpoint')"
show-overflow-tooltip
min-width="120"
prop="mountpoint"
/>
<el-table-column :label="$t('container.driver')" show-overflow-tooltip min-width="80" prop="driver" />
<el-table-column
prop="createdAt"
min-width="90"
:label="$t('commons.table.date')"
:formatter="dateFromat"
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</el-card>
<CreateDialog @search="search" ref="dialogCreateRef" />
</div>
</template>
<script lang="ts" setup>
import ComplexTable from '@/components/complex-table/index.vue';
import CreateDialog from '@/views/container/volume/create/index.vue';
import { reactive, onMounted, ref } from 'vue';
import { dateFromat } from '@/utils/util';
import { deleteVolume, getVolumePage } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
import i18n from '@/lang';
import { useDeleteData } from '@/hooks/use-delete-data';
const data = ref();
const selects = ref<any>([]);
const paginationConfig = reactive({
page: 1,
pageSize: 10,
total: 0,
});
const dialogCreateRef = ref<DialogExpose>();
interface DialogExpose {
acceptParams: () => void;
}
const onCreate = async () => {
dialogCreateRef.value!.acceptParams();
};
const search = async () => {
const params = {
page: paginationConfig.page,
pageSize: paginationConfig.pageSize,
};
await getVolumePage(params).then((res) => {
if (res.data) {
data.value = res.data.items;
}
paginationConfig.total = res.data.total;
});
};
const batchDelete = async (row: Container.VolumeInfo | null) => {
let ids: Array<string> = [];
if (row === null) {
selects.value.forEach((item: Container.VolumeInfo) => {
ids.push(item.name);
});
} else {
ids.push(row.name);
}
await useDeleteData(deleteVolume, { ids: ids }, 'commons.msg.delete', true);
search();
};
const buttons = [
{
label: i18n.global.t('commons.button.delete'),
click: (row: Container.VolumeInfo) => {
batchDelete(row);
},
},
];
onMounted(() => {
search();
});
</script>