Skip to content

Commit

Permalink
Merge pull request #83 from Strato-YangSungHun/main
Browse files Browse the repository at this point in the history 
UI update
  • Loading branch information
@Strato-YangSungHun
Strato-YangSungHun authored Oct 24, 2024
2 parents 347d1cf + 699e211 commit 5b43d07
Show file tree
Hide file tree
Showing 34 changed files with 1,383 additions and 402 deletions.
137 changes: 137 additions & 0 deletions applicationFE/src/api/application.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import request from "@/common/request";

// 워크플로우 목록
export const getWorkflowList = () => {
return request.get('/workflow/list')
}

export const getOssList = () => {
return request.get('/config/oss/list?ossCd=JENKINS')
}

// // 워크플로우 상세
// export function getWorkflowDetailInfo(workflowId:number) {
// return request.get("/workflow/" + workflowId);
// }

// // default 스크립트
// export function getDefaultPipeline(params) {
// return request.post(`/workflow/jenkins/pipeline/default`, params)
// }

// export function getPipelineCdList() {
// return request.get(`/common/group/pipeline`);
// }

// // 배포 실행
// export function runWorkflowDeploy(params) {
// return request.post(`/workflow/run`, params);
// }

// export function duplicateCheck(params) {
// return request.get(`/workflow/name/duplicate?workflowName=${params.workflowName}`)
// }

// export function getWorkflowPipelineCdList() {
// return request.get(`/workflow/jenkins/pipeline`)
// }

// export function postWorkflowDeploy(params) {
// return request.post(`/workflow`, params);
// }

// export function deleteWorkflowDeploy(workflowId) {
// return request.delete(`/workflow/${workflowId}`);
// }

// export function getWorkflowDeployDetailInfo(workflowId) {
// return request.get(`/workflow/${workflowId}`);
// }

// export function putWorkflowDeploy(params) {
// return request.put(`/workflow/${params.workflowId}`, params);
// }

// export function workflowHistoryList(workflowId) {
// return request.get(`/jenkins/logs/${workflowId}`)
// }






















// export function getPipelineLog(params) {
// return request.post('/getPipelineLog', params)
// }

// export function getPipelineLogDetail(link) {
// return request({
// headers:{'Content-Type': 'application/json' },
// url: '/getPipelineLogDetail',
// method: 'post',
// data:link
// })
// }

// export function getConsoleLog(params) {
// return request.post('/deploy/getConsoleLog', params)
// }


// export function getProfiles(params) {
// return request.post('/projects/profiles', params)
// }

// // 수정 완료
// export function getStageList(){
// return request.get('/common/group/stage')
// }

// export function getDeployCdList(){
// return request.get('/common/group/deploy')
// }


// // 수정 완료
// export function getProviderList(){
// return request.get('/common/group/provider')
// }

// export function getStageListByRemoteHostId(remoteHostId){
// return request.get('/deploy/getStageListByRemoteHostId/'+remoteHostId)
// }

// // 수정 완료
// export function getDeployConfigCount(providerCd){
// return request.get(`/config/k8s/count?providerCd=${providerCd}`);
// // return request.get(`/config/k8s/count?serviceGroupId=${serviceGroupId}`);

// // return request.get(`/config/k8s/count?stageCd=`);
// }

// export function gitlabCloneUrlCheck(params){
// return request.get(`/deploy/gitlab/connection/check?gitlabId=${params.gitlabId}&gitlabProjectPath=${params.gitlabProjectPath}`)
// }






3 changes: 2 additions & 1 deletion applicationFE/src/common/request.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import axios from "axios";
import { useToast } from "vue-toastification";

