Skip to content

A
apaas-ui
Commit fcd1cc85 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

应用构建（镜像形式）步骤调整

parent 3c9b2420
Hide whitespace changes
Inline Side-by-side
Showing with 335 additions and 342 deletions
src/pages/workbench/app_build.vue
View file @ fcd1cc85
......@@ -7,163 +7,14 @@
</el-breadcrumb>
</div>
<app-build-steps :active-step="step">
<app-build-step
title="上传应用镜像"
:step="0"
:active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
>
<el-form
ref="step1_form"
class="step_form"
label-position="top"
:model="image_info"
:rules="image_rules"
>
<el-form-item label="镜像名称：" prop="image_name">
<el-input
v-model="image_info.image_name"
placeholder="请输入镜像名称"
></el-input>
</el-form-item>
<el-form-item label="版本号：" prop="tag">
<el-input
v-model="image_info.tag"
placeholder="请输入版本号"
></el-input>
</el-form-item>
<el-form-item
label="上传镜像包："
prop="file"
ref="step1_upload_item"
>
<el-upload
ref="step1_upload"
:auto-upload="false"
:data="{
image_name: image_info.image_name,
tag: image_info.tag,
}"
:limit="1"
:on-change="imageUploadChange"
:on-remove="imageUploadRemove"
:on-success="imageUploadSuccess"
:on-error="imageUploadError"
action="/apaas/hubApi/image/upload"
name="file"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将镜像文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
<div class="apass_button upload_action">
<el-button
type="primary"
@click="submitImage('step1_form')"
:loading="step1UplaodLoading"
>
确认
</el-button>
</div>
<div class="form_line"></div>
<el-form-item label="上传镜像列表：">
<div
v-if="image_datas"
class="image_list_container"
v-infinite-scroll="loadImageList"
>
<apass-table
:header="image_headers"
:data="image_datas"
:padding-left="60"
></apass-table>
<p style="text-align: center" v-if="image_loading">加载中...</p>
<p
style="text-align: center"
v-if="image_noMore && image_datas.length > 0"
>
没有更多了
</p>
</div>
</el-form-item>
</el-form>
<div class="apass_button step_action">
<el-button type="primary" @click="goToStep1">
下一步
</el-button>
</div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step>
<app-build-step
title="上传部署文件"
:step="1"
:active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
>
<el-form
ref="step2_form"
class="step_form"
label-position="top"
:model="deploy_info"
:rules="deploy_rules"
>
<el-form-item
label="上传部署文件："
prop="file"
ref="step2_upload_item"
>
<div class="description_info">
<i class="el-icon-warning-outline"></i>
<p
v-html="
`1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png，templates/NOTES.txt；<br />
2.上述文件必须按照上述名称进行命名；<br />
3.step.yaml文件为values.yaml中的可配置参数，templates/NOTES.txt文件为应用的部署信息;<br />
4.templates/NOTES.txt主要用于用户部署后的访问,可以按照如下示例进行编写：<br />
&ensp;&ensp;this is a postgresql.<br />
&ensp;&ensp;author : Tom<br />
&ensp;&ensp;内部地址： {{ .Release.Name }}.{{ .Release.Namespace }}:5432<br />
5.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。<br />`
"
></p>
</div>
<el-upload
ref="step2_upload"
:auto-upload="false"
:limit="1"
:data="app_info"
action="/apaas/hubApi/market/app"
:on-change="deployUploadChange"
:on-remove="deployUploadRemove"
:on-success="deployUploadSuccess"
:on-error="deployUploadError"
name="file"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将部署文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
</el-form>
<div class="apass_button step_action" style="margin-top: 120px;">
<el-button type="primary" plain @click="preStep">
上一步
</el-button>
<el-button type="primary" @click="goToStep2('step2_form')">
下一步
</el-button>
</div>
</app-build-step>
<app-build-step
title="应用基础信息填写"
:step="2"
:step="0"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
:done="done"
>
<el-form
ref="step3_form"
ref="app_info_form"
class="step_form"
label-position="top"
:model="app_info"
......@@ -249,23 +100,171 @@
</el-form-item>
</el-form>
<div class="apass_button step_action">
<el-button type="primary" @click="step1Action">
下一步
</el-button>
</div>
</app-build-step>
<app-build-step
title="上传部署文件"
:step="1"
:active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
>
<el-form
ref="deploy_info_form"
class="step_form"
label-position="top"
:model="deploy_info"
:rules="deploy_rules"
>
<el-form-item
label="上传部署文件："
prop="file"
ref="step2_upload_item"
>
<div class="description_info">
<i class="el-icon-warning-outline"></i>
<p
v-html="
`1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png，templates/NOTES.txt；<br />
2.上述文件必须按照上述名称进行命名；<br />
3.step.yaml文件为values.yaml中的可配置参数，templates/NOTES.txt文件为应用的部署信息;<br />
4.templates/NOTES.txt主要用于用户部署后的访问,可以按照如下示例进行编写：<br />
&ensp;&ensp;this is a postgresql.<br />
&ensp;&ensp;author : Tom<br />
&ensp;&ensp;内部地址： {{ .Release.Name }}.{{ .Release.Namespace }}:5432<br />
5.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。<br />`
"
></p>
</div>
<el-upload
ref="step2_upload"
:auto-upload="false"
:limit="1"
:data="app_info"
action="/apaas/hubApi/market/app"
:on-change="deployUploadChange"
:on-remove="deployUploadRemove"
:on-success="deployUploadSuccess"
:on-error="deployUploadError"
name="file"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将部署文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
</el-form>
<div class="apass_button step_action" style="margin-top: 120px;">
<el-button
type="primary"
:loading="step2Loading"
plain
:loading="submitLoading"
@click="preStep"
@click="step = 0"
>
上一步
</el-button>
<el-button
type="primary"
:loading="submitLoading"
@click="sunbmitAction('step3_form')"
:loading="step2Loading"
@click="step2Action"
>
提交
创建应用
</el-button>
</div>
</app-build-step>
<app-build-step
title="上传应用镜像"
:step="2"
:active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
>
<el-form
ref="image_info_form"
class="step_form"
label-position="top"
:model="image_info"
:rules="image_rules"
>
<el-form-item label="镜像名称：" prop="image_name">
<el-input
v-model="image_info.image_name"
placeholder="请输入镜像名称"
></el-input>
</el-form-item>
<el-form-item label="版本号：" prop="tag">
<el-input
v-model="image_info.tag"
placeholder="请输入版本号"
></el-input>
</el-form-item>
<el-form-item
label="上传镜像包："
prop="file"
ref="step1_upload_item"
>
<el-upload
ref="step1_upload"
:auto-upload="false"
:data="{
app_id: app_id,
image_name: image_info.image_name,
tag: image_info.tag,
}"
:limit="1"
:on-change="imageUploadChange"
:on-remove="imageUploadRemove"
:on-success="imageUploadSuccess"
:on-error="imageUploadError"
action="/apaas/hubApi/image/upload"
name="file"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将镜像文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
<div class="apass_button upload_action">
<el-button
type="primary"
@click="addImage"
:loading="addImageLoading"
>
确认
</el-button>
</div>
<div class="form_line"></div>
<el-form-item label="上传镜像列表：">
<div
v-if="image_datas"
class="image_list_container"
v-infinite-scroll="loadImageList"
>
<apass-table
:header="image_headers"
:data="image_datas"
:padding-left="60"
></apass-table>
<p style="text-align: center" v-if="image_loading">
加载中...
</p>
<p style="text-align: center" v-else-if="image_noMore">
没有更多了
</p>
</div>
</el-form-item>
</el-form>
<div class="apass_button step_action">
<el-button type="primary" @click="stepsDone">
完成
</el-button>
</div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step>
</app-build-steps>
<apass-dialog
......@@ -275,52 +274,36 @@
:submit="dialogInfo.submit"
></apass-dialog>
</div>
</template>
<script>
import appBuildSteps from "@/components/app-build-steps/app-build-steps";
import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassTable from "@/components/apass-table";
import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail";
export default {
components: {
appBuildSteps,
appBuildStep,
apassTable,
uploadFile,
apassDialog,
imageDetail,
},
data: () => ({
step: 0,
image_info: {
image_name: "",
tag: "",
file: "",
},
image_rules: {
image_name: [
{ required: true, message: "请输入镜像名称", trigger: "blur" },
],
tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
},
step1UplaodLoading: false,
image_headers: [],
image_datas: [],
image_total: 0,
image_loading: false,
image_noMore: false,
image_page: 0,
deploy_info: {
file: "",
},
deploy_rules: {
file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
</template>
<script>
import appBuildSteps from "@/components/app-build-steps/app-build-steps";
import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassTable from "@/components/apass-table";
import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail";
export default {
components: {
appBuildSteps,
appBuildStep,
apassTable,
uploadFile,
apassDialog,
imageDetail,
},
data: () => ({
dialogInfo: {
title: "",
msg: "",
submit: null,
},
step: 0,
ywlys: [],
types: [],
orgs: [],
logo: [],
app_info: {
name: "", // 应用名称
version: "", // 应用版本
......@@ -350,31 +333,149 @@ export default {
{ required: true, message: "请选择应用场景示例", trigger: "change" },
],
},
ywlys: [],
types: [],
orgs: [],
logo: [],
submitLoading: false,
dialogInfo: {
title: "",
msg: "",
submit: null,
deploy_info: {
file: "",
},
deploy_rules: {
file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
},
step2Loading: false,
app_id: "",
image_info: {
image_name: "",
tag: "",
file: "",
},
image_rules: {
image_name: [
{ required: true, message: "请输入镜像名称", trigger: "blur" },
],
tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
},
addImageLoading: false,
image_headers: [],
image_datas: [],
image_total: 0,
image_loading: false,
image_noMore: false,
image_page: 0,
done: false,
}),
methods: {
preStep() {
this.step--;
getYwlys() {
this.$http
.get("/apaas/hubApi/market/businessAreas")
.then((response) => {
this.ywlys = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getTypes() {
this.$http
.get("/apaas/hubApi/market/appTypes")
.then((response) => {
this.types = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getOrgs() {
this.$http
.get("/apaas/hubApi/market/departments")
.then((response) => {
this.orgs = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getNewList(file) {
this.app_info.logo = file.url;
},
step1Action() {
this.$refs.app_info_form.validate((valid) => {
if (valid) {
this.step = 1;
} else {
return false;
}
});
},
getFileType(fileName) {
const startIndex = fileName.lastIndexOf(".");
if (startIndex != -1) {
return fileName
.substring(startIndex + 1, fileName.length)
.toLowerCase();
} else {
return "";
}
},
deployUploadChange(file) {
const filtType = this.getFileType(file.name);
if (filtType === "zip" || filtType === "gz" || filtType === "tgz") {
this.deploy_info.file = file;
this.$refs.step2_upload_item.clearValidate();
} else {
this.$message.error("部署文件格式错误!");
this.deploy_info.file = "";
this.$refs.step2_upload.clearFiles();
}
},
deployUploadRemove() {
this.deploy_info.file = "";
},
deployUploadSuccess(response) {
if (response.success == 1) {
this.$message({
message: `提交成功`,
type: "success",
});
this.step2Loading = false;
this.step = 2;
this.app_id = response.data;
this.image_datas = [];
this.image_page = 1;
this.initImageList();
} else {
this.$message({
message: response.errMsg || `提交失败`,
type: "warning",
});
this.step2Loading = false;
}
},
deployUploadError() {
this.$message({
message: `提交失败`,
type: "warning",
});
this.step2Loading = false;
},
nextStep() {
this.step++;
step2Action() {
this.$refs.deploy_info_form.validate((valid) => {
if (valid) {
this.step2Loading = true;
this.$refs.step2_upload.submit();
} else {
return false;
}
});
},
initImageList() {
this.image_loading = true;
this.$http
.get("/apaas/hubApi/image/imageUpList", {
params: {
page: this.image_page,
size: 10,
app_id: this.app_id,
},
})
.then(({ data }) => {
......@@ -391,8 +492,9 @@ export default {
loadImageList() {
if (this.image_datas.length < this.image_total) {
this.image_page++;
this.image_loading = true;
this.initImageList();
} else {
} else if (this.image_total > 0) {
this.image_noMore = true;
}
},
......@@ -416,7 +518,7 @@ export default {
this.image_info.tag = "";
this.image_info.file = "";
this.$refs.step1_upload.clearFiles();
this.step1UplaodLoading = false;
this.addImageLoading = false;
this.image_datas = [];
this.image_page = 1;
this.initImageList();
......@@ -425,7 +527,7 @@ export default {
message: response.errMsg || `上传镜像失败`,
type: "warning",
});
this.step1UplaodLoading = false;
this.addImageLoading = false;
}
},
imageUploadError() {
......@@ -433,22 +535,22 @@ export default {
message: `上传镜像失败`,
type: "warning",
});
this.step1UplaodLoading = false;
this.addImageLoading = false;
},
imageUploadRemove() {
this.image_info.file = "";
},
submitImage(formName) {
this.$refs[formName].validate((valid) => {
addImage() {
this.$refs.image_info_form.validate((valid) => {
if (valid) {
this.step1UplaodLoading = true;
this.addImageLoading = true;
this.$refs.step1_upload.submit();
} else {
return false;
}
});
},
deleteItem(item) {
deleteImage(item) {
this.dialogInfo.title = "";
this.dialogInfo.msg = "是否删除该镜像？";
this.dialogInfo.submit = () => {
......@@ -480,122 +582,19 @@ export default {
};
this.$refs.dialog.show();
},
goToStep1() {
// if (this.image_total > 0) {
this.nextStep();
/* } else {
this.$message({
message: `您尚未上传任何镜像`,
type: "warning",
});
} */
},
goToStep2(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.nextStep();
} else {
return false;
}
});
},
getNewList(file) {
this.app_info.logo = file.url;
},
getYwlys() {
this.$http
.get("/apaas/hubApi/market/businessAreas")
.then((response) => {
this.ywlys = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getTypes() {
this.$http
.get("/apaas/hubApi/market/appTypes")
.then((response) => {
this.types = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getOrgs() {
this.$http
.get("/apaas/hubApi/market/departments")
.then((response) => {
this.orgs = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
deployUploadChange(file) {
const filtType = this.getFileType(file.name);
if (filtType === "zip" || filtType === "gz" || filtType === "tgz") {
this.deploy_info.file = file;
this.$refs.step2_upload_item.clearValidate();
} else {
this.$message.error("部署文件格式错误!");
this.deploy_info.file = "";
this.$refs.step2_upload.clearFiles();
}
},
deployUploadRemove() {
this.deploy_info.file = "";
},
deployUploadSuccess(response) {
if (response.success == 1) {
this.$message({
message: `提交成功`,
type: "success",
});
this.submitLoading = false;
this.$router.push("/yygl/2/0");
} else {
this.$message({
message: response.errMsg || `提交失败`,
type: "warning",
});
this.submitLoading = false;
}
},
deployUploadError() {
this.$message({
message: `提交失败`,
type: "warning",
});
this.submitLoading = false;
},
sunbmitAction(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.submitLoading = true;
this.$refs.step2_upload.submit();
} else {
return false;
}
});
},
getFileType(fileName) {
const startIndex = fileName.lastIndexOf(".");
if (startIndex != -1) {
return fileName
.substring(startIndex + 1, fileName.length)
.toLowerCase();
} else {
return "";
}
},
showImageDetail(item) {
this.$refs.imageDetail.showDialog(item);
},
stepsDone() {
this.done = true;
this.$router.push(`/yygl/${this.$store.getters.level}/0`);
}, // TODO: 增加成功的状态页
},
mounted() {
this.getYwlys();
this.getTypes();
this.getOrgs();
this.image_headers = [
{
label: "镜像名称",
......@@ -617,17 +616,11 @@ export default {
{
label: "删除",
class: "warn",
callback: this.deleteItem,
callback: this.deleteImage,
},
],
},
];
this.image_datas = [];
this.image_page = 1;
this.initImageList();
this.getYwlys();
this.getTypes();
this.getOrgs();
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment