mirror of https://github.com/alibaba/arthas.git
add http web ui files (#1260)
gongdewei
5 years ago
committed by
GitHub
parent
6952d92cbb
commit
c69d79022f
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Arthas WebUI</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../lib/vue/vue-2.6.11.js"></script>
|
||||
<script src="../lib/vue/vue-router-3.1.6.js"></script>
|
||||
<script src="../lib/axios-0.19.2.min.js"></script>
|
||||
<script src="../element-ui@2.13.0/lib/index.js"></script>
|
||||
<link rel="stylesheet" href="../element-ui@2.13.0/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="ui.css">
|
||||
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
|
||||
<template id="session-view">
|
||||
<div>
|
||||
<el-container class="container">
|
||||
<el-header class="header">
|
||||
<el-row >
|
||||
<el-col :span="12">
|
||||
<div class="logo">
|
||||
<a href="https://github.com/alibaba/arthas" target="_blank">
|
||||
<img src="../logo.png" height="25px">
|
||||
</a>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas" target="_blank">Documentation</a>
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas-tutorials" target="_blank">Online Tutorials</a>
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas" target="_blank">Github</a>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="header-right">
|
||||
<el-button type="primary" size="mini" @click="openNewSession">New</el-button>
|
||||
<el-button type="primary" size="mini">Share</el-button>
|
||||
<el-button type="primary" size="mini">Close</el-button>
|
||||
<el-button type="primary" size="mini">Shutdown</el-button>
|
||||
<div class="user-info">
|
||||
<i class="el-icon-s-custom user-icon"></i>
|
||||
<span>Tom</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-main id="main-body" class="main-body">
|
||||
<div v-for="result in commandResults" >
|
||||
<el-card class="resultMsg" v-bind:class="messageClass(result)">
|
||||
{{JSON.stringify(result)}}
|
||||
</el-card>
|
||||
<div class="min-gap"></div>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
<!-- 底部 -->
|
||||
<el-footer class="footer-row">
|
||||
<div class="footer-left">
|
||||
<div>Command:</div>
|
||||
</div>
|
||||
<div class="footer-input">
|
||||
<el-input ref="commandInput"
|
||||
placeholder="Enter command"
|
||||
autosize
|
||||
clearable
|
||||
@keyup.enter.native="executeCommand"
|
||||
:disabled="inputStatus!='ALLOW_INPUT'"
|
||||
v-model="commandLine">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="footer-button">
|
||||
<el-button v-if="inputStatus=='ALLOW_INPUT'" type="primary" size="mini" @click="executeCommand">Execute</el-button>
|
||||
<el-button v-if="inputStatus=='ALLOW_INTERRUPT'" type="danger" size="mini" @click="interruptJob">Interrupt</el-button>
|
||||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="history-view">
|
||||
<div>
|
||||
<el-container class="container">
|
||||
<el-header class="header">
|
||||
<el-row >
|
||||
<el-col :span="12">
|
||||
<div class="logo">
|
||||
<a href="https://github.com/alibaba/arthas" target="_blank">
|
||||
<img src="../logo.png" height="25px">
|
||||
</a>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas" target="_blank">Documentation</a>
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas-tutorials" target="_blank">Online Tutorials</a>
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas" target="_blank">Github</a>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="header-right">
|
||||
<el-button type="primary" size="mini">New</el-button>
|
||||
<el-button type="primary" size="mini">Share</el-button>
|
||||
<el-button type="primary" size="mini">Close</el-button>
|
||||
<el-button type="primary" size="mini">Shutdown</el-button>
|
||||
<div class="user-info">
|
||||
<i class="el-icon-s-custom user-icon"></i>
|
||||
<span>Tom</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-main>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="search-view">
|
||||
</template>
|
||||
|
||||
<script src="ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,116 @@
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 5px 5px 5px;
|
||||
}
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.min-gap {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
.user-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
a.nav-link:active, a.nav-link:hover, a.nav-link:visited {
|
||||
color: rgba(0,0,0,.9);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: rgba(0,0,0,.5);
|
||||
display: inline-block;
|
||||
padding: .5rem 0.3rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
height: 100vh;
|
||||
}
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px;
|
||||
border-bottom: #cccccc 1px solid;
|
||||
}
|
||||
.header-right {
|
||||
text-align: right;
|
||||
}
|
||||
.main-body {
|
||||
/*height: 80vh;*/
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.footer-row {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
height: 45px !important;
|
||||
vertical-align: middle;
|
||||
border-top: #cccccc 1px solid;
|
||||
}
|
||||
.footer-left {
|
||||
/*width: 100px;*/
|
||||
vertical-align: middle;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.footer-input {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.footer-input .el-input__inner {
|
||||
height: 35px;
|
||||
}
|
||||
.footer-button {
|
||||
/*width: 100px;*/
|
||||
}
|
||||
|
||||
.main-body pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
color: #c82333;
|
||||
}
|
||||
|
||||
.resultMsg {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.commandMsg {
|
||||
background-color: #d9ecff !important;
|
||||
}
|
||||
/*****************************/
|
||||
/* override element-ui class*/
|
||||
/*****************************/
|
||||
|
||||
.el-card__body {
|
||||
/*margin: 2px;*/
|
||||
padding: 8px;
|
||||
/*background-color: #cccccc;*/
|
||||
}
|
||||
.el-main {
|
||||
padding: 10px;
|
||||
/*background-color: #f7f8f9;*/
|
||||
}
|
||||
.el-header {
|
||||
padding: 10px;
|
||||
background-color: #f7f8f9;
|
||||
}
|
||||
Loading…
Reference in New Issue