feat: 完成镜像构建功能

backend/app/api/v1/cronjob.go

@@ -1,7 +1,6 @@
 package v1
 
 import (
-	"os"
 	"time"
 
 	"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
@@ -144,30 +143,6 @@ func (b *BaseApi) UpdateCronjobStatus(c *gin.Context) {
 	helper.SuccessWithData(c, nil)
 }
 
-func (b *BaseApi) LoadRecordDetail(c *gin.Context) {
-	var req dto.DetailFile
-	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
-	}
-	file, err := os.Open(req.Path)
-	if err != nil {
-		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
-		return
-	}
-	defer file.Close()
-	buf := make([]byte, 1024*2)
-	if _, err := file.Read(buf); err != nil {
-		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
-		return
-	}
-	helper.SuccessWithData(c, string(buf))
-}
-
 func (b *BaseApi) TargetDownload(c *gin.Context) {
 	var req dto.CronjobDownload
 	if err := c.ShouldBindJSON(&req); err != nil {

backend/app/api/v1/file.go

@@ -2,6 +2,10 @@ package v1
 
 import (
 	"fmt"
+	"net/http"
+	"os"
+	"path"
+
 	"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/constant"
@@ -9,8 +13,6 @@ import (
 	websocket2 "github.com/1Panel-dev/1Panel/backend/utils/websocket"
 	"github.com/gin-gonic/gin"
 	"github.com/gorilla/websocket"
-	"net/http"
-	"path"
 )
 
 func (b *BaseApi) ListFiles(c *gin.Context) {
@@ -228,6 +230,30 @@ func (b *BaseApi) Size(c *gin.Context) {
 	helper.SuccessWithData(c, res)
 }
 
+func (b *BaseApi) LoadFromFile(c *gin.Context) {
+	var req dto.FilePath
+	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
+	}
+	file, err := os.Open(req.Path)
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	defer file.Close()
+	buf := make([]byte, 1024*500)
+	if _, err := file.Read(buf); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	helper.SuccessWithData(c, string(buf))
+}
+
 var wsUpgrade = websocket.Upgrader{
 	CheckOrigin: func(r *http.Request) bool {
 		return true

backend/app/api/v1/image.go

@@ -42,12 +42,13 @@ func (b *BaseApi) ImageBuild(c *gin.Context) {
 		return
 	}
 
-	if err := imageService.ImageBuild(req); err != nil {
+	log, err := imageService.ImageBuild(req)
+	if err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
 		return
 	}
 
-	helper.SuccessWithData(c, nil)
+	helper.SuccessWithData(c, log)
 }
 
 func (b *BaseApi) ImagePull(c *gin.Context) {

backend/app/dto/common_req.go

@@ -18,6 +18,10 @@ type BatchDeleteReq struct {
 	Ids []uint `json:"ids" validate:"required"`
 }
 
+type FilePath struct {
+	Path string `json:"path" validate:"required"`
+}
+
 type DeleteByName struct {
 	Name string `json:"name" validate:"required"`
 }

backend/app/dto/cronjob.go

@@ -49,10 +49,6 @@ type CronjobDownload struct {
 	BackupAccountID uint `json:"backupAccountID" validate:"required"`
 }
 
-type DetailFile struct {
-	Path string `json:"path" validate:"required"`
-}
-
 type CronjobInfo struct {
 	ID       uint   `json:"id"`
 	Name     string `json:"name"`

backend/app/dto/image.go

@@ -15,8 +15,9 @@ type ImageLoad struct {
 
 type ImageBuild struct {
 	From       string   `josn:"from" validate:"required"`
+	Name       string   `json:"name" validate:"required"`
 	Dockerfile string   `josn:"dockerfile" validate:"required"`
-	Tags       string `josn:"tags" validate:"required"`
+	Tags       []string `josn:"tags"`
 }
 
 type ImagePull struct {

backend/app/service/image.go

@@ -1,6 +1,7 @@
 package service
 
 import (
+	"bufio"
 	"bytes"
 	"context"
 	"encoding/base64"
@@ -11,9 +12,11 @@ import (
 	"time"
 
 	"github.com/1Panel-dev/1Panel/app/dto"
+	"github.com/1Panel-dev/1Panel/constant"
 	"github.com/1Panel-dev/1Panel/global"
 	"github.com/1Panel-dev/1Panel/utils/docker"
 	"github.com/docker/docker/api/types"
+	"github.com/docker/docker/pkg/archive"
 )
 
 type ImageService struct{}
@@ -40,7 +43,7 @@ func (u *ImageService) Page(req dto.PageInfo) (int64, interface{}, error) {
 	if err != nil {
 		return 0, nil, err
 	}
-	list, err = client.ImageList(context.Background(), types.ImageListOptions{})
+	list, err = client.ImageList(context.Background(), types.ImageListOptions{All: true})
 	if err != nil {
 		return 0, nil, err
 	}
@@ -67,27 +70,60 @@ func (u *ImageService) Page(req dto.PageInfo) (int64, interface{}, error) {
 	return int64(total), backDatas, nil
 }
 
-func (u *ImageService) ImageBuild(req dto.ImageBuild) error {
+func (u *ImageService) ImageBuild(req dto.ImageBuild) (string, error) {
-	// client, err := docker.NewDockerClient()
+	client, err := docker.NewDockerClient()
-	// if err != nil {
+	if err != nil {
-	// 	return err
+		return "", err
-	// }
+	}
-	// if req.From == "path" {
+	if req.From == "edit" {
-	// 	tar, err := archive.TarWithOptions("node-hello/", &archive.TarOptions{})
+		dir := fmt.Sprintf("%s/%s", constant.TmpDockerBuildDir, req.Name)
-	// 	if err != nil {
+		if _, err := os.Stat(dir); err != nil && os.IsNotExist(err) {
-	// 		return err
+			if err = os.MkdirAll(dir, os.ModePerm); err != nil {
-	// 	}
+				return "", err
+			}
+		}
 
-	// 	opts := types.ImageBuildOptions{
+		path := fmt.Sprintf("%s/Dockerfile", dir)
-	// 		Dockerfile: "Dockerfile",
+		file, err := os.OpenFile(path, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0666)
-	// 		Tags:       []string{dockerRegistryUserID + "/node-hello"},
+		if err != nil {
-	// 		Remove:     true,
+			return "", err
-	// 	}
+		}
-	// 	if _, err := client.ImageBuild(context.TODO(), tar, opts); err != nil {
+		defer file.Close()
-	// 		return err
+		write := bufio.NewWriter(file)
-	// 	}
+		_, _ = write.WriteString(string(req.Dockerfile))
-	// }
+		write.Flush()
-	return nil
+		req.Dockerfile = dir
+	}
+	tar, err := archive.TarWithOptions(req.Dockerfile+"/", &archive.TarOptions{})
+	if err != nil {
+		return "", err
+	}
+
+	opts := types.ImageBuildOptions{
+		Dockerfile: "Dockerfile",
+		Tags:       []string{req.Name},
+		Remove:     true,
+		Labels:     stringsToMap(req.Tags),
+	}
+	logName := fmt.Sprintf("%s/build.log", req.Dockerfile)
+
+	path := logName
+	file, err := os.OpenFile(path, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0666)
+	if err != nil {
+		return "", err
+	}
+	go func() {
+		defer file.Close()
+		res, err := client.ImageBuild(context.TODO(), tar, opts)
+		if err != nil {
+			global.LOG.Errorf("build image %s failed, err: %v", req.Name, err)
+			return
+		}
+		global.LOG.Debugf("build image %s successful!", req.Name)
+		_, _ = io.Copy(file, res.Body)
+	}()
+
+	return logName, nil
 }
 
 func (u *ImageService) ImagePull(req dto.ImagePull) error {
@@ -240,7 +276,7 @@ func (u *ImageService) ImageRemove(req dto.BatchDelete) error {
 		return err
 	}
 	for _, ids := range req.Ids {
-		if _, err := client.ImageRemove(context.TODO(), ids, types.ImageRemoveOptions{Force: true}); err != nil {
+		if _, err := client.ImageRemove(context.TODO(), ids, types.ImageRemoveOptions{Force: true, PruneChildren: true}); err != nil {
 			return err
 		}
 	}

backend/app/service/image_test.go

@@ -1,99 +0,0 @@
-package service
-
-import (
-	"context"
-	"encoding/json"
-	"fmt"
-	"io"
-	"io/ioutil"
-	"os"
-	"testing"
-
-	"github.com/1Panel-dev/1Panel/constant"
-	"github.com/1Panel-dev/1Panel/utils/docker"
-	"github.com/docker/docker/api/types"
-	"github.com/docker/docker/pkg/archive"
-)
-
-func TestImage(t *testing.T) {
-	file, err := os.OpenFile(("/tmp/nginx.tar"), os.O_WRONLY|os.O_CREATE|os.O_EXCL, 0666)
-	if err != nil {
-		fmt.Println(err)
-	}
-	defer file.Close()
-
-	client, err := docker.NewDockerClient()
-	if err != nil {
-		fmt.Println(err)
-	}
-	out, err := client.ImageSave(context.TODO(), []string{"nginx:1.14.2"})
-	fmt.Println(err)
-	defer out.Close()
-	if _, err = io.Copy(file, out); err != nil {
-		fmt.Println(err)
-	}
-}
-
-func TestBuild(t *testing.T) {
-	client, err := docker.NewDockerClient()
-	if err != nil {
-		fmt.Println(err)
-	}
-	tar, err := archive.TarWithOptions("/Users/slooop/Documents/neeko/", &archive.TarOptions{})
-	if err != nil {
-		fmt.Println(err)
-	}
-
-	opts := types.ImageBuildOptions{
-		Dockerfile: "Dockerfile",
-		Tags:       []string{"neeko" + "/test"},
-		Remove:     true,
-	}
-	res, err := client.ImageBuild(context.TODO(), tar, opts)
-	if err != nil {
-		fmt.Println(err)
-	}
-	defer res.Body.Close()
-}
-
-func TestDeam(t *testing.T) {
-	file, err := ioutil.ReadFile(constant.DaemonJsonDir)
-	if err != nil {
-		fmt.Println(err)
-	}
-	deamonMap := make(map[string]interface{})
-	err = json.Unmarshal(file, &deamonMap)
-	fmt.Println(err)
-	for k, v := range deamonMap {
-		fmt.Println(k, v)
-	}
-	if _, ok := deamonMap["insecure-registries"]; ok {
-		if k, v := deamonMap["insecure-registries"].(string); v {
-			fmt.Println("string ", k)
-		}
-		if k, v := deamonMap["insecure-registries"].([]interface{}); v {
-			fmt.Println("[]string ", k)
-			k = append(k, "172.16.10.111:8085")
-			deamonMap["insecure-registries"] = k
-		}
-	}
-	newss, err := json.Marshal(deamonMap)
-	if err != nil {
-		fmt.Println(err)
-	}
-	fmt.Println(string(newss))
-	if err := ioutil.WriteFile(constant.DaemonJsonDir, newss, 0777); err != nil {
-		fmt.Println(err)
-	}
-}
-
-func TestNetwork(t *testing.T) {
-	client, err := docker.NewDockerClient()
-	if err != nil {
-		fmt.Println(err)
-	}
-	_, err = client.NetworkCreate(context.TODO(), "test", types.NetworkCreate{})
-	if err != nil {
-		fmt.Println(err)
-	}
-}

backend/constant/container.go

@@ -11,4 +11,5 @@ const (
 	ContainerOpRemove  = "remove"
 
 	DaemonJsonDir     = "/System/Volumes/Data/Users/slooop/.docker/daemon.json"
+	TmpDockerBuildDir = "/opt/1Panel/build"
 )

backend/router/ro_container.go

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

backend/router/ro_cronjob.go

@@ -29,6 +29,5 @@ func (s *CronjobRouter) InitCronjobRouter(Router *gin.RouterGroup) {
 		cmdRouter.POST("/download", baseApi.TargetDownload)
 		cmdRouter.POST("/search", baseApi.SearchCronjob)
 		cmdRouter.POST("/search/records", baseApi.SearchJobRecords)
-		cmdRouter.POST("/search/detail", baseApi.LoadRecordDetail)
 	}
 }

backend/router/ro_file.go

@@ -32,6 +32,7 @@ func (f *FileRouter) InitFileRouter(Router *gin.RouterGroup) {
 		fileRouter.POST("/size", baseApi.Size)
 		fileRouter.GET("/ws", baseApi.Ws)
 		fileRouter.GET("/keys", baseApi.Keys)
+		fileRouter.POST("/loadfile", baseApi.LoadFromFile)
 	}
 
 }

frontend/src/api/interface/container.ts

@@ -30,7 +30,9 @@ export namespace Container {
     }
     export interface ImageBuild {
         from: string;
+        name: string;
         dockerfile: string;
+        tags: Array<string>;
     }
     export interface ImagePull {
         repoID: number;

frontend/src/api/interface/file.ts

@@ -108,4 +108,8 @@ export namespace File {
     export interface DirSizeRes {
         size: number;
     }
+
+    export interface FilePath {
+        path: string;
+    }
 }

frontend/src/api/modules/container.ts

@@ -23,7 +23,7 @@ export const getImagePage = (params: ReqPage) => {
     return http.post<ResPage<Container.ImageInfo>>(`/containers/image/search`, params);
 };
 export const imageBuild = (params: Container.ImageBuild) => {
-    return http.post(`/containers/image/build`, params);
+    return http.post<string>(`/containers/image/build`, params);
 };
 export const imagePull = (params: Container.ImagePull) => {
     return http.post(`/containers/image/pull`, params);

frontend/src/api/modules/files.ts

@@ -22,6 +22,10 @@ export const ChangeFileMode = (form: File.FileCreate) => {
     return http.post<File.File>('files/mode', form);
 };
 
+export const LoadFile = (form: File.FilePath) => {
+    return http.post<string>('files/loadfile', form);
+};
+
 export const CompressFile = (form: File.FileCompress) => {
     return http.post<File.File>('files/compress', form);
 };

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

@@ -1,21 +1,30 @@
 <template>
-    <el-dialog v-model="buildVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
+    <el-dialog
+        v-model="buildVisiable"
+        :destroy-on-close="true"
+        @close="onCloseLog"
+        :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="$t('container.name')" :rules="Rules.requiredInput" prop="name">
+                <el-input v-model="form.name" clearable />
+            </el-form-item>
             <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-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput" prop="dockerfile">
                 <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-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
                 <el-input clearable v-model="form.dockerfile">
                     <template #append>
                         <FileList @choose="loadBuildDir" :dir="true"></FileList>
@@ -23,9 +32,27 @@
                 </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-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.tagStr" />
             </el-form-item>
         </el-form>
+
+        <codemirror
+            v-if="logVisiable"
+            :autofocus="true"
+            placeholder="Wait for build output..."
+            :indent-with-tab="true"
+            :tabSize="4"
+            style="max-height: 500px"
+            :lineWrapping="true"
+            :matchBrackets="true"
+            theme="cobalt"
+            :styleActiveLine="true"
+            :extensions="extensions"
+            v-model="logInfo"
+            :readOnly="true"
+            ref="buildLogRef"
+        />
+
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="onSubmit(formRef)">{{ $t('container.import') }}</el-button>
@@ -37,23 +64,36 @@
 
 <script lang="ts" setup>
 import FileList from '@/components/file-list/index.vue';
+import { Codemirror } from 'vue-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
 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';
+import { LoadFile } from '@/api/modules/files';
+
+const logVisiable = ref<boolean>(false);
+const logInfo = ref();
+const buildLogRef = ref();
+const extensions = [javascript(), oneDark];
+let timer: NodeJS.Timer | null = null;
 
 const buildVisiable = ref(false);
 const form = reactive({
     from: 'path',
     dockerfile: '',
-    tag: '',
+    name: '',
+    tagStr: '',
+    tags: [] as Array<string>,
 });
 const acceptParams = async () => {
     buildVisiable.value = true;
     form.from = 'path';
     form.dockerfile = '';
-    form.tag = '';
+    form.tagStr = '';
+    form.name = '';
 };
 
 const emit = defineEmits<{ (e: 'search'): void }>();
@@ -65,17 +105,29 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        try {
+        if (form.tagStr !== '') {
-            buildVisiable.value = false;
+            form.tags = form.tagStr.split('\n');
-            await imageBuild(form);
-            emit('search');
-            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        } catch {
-            emit('search');
         }
+        const res = await imageBuild(form);
+        logVisiable.value = true;
+        loadLogs(res.data);
+        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
     });
 };
 
+const loadLogs = async (path: string) => {
+    timer = setInterval(async () => {
+        if (logVisiable.value) {
+            const res = await LoadFile({ path: path });
+            logInfo.value = res.data;
+        }
+    }, 1000 * 3);
+};
+const onCloseLog = async () => {
+    emit('search');
+    clearInterval(Number(timer));
+};
+
 const loadBuildDir = async (path: string) => {
     form.dockerfile = path;
 };

frontend/src/views/cronjob/record/index.vue

@@ -240,10 +240,11 @@ import { reactive, ref } from 'vue';
 import { Cronjob } from '@/api/interface/cronjob';
 import { loadZero } from '@/utils/util';
 import { loadBackupName } from '@/views/setting/helper';
-import { searchRecords, getRecordDetail, download } from '@/api/modules/cronjob';
+import { searchRecords, download } from '@/api/modules/cronjob';
 import { dateFromat, dateFromatForName } from '@/utils/util';
 import i18n from '@/lang';
 import { ElMessage } from 'element-plus';
+import { LoadFile } from '@/api/modules/files';
 
 interface DialogProps {
     rowData?: Cronjob.CronjobInfo;
@@ -389,7 +390,7 @@ const forDetail = async (row: Cronjob.Record) => {
     currentRecord.value = row;
 };
 const loadRecord = async (path: string) => {
-    const res = await getRecordDetail(path);
+    const res = await LoadFile({ path: path });
     currentRecordDetail.value = res.data;
 };
 function isBackup() {