devad
/
JCC-RIP
forked from JointCloud/JCC-RIP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

0627

This commit is contained in:
ann 2021-06-27 22:38:01 +08:00
parent 14fbd9cc5b
commit b2d4ba1049
9 changed files with 147 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/second-class-page/workloadInfo.js
View File

@ -47,11 +47,3 @@ export function getWorkloadVersion(url1, url2) {
method: 'get'
})
}
export function submitInfoEdit(workloadName) {
return request({
url: 'apis/apps/v1/namespaces/kubesphere-controls-system/deployments/${workloadName}',
method: 'patch'
})
}

2
src/components/ClusterManagement/nodeMessage.vue
View File

@ -2,7 +2,7 @@
<div class="topList">
<div v-for="(node, index) in nodeMessage" :key="index">
<p>{{ node.node }} <span>{{ node.role }}</span></p>
<el-progress :stroke-width="8" :percentage="parseFloat(node.cpu).toFixed(2) > 100 ? 100 : parseFloat(node.cpu).toFixed(2)" />
<el-progress :stroke-width="8" :percentage="Number(parseFloat(node.cpu).toFixed(2)) > 100 ? 100 : Number(parseFloat(node.cpu).toFixed(2))" />
</div>
</div>
</template>

165
src/components/Terminal/index.vue
View File

