新增功能: 批量打开pod的终端或者日志

Dockerfile

@@ -1,3 +1,4 @@
+# syntax = docker/dockerfile:experimental
 FROM node:18.10.0-alpine as stage-web-build
 RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
 RUN apk add --no-cache make
@@ -12,11 +13,13 @@ WORKDIR /build/kubepi/web
 
 COPY . .
 
-RUN make build_web
+RUN --mount=type=cache,target=/build/kubepi/web/dashboard/node_modules,id=my_web_dashboard_module,sharing=locked --mount=type=cache,target=/build/kubepi/web/kubepi/node_modules,id=my_web_kubepi_module,sharing=locked --mount=type=cache,target=/build/kubepi/web/terminal/node_modules,id=my_web_terminal_module,sharing=locked make build_web
 
 RUN rm -fr web
 
-FROM golang:1.22 as stage-bin-build
+FROM golang:1.23.2-alpine3.20 as stage-bin-build
+RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
+RUN apk add --no-cache make
 
 ENV GOPROXY="https://goproxy.cn,direct"
 
@@ -30,12 +33,12 @@ WORKDIR /build/kubepi/bin
 
 COPY --from=stage-web-build /build/kubepi/web .
 
-RUN go mod download
+RUN --mount=type=cache,target=/root/go,id=my_app_go_module,sharing=locked go mod download
 
-RUN make build_gotty
-RUN make build_bin
+RUN --mount=type=cache,target=/root/go,id=my_app_go_module,sharing=locked make build_gotty
+RUN --mount=type=cache,target=/root/go,id=my_app_go_module,sharing=locked make build_bin
 
-FROM alpine:3.16
+FROM alpine:3.20
 
 WORKDIR /
 
@@ -57,6 +60,7 @@ RUN ARCH=$(uname -m) \
     && tar zxvf fzf.tar.gz \
     && rm -rf fzf.tar.gz \
     && chmod -R 755 fzf \
+    && sed -i 's/https\:\/\/github.com/https\:\/\/gh.llkk.cc\/https\:\/\/github.com/g' fzf/install \
     && yes | fzf/install \
     && ln -s fzf/bin/fzf /usr/local/bin/fzf \
     && cd /tmp/ \

web/dashboard/src/business/storage/pvc/detail/index.vue

@@ -38,7 +38,19 @@
               </complex-table>
             </el-tab-pane>
             <el-tab-pane  label="pods" v-if="pods &&  pods.length>0">
-              <complex-table :data="pods">
+              <div style="float: left ; padding:10px ;" v-if="selects.length>0">
+                <el-button type="primary" size="small"
+                   @click="batchTerminal()"  :disabled="selects.length===0 || !checkExecPermissions()">
+                  {{ $t("commons.button.terminal") }}
+                </el-button>
+
+                <el-button type="primary" size="small"
+                   @click="batchLogs()"  :disabled="selects.length===0 || !checkLogPermissions()">
+                  {{ $t("commons.button.logs") }}
+                </el-button>
+             </div>
+              <complex-table :selects.sync="selects"  :data="pods">
+                <el-table-column type="selection" fix ></el-table-column>
                 <el-table-column label="namespace" min-width="30" >
                   <template v-slot:default="{ row }">
                     {{ row.metadata.namespace }}
@@ -72,6 +84,7 @@ import { getPvc } from "@/api/pvc"
 import { listPodsWithNsSelector } from "@/api/pods"
 import KoDetailBasic from "@/components/detail/detail-basic";
 import ComplexTable from "@/components/complex-table"
+import {checkPermissions} from "@/utils/permission"
 
 export default {
   name: "PersistentVolumeClaimDetail",
@@ -119,7 +132,8 @@ export default {
       storageClasses: [],
       currentVolumeClaimSource: "sc",
       //关联pod列表
-      pods: []
+      pods: [],
+      selects: [],
     }
   },
   methods: {
@@ -188,6 +202,56 @@ export default {
         query: { yamlShow: false }
       })
     },