const splitUrl = window.location.host.split(':');
const baseUrl = window.location.protocol + '//' + splitUrl[0] + ':18084'
// const baseUrl = window.location.protocol + '//' + splitUrl[0] + ':18084'
const baseUrl = "http://15.164.227.13:18084";
const toast = useToast();
const service = axios.create({
// baseURL: process.env.VUE_APP_API_URL,
Expand Down
205 changes: 205 additions & 0 deletions applicationFE/src/views/application/Application.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<template>
<div class="card w-100">
<div class="card-header">
<div class="card-title">
<h1>Workflow {{ mode === "new" ? "등록" : "수정" }}</h1>
</div>
</div>

<div class="card-body">
<div class="card-title">

<!-- 워크플로우 명 -->
<div class="mb-3">
<label class="form-label required">워크 플로우 명</label>
<div class="grid gap-0 column-gap-3">
<input type="text" class="form-control p-2 g-col-11" placeholder="워크플로우 명을 입력하세요" />
<button v-if="!duplicatedWorkflow" class="btn btn-primary" @click="onClickDuplicatWorkflowName">중복 체크</button>
<button v-else class="btn btn-success">중복 체크</button>
</div>
</div>

<!-- 목적 -->
<div class="mb-3">
<label class="form-label required">목적</label>
<div class="grid gap-0 column-gap-3">
<select class="form-select p-2 g-col-12">
<option v-for="(purpose, idx) in workflowPurposeList" :value="purpose.value" :key="idx">
{{ purpose.name }}
</option>
</select>
</div>
</div>

<!-- 젠킨스 주소 -->
<div class="mb-3">
<label class="form-label required">젠킨스 주소</label>
<div class="grid gap-0 column-gap-3">
<input type="text" class="form-control p-2 g-col-12" placeholder="젠킨스 주소" :value="jenkinsUrl" disabled/>
</div>
</div>

<!-- 파이프 라인 -->
<div class="mb-3">
<div class="grid gap-0 column-gap-3 border-bottom pb-5 pt-5">
<label class="form-label required p-2 g-col-11">파이프 라인</label>
<button class="btn btn-primary">스크립트 생성</button>
</div>
<div class="grid gap-0">

<!-- 스크립트 구역 -->
<div class="p-2 g-col-9">
<div>스크립트 생성 버튼을 클릭해주세요</div>
</div>
<!-- <div v-if="props.workflow.pipelines">
<draggable :list="props.workflow.pipelines" :group="{
name: 'pipelineEidtor',
pull: false,
put: true
}" :move="onCheckDraggableEditor" @start="onStartDrag" @end="onFinishDrag">
<div v-for="(item, idx) in props.workflow.pipelines" :key="idx">
<div class="row" :class="{ 'draggable': !item.isDefaultScript }">
<span slot="label" class="field-label col-10">
{{ item.pipelineCd ? item.pipelineCd : "&nbsp" }}
</span>
<span class="col-2">
<el-button v-if="!item.isDefaultScript" class="btn btn-danger btn-sm"
@click="onDeletePipeline(idx)">delete</el-button>
</span>
<v-ace-editor v-model:value="(props.workflow.pipelines[idx]).pipelineScript" :id="item.pipelineCd"
:options="{
readOnly: dragFlag,
maxLines: 9999,
minLines: 10,
selectionStyle: 'text',
highlightActiveLine: false,
cursorStyle: 'smooth',
hasCssTransforms: true
}" />
</div>
</div>
</draggable>
</div> -->



<!-- 구분 구역 -->
<div class="p-2 g-col-3">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>


<!-- <div class="col-3 mt-1">
<el-collapse v-model="activeName" accordion>
<el-collapse-item v-for="(pipeList, pipelineCd) in pipelineScriptList" :name="pipelineCd"
:key="pipelineCd">
<template #title>
<span class="paletteTitle">
{{ pipelineCd }}
</span>
</template>
<div>
<component :is="components.draggable" :list="pipeList"
:group="{ name: 'pipelineEidtor', pull: 'clone', put: false }" :move="onCheckDraggablePalette"
:clone="onClonePipeline" @start="onStartDrag" @end="onFinishDrag">
<div v-for="(item, index) in pipeList" :key="index" class="paletteItem"
@click="onClickPaletteItem(item)">
{{ item ? item.pipelineName : '등록된 스테이지가 없습니다.' }}
</div>
</component>
</div>
</el-collapse-item>
</el-collapse>
</div> -->
</div>
</div>
</div>

</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getOssList } from '@/api/application'
const router = useRouter();
const route = useRoute();
onMounted(() => {
setMode()
setWorkflowPurposeList()
setJenkinsInfo()
})
// ================================================================================= 모드 세팅
const mode = ref('new' as string)
const setMode = () => {
if (route.params.workflowId !== undefined)
mode.value = 'edit'
}
// ================================================================================= 중복체크
const duplicatedWorkflow = ref(false as boolean)
const onClickDuplicatWorkflowName = () => {
// TODO : 수정필요
duplicatedWorkflow.value = true
}
// ================================================================================= 목적 목록
interface WorkflowPurpose {
name: string
value: string
}
const workflowPurposeList = ref([] as Array<WorkflowPurpose>)
const setWorkflowPurposeList = () => {
workflowPurposeList.value = [
{
name: "배포용",
value: "deploy"
},
{
name: "실행용",
value: "run"
},
{
name: "테스트용",
value: "test"
},
{
name: "웹훅용",
value: "webhook"
},
]
}
// ================================================================================= 젠킨스 주소 목록
const jenkinsUrl = ref('')
const setJenkinsInfo = async () => {
try {
const { data } = await getOssList()
jenkinsUrl.value = data ? data[0].ossUrl : '젠킨스 정보가 없습니다.'
console.log(data.ossUrl)
console.log(data)
} catch (error) {
console.log(error)
}
}
</script>

<style scoped>
.space-between {
display: flex;
justify-content: space-between;
}
</style>
Loading

0 comments on commit 5b43d07

Please sign in to comment.