@ -3,66 +3,121 @@
</template>
<script>
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'
export default {
name: 'Terminal',
props: {
podName: {
type: String,
default: ''
},
},
mounted() {
this.initSocket()
},
beforeDestroy() {
this.socket.close()
this.term.dispose()
},
methods: {
initTerm() {
const term = new Terminal({
fontSize: 14,
cursorBlink: true
});
const attachAddon = new AttachAddon(this.socket);
const fitAddon = new FitAddon();
term.loadAddon(attachAddon);
term.loadAddon(fitAddon);
term.open(document.getElementById('xterm'));
fitAddon.fit();
term.focus();
this.term = term
},
initSocket() {
// this.socket = new WebSocket(`ws://119.3.157.144:30880/kapis/terminal.kubesphere.io/v1alpha2/namespaces/kubesphere-controls-system/pods/${this.podName}?container=kubectl&shell=sh`);
this.socket = new WebSocket(`ws://119.3.157.144:30880/kapis/terminal.kubesphere.io/v1alpha2/namespaces/kubesphere-monitoring-system/pods/prometheus-k8s-1?container=rules-configmap-reloader&shell=sh`);
this.socketOnClose();
this.socketOnOpen();
this.socketOnError();
},
socketOnOpen() {
this.socket.onopen = () => {
// 链接成功后
this.initTerm()
}
},
socketOnClose() {
this.socket.onclose = () => {
// console.log('close socket')
}
},
socketOnError() {
this.socket.onerror = () => {
console.log('socket 链接失败')
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'
export default {
name: 'Terminal',
props: {
url: {
type: Object,
default: {
cluster: '',
podName: '',
namespaces: '',
container: ''
}
}
},
mounted() {
this.initSocket()
},
beforeDestroy() {
this.socket.close()
this.term.dispose()
},
methods: {
initTerm() {
const term = new Terminal({
lineHeight: 1.2,
cursorBlink: true,
cursorStyle: 'underline',
fontSize: 12,
fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
theme: {
background: '#181d28'
}
})
const attachAddon = new AttachAddon(this.socket)
const fitAddon = new FitAddon()
term.loadAddon(attachAddon)
term.loadAddon(fitAddon)
term.open(document.getElementById('xterm'))
fitAddon.fit()
term.focus()
term.writeln('Welcome to xterm.js')
term.prompt = () => {
term.write('\r\n$ ')
}
// term.onKey(e => {
// const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
// if (e.domEvent.code === 13) {
// console.log('baa')
// // prompt(term);
// term.prompt()
// } else if (e.domEvent.code === 8) {
// // Do not delete the prompt
// if (term._core.buffer.x > 2) {
// term.write('\b \b');
// }
// } else if (printable) {
// term.write(e.key);
// }
// });
term.onData((data) => {
const order = JSON.stringify({
Op: 'stdin',
Data: data
})
this.socket.send(order)
})
this.term = term
},
initSocket() {
// this.socket = new WebSocket(`ws://${location.host}/${this.getUrl(this.url)}`);
this.socket = new WebSocket(`wss://echo.websocket.org`)
this.socketOnClose()
this.socketOnOpen()
this.socketOnMessage()
this.socketOnError()
},
getUrl(url) {
return `kapis/terminal.kubesphere.io/v1alpha2${url.cluster}/namespaces/${url.namespaces}/pods/${url.podName}?container=${url.container}&shell=sh`
},
socketOnMessage() {
this.socket.onmessage = (event) => {
// 接收推送的消息
const data = typeof JSON.parse(event.data) === 'Object' ? JSON.parse(event.data).Data : event.data
console.log(data)
this.term.write(data)
}
},
socketOnOpen() {
this.socket.onopen = () => {
// 链接成功后
console.log('success')
this.initTerm()
}
},
socketOnClose() {
this.socket.onclose = () => {
// console.log('close socket')
}
},
socketOnError() {
this.socket.onerror = (err) => {
console.log(err)
console.log('socket 链接失败')
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
</style>

2
src/utils/auth.js
View File

@ -1,6 +1,6 @@
import Cookies from 'js-cookie'
const TokenKey = 'access_token'
const TokenKey = 'token'
export function getToken() {
return Cookies.get(TokenKey)

2
src/utils/request.js
View File

@ -9,7 +9,7 @@ const service = axios.create({
'Content-Type': 'application/x-www-form-urlencoded'
},
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
withCredentials: true, // send cookies when cross-domain requests
timeout: 15000 // request timeout
})

14
src/views/podManagement/detail.vue
View File

@ -2,7 +2,7 @@
<div>
<el-card shadow="never">
<el-page-header content="详情" @back="goBack" />
<h2>{{ $route.params.name }} <el-button round icon="el-icon-s-platform" @click="dialogTerminalVisible=true" /></h2>
<h2>{{ $route.params.name }} </h2>
<div class="button-group">
<el-button plain round @click="viewSetting">查看配置文件</el-button>
<el-button type="danger" round @click="deletePod">删除</el-button>
@ -14,12 +14,6 @@
<!-- <el-button type="primary" @click="submitSettingEdit">更 新</el-button>-->
<!-- </div>-->
</el-dialog>
<el-dialog title="终端" width="80%" :visible.sync="dialogTerminalVisible">
<Terminal class="terminal" :pod-name="$route.params.name" />
</el-dialog>
<el-dialog title="终端" width="80%" :visible.sync="dialogTerminalVisible">
<Terminal class="jcce-terminal" :pod-name="$route.params.name" />
</el-dialog>
<FormData :data="formData" :data-map="dataMap" />
<el-tabs v-model="activeName" @tab-click="switchTab">
<el-tab-pane key="resource-status" label="资源状态" />
@ -35,10 +29,9 @@
import { FormData } from '@/components/FormData'
import { getPodDetails } from '@/api/second-class-page/podInfo'
import { newEval } from '@/utils'
import Terminal from '@/components/Terminal'
export default {
components: { FormData, Terminal },
components: { FormData },
data() {
return {
code: ``,
@ -53,7 +46,6 @@ export default {
// keyMap: "emacs"
},
dialogSettingVisible: false,
dialogTerminalVisible: false,
formData: {
cluster: 'default',
namespace: '-',
@ -161,7 +153,7 @@ export default {
<style lang="scss">
.jcce-terminal{
width: 100%;
height: 600px;
height: 400px;
border-radius: 5px;
padding: 7px;
border: 1px solid #eee;

27
src/views/podManagement/resource-status.vue
View File

@ -3,9 +3,13 @@
<h5>
容器
</h5>
<div v-for="(item, key) in dataMap" :key="key">
<FormData :column="3" :data="formData[key]" :data-map="item" />
<div v-for="(item, key) in formData" :key="key">
<p>容器名： {{ item.name }} <el-button size="mini" round icon="el-icon-s-platform" @click="openTerminal(item.name)" /></p>
<FormData :column="2" :data="item" :data-map="dataMap" />
</div>
<el-dialog title="终端" width="80%" :visible.sync="dialogTerminalVisible">
<Terminal class="jcce-terminal" :url="terminalUrl" />
</el-dialog>
</div>
</template>
@ -13,13 +17,19 @@
import { FormData } from '@/components/FormData'
import { getPodDetails } from '@/api/second-class-page/podInfo'
import { getPorts } from '@/utils/containerUtils'
import Terminal from '@/components/Terminal'
export default {
components: { FormData },
components: { FormData, Terminal },
data() {
return {
dataMap: [],
formData: []
dataMap: { image: '镜像', status: '状态', restart: '重启次数', port: '端口' },
formData: [],
dialogTerminalVisible: false,
terminalUrl: {
podName: this.$route.params.name,
namespaces: this.$route.params.project
}
}
},
computed: {
@ -33,6 +43,11 @@ export default {
this.getFormData()
},
methods: {
openTerminal(container) {
this.terminalUrl.cluster = this.clusterName !== 'default' ? '/clusters/' + this.clusterName : ''
this.terminalUrl.container = container
this.dialogTerminalVisible = true
},
getFormData() {
let customUrl = ''
if (this.clusterName !== 'default') {
@ -54,8 +69,6 @@ export default {
temp.port = '-'
}
})
const obj = { name: '容器名', image: '镜像', status: '状态', restart: '重启次数', port: '端口' }
this.dataMap.push(obj)
this.formData.push(temp)
})
})

11
src/views/workloadsManagement/deploymentsDetail.vue
View File

@ -25,7 +25,7 @@
prop="name"
label="名称"
>
<el-input v-model="$route.params.name" :disabled="true" />
<el-input v-model="editInfoForm.name" :disabled="true" />
</el-form-item>
<el-form-item
prop="alias"
@ -147,7 +147,7 @@
<script>
import { FormData } from '@/components/FormData'
import { getWorkloadDetails, submitInfoEdit } from '@/api/second-class-page/workloadInfo'
import { getWorkloadDetails } from '@/api/second-class-page/workloadInfo'
// import path from 'path'
export default {
components: { FormData },
@ -246,12 +246,7 @@ export default {
},
submitInfoEdit() {
this.dialogFormVisible = false
submitInfoEdit(this.$route.params.name).then((res) => {
if (res) {
console.log(res)
this.$message.success('修改成功')
}
})
this.$message.success('修改成功')
},
submitReset() {
this.dialogResetVisible = false

10
vue.config.js
View File

@ -45,7 +45,7 @@ module.exports = {
// target: 'http://39.103.233.49:30881/', /* BJ-Member2 */
},
'/kapis': {
ws: false,
// ws: true,
// target: 'http://124.71.196.205:30881/' /* EduCoder */
// target: 'http://119.3.157.144:30881/', /* KubeX */
target: 'http://119.45.100.73:30881/', /* Host */
@ -66,7 +66,13 @@ module.exports = {
target: 'http://119.45.100.73:30881/', /* Host */
// target: 'http://39.103.233.49:30881/', /* BJ-Member2 */
// changeOrigin: true,
}
},
'/kapis/terminal.kubesphere.io': {
ws: true,
changeOrigin: true,
target: 'ws://119.45.100.73:30881/', /* Host */
},
},
// before: require('./mock/mock-server.js')
},