+    checkExecPermissions () {
+      return checkPermissions({ scope: 'namespace', apiGroup: '', resource: 'pods/exec', verb: 'create' })
+    },
+    checkLogPermissions () {
+      return checkPermissions({ scope: 'namespace', apiGroup: '', resource: 'pods/log', verb: 'get' })
+    },
+    //批量打开终端
+    batchTerminal(){
+      if (this.selects.length > 0) {
+
+              let routeUrl = this.$router.resolve({
+                   path: "/batch-terminal",
+                   query: {
+                    cluster: this.cluster,
+                    terminals: JSON.stringify( this.selects.map((item) => {
+                      return {
+                         cluster: this.cluster,
+                         namespace: item.metadata.namespace,
+                         pod: item.metadata.name,
+                         container: item.spec.containers[0].name,
+                         type: "terminal"
+                      }
+                    }) )
+                   }
+              })
+              window.open(routeUrl.href, "_blank")
+      }
+    },
+    //批量打开日志
+    batchLogs(){
+      if (this.selects.length > 0) {
+
+              let routeUrl = this.$router.resolve({
+                   path: "/batch-terminal",
+                   query: {
+                    cluster: this.cluster,
+                    terminals: JSON.stringify( this.selects.map((item) => {
+                      return {
+                         cluster: this.cluster,
+                         namespace: item.metadata.namespace,
+                         pod: item.metadata.name,
+                         container: item.spec.containers[0].name,
+                         type: "log"
+                      }
+                    }) )
+                   }
+              })
+              window.open(routeUrl.href, "_blank")
+      }
+    }
   },
   watch: {
     yamlShow: function (newValue) {

web/dashboard/src/business/workloads/batch-terminal/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <div style="background-color: #1f2224;height:100%;" >
+
+        <el-row style="height:100%">
+            <el-col :span="24" style="height:100%" >
+                <el-tabs type="border-card" tabPosition="left" style="height:100%" v-model="activeName" >
+                    <el-tab-pane :label="terminal.namespace + '.' + terminal.pod" :key="index" :name="terminal.namespace + '.' + terminal.pod"
+                        v-for="(terminal, index) in terminals" :lazy="false">
+                          <Terminal :params="terminal" :ref="setItemRef"/>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import  Terminal from '@/business/workloads/terminal'
+export default {
+    name: "BatchTerminal",
+    components: {Terminal},
+    data() {
+        return {
+            terminals: [],
+            activeName: null,
+            refList: [],
+            refreshedMap:{}
+        }
+    },
+    methods: {
+        setItemRef(el) {
+          this.refList.push(el)
+        },
+    },
+    watch: {
+        activeName(newVal) {
+            this.$nextTick(() => {
+                this.refList.forEach((item) => {
+                    if(item.$parent.name === newVal) {
+                      if(!this.refreshedMap[newVal]){  
+                        item.getHeight()
+                        item.reloadIframe()
+                        this.refreshedMap[newVal]=true
+                      }
+                    }
+                })
+            })
+        }
+    },
+    created() {
+        this.terminals = JSON.parse(this.$route.query.terminals)
+        if(this.terminals && this.terminals.length>0) {
+            this.activeName = this.terminals[0].namespace + '.' + this.terminals[0].pod
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped></style>
+

web/dashboard/src/business/workloads/pods/index.vue

@@ -22,6 +22,16 @@
                    @click="exportToXlsx()" icon="el-icon-download">
         {{ $t("commons.button.export") }}
       </el-button>
+
+      <el-button type="primary" size="small"
+                   @click="batchTerminal()"  :disabled="selects.length===0 || !checkExecPermissions()">
+        {{ $t("commons.button.terminal") }}
+      </el-button>
+
+      <el-button type="primary" size="small"
+                   @click="batchLogs()"  :disabled="selects.length===0 || !checkLogPermissions()">
+        {{ $t("commons.button.logs") }}
+      </el-button>
     </div>
     <complex-table :selects.sync="selects" :data="data" v-loading="loading" :pagination-config="paginationConfig"
                    :search-config="searchConfig" @search="search" @sort-change='sortTableFun' :showFullTextSwitch="true" @update:isFullTextSearch="OnIsFullTextSearchChange">
@@ -541,6 +551,50 @@ export default {
     //改变选项"是否全文搜索"
     OnIsFullTextSearchChange(val){
       this.isFullTextSearch=val
+    },
+    //批量打开终端
+    batchTerminal(){
+      if (this.selects.length > 0) {
+
+              let routeUrl = this.$router.resolve({
+                   path: "/batch-terminal",
+                   query: {
+                    cluster: this.clusterName,
+                    terminals: JSON.stringify( this.selects.map((item) => {
+                      return {
+                         cluster: this.clusterName,
+                         namespace: item.metadata.namespace,
+                         pod: item.metadata.name,
+                         container: item.containers[0],
+                         type: "terminal"
+                      }
+                    }) )
+                   }
+              })
+              window.open(routeUrl.href, "_blank")
+      }
+    },
+    //批量打开日志
+    batchLogs(){
+      if (this.selects.length > 0) {
+
+              let routeUrl = this.$router.resolve({
+                   path: "/batch-terminal",
+                   query: {
+                    cluster: this.clusterName,
+                    terminals: JSON.stringify( this.selects.map((item) => {
+                      return {
+                         cluster: this.clusterName,
+                         namespace: item.metadata.namespace,
+                         pod: item.metadata.name,
+                         container: item.containers[0],
+                         type: "log"
+                      }
+                    }) )
+                   }
+              })
+              window.open(routeUrl.href, "_blank")
+      }
     }
   },
   mounted () {

web/dashboard/src/business/workloads/terminal/index.vue

@@ -43,7 +43,7 @@
     </el-row>
     <el-row>
       <div>
-        <iframe :key="isRefresh" :src="terminal.url" :style="{'height': height}" style="width: 100%;border: 0"></iframe>
+        <iframe :key="isRefresh" :src="terminal.url" :style="{'height': height}" style="width: 100%;border: 0" ref="myIframe"></iframe>
       </div>
     </el-row>
 
@@ -99,6 +99,7 @@ import { isLogin } from "@/api/auth"
 export default {
   name: "Terminal",
   components: { KoFormItem },
+  props: ["params"],
   data() {
     return {
       height: "",
@@ -248,14 +249,27 @@ export default {
         })
       }, 5000)
     },
+    reloadIframe(){
+      this.$refs.myIframe.contentWindow.location.reload(true)
+    }
   },
   created() {
-    this.terminal = {
+    if(!this.params) {
+     this.terminal = {
       cluster: this.$route.query.cluster,
       namespace: this.$route.query.namespace,
       pod: this.$route.query.pod,
       container: this.$route.query.container,
       type: this.$route.query.type,
+     }
+    }else{
+     this.terminal = {
+      cluster: this.params.cluster,
+      namespace: this.params.namespace,
+      pod: this.params.pod,
+      container: this.params.container,
+      type: this.params.type,
+     }
     }
     this.terminal.url = this.getTerminalUrl()
     this.loadContainters()