zishuo/KubePi
1
0
Fork 0
mirror of https://github.com/1Panel-dev/KubePi.git synced 2025-10-29 17:51:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(deployment): 去掉withoutLabel参数

Browse Source
This commit is contained in:
ssongliu
2021-07-08 11:31:16 +08:00
parent de118059cc
commit dde40ce6fa
24 changed files with 627 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
cmd/server/main.go
View File

@@ -1,7 +1,6 @@
package main package main
import ( import (
"embed"
"github.com/KubeOperator/ekko/internal/route" "github.com/KubeOperator/ekko/internal/route"
"github.com/KubeOperator/ekko/internal/server" "github.com/KubeOperator/ekko/internal/server"
"github.com/spf13/cobra" "github.com/spf13/cobra"
@@ -13,12 +12,6 @@ var (
serverBindPort int serverBindPort int
) )
//go:embed web/terminal
var embedWebTerminal embed.FS
//go:embed web/dashboard
var embedWebDashboard embed.FS
func init() { func init() {
RootCmd.Flags().StringVar(&serverBindHost, "server-bind-host", "", "ekko bind address") RootCmd.Flags().StringVar(&serverBindHost, "server-bind-host", "", "ekko bind address")
RootCmd.Flags().IntVar(&serverBindPort, "server-bind-port", 0, "ekko bind port") RootCmd.Flags().IntVar(&serverBindPort, "server-bind-port", 0, "ekko bind port")
@@ -29,8 +22,8 @@ var RootCmd = &cobra.Command{
Use: "ekko", Use: "ekko",
Short: "A dashboard for kubernetes", Short: "A dashboard for kubernetes",
RunE: func(cmd *cobra.Command, args []string) error { RunE: func(cmd *cobra.Command, args []string) error {
server.EmbedWebDashboard = embedWebDashboard // server.EmbedWebDashboard = embedWebDashboard
server.EmbedWebTerminal = embedWebTerminal // server.EmbedWebTerminal = embedWebTerminal
return server.Listen(route.InitRoute) return server.Listen(route.InitRoute)
}, },
} }

148
web/dashboard/package-lock.json generated
View File

@@ -1974,6 +1974,80 @@
"webpack-chain": "^6.4.0", "webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.3.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.0.tgz",
"integrity": "sha512-UDgni/tUVSdwHuQo+vuBmEgamWx88SuSlEb5fgdvHrlJSPB9qMBRF6W7bfPWSqDns425Gt1wxAUif+f+h/rWjg==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
} }
}, },
"@vue/cli-shared-utils": { "@vue/cli-shared-utils": {
@@ -13554,80 +13628,6 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.3.0",
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.0.tgz",
"integrity": "sha1-LxleS6D7DiY1ltaDDfF9Gjbok2w=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz",
"integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618559744568&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": { "vue-router": {
"version": "3.5.1", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",

4
web/dashboard/src/api/configmaps.js
View File

@@ -24,6 +24,10 @@ export function listConfigMaps (cluster_name, limit, continueToken, search) {
return get(url, param) return get(url, param)
} }
export function listConfigMapsWithNs (cluster_name, namespace) {
return get(`${namespaceMapUrl(cluster_name, namespace)}`);
}
export function getConfigMap (cluster_name, namespace, name) { export function getConfigMap (cluster_name, namespace, name) {
return get(`${namespaceMapUrl(cluster_name, namespace)}/${name}`) return get(`${namespaceMapUrl(cluster_name, namespace)}/${name}`)
} }

7
web/dashboard/src/business/configuration/secrets/create/index.vue
View File

@@ -85,14 +85,11 @@ import KoAnnotations from "@/components/ko-workloads/ko-annotations"
import KoSecretData from "@/components/ko-configuration/ko-secret-data" import KoSecretData from "@/components/ko-configuration/ko-secret-data"
import YamlEditor from "@/components/yaml-editor" import YamlEditor from "@/components/yaml-editor"
import {createSecret} from "@/api/secrets" import {createSecret} from "@/api/secrets"
import KoSecretDockerData from "@/components/ko-configuration/ko-secret-docker-data" // import KoSecretDockerData from "@/components/ko-configuration/ko-secret-docker-data"
import KoSecretKeys from "@/components/ko-configuration/ko-secret-keys"
import KoSecretAuthentication from "@/components/ko-configuration/ko-secret-authentication"
import KoSecretCertificate from "@/components/ko-configuration/ko-secret-certificate"
export default { export default {
name: "SecretCreate", name: "SecretCreate",
components: { KoSecretCertificate, KoSecretAuthentication, KoSecretKeys, KoSecretDockerData, YamlEditor, KoSecretData, LayoutContent, KoAnnotations, KoLabels }, components: { YamlEditor, KoSecretData, LayoutContent, KoAnnotations, KoLabels },
props: {}, props: {},
data () { data () {
return { return {

128
web/dashboard/src/business/workloads/deployments/create/index.vue
View File

@@ -5,17 +5,17 @@
<el-form label-position="top" ref="form" :model="form"> <el-form label-position="top" ref="form" :model="form">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="5"> <el-col :span="5">
<el-form-item label="Namespace" prop="metadata.namespace"> <el-form-item :label="$t('business.namespace.namespace')" prop="metadata.namespace">
<ko-form-item itemType="select" :selections="namespace_list" v-model="form.metadata.namespace" /> <ko-form-item @change="changeNs" itemType="select2" :selections="namespace_list" v-model="form.metadata.namespace" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<el-form-item label="Name" prop="metadata.name" :rules="requiredRules"> <el-form-item :label="$t('commons.table.name')" prop="metadata.name" :rules="requiredRules">
<ko-form-item itemType="input" v-model="form.metadata.name" /> <ko-form-item itemType="input" v-model="form.metadata.name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Replicas" prop="spec.replicas" :rules="numberRules"> <el-form-item :label="$t('business.workload.replicas')" prop="spec.replicas" :rules="numberRules">
<ko-form-item placeholder="Any text you want that better describes this resource" clearable itemType="number" v-model="form.spec.replicas" /> <ko-form-item placeholder="Any text you want that better describes this resource" clearable itemType="number" v-model="form.spec.replicas" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -24,8 +24,8 @@
<el-col :span="12"> <el-col :span="12">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-form-item label="Container"> <el-form-item :label="$t('business.workload.container')">
<ko-form-item @change="selectContainer" itemType="select" v-model="currentIndex" :selections="container_lists" /> <ko-form-item @change="selectContainer" itemType="select" v-model="currentContainerIndex" :selections="container_lists" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
@@ -46,9 +46,9 @@
<el-tabs style="margin-top: 30px;background-color: #141418;" type="border-card" v-model="activeName"> <el-tabs style="margin-top: 30px;background-color: #141418;" type="border-card" v-model="activeName">
<el-tab-pane label="General" name="General"> <el-tab-pane label="General" name="General">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-container ref="ko_container" :containerParentObj="form.spec.template.spec.containers[currentContainerIndex]" /> <ko-container ref="ko_container" :containerParentObj="form.spec.template.spec.containers[currentContainerIndex]" :secretList="secret_list_of_ns"/>
<ko-ports ref="ko_ports" :portParentObj="form.spec.template.spec.containers[currentContainerIndex]" /> <ko-ports ref="ko_ports" :portParentObj="form.spec.template.spec.containers[currentContainerIndex]" />
<ko-command ref="ko_command" :commandParentObj="form.spec.template.spec.containers[currentContainerIndex]" :namespace="form.metadata.namespace"/> <ko-command ref="ko_command" :commandParentObj="form.spec.template.spec.containers[currentContainerIndex]" :currentNamespace="form.metadata.namespace" :configMapList="config_map_list_of_ns" :secretList="secret_list_of_ns" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Resources" name="Resources"> <el-tab-pane label="Resources" name="Resources">
@@ -56,9 +56,9 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Health Check" name="Health Check"> <el-tab-pane label="Health Check" name="Health Check">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-health-check ref="ko_health_readiness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Readiness Check" health_check_helper="Containers will be removed from service endpoints when this check is failing. Recommended." /> <ko-health-check ref="ko_health_readiness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Readiness Check" />
<ko-health-check ref="ko_health_liveness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Liveness Check" health_check_helper="Containers will be restarted when this check is failing. Not recommended for most uses." /> <ko-health-check ref="ko_health_liveness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Liveness Check" />
<ko-health-check ref="ko_health_startup_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Startup Check" health_check_helper="Containers will wait until this check succeeds before attempting other health checks." /> <ko-health-check ref="ko_health_startup_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Startup Check" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Security Context" name="Security Context"> <el-tab-pane label="Security Context" name="Security Context">
@@ -69,8 +69,8 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Scheduling" name="Scheduling"> <el-tab-pane label="Scheduling" name="Scheduling">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-pod-scheduling ref="ko_pod_scheduling" :podSchedulingParentObj="form.spec.template.spec" /> <ko-pod-scheduling ref="ko_pod_scheduling" :podSchedulingParentObj="form.spec.template.spec" :namespaceList="namespace_list" />
<ko-node-scheduling ref="ko_node_scheduling" :nodeSchedulingParentObj="form.spec.template.spec" /> <ko-node-scheduling ref="ko_node_scheduling" :nodeSchedulingParentObj="form.spec.template.spec" :nodeList="node_list" />
<ko-tolerations ref="ko_toleration" :tolerationsParentObj="form.spec.template.spec" /> <ko-tolerations ref="ko_toleration" :tolerationsParentObj="form.spec.template.spec" />
</div> </div>
</el-tab-pane> </el-tab-pane>
@@ -79,12 +79,14 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Labels/Annotations" name="Labels/Annotations"> <el-tab-pane label="Labels/Annotations" name="Labels/Annotations">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-labels ref="ko_labels" :labelParentObj="form.spec.template.metadata" /> <ko-labels ref="ko_labels" :labelParentObj="form.metadata" labelTitle="Labels" />
<ko-annotations ref="ko_annotations" :annotationsParentObj="form.spec.template.metadata" /> <ko-annotations ref="ko_annotations" :annotationsParentObj="form.metadata" annotationsTitle="Annotations" />
<ko-labels ref="ko_labels" :labelParentObj="form.spec.template.metadata" labelTitle="Pod Labels" />
<ko-annotations ref="ko_annotations" :annotationsParentObj="form.spec.template.metadata" annotationsTitle="Pod Annotations" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Storage" name="Storage"> <el-tab-pane label="Storage" name="Storage">
<ko-storage ref="ko_storage" :storageParentObj="form.spec.template.spec" :containerIndex="currentIndex" /> <ko-storage ref="ko_storage" :storageParentObj="form.spec.template.spec" :currentContainerIndex="currentContainerIndex" :configMapList="config_map_list_of_ns" :secretList="secret_list_of_ns" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@@ -96,7 +98,7 @@
<el-button @click="onCancel()">{{ $t("commons.button.cancel") }}</el-button> <el-button @click="onCancel()">{{ $t("commons.button.cancel") }}</el-button>
<el-button v-if="!showYaml" @click="onEditYaml()">{{ $t("commons.button.edit_yaml") }}</el-button> <el-button v-if="!showYaml" @click="onEditYaml()">{{ $t("commons.button.edit_yaml") }}</el-button>
<el-button v-if="showYaml" @click="backToForm()">{{ $t("commons.button.back_form") }}</el-button> <el-button v-if="showYaml" @click="backToForm()">{{ $t("commons.button.back_form") }}</el-button>
<el-button v-loading="loading" @click="onSubmit()" type="primary"> <el-button v-loading="operationLoading" @click="onSubmit()" type="primary">
{{ $t("commons.button.create") }} {{ $t("commons.button.create") }}
</el-button> </el-button>
</div> </div>
@@ -123,8 +125,12 @@ import KoAnnotations from "@/components/ko-workloads/ko-annotations.vue"
import KoStorage from "@/components/ko-workloads/ko-storage.vue" import KoStorage from "@/components/ko-workloads/ko-storage.vue"
import YamlEditor from "@/components/yaml-editor" import YamlEditor from "@/components/yaml-editor"
import { createDeployment } from "@/api/workloads" import { createDeployment } from "@/api/workloads"
import { listNamespace } from "@/api/namespaces" import { listNamespace } from "@/api/namespaces"
import { listNodes } from "@/api/nodes"
import { listSecrets } from "@/api/secrets"
import { listConfigMaps } from "@/api/configmaps"
import Rule from "@/utils/rules" import Rule from "@/utils/rules"
export default { export default {
@@ -135,18 +141,15 @@ export default {
showYaml: false, showYaml: false,
yaml: {}, yaml: {},
isRefresh: false, isRefresh: false,
operation: "",
loading: false, loading: false,
namespace_list: [], namespace_list: [],
image_pull_policy_list: [ secret_list: [],
{ label: "Always", value: "Always" }, secret_list_of_ns: [],
{ label: "ifNotPresent", value: "ifNotPresent" }, config_map_list: [],
{ label: "Never", value: "Never" }, config_map_list_of_ns: [],
], node_list: [],
container_lists: [{ label: "Container-0", value: 0 }], container_lists: [{ label: "Container-0", value: 0 }],
activeName: "General", activeName: "General",
description: "",
currentIndex: 0,
currentContainerIndex: 0, currentContainerIndex: 0,
isValid: true, isValid: true,
unValidInfo: "", unValidInfo: "",
@@ -175,26 +178,69 @@ export default {
}, },
type: "apps.deployment", type: "apps.deployment",
}, },
clusterName: "",
operationLoading: false,
numberRules: [Rule.NumberRule], numberRules: [Rule.NumberRule],
requiredRules: [Rule.RequiredRule], requiredRules: [Rule.RequiredRule],
} }
}, },
methods: { methods: {
loadNamespace() { loadNamespace() {
listNamespace(this.$route.params.cluster).then((res) => {
this.namespace_list = [] this.namespace_list = []
listNamespace(this.clusterName).then((res) => {
for (const ns of res.items) { for (const ns of res.items) {
this.namespace_list.push({ label: ns.metadata.name, value: ns.metadata.name }) this.namespace_list.push({ label: ns.metadata.name, value: ns.metadata.name })
} }
}) })
}, },
loadSecrets() {
this.secret_list = []
listSecrets(this.clusterName).then((res) => {
this.secret_list = res.items
this.loadSecretsWithNs()
})
},
loadSecretsWithNs() {
this.secret_list_of_ns = []
for (const s of this.secret_list) {
if (s.metadata.namespace === this.form.metadata.namespace) {
this.secret_list_of_ns.push(s)
}
}
},
loadConfigMaps() {
this.config_map_list = []
listConfigMaps(this.clusterName).then((res) => {
this.config_map_list = res.items
this.loadConfigMapsWithNs()
})
},
loadConfigMapsWithNs() {
this.config_map_list_of_ns = []
for (const c of this.config_map_list) {
if (c.metadata.namespace === this.form.metadata.namespace) {
this.config_map_list_of_ns.push(c)
}
}
},
changeNs() {
this.loadSecretsWithNs()
this.loadConfigMapsWithNs()
},
loadNodes() {
this.node_list = []
listNodes(this.clusterName).then((res) => {
this.node_list = res.items
})
},
selectContainer() { selectContainer() {
this.form = this.gatherFormData() this.gatherFormValid()
if (!this.isValid) { if (!this.isValid) {
this.$notify({ title: "提示", message: this.unValidInfo }) this.$notify({ title: this.$t("commons.message_box.prompt"), message: this.unValidInfo })
return return
} }
this.currentContainerIndex = this.currentIndex this.form = this.gatherFormData()
this.isRefresh = !this.isRefresh this.isRefresh = !this.isRefresh
}, },
handleAddContainer() { handleAddContainer() {
@@ -213,6 +259,11 @@ export default {
} }
}, },
gatherFormValid() { gatherFormValid() {
this.$refs["form"].validate((valid) => {
if (!valid) {
return
}
})
if (!this.$refs.ko_container.checkIsValid()) { if (!this.$refs.ko_container.checkIsValid()) {
this.isValid = false this.isValid = false
this.unValidInfo = "ko_container 参数不完整" this.unValidInfo = "ko_container 参数不完整"
@@ -220,33 +271,21 @@ export default {
} }
}, },
gatherFormData() { gatherFormData() {
// general
this.$refs.ko_container.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_container.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// ports
this.$refs.ko_ports.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_ports.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// command
this.$refs.ko_command.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_command.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// resource
this.$refs.ko_resource.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_resource.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// health_check
this.$refs.ko_health_readiness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_health_readiness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
this.$refs.ko_health_liveness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_health_liveness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
this.$refs.ko_health_startup_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_health_startup_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// security context
this.$refs.ko_security_context.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_security_context.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// networking
this.$refs.ko_networking.transformation(this.form.spec.template.spec) this.$refs.ko_networking.transformation(this.form.spec.template.spec)
// scheduling
this.$refs.ko_node_scheduling.transformation(this.form.spec.template.spec) this.$refs.ko_node_scheduling.transformation(this.form.spec.template.spec)
this.$refs.ko_pod_scheduling.transformation(this.form.spec.template.spec) this.$refs.ko_pod_scheduling.transformation(this.form.spec.template.spec)
this.$refs.ko_toleration.transformation(this.form.spec.template.spec) this.$refs.ko_toleration.transformation(this.form.spec.template.spec)
// upgrade policy
this.$refs.ko_upgrade_policy.transformation(this.form.spec) this.$refs.ko_upgrade_policy.transformation(this.form.spec)
// labels
this.$refs.ko_labels.transformation(this.form.spec.template.metadata) this.$refs.ko_labels.transformation(this.form.spec.template.metadata)
// annotations
this.$refs.ko_annotations.transformation(this.form.spec.template.metadata) this.$refs.ko_annotations.transformation(this.form.spec.template.metadata)
// storage
this.$refs.ko_storage.transformation(this.form.spec.template.spec) this.$refs.ko_storage.transformation(this.form.spec.template.spec)
return this.form return this.form
}, },
@@ -257,7 +296,7 @@ export default {
let data = {} let data = {}
this.gatherFormValid() this.gatherFormValid()
if (!this.isValid) { if (!this.isValid) {
this.$notify({ title: "提示", message: this.unValidInfo }) this.$notify({ title: this.$t("commons.message_box.prompt"), message: this.unValidInfo })
return return
} }
if (this.showYaml) { if (this.showYaml) {
@@ -287,10 +326,13 @@ export default {
}, },
}, },
mounted() { mounted() {
this.currentIndex = 0
this.currentContainerIndex = 0 this.currentContainerIndex = 0
this.showYaml = this.$route.params.showYaml this.showYaml = this.$route.params.showYaml
this.clusterName = this.$route.query.cluster
this.loadNamespace() this.loadNamespace()
this.loadSecrets()
this.loadConfigMaps()
this.loadNodes()
}, },
} }
</script> </script>

19
web/dashboard/src/business/workloads/deployments/detail/index.vue
View File

@@ -45,18 +45,6 @@
</table> </table>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="24">
<br>
<el-card>
<div class="card_title">
<h3>{{ $t("business.configuration.data") }}</h3>
</div>
<div>
<json-editor :value="form">
</json-editor>
</div>
</el-card>
</el-col>
</el-row> </el-row>
</layout-content> </layout-content>
</template> </template>
@@ -64,29 +52,30 @@
<script> <script>
import LayoutContent from "@/components/layout/LayoutContent" import LayoutContent from "@/components/layout/LayoutContent"
import { getDeploymentByName } from "@/api/workloads" import { getDeploymentByName } from "@/api/workloads"
import JsonEditor from "@/components/json-editor"
export default { export default {
name: "DeploymentDetail", name: "DeploymentDetail",
components: { JsonEditor, LayoutContent }, components: { LayoutContent },
data() { data() {
return { return {
form: { form: {
metadata: {}, metadata: {},
}, },
loading: false, loading: false,
clusterName: "",
} }
}, },
methods: { methods: {
getDetail() { getDetail() {
this.loading = true this.loading = true
getDeploymentByName(this.$route.params.cluster, this.$route.params.namespace, this.$route.params.name).then((res) => { getDeploymentByName(this.clusterName, this.$route.params.namespace, this.$route.params.name).then((res) => {
this.form = res this.form = res
this.loading = false this.loading = false
}) })
}, },
}, },
created() { created() {
this.clusterName = this.$route.query.cluster
this.getDetail() this.getDetail()
}, },
} }

196
web/dashboard/src/business/workloads/deployments/edit/index.vue
View File

@@ -5,17 +5,17 @@
<el-form label-position="top" ref="form" :model="form"> <el-form label-position="top" ref="form" :model="form">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="5"> <el-col :span="5">
<el-form-item label="Namespace" prop="metadata.namespace"> <el-form-item :label="$t('business.namespace.namespace')" prop="metadata.namespace">
<ko-form-item itemType="select" :selections="namespace_list" v-model="form.metadata.namespace" /> <ko-form-item @change="changeNs" itemType="select2" :selections="namespace_list" v-model="form.metadata.namespace" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<el-form-item label="Name" prop="metadata.name" :rules="requiredRules"> <el-form-item :label="$t('commons.table.name')" prop="metadata.name" :rules="requiredRules">
<ko-form-item itemType="input" v-model="form.metadata.name" /> <ko-form-item itemType="input" v-model="form.metadata.name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Replicas" prop="spec.replicas" :rules="numberRules"> <el-form-item :label="$t('business.workload.replicas')" prop="spec.replicas" :rules="numberRules">
<ko-form-item placeholder="Any text you want that better describes this resource" clearable itemType="number" v-model="form.spec.replicas" /> <ko-form-item placeholder="Any text you want that better describes this resource" clearable itemType="number" v-model="form.spec.replicas" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -24,8 +24,8 @@
<el-col :span="12"> <el-col :span="12">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-form-item label="Container"> <el-form-item :label="$t('business.workload.container')">
<ko-form-item @change="selectContainer" itemType="select" v-model="currentIndex" :selections="container_lists" /> <ko-form-item @change="selectContainer" itemType="select" v-model="currentContainerIndex" :selections="container_lists" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
@@ -46,45 +46,47 @@
<el-tabs style="margin-top: 30px;background-color: #141418;" type="border-card" v-model="activeName"> <el-tabs style="margin-top: 30px;background-color: #141418;" type="border-card" v-model="activeName">
<el-tab-pane label="General" name="General"> <el-tab-pane label="General" name="General">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-container ref="ko_general" :containerParentObj="form.spec.template.spec.containers[currentContainerIndex]" /> <ko-container ref="ko_container" :containerParentObj="form.spec.template.spec.containers[currentContainerIndex]" :secretList="secret_list_of_ns" />
<ko-ports ref="ko_ports" :portParentObj="form.spec.template.spec.containers[currentContainerIndex]" /> <ko-ports ref="ko_ports" :portParentObj="form.spec.template.spec.containers[currentContainerIndex]" />
<ko-command ref="ko_command" :commandParentObj="form.spec.template.spec.containers[currentContainerIndex]" :namespace="form.metadata.namespace" /> <ko-command ref="ko_command" :commandParentObj="form.spec.template.spec.containers[currentContainerIndex]" :currentNamespace="form.metadata.namespace" :configMapList="config_map_list_of_ns" :secretList="secret_list_of_ns" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Resources" name="Resources">
<ko-resources ref="ko_resource" :key="isRefresh" :resourceParentObj="form.spec.template.spec.containers[currentContainerIndex]" />
</el-tab-pane>
<el-tab-pane label="Health Check" name="Health Check"> <el-tab-pane label="Health Check" name="Health Check">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-health-check ref="ko_health_readiness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Readiness Check" health_check_helper="Containers will be removed from service endpoints when this check is failing. Recommended." /> <ko-health-check ref="ko_health_readiness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Readiness Check" />
<ko-health-check ref="ko_health_liveness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Liveness Check" health_check_helper="Containers will be restarted when this check is failing. Not recommended for most uses." /> <ko-health-check ref="ko_health_liveness_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Liveness Check" />
<ko-health-check ref="ko_health_startup_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Startup Check" health_check_helper="Containers will wait until this check succeeds before attempting other health checks." /> <ko-health-check ref="ko_health_startup_check" :healthCheckParentObj="form.spec.template.spec.containers[currentContainerIndex]" style="margin-top=30px" health_check_type="Startup Check" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Security Context" name="Security Context"> <el-tab-pane label="Labels/Annotations" name="Labels/Annotations">
<ko-security-context ref="ko_security_context" :securityContextParentObj="form.spec.template.spec.containers[currentContainerIndex]" /> <div :key="isRefresh">
<ko-labels ref="ko_labels" :labelParentObj="form.metadata" labelTitle="Labels" />
<ko-annotations ref="ko_annotations" :annotationsParentObj="form.metadata" annotationsTitle="Annotations" />
<ko-labels ref="ko_labels" :labelParentObj="form.spec.template.metadata" labelTitle="Pod Labels" />
<ko-annotations ref="ko_annotations" :annotationsParentObj="form.spec.template.metadata" annotationsTitle="Pod Annotations" />
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Networking" name="Networking"> <el-tab-pane label="Networking" name="Networking">
<ko-networking ref="ko_networking" :key="isRefresh" :networkingParentObj="form.spec.template.spec" /> <ko-networking ref="ko_networking" :key="isRefresh" :networkingParentObj="form.spec.template.spec" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Scheduling" name="Scheduling"> <el-tab-pane label="Scheduling" name="Scheduling">
<div :key="isRefresh"> <div :key="isRefresh">
<ko-pod-scheduling ref="ko_pod_scheduling" :podSchedulingParentObj="form.spec.template.spec" /> <ko-pod-scheduling ref="ko_pod_scheduling" :podSchedulingParentObj="form.spec.template.spec" :namespaceList="namespace_list" />
<ko-node-scheduling ref="ko_node_scheduling" :podSchedulingParentObj="form.spec.template.spec" /> <ko-node-scheduling ref="ko_node_scheduling" :nodeSchedulingParentObj="form.spec.template.spec" :nodeList="node_list" />
<ko-tolerations ref="ko_tolerations" :tolerationsParentObj="form.spec.template.spec" /> <ko-tolerations ref="ko_toleration" :tolerationsParentObj="form.spec.template.spec" />
</div> </div>
</el-tab-pane>
<el-tab-pane label="Resources" name="Resources">
<ko-resources ref="ko_resource" :key="isRefresh" :resourceParentObj="form.spec.template.spec.containers[currentContainerIndex]" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Scaling/Upgrade Policy" name="Scaling/Upgrade Policy"> <el-tab-pane label="Scaling/Upgrade Policy" name="Scaling/Upgrade Policy">
<ko-upgrade-policy ref="ko_upgrade_policy" :key="isRefresh" :upgradePolicyParentObj="form.spec" /> <ko-upgrade-policy ref="ko_upgrade_policy" :key="isRefresh" :upgradePolicyParentObj="form.spec" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Labels/Annotations" name="Labels/Annotations"> <el-tab-pane label="Security Context" name="Security Context">
<div :key="isRefresh"> <ko-security-context ref="ko_security_context" :key="isRefresh" :securityContextParentObj="form.spec.template.spec.containers[currentContainerIndex]" />
<ko-labels ref="ko_labels" :labelParentObj="form.spec.template.metadata" />
<ko-annotations ref="ko_annotations" :annotationsParentObj="form.spec.template.metadata" />
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Storage" name="Storage"> <el-tab-pane label="Storage" name="Storage">
<ko-storage ref="ko_storage" :storageParentObj="form.spec.template.spec" :containerIndex="currentContainerIndex" /> <ko-storage :key="isRefresh" ref="ko_storage" :storageParentObj="form.spec.template.spec" :currentContainerIndex="currentContainerIndex" :configMapList="config_map_list_of_ns" :secretList="secret_list_of_ns" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@@ -121,11 +123,16 @@ import KoAnnotations from "@/components/ko-workloads/ko-annotations.vue"
import KoStorage from "@/components/ko-workloads/ko-storage.vue" import KoStorage from "@/components/ko-workloads/ko-storage.vue"
import YamlEditor from "@/components/yaml-editor" import YamlEditor from "@/components/yaml-editor"
import { getDeploymentByName, createDeployment } from "@/api/workloads" import { getDeploymentByName, createDeployment } from "@/api/workloads"
import { listNamespace } from "@/api/namespaces"
import { listNodes } from "@/api/nodes"
import { listSecrets } from "@/api/secrets"
import { listConfigMaps } from "@/api/configmaps"
import Rule from "@/utils/rules" import Rule from "@/utils/rules"
export default { export default {
name: "DeploymentForm", name: "DeploymentEdit",
components: { LayoutContent, KoFormItem, KoContainer, KoPorts, KoCommand, KoResources, KoHealthCheck, KoSecurityContext, KoNetworking, KoPodScheduling, KoNodeScheduling, KoTolerations, KoUpgradePolicy, KoLabels, KoAnnotations, KoStorage, YamlEditor }, components: { LayoutContent, KoFormItem, KoContainer, KoPorts, KoCommand, KoResources, KoHealthCheck, KoSecurityContext, KoNetworking, KoPodScheduling, KoNodeScheduling, KoTolerations, KoUpgradePolicy, KoLabels, KoAnnotations, KoStorage, YamlEditor },
data() { data() {
return { return {
@@ -134,28 +141,24 @@ export default {
isRefresh: false, isRefresh: false,
operation: "", operation: "",
loading: false, loading: false,
namespace_list: [ namespace_list: [],
{ label: "kube-system", value: "kube-system" }, secret_list: [],
{ label: "kube-public", value: "kube-public" }, secret_list_of_ns: [],
{ label: "kube-operator", value: "kube-operator" }, config_map_list: [],
{ label: "default", value: "default" }, config_map_list_of_ns: [],
], node_list: [],
image_pull_policy_list: [ container_lists: [],
{ label: "Always", value: "Always" },
{ label: "ifNotPresent", value: "ifNotPresent" },
{ label: "Never", value: "Never" },
],
container_lists: [{ label: "Container-0", value: 0 }],
activeName: "General", activeName: "General",
description: "", currentIndex: 0, // select框值
currentIndex: 0, currentContainerIndex: 0, // 实际当前值
currentContainerIndex: 0, isValid: true,
unValidInfo: "",
form: { form: {
apiVersion: "apps/v1", apiVersion: "apps/v1",
kind: "Deployment", kind: "Deployment",
metadata: { metadata: {
name: "my-test-deployment", name: "my-test-deployment",
namespace: "kube-operator", namespace: "",
}, },
spec: { spec: {
replicas: 1, replicas: 1,
@@ -175,6 +178,7 @@ export default {
}, },
type: "apps.deployment", type: "apps.deployment",
}, },
clusterName: "",
operationLoading: false, operationLoading: false,
numberRules: [Rule.NumberRule], numberRules: [Rule.NumberRule],
requiredRules: [Rule.RequiredRule], requiredRules: [Rule.RequiredRule],
@@ -182,13 +186,75 @@ export default {
}, },
methods: { methods: {
search() { search() {
getDeploymentByName(this.$route.params.cluster, this.$route.params.namespace, this.$route.params.name).then((res) => { getDeploymentByName(this.clusterName, this.$route.params.namespace, this.$route.params.name).then((res) => {
this.form = res this.form = res
this.container_lists = []
if (this.form.spec.template.spec.containers) {
for (let i = 0; i < this.form.spec.template.spec.containers.length; i++) {
this.container_lists.push({ label: this.form.spec.template.spec.containers[i].name, value: i })
}
} else {
this.container_lists = [{ label: "Container-0", value: 0 }]
}
this.isRefresh = !this.isRefresh this.isRefresh = !this.isRefresh
}) })
}, },
loadNamespace() {
this.namespace_list = []
listNamespace(this.clusterName).then((res) => {
for (const ns of res.items) {
this.namespace_list.push(ns.metadata.name)
}
})
},
loadSecrets() {
this.secret_list = []
listSecrets(this.clusterName).then((res) => {
this.secret_list = res.items
this.loadSecretsWithNs()
})
},
loadSecretsWithNs() {
this.secret_list_of_ns = []
for (const s of this.secret_list) {
if (s.metadata.namespace === this.form.metadata.namespace) {
this.secret_list_of_ns.push(s)
}
}
},
loadConfigMaps() {
this.config_map_list = []
listConfigMaps(this.clusterName).then((res) => {
this.config_map_list = res.items
this.loadConfigMapsWithNs()
})
},
loadConfigMapsWithNs() {
this.config_map_list_of_ns = []
for (const c of this.config_map_list) {
if (c.metadata.namespace === this.form.metadata.namespace) {
this.config_map_list_of_ns.push(c)
}
}
},
changeNs() {
this.loadSecretsWithNs()
this.loadConfigMapsWithNs()
},
loadNodes() {
this.node_list = []
listNodes(this.clusterName).then((res) => {
this.node_list = res.items
})
},
selectContainer() { selectContainer() {
this.form = this.transformYaml() this.gatherFormValid()
if (!this.isValid) {
this.$notify({ title: this.$t("commons.message_box.prompt"), message: this.unValidInfo })
return
}
this.form = this.gatherFormData()
this.currentContainerIndex = this.currentIndex this.currentContainerIndex = this.currentIndex
this.isRefresh = !this.isRefresh this.isRefresh = !this.isRefresh
}, },
@@ -207,32 +273,32 @@ export default {
} }
} }
}, },
transformYaml() { gatherFormValid() {
// general if (!this.$refs.ko_container.checkIsValid()) {
this.$refs.ko_general.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.isValid = false
// ports this.unValidInfo = "ko_container 参数不完整"
return
}
if (!this.$refs.ko_storage.checkIsValid()) {
this.isValid = false
this.unValidInfo = "ko_storage 参数不完整"
return
}
},
gatherFormData() {
this.$refs.ko_container.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
this.$refs.ko_ports.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_ports.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// command
this.$refs.ko_command.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_command.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// resource
this.$refs.ko_resource.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_resource.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// health_check
this.$refs.ko_health_readiness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_health_readiness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
this.$refs.ko_health_liveness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_health_liveness_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
this.$refs.ko_health_startup_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_health_startup_check.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// security context
this.$refs.ko_security_context.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex]) this.$refs.ko_security_context.transformation(this.form.spec.template.spec.containers[this.currentContainerIndex])
// networking
this.$refs.ko_networking.transformation(this.form.spec.template.spec) this.$refs.ko_networking.transformation(this.form.spec.template.spec)
// node scheduling
this.$refs.ko_pod_scheduling.transformation(this.form.spec.template.spec) this.$refs.ko_pod_scheduling.transformation(this.form.spec.template.spec)
// upgrade policy
this.$refs.ko_upgrade_policy.transformation(this.form.spec) this.$refs.ko_upgrade_policy.transformation(this.form.spec)
// labels
this.$refs.ko_labels.transformation(this.form.spec.template.metadata) this.$refs.ko_labels.transformation(this.form.spec.template.metadata)
// annotations
this.$refs.ko_annotations.transformation(this.form.spec.template.metadata) this.$refs.ko_annotations.transformation(this.form.spec.template.metadata)
// storage
this.$refs.ko_storage.transformation(this.form.spec.template.spec) this.$refs.ko_storage.transformation(this.form.spec.template.spec)
return this.form return this.form
}, },
@@ -241,10 +307,15 @@ export default {
}, },
onSubmit() { onSubmit() {
let data = {} let data = {}
this.gatherFormValid()
if (!this.isValid) {
this.$notify({ title: this.$t("commons.message_box.prompt"), message: this.unValidInfo })
return
}
if (this.showYaml) { if (this.showYaml) {
data = this.$refs.yaml_editor.getValue() data = this.$refs.yaml_editor.getValue()
} else { } else {
data = this.transformYaml() data = this.gatherFormData()
} }
this.loading = true this.loading = true
createDeployment(this.clusterName, data) createDeployment(this.clusterName, data)
@@ -260,7 +331,7 @@ export default {
}) })
}, },
onEditYaml() { onEditYaml() {
this.yaml = this.transformYaml() this.yaml = this.gatherFormData()
this.showYaml = true this.showYaml = true
}, },
backToForm() { backToForm() {
@@ -270,9 +341,14 @@ export default {
mounted() { mounted() {
this.currentIndex = 0 this.currentIndex = 0
this.currentContainerIndex = 0 this.currentContainerIndex = 0
this.clusterName = this.$route.query.cluster
if (this.$route.params.name) { if (this.$route.params.name) {
this.search() this.search()
} }
this.loadNamespace()
this.loadSecrets()
this.loadConfigMaps()
this.loadNodes()
}, },
} }
</script> </script>

18
web/dashboard/src/business/workloads/deployments/index.vue
View File

@@ -12,12 +12,12 @@
</el-button-group> </el-button-group>
</template> </template>
<el-table-column type="selection" fix></el-table-column> <el-table-column type="selection" fix></el-table-column>
<el-table-column sortable label="Name" prop="name"> <el-table-column sortable :label="$t('commons.table.name')" prop="name">
<template v-slot:default="{row}"> <template v-slot:default="{row}">
<el-link @click="openDetail(row)">{{ row.name }}</el-link> <el-link @click="openDetail(row)">{{ row.name }}</el-link>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column sortable label="Status" prop="status"> <el-table-column sortable :label="$t('commons.table.status')" prop="status">
<template v-slot:default="{row}"> <template v-slot:default="{row}">
<el-button v-if="row.status ==='Active'" type="success" size="mini" plain round> <el-button v-if="row.status ==='Active'" type="success" size="mini" plain round>
{{row.status}} {{row.status}}
@@ -27,7 +27,7 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column sortable label="Namespace" prop="namespace" /> <el-table-column sortable :label="$t('business.namespace.namespace')" prop="namespace" />
<el-table-column :label="$t('commons.table.created_time')" prop="metadata.creationTimestamp" fix> <el-table-column :label="$t('commons.table.created_time')" prop="metadata.creationTimestamp" fix>
<template v-slot:default="{row}"> <template v-slot:default="{row}">
{{ row.created_time | datetimeFormat }} {{ row.created_time | datetimeFormat }}
@@ -55,14 +55,14 @@ export default {
label: this.$t("commons.button.edit"), label: this.$t("commons.button.edit"),
icon: "el-icon-edit", icon: "el-icon-edit",
click: (row) => { click: (row) => {
this.$router.push({ name: "DeploymentEdit", params: { cluster: "songliucs", namespace: row.namespace, name: row.name, yamlShow: false } }) this.$router.push({ name: "DeploymentEdit", params: { namespace: row.namespace, name: row.name }, query: { yamlShow: false } })
}, },
}, },
{ {
label: this.$t("commons.button.edit_yaml"), label: this.$t("commons.button.edit_yaml"),
icon: "el-icon-edit", icon: "el-icon-edit",
click: (row) => { click: (row) => {
this.$router.push({ name: "DeploymentEdit", params: { cluster: "songliucs", namespace: row.namespace, name: row.name, yamlShow: true } }) this.$router.push({ name: "DeploymentEdit", params: { namespace: row.namespace, name: row.name }, query: { yamlShow: true } })
}, },
}, },
{ {
@@ -87,14 +87,15 @@ export default {
nextToken: "", nextToken: "",
}, },
selects: [], selects: [],
clusterName: "",
} }
}, },
methods: { methods: {
onCreate() { onCreate() {
this.$router.push({ name: "DeploymentCreate", params: { cluster: "songliucs", yamlShow: false } }) this.$router.push({ name: "DeploymentCreate", query: { yamlShow: false } })
}, },
openDetail(row) { openDetail(row) {
this.$router.push({ name: "DeploymentDetail", params: { cluster: "songliucs", namespace: row.namespace, name: row.name } }) this.$router.push({ name: "DeploymentDetail", params: { namespace: row.namespace, name: row.name } })
}, },
onDelete(row) { onDelete(row) {
this.$confirm(this.$t("commons.confirm_message.delete"), this.$t("commons.message_box.prompt"), { this.$confirm(this.$t("commons.confirm_message.delete"), this.$t("commons.message_box.prompt"), {
@@ -136,7 +137,7 @@ export default {
nextToken: "", nextToken: "",
} }
} }
listDeployments("songliucs") listDeployments(this.clusterName)
.then((res) => { .then((res) => {
for (const item of res.items) { for (const item of res.items) {
this.data.push({ this.data.push({
@@ -157,6 +158,7 @@ export default {
}, },
}, },
mounted() { mounted() {
this.clusterName = this.$route.query.cluster
this.search() this.search()
}, },
} }

5
web/dashboard/src/components/ko-form-item/index.vue
View File

@@ -4,6 +4,10 @@
<el-option v-for="(item, index) in selections" :key="index" :label="item.label" :value="item.value"/> <el-option v-for="(item, index) in selections" :key="index" :label="item.label" :value="item.value"/>
</el-select> </el-select>
<el-select v-if="itemType==='select2'" filterable clearable style="width: 100%;" v-bind="$attrs" v-on="$listeners">
<el-option v-for="(item, index) in selections" :key="index" :label="item" :value="item" />
</el-select>
<el-input v-if="itemType==='input'" clearable v-bind="$attrs" v-on="$listeners"> <el-input v-if="itemType==='input'" clearable v-bind="$attrs" v-on="$listeners">
<template v-if="deviderName" slot="append">{{ deviderName }}</template> <template v-if="deviderName" slot="append">{{ deviderName }}</template>
</el-input> </el-input>
@@ -42,7 +46,6 @@ export default {
name: "KoFormItem", name: "KoFormItem",
props: { props: {
itemType: String, // input, select, radio itemType: String, // input, select, radio
labelName: String,
selections: Array, // 如果是 select selections: Array, // 如果是 select
deviderName: String, // 如果需要加上单位 deviderName: String, // 如果需要加上单位
radios: Array, // 如果是 radio radios: Array, // 如果是 radio

7
web/dashboard/src/components/ko-workloads/ko-annotations.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<ko-card title="Annotations"> <ko-card :title="annotationsTitle">
<table style="width: 98%" class="tab-table"> <table style="width: 98%" class="tab-table">
<tr> <tr>
<th scope="col" width="48%" align="left"> <th scope="col" width="48%" align="left">
@@ -13,10 +13,10 @@
</tr> </tr>
<tr v-for="(row, index) in annotations" v-bind:key="index"> <tr v-for="(row, index) in annotations" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. foo" itemType="input" v-model="row.key" /> <ko-form-item placeholder="e.g. foo" itemType="input" v-model="row.key" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. bar" itemType="input" v-model="row.value" /> <ko-form-item placeholder="e.g. bar" itemType="textarea" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
@@ -43,6 +43,7 @@ export default {
components: { KoFormItem, KoCard }, components: { KoFormItem, KoCard },
props: { props: {
annotationsParentObj: Object, annotationsParentObj: Object,
annotationsTitle: String,
}, },
data() { data() {
return { return {

111
web/dashboard/src/components/ko-workloads/ko-command.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<ko-card title="Command"> <ko-card :key="reFresh" title="Command">
<el-form label-position="top" ref="form" :model="form"> <el-form label-position="top" ref="form" :model="form">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
@@ -10,7 +10,7 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Arguments" prop="args"> <el-form-item label="Arguments" prop="args">
<ko-form-item placeholder="e.g. /usr/sbin/httpd -f httpd.conf" itemType="input" v-model="form.args" /> <ko-form-item placeholder="e.g. /usr/sbin/httpd -f httpd.conf" itemType="textarea" v-model="form.args" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -44,24 +44,24 @@
</tr> </tr>
<tr v-for="(row, index) in form.envResource" v-bind:key="index"> <tr v-for="(row, index) in form.envResource" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row.type" :selections="type_list" /> <ko-form-item itemType="select2" v-model="row.type" :selections="type_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.prefix_or_alias" /> <ko-form-item itemType="input" v-model="row.prefix_or_alias" />
</td> </td>
<td> <td>
<ko-form-item v-if="row.type === 'Key/Value Pair' || row.type === 'Pod Field'" :withoutLabel="true" itemType="input" disabled placeholder="N/A" /> <ko-form-item v-if="row.type === 'Key/Value Pair' || row.type === 'Pod Field'" itemType="input" disabled placeholder="N/A" />
<ko-form-item v-if="row.type === 'Resource' || row.type === 'Field'" :withoutLabel="true" itemType="input" v-model="row.source" /> <ko-form-item v-if="row.type === 'Resource' || row.type === 'Field'" itemType="input" v-model="row.source" />
<ko-form-item v-if="row.type === 'ConfigMap key'" :withoutLabel="true" itemType="select" v-model="row.source" @change="changeConfigMap(row.source)" :selections="config_map_name_list" /> <ko-form-item v-if="row.type === 'ConfigMap key'" itemType="select2" v-model="row.source" @change="changeConfigMap(row.source)" :selections="config_map_name_list" />
<ko-form-item v-if="row.type === 'ConfigMap'" :withoutLabel="true" itemType="select" v-model="row.source" :selections="config_map_name_list" /> <ko-form-item v-if="row.type === 'ConfigMap'" itemType="select2" v-model="row.source" :selections="config_map_name_list" />
<ko-form-item v-if="row.type === 'Secret' || row.type === 'Secret key'" :withoutLabel="true" itemType="select" v-model="row.source" :selections="secret_list" /> <ko-form-item v-if="row.type === 'Secret' || row.type === 'Secret key'" itemType="select2" v-model="row.source" :selections="secret_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" v-if="row.type ==='Key/Value Pair' || row.type === 'Pod Field'" itemType="input" v-model="row.value" /> <ko-form-item v-if="row.type ==='Key/Value Pair' || row.type === 'Pod Field'" itemType="textarea" v-model="row.value" />
<ko-form-item :withoutLabel="true" v-if="row.type ==='Resource'" itemType="select" v-model="row.value" :selections="resource_value_list" /> <ko-form-item v-if="row.type ==='Resource'" itemType="select2" v-model="row.value" :selections="resource_value_list" />
<ko-form-item :withoutLabel="true" v-if="row.type ==='ConfigMap key'" itemType="select" v-model="row.value" :selections="config_map_value_list" /> <ko-form-item v-if="row.type ==='ConfigMap key'" itemType="select2" v-model="row.value" :selections="config_map_value_list" />
<ko-form-item :withoutLabel="true" v-if="row.type ==='Secret key'" itemType="select" v-model="row.value" :selections="secret_value_list" /> <ko-form-item v-if="row.type ==='Secret key'" itemType="select2" v-model="row.value" :selections="secret_value_list" />
<ko-form-item :withoutLabel="true" v-if="row.type === 'Secret' || row.type === 'ConfigMap'" disabled itemType="input" v-model="row.key" placeholder="N/A" /> <ko-form-item v-if="row.type === 'Secret' || row.type === 'ConfigMap'" disabled itemType="input" v-model="row.key" placeholder="N/A" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
@@ -82,23 +82,45 @@
<script> <script>
import KoFormItem from "@/components/ko-form-item/index" import KoFormItem from "@/components/ko-form-item/index"
import KoCard from "@/components/ko-card/index" import KoCard from "@/components/ko-card/index"
import { listSecrets } from "@/api/secrets"
import { listConfigMaps } from "@/api/configmaps"
export default { export default {
name: "KoCommand", name: "KoCommand",
components: { KoFormItem, KoCard }, components: { KoFormItem, KoCard },
props: { props: {
commandParentObj: Object, commandParentObj: Object,
namespace: String, currentNamespace: String,
configMapList: Array,
secretList: Array,
}, },
watch: { watch: {
namespace: { currentNamespace: {
handler(newName) { handler(newName) {
this.namespace = newName this.namespace = newName
}, },
immediate: true, immediate: true,
}, },
configMapList: {
handler(newName) {
this.config_map_name_list = []
this.config_map_list = []
for (const cm of newName) {
this.config_map_name_list.push(cm.metadata.name)
this.config_map_list.push(cm)
}
},
immediate: true,
deep: true,
},
secretList: {
handler(newName) {
this.secret_list = []
for (const s of newName) {
this.secret_list.push(s.metadata.name)
}
},
immediate: true,
deep: true,
},
}, },
data() { data() {
return { return {
@@ -106,36 +128,19 @@ export default {
args: "", args: "",
command: "", command: "",
workingDir: "", workingDir: "",
stdin: "", stdin: "No",
tty: false, tty: false,
envResource: [], envResource: [],
}, },
reFresh: false,
namespace: "",
config_map_name_list: [], config_map_name_list: [],
config_map_list: [], config_map_list: [],
config_map_value_list: [], config_map_value_list: [],
secret_list: [], secret_list: [],
resource_value_list: [ resource_value_list: ["limits.cpu", "limits.ephemeral-storage", "limits.memory", "requests.cpu", "requests.ephemeral-storage", "requests.memory"],
{ label: "limits.cpu", value: "limits.cpu" }, secret_value_list: ["ca.crt", "namespace", "token"],
{ label: "limits.ephemeral-storage", value: "limits.ephemeral-storage" }, type_list: ["Key/Value Pair", "Pod Field", "Resource", "ConfigMap key", "Secret key", "Secret", "ConfigMap"],
{ label: "limits.memory", value: "limits.memory" },
{ label: "requests.cpu", value: "requests.cpu" },
{ label: "requests.ephemeral-storage", value: "requests.ephemeral-storage" },
{ label: "requests.memory", value: "requests.memory" },
],
secret_value_list: [
{ label: "ca.crt", value: "ca.crt" },
{ label: "namespace", value: "namespace" },
{ label: "token", value: "token" },
],
type_list: [
{ label: "Key/Value Pair", value: "Key/Value Pair" },
{ label: "Pod Field", value: "Pod Field" },
{ label: "Resource", value: "Resource" },
{ label: "ConfigMap key", value: "ConfigMap key" },
{ label: "Secret key", value: "Secret key" },
{ label: "Secret", value: "Secret" },
{ label: "ConfigMap", value: "ConfigMap" },
],
stdin_list: [ stdin_list: [
{ label: "No", value: "No" }, { label: "No", value: "No" },
{ label: "Ones", value: "Ones" }, { label: "Ones", value: "Ones" },
@@ -144,30 +149,12 @@ export default {
} }
}, },
methods: { methods: {
loadSecrets() {
listSecrets(this.$route.params.cluster).then((res) => {
this.secret_list = []
for (const secret of res.items) {
this.secret_list.push({ label: secret.metadata.name, value: secret.metadata.name })
}
})
},
loadConfigMaps() {
listConfigMaps(this.$route.params.cluster).then((res) => {
this.config_map_name_list = []
for (const cm of res.items) {
this.config_map_name_list.push({ label: cm.metadata.name, value: cm.metadata.name })
this.config_map_list.push(cm)
}
})
},
changeConfigMap(comfigmap) { changeConfigMap(comfigmap) {
console.log(this.namespace)
this.config_map_value_list = [] this.config_map_value_list = []
for (const cm of this.config_map_list) { for (const cm of this.config_map_list) {
if (comfigmap === cm.metadata.name && cm.metadata.namespace === this.namespace) { if (comfigmap === cm.metadata.name && cm.metadata.namespace === this.namespace) {
for (const item of Object.keys(cm.data)) { for (const item of Object.keys(cm.data)) {
this.config_map_value_list.push({ label: item, value: item }) this.config_map_value_list.push(item)
} }
} }
} }
@@ -282,7 +269,7 @@ export default {
prefix: en.prefix_or_alias, prefix: en.prefix_or_alias,
configMapRef: { configMapRef: {
name: en.source, name: en.source,
optional: false, // 这个false是什么意思不知道 optional: false,
}, },
}) })
break break
@@ -298,8 +285,6 @@ export default {
}, },
}, },
mounted() { mounted() {
this.loadSecrets()
this.loadConfigMaps()
if (this.commandParentObj) { if (this.commandParentObj) {
if (this.commandParentObj.command) { if (this.commandParentObj.command) {
this.form.command = this.commandParentObj.command.join(",") this.form.command = this.commandParentObj.command.join(",")

25
web/dashboard/src/components/ko-workloads/ko-container.vue
View File

@@ -23,7 +23,7 @@
</el-row> </el-row>
<el-row> <el-row>
<el-form-item label="Pull Secrets" prop="imagePullSecrets"> <el-form-item label="Pull Secrets" prop="imagePullSecrets">
<ko-form-item itemType="select" multiple v-model="form.imagePullSecrets" :selections="secret_list" /> <ko-form-item itemType="select2" multiple v-model="form.imagePullSecrets" :selections="secret_list" />
</el-form-item> </el-form-item>
</el-row> </el-row>
</el-form> </el-form>
@@ -35,13 +35,25 @@
import KoFormItem from "@/components/ko-form-item/index" import KoFormItem from "@/components/ko-form-item/index"
import KoCard from "@/components/ko-card/index" import KoCard from "@/components/ko-card/index"
import Rule from "@/utils/rules" import Rule from "@/utils/rules"
import { listSecrets } from "@/api/secrets"
export default { export default {
name: "KoContainer", name: "KoContainer",
components: { KoFormItem, KoCard }, components: { KoFormItem, KoCard },
props: { props: {
containerParentObj: Object, containerParentObj: Object,
secretList: Array,
},
watch: {
secretList: {
handler(newName) {
this.secret_list = []
for (const s of newName) {
this.secret_list.push(s.metadata.name)
}
},
immediate: true,
deep: true,
},
}, },
data() { data() {
return { return {
@@ -62,14 +74,6 @@ export default {
} }
}, },
methods: { methods: {
loadSecrets() {
listSecrets(this.$route.params.cluster).then((res) => {
this.secret_list = []
for (const secret of res.items) {
this.secret_list.push({ label: secret.metadata.name, value: secret.metadata.name })
}
})
},
checkIsValid() { checkIsValid() {
let isValid = true let isValid = true
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
@@ -90,7 +94,6 @@ export default {
}, },
}, },
mounted() { mounted() {
this.loadSecrets()
if (this.containerParentObj) { if (this.containerParentObj) {
if (this.containerParentObj.name) { if (this.containerParentObj.name) {
this.form.name = this.containerParentObj.name this.form.name = this.containerParentObj.name

4
web/dashboard/src/components/ko-workloads/ko-data.vue
View File

@@ -13,10 +13,10 @@
</tr> </tr>
<tr v-for="label in data" v-bind:key="label.index"> <tr v-for="label in data" v-bind:key="label.index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. foo" clearable itemType="input" v-model="label.key"/> <ko-form-item placeholder="e.g. foo" clearable itemType="input" v-model="label.key"/>
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. bar" clearable itemType="textarea" v-model="label.value"/> <ko-form-item placeholder="e.g. bar" clearable itemType="textarea" v-model="label.value"/>
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleDelete(label)"> <el-button type="text" style="font-size: 10px" @click="handleDelete(label)">

4
web/dashboard/src/components/ko-workloads/ko-health-check.vue
View File

@@ -72,10 +72,10 @@
</tr> </tr>
<tr v-for="(row, index) in form.httpHeaders" v-bind:key="index"> <tr v-for="(row, index) in form.httpHeaders" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. foo" itemType="input" v-model="row.key" /> <ko-form-item placeholder="e.g. foo" itemType="input" v-model="row.key" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. bar" itemType="input" v-model="row.value" /> <ko-form-item placeholder="e.g. bar" itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">

7
web/dashboard/src/components/ko-workloads/ko-labels.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<ko-card title="Labels"> <ko-card :title="labelTitle">
<table style="width: 98%" class="tab-table"> <table style="width: 98%" class="tab-table">
<tr> <tr>
<th scope="col" width="48%" align="left"> <th scope="col" width="48%" align="left">
@@ -13,10 +13,10 @@
</tr> </tr>
<tr v-for="(row, index) in labels" v-bind:key="index"> <tr v-for="(row, index) in labels" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. foo" itemType="input" v-model="row.key" /> <ko-form-item placeholder="e.g. foo" itemType="input" v-model="row.key" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. bar" itemType="input" v-model="row.value" /> <ko-form-item placeholder="e.g. bar" itemType="textarea" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
@@ -43,6 +43,7 @@ export default {
components: { KoFormItem,KoCard }, components: { KoFormItem,KoCard },
props: { props: {
labelParentObj: Object, labelParentObj: Object,
labelTitle: String,
}, },
data() { data() {
return { return {

18
web/dashboard/src/components/ko-workloads/ko-networking.vue
View File

@@ -5,12 +5,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Network Mode" prop="hostNetwork"> <el-form-item label="Network Mode" prop="hostNetwork">
<ko-form-item itemType="select" v-model="form.hostNetwork" :selections="network_mode_list" /> <ko-form-item itemType="radio" v-model="form.hostNetwork" :radios="network_mode_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="DNS Policy" prop="dnsPolicy"> <el-form-item label="DNS Policy" prop="dnsPolicy">
<ko-form-item itemType="select" v-model="form.dnsPolicy" :selections="dns_policy_list" /> <ko-form-item itemType="radio" v-model="form.dnsPolicy" :radios="dns_policy_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -39,7 +39,7 @@
</tr> </tr>
<tr v-for="row in form.dnsConfig.nameservers" v-bind:key="row.index"> <tr v-for="row in form.dnsConfig.nameservers" v-bind:key="row.index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. 1.1.1.1" itemType="input" v-model="row.value" /> <ko-form-item placeholder="e.g. 1.1.1.1" itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleNameserversDelete(row.index)"> <el-button type="text" style="font-size: 10px" @click="handleNameserversDelete(row.index)">
@@ -62,7 +62,7 @@
</tr> </tr>
<tr v-for="row in form.dnsConfig.searches" v-bind:key="row.index"> <tr v-for="row in form.dnsConfig.searches" v-bind:key="row.index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. mycompany.com" itemType="input" v-model="row.value" /> <ko-form-item placeholder="e.g. mycompany.com" itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleSearchesDelete(row.index)"> <el-button type="text" style="font-size: 10px" @click="handleSearchesDelete(row.index)">
@@ -93,10 +93,10 @@
</tr> </tr>
<tr v-for="row in form.dnsConfig.options" v-bind:key="row.index"> <tr v-for="row in form.dnsConfig.options" v-bind:key="row.index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. foo" itemType="input" v-model="row.name" /> <ko-form-item placeholder="e.g. foo" itemType="input" v-model="row.name" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. bar" itemType="input" v-model="row.value" /> <ko-form-item placeholder="e.g. bar" itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleOptionsDelete(row.index)"> <el-button type="text" style="font-size: 10px" @click="handleOptionsDelete(row.index)">
@@ -126,10 +126,10 @@
</tr> </tr>
<tr v-for="(row, index) in form.hostAliases" v-bind:key="index"> <tr v-for="(row, index) in form.hostAliases" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. 1.1.1.1" itemType="input" v-model="row.ip" /> <ko-form-item placeholder="e.g. 1.1.1.1" itemType="input" v-model="row.ip" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. foo.com,bar.com" itemType="input" v-model="row.hostnames" /> <ko-form-item placeholder="e.g. foo.com,bar.com" itemType="input" v-model="row.hostnames" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleAliasDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleAliasDelete(index)">
@@ -173,7 +173,7 @@ export default {
subdomain: "", subdomain: "",
dnsPolicy: "", dnsPolicy: "",
hostname: "", hostname: "",
hostNetwork: "", hostNetwork: false,
hostAliases: [], hostAliases: [],
dnsConfig: { dnsConfig: {
nameservers: [], nameservers: [],

33
web/dashboard/src/components/ko-workloads/ko-node-scheduling.vue
View File

@@ -12,7 +12,7 @@
<el-row v-if="scheduling_type === 'specific_node'"> <el-row v-if="scheduling_type === 'specific_node'">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="Node Name"> <el-form-item label="Node Name">
<ko-form-item itemType="select" v-model="nodeName" :selections="node_list" /> <ko-form-item itemType="select2" v-model="nodeName" :selections="node_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -50,14 +50,14 @@
</tr> </tr>
<tr v-for="(row, index) in item.rules" v-bind:key="index"> <tr v-for="(row, index) in item.rules" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.key" /> <ko-form-item itemType="input" v-model="row.key" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row.operator" :selections="operator_list" /> <ko-form-item itemType="select" v-model="row.operator" :selections="operator_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" v-if="row.operator === 'Exists' || row.operator === 'DoesNotExist'" disabled itemType="input" value="N/A" /> <ko-form-item v-if="row.operator === 'Exists' || row.operator === 'DoesNotExist'" disabled itemType="input" value="N/A" />
<ko-form-item :withoutLabel="true" v-else itemType="input" v-model="row.value" /> <ko-form-item v-else itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleMatchDelete(item, index)"> <el-button type="text" style="font-size: 10px" @click="handleMatchDelete(item, index)">
@@ -83,13 +83,25 @@
<script> <script>
import KoFormItem from "@/components/ko-form-item/index" import KoFormItem from "@/components/ko-form-item/index"
import KoCard from "@/components/ko-card/index" import KoCard from "@/components/ko-card/index"
import { listNodes } from "@/api/nodes"
export default { export default {
name: "KoNodeScheduling", name: "KoNodeScheduling",
components: { KoFormItem, KoCard }, components: { KoFormItem, KoCard },
props: { props: {
nodeSchedulingParentObj: Object, nodeSchedulingParentObj: Object,
nodeList: Array,
},
watch: {
nodeList: {
handler(newName) {
this.node_list = []
for (const node of newName) {
this.node_list.push(node.metadata.name)
}
},
immediate: true,
deep: true,
},
}, },
data() { data() {
return { return {
@@ -117,14 +129,6 @@ export default {
} }
}, },
methods: { methods: {
loadNodes() {
listNodes(this.$route.params.cluster).then((res) => {
this.node_list = []
for (const node of res.items) {
this.node_list.push({ label: node.metadata.name, value: node.metadata.name })
}
})
},
handleNodeRulesAdd() { handleNodeRulesAdd() {
var item = { var item = {
priority: "Preferred", priority: "Preferred",
@@ -212,7 +216,6 @@ export default {
}, },
}, },
mounted() { mounted() {
this.loadNodes()
this.nodeSchedulings = [] this.nodeSchedulings = []
if (this.nodeSchedulingParentObj) { if (this.nodeSchedulingParentObj) {
if (this.nodeSchedulingParentObj.affinity) { if (this.nodeSchedulingParentObj.affinity) {

53
web/dashboard/src/components/ko-workloads/ko-pod-scheduling.vue
View File

@@ -27,7 +27,7 @@
</el-col> </el-col>
<el-col :span="12" v-if="item.namespaceOperation === 'selectNamespace'"> <el-col :span="12" v-if="item.namespaceOperation === 'selectNamespace'">
<el-form-item label="Namespace"> <el-form-item label="Namespace">
<ko-form-item itemType="select" v-model="item.namespaces" multiple :selections="namespace_list" /> <ko-form-item itemType="select2" v-model="item.namespaces" multiple :selections="namespace_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -47,14 +47,14 @@
</tr> </tr>
<tr v-for="(row, index) in item.rules" v-bind:key="index"> <tr v-for="(row, index) in item.rules" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.key" /> <ko-form-item itemType="input" v-model="row.key" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row.operator" :selections="operator_list" /> <ko-form-item itemType="select" v-model="row.operator" :selections="operator_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" v-if="row.operator === 'Exists' || row.operator === 'DoesNotExist'" disabled itemType="input" value="N/A" /> <ko-form-item v-if="row.operator === 'Exists' || row.operator === 'DoesNotExist'" disabled itemType="input" value="N/A" />
<ko-form-item :withoutLabel="true" v-else itemType="input" v-model="row.value" /> <ko-form-item v-else itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleMatchDelete(item, index)"> <el-button type="text" style="font-size: 10px" @click="handleMatchDelete(item, index)">
@@ -91,7 +91,16 @@ export default {
name: "KoPodScheduling", name: "KoPodScheduling",
components: { KoFormItem, KoCard }, components: { KoFormItem, KoCard },
props: { props: {
podScheduling: Object, podSchedulingParentObj: Object,
namespaceList: Array,
},
watch: {
namespaceList: {
handler(newName) {
this.namespace_list = newName
},
immediate: true,
},
}, },
data() { data() {
return { return {
@@ -115,12 +124,7 @@ export default {
{ label: "=", value: "In" }, { label: "=", value: "In" },
{ label: "!=", value: "NotIn" }, { label: "!=", value: "NotIn" },
], ],
namespace_list: [ namespace_list: [],
{ label: "kube-system", value: "kube-system" },
{ label: "kube-public", value: "kube-public" },
{ label: "kube-operator", value: "kube-operator" },
{ label: "default", value: "default" },
],
podSchedulings: [], podSchedulings: [],
} }
}, },
@@ -264,18 +268,19 @@ export default {
}, },
}, },
mounted() { mounted() {
this.namespace_list = this.namespaceList
this.podSchedulings = [] this.podSchedulings = []
if (this.podScheduling) { if (this.podSchedulingParentObj) {
if (this.podScheduling.affinity) { if (this.podSchedulingParentObj.affinity) {
if (this.podScheduling.affinity.podAffinity) { if (this.podSchedulingParentObj.affinity.podAffinity) {
if (this.podScheduling.affinity.podAffinity.requiredDuringSchedulingIgnoredDuringExecution) { if (this.podSchedulingParentObj.affinity.podAffinity.requiredDuringSchedulingIgnoredDuringExecution) {
const schedulings = this.podScheduling.affinity.podAffinity.requiredDuringSchedulingIgnoredDuringExecution const schedulings = this.podSchedulingParentObj.affinity.podAffinity.requiredDuringSchedulingIgnoredDuringExecution
for (const s of schedulings) { for (const s of schedulings) {
this.valueTrans("Affinity", "Required", s) this.valueTrans("Affinity", "Required", s)
} }
} }
if (this.podScheduling.affinity.podAffinity.preferredDuringSchedulingIgnoredDuringExecution) { if (this.podSchedulingParentObj.affinity.podAffinity.preferredDuringSchedulingIgnoredDuringExecution) {
const schedulings = this.podScheduling.affinity.podAffinity.preferredDuringSchedulingIgnoredDuringExecution const schedulings = this.podSchedulingParentObj.affinity.podAffinity.preferredDuringSchedulingIgnoredDuringExecution
for (const s of schedulings) { for (const s of schedulings) {
if (s.podAffinityTerm) { if (s.podAffinityTerm) {
this.valueTrans("Affinity", "Preferred", s.podAffinityTerm) this.valueTrans("Affinity", "Preferred", s.podAffinityTerm)
@@ -283,15 +288,15 @@ export default {
} }
} }
} }
if (this.podScheduling.affinity.podAntiAffinity) { if (this.podSchedulingParentObj.affinity.podAntiAffinity) {
if (this.podScheduling.affinity.podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution) { if (this.podSchedulingParentObj.affinity.podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution) {
const schedulings = this.podScheduling.affinity.podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution const schedulings = this.podSchedulingParentObj.affinity.podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution
for (const s of schedulings) { for (const s of schedulings) {
this.valueTrans("Anti-Affinity", "Required", s) this.valueTrans("Anti-Affinity", "Required", s)
} }
} }
if (this.podScheduling.affinity.podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution) { if (this.podSchedulingParentObj.affinity.podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution) {
const schedulings = this.podScheduling.affinity.podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution const schedulings = this.podSchedulingParentObj.affinity.podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution
for (const s of schedulings) { for (const s of schedulings) {
if (s.podAffinityTerm) { if (s.podAffinityTerm) {
this.valueTrans("Anti-Affinity", "Preferred", s.podAffinityTerm) this.valueTrans("Anti-Affinity", "Preferred", s.podAffinityTerm)

20
web/dashboard/src/components/ko-workloads/ko-ports.vue
View File

@@ -15,28 +15,28 @@
</tr> </tr>
<tr v-for="(row, index) in ports" v-bind:key="index"> <tr v-for="(row, index) in ports" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row._serviceType" :selections="service_type_list" /> <ko-form-item itemType="select" v-model="row._serviceType" :selections="service_type_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.name" /> <ko-form-item itemType="input" v-model="row.name" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" placeholder="e.g. 8080" itemType="number" v-model.number="row.containerPort" /> <ko-form-item placeholder="e.g. 8080" itemType="number" v-model.number="row.containerPort" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row.protocol" :selections="protocol_list" /> <ko-form-item itemType="select" v-model="row.protocol" :selections="protocol_list" />
</td> </td>
<td> <td>
<el-switch v-model="row.expose" /> <el-switch v-model="row.expose" />
</td> </td>
<td> <td>
<ko-form-item :disabled="row._serviceType === 'NodePort' || row._serviceType === 'LoadBalancer' || !row.expose" :withoutLabel="true" placeholder="e.g. 80" itemType="number" v-model.number="row.hostPort" /> <ko-form-item :disabled="row._serviceType === 'NodePort' || row._serviceType === 'LoadBalancer' || !row.expose" placeholder="e.g. 80" itemType="number" v-model.number="row.hostPort" />
</td> </td>
<td> <td>
<ko-form-item :disabled="row._serviceType === 'ClusterIP' || row._serviceType === '' || !row.expose" :withoutLabel="true" placeholder="e.g. 80" itemType="number" v-model.number="row._listeningPort" /> <ko-form-item :disabled="row._serviceType === 'ClusterIP' || row._serviceType === '' || !row.expose" placeholder="e.g. 80" itemType="number" v-model.number="row._listeningPort" />
</td> </td>
<td> <td>
<ko-form-item :disabled="row._serviceType === 'NodePort' || row._serviceType === 'LoadBalancer' || !row.expose" :withoutLabel="true" placeholder="e.g. 1.1.1.1" itemType="input" v-model="row.hostIP" /> <ko-form-item :disabled="row._serviceType === 'NodePort' || row._serviceType === 'LoadBalancer' || !row.expose" placeholder="e.g. 1.1.1.1" itemType="input" v-model="row.hostIP" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleDelete(index)">
@@ -72,7 +72,7 @@ export default {
{ label: "UDP", value: "UDP" }, { label: "UDP", value: "UDP" },
], ],
service_type_list: [ service_type_list: [
{ label: "Do not create a service", value: "" }, { label: "Not create a service", value: "" },
{ label: "Cluster IP", value: "ClusterIP" }, { label: "Cluster IP", value: "ClusterIP" },
{ label: "Node Port", value: "NodePort" }, { label: "Node Port", value: "NodePort" },
{ label: "Load Balancer", value: "LoadBalancer" }, { label: "Load Balancer", value: "LoadBalancer" },
@@ -134,9 +134,9 @@ export default {
itemPo.expose = po.expose itemPo.expose = po.expose
itemPo.protocol = po.protocol itemPo.protocol = po.protocol
itemPo.containerPort = po.containerPort itemPo.containerPort = po.containerPort
itemPo._serviceType = po._serviceType itemPo._serviceType = po._serviceType ? po._serviceType : ""
if (po.expose) { if (po.expose) {
switch (po._listeningPort) { switch (po._serviceType) {
case "": case "":
case "ClusterIP": case "ClusterIP":
itemPo.hostPort = po.hostPort itemPo.hostPort = po.hostPort

17
web/dashboard/src/components/ko-workloads/ko-security-context.vue
View File

@@ -36,12 +36,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Add Capabilities" prop="capabilities.add"> <el-form-item label="Add Capabilities" prop="capabilities.add">
<ko-form-item multiple itemType="select" v-model="form.capabilities.add" :selections="capability_list" /> <ko-form-item multiple itemType="select2" v-model="form.capabilities.add" :selections="capability_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Drop Capabilities" prop="capabilities.drop"> <el-form-item label="Drop Capabilities" prop="capabilities.drop">
<ko-form-item multiple itemType="select" v-model="form.capabilities.drop" :selections="capability_list" /> <ko-form-item multiple itemType="select2" v-model="form.capabilities.drop" :selections="capability_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -78,16 +78,11 @@ export default {
{ label: "No", value: false }, { label: "No", value: false },
{ label: "Yes: container has a read-only root filesystem", value: true }, { label: "Yes: container has a read-only root filesystem", value: true },
], ],
capability_list: [ capability_list: ["CHOWN", "DAC_OVERRIDE", "DAC_READ_SEARCH", "FOWNER", "FSETID", "KILL", "SETGID", "SETUID", "SETPCAP", "LINUX_IMMUTABLE", "NET_BIND_SERVICE", "NET_BROADCAST", "NET_ADMIN", "NET_RAW", "IPC_LOCK", "IPC_OWNER", "SYS_MODULE", "SYS_RAWIO", "SYS_CHROOT", "SYS_PTRACE", "SYS_PACCT", "SYS_ADMIN", "SYS_BOOT", "SYS_NICE", "SYS_RESOURCE", "SYS_TIME", "SYS_TTY_CONFIG", "MKNOD", "LEASE", "AUDIT_WRITE", "AUDIT_CONTROL", "SETFCAP", "MAC_OVERRIDE", "MAC_ADMIN", "SYSLOG", "WAKE_ALARM", "BLOCK_SUSPEND", "AUDIT_READ", "PERFMON", "BPF", "CHECKPOINT_RESTORE"],
{ label: "ALL", value: "ALL" },
{ label: "AUDIT_CONTROL", value: "AUDIT_CONTROL" },
{ label: "AUDIT_WRITE", value: "AUDIT_WRITE" },
{ label: "BLOCK_SUSPEND", value: "BLOCK_SUSPEND" },
],
form: { form: {
privileged: "", privileged: false,
allowPrivilegeEscalation: "", allowPrivilegeEscalation: true,
runAsNonRoot: "", runAsNonRoot: false,
readOnlyRootFilesystem: false, readOnlyRootFilesystem: false,
runAsUser: "", runAsUser: "",
capabilities: { capabilities: {

203
web/dashboard/src/components/ko-workloads/ko-storage.vue
View File

@@ -7,17 +7,17 @@
<span>{{item._type}}</span> <span>{{item._type}}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="handleVolumeDelete(index)">删 除</el-button> <el-button style="float: right; padding: 3px 0" type="text" @click="handleVolumeDelete(index)">删 除</el-button>
</div> </div>
<el-form label-position="top" ref="form"> <el-form label-position="top">
<div v-if="item._type === 'persistentVolumeClaim'"> <div v-if="item._type === 'persistentVolumeClaim'">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Volume Name"> <el-form-item label="Volume Name" required>
<ko-form-item itemType="input" v-model="item.name" /> <ko-form-item itemType="input" v-model="item.metadata.name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Persistent Volume Claim"> <el-form-item label="Persistent Volume Claim">
<ko-form-item itemType="select" v-model="item.weight" :selections="pvc_list" /> <ko-form-item itemType="select2" v-model="item.metadata.weight" :selections="pvc_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -26,7 +26,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Volume Name"> <el-form-item label="Volume Name">
<ko-form-item itemType="input" v-model="item.name" /> <ko-form-item itemType="input" v-model="item.metadata.name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@@ -38,12 +38,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="ConfigMap"> <el-form-item label="ConfigMap">
<ko-form-item itemType="select" v-model="item.configMap.name" :selections="config_map_name_list" /> <ko-form-item itemType="select2" v-model="item.metadata.configMap.name" :selections="config_map_name_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Optional"> <el-form-item label="Optional">
<ko-form-item itemType="radio" v-model="item.configMap.optional" :radios="optional_list" /> <ko-form-item itemType="radio" v-model="item.metadata.configMap.optional" :radios="optional_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -52,24 +52,24 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Volume Name"> <el-form-item label="Volume Name">
<ko-form-item itemType="input" v-model="item.name" /> <ko-form-item itemType="input" v-model="item.metadata.name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Default Mode"> <el-form-item label="Default Mode">
<ko-form-item itemType="input" v-model.number="item.defaultMode" /> <ko-form-item itemType="input" v-model="item.defaultMode" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Secret"> <el-form-item label="Secret">
<ko-form-item itemType="select" v-model="item.secret.name" :selections="secret_list" /> <ko-form-item itemType="select2" v-model="item.metadata.secret.name" :selections="secret_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Optional"> <el-form-item label="Optional">
<ko-form-item itemType="radio" v-model="item.secret.optional" :radios="optional_list" /> <ko-form-item itemType="radio" v-model="item.metadata.secret.optional" :radios="optional_list" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -83,25 +83,25 @@
<th scope="col" width="8%" align="left"><label>read only</label></th> <th scope="col" width="8%" align="left"><label>read only</label></th>
<th align="left"></th> <th align="left"></th>
</tr> </tr>
<tr v-for="(row, index) in volumeMounts" v-bind:key="index"> <tr v-for="(row, index) in item.volumeMounts" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.mountPath" /> <ko-form-item itemType="input" v-model="row.mountPath" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.subPath" /> <ko-form-item itemType="input" v-model="row.subPath" />
</td> </td>
<td> <td>
<el-checkbox v-model="row.readOnly" /> <el-checkbox v-model="row.readOnly" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleMountDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleMountDelete(item, index)">
{{ $t("commons.button.delete") }} {{ $t("commons.button.delete") }}
</el-button> </el-button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td align="left"> <td align="left">
<el-button @click="handleMountAdd()">Add Mount</el-button> <el-button @click="handleMountAdd(item)">Add Mount</el-button>
</td> </td>
</tr> </tr>
</table> </table>
@@ -124,21 +124,50 @@
<script> <script>
import KoFormItem from "@/components/ko-form-item/index" import KoFormItem from "@/components/ko-form-item/index"
import KoCard from "@/components/ko-card/index" import KoCard from "@/components/ko-card/index"
import { listSecrets } from "@/api/secrets"
import { listConfigMaps } from "@/api/configmaps"
export default { export default {
name: "KoStorage", name: "KoStorage",
components: { KoFormItem, KoCard }, components: { KoFormItem, KoCard },
props: { props: {
storageParentObj: Object, storageParentObj: Object,
containerIndex: Number, currentContainerIndex: Number,
configMapList: Array,
secretList: Array,
},
watch: {
currentContainerIndex: {
handler(newName) {
this.containerIndex = newName
},
immediate: true,
},
configMapList: {
handler(newName) {
this.config_map_name_list = []
for (const cm of newName) {
this.config_map_name_list.push(cm.metadata.name)
}
},
immediate: true,
deep: true,
},
secretList: {
handler(newName) {
this.secret_list = []
for (const s of newName) {
this.secret_list.push(s.metadata.name)
}
},
immediate: true,
deep: true,
},
}, },
data() { data() {
return { return {
containerIndex: 0,
volumes: [], volumes: [],
volumeAdd: [],
pvc_list: [], pvc_list: [],
volumeMounts: [],
secret_list: [], secret_list: [],
config_map_name_list: [], config_map_name_list: [],
volume_type_list: [ volume_type_list: [
@@ -153,91 +182,145 @@ export default {
} }
}, },
methods: { methods: {
loadSecrets() {
listSecrets(this.$route.params.cluster).then((res) => {
this.secret_list = []
for (const secret of res.items) {
this.secret_list.push({ label: secret.metadata.name, value: secret.metadata.name })
}
})
},
loadConfigMaps() {
listConfigMaps(this.$route.params.cluster).then((res) => {
this.config_map_name_list = []
for (const cm of res.items) {
this.config_map_name_list.push({ label: cm.metadata.name, value: cm.metadata.name })
}
})
},
handleVolumeAdd(type) { handleVolumeAdd(type) {
let item = {}
item._type = type
item.volumeMounts = []
item.defaultMode = 644
switch (type) { switch (type) {
case "configMap": case "configMap":
this.volumes.push({ item.metadata = {
_type: type,
name: "", name: "",
configMap: { configMap: {
name: "", name: "",
defaultMode: "", defaultMode: 644,
optional: true, optional: true,
}, },
}) }
break break
case "secret": case "secret":
this.volumes.push({ item.metadata = {
_type: type,
name: "", name: "",
secret: { secret: {
name: "", name: "",
defaultMode: "", defaultMode: 644,
optional: true, optional: true,
}, },
}) }
break break
case "persistentVolumeClaim": case "persistentVolumeClaim":
this.volumes.push({ item.metadata = {
_type: type,
name: "", name: "",
persistentVolumeClaim: { persistentVolumeClaim: {
claimName: "", claimName: "",
readOnly: false, readOnly: false,
}, },
}) }
break break
} }
this.volumes.push(item)
this.volumeAdd.push(item)
}, },
handleVolumeDelete(index) { handleVolumeDelete(index) {
for (const vo of this.volumes) {
for (let i = 0; i < this.volumeAdd; i++) {
if (vo.metadata.name == this.volumeAdd[i].metadata.name) {
this.volumeAdd.splice(i, 1)
}
}
}
this.volumes.splice(index, 1) this.volumes.splice(index, 1)
}, },
handleMountAdd() { handleMountAdd(item) {
var item = { item.volumeMounts.push({
mountPath: "", mountPath: "",
subPath: "", subPath: "",
readOnly: false, readOnly: false,
} })
this.volumeMounts.push(item)
}, },
handleMountDelete(index) { handleMountDelete(item, index) {
this.volumeMounts.splice(index, 1) item.volumeMounts.splice(index, 1)
}, },
checkIsValid() {
for (const vo of this.volumes) {
if (vo.metadata.name == "") {
return false
}
for (const mo of vo.volumeMounts) {
if (mo.mountPath != "") {
return false
}
}
}
},
transformation(parentFrom) { transformation(parentFrom) {
parentFrom.volume = this.volumes if (!parentFrom.volumes) {
parentFrom.containers[this.containerIndex].volumeMounts = this.volumeMounts parentFrom.volumes = []
}
parentFrom.containers[this.containerIndex].volumeMounts = []
for (const volume of this.volumeAdd) {
switch (volume._type) {
case "configMap":
if (volume.defaultMode) {
volume.configMap.defaultMode = parseInt(volume.defaultMode)
}
break
case "secret":
if (volume.defaultMode) {
volume.secret.defaultMode = parseInt(volume.defaultMode)
}
break
}
parentFrom.volumes.push(volume.metadata)
}
for (const volume of this.volumes) {
if (volume.volumeMounts.length !== 0) {
for (const mount of volume.volumeMounts) {
parentFrom.containers[this.containerIndex].volumeMounts.push({ mountPath: mount.mountPath, subPath: mount.subPath, readOnly: mount.readOnly })
}
}
}
}, },
}, },
mounted() { mounted() {
this.loadSecrets()
this.loadConfigMaps()
this.volumes = [] this.volumes = []
this.volumeMounts = [] let volumeMounts = []
if (this.storageParentObj.containers.length - 1 >= this.containerIndex) { if (this.storageParentObj.containers.length - 1 >= this.containerIndex) {
if (this.storageParentObj.containers[this.containerIndex].volumeMounts) { if (this.storageParentObj.containers[this.containerIndex].volumeMounts) {
this.volumeMounts = this.storageParentObj.containers[this.containerIndex].volumeMounts volumeMounts = this.storageParentObj.containers[this.containerIndex].volumeMounts
} }
} }
if (this.storageParentObj.volumes) { if (this.storageParentObj.volumes) {
this.volumes = this.storageParentObj.volumes for (const volume of this.storageParentObj.volumes) {
for (const mount of volumeMounts) {
if (mount.name === volume.name) {
let item = {}
item.volumeMounts = []
item.metadata = volume
item.volumeMounts.push(mount)
if (volume.configMap) {
if (volume.configMap.defaultMode) {
item.defaultMode = volume.configMap.defaultMode.toString(8)
}
item._type = "configMap"
this.volumes.push(item)
}
if (volume.secret) {
if (volume.secret.defaultMode) {
item.defaultMode = volume.secret.defaultMode.toString(8)
}
item._type = "secret"
this.volumes.push(item)
}
if (volume.persistentVolumeClaim) {
item._type = "persistentVolumeClaim"
this.volumes.push(item)
}
}
}
}
} }
}, },
} }

11
web/dashboard/src/components/ko-workloads/ko-tolerations.vue
View File

@@ -22,19 +22,20 @@
</tr> </tr>
<tr v-for="(row, index) in tolerations" v-bind:key="index"> <tr v-for="(row, index) in tolerations" v-bind:key="index">
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.key" /> <ko-form-item itemType="input" v-model="row.key" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row.operator" :selections="operator_list" /> <ko-form-item itemType="select" v-model="row.operator" :selections="operator_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="input" v-model="row.value" /> <ko-form-item v-if="row.operator === 'Exists'" disabled placeholder="N/A" itemType="input" v-model="row.value" />
<ko-form-item v-if="row.operator !== 'Exists'" itemType="input" v-model="row.value" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" itemType="select" v-model="row.effect" :selections="effect_list" /> <ko-form-item itemType="select" v-model="row.effect" :selections="effect_list" />
</td> </td>
<td> <td>
<ko-form-item :withoutLabel="true" :disabled="row.effect !== 'NoExecute'" itemType="number" v-model.number="row.tolerationSeconds" /> <ko-form-item :disabled="row.effect !== 'NoExecute'" itemType="number" deviderName="Seconds" v-model.number="row.tolerationSeconds" />
</td> </td>
<td> <td>
<el-button type="text" style="font-size: 10px" @click="handleTolerationsDelete(index)"> <el-button type="text" style="font-size: 10px" @click="handleTolerationsDelete(index)">

4
web/dashboard/src/i18n/lang/zh-CN.js
View File

@@ -139,7 +139,9 @@ const message = {
description: "描述" description: "描述"
}, },
workload: { workload: {
workload: "工作量" workload: "工作量",
replicas: "副本数",
container: "容器",
}, },
network: { network: {
network: "网络" network: "网络"

6
web/dashboard/src/router/modules/workloads.js
View File

@@ -27,7 +27,7 @@ const Workloads = {
} }
}, },
{ {
path: "/deployments/detail/:cluster/:namespace/:name", path: "/deployments/detail/:namespace/:name",
name: "DeploymentDetail", name: "DeploymentDetail",
hidden: true, hidden: true,
component: () => import("@/business/workloads/deployments/detail"), component: () => import("@/business/workloads/deployments/detail"),
@@ -36,7 +36,7 @@ const Workloads = {
} }
}, },
{ {
path: "/deployments/create/:cluster/:yamlShow", path: "/deployments/create",
name: "DeploymentCreate", name: "DeploymentCreate",
hidden: true, hidden: true,
component: () => import("@/business/workloads/deployments/create"), component: () => import("@/business/workloads/deployments/create"),
@@ -45,7 +45,7 @@ const Workloads = {
} }
}, },
{ {
path: "/deployments/edit/:cluster/:namespace/:name/:yamlShow", path: "/deployments/edit/:namespace/:name",
name: "DeploymentEdit", name: "DeploymentEdit",
hidden: true, hidden: true,
component: () => import("@/business/workloads/deployments/edit"), component: () => import("@/business/workloads/deployments/edit"),