[Update] 使用xterm.js替换原来的term.js

pull/1319/head
ibuler 2018-05-10 12:19:37 +08:00
parent 0a9af98729
commit 7de6af89ad
15 changed files with 7446 additions and 55 deletions

View File

@ -124,7 +124,7 @@ $(document).ready(function () {
var success = function (data) { var success = function (data) {
var task_id = data.task; var task_id = data.task;
var url = '{% url "ops:celery-task-log" pk=DEFAULT_PK %}'.replace("{{ DEFAULT_PK }}", task_id); var url = '{% url "ops:celery-task-log" pk=DEFAULT_PK %}'.replace("{{ DEFAULT_PK }}", task_id);
window.open(url, '', 'width=800,height=600') window.open(url, '', 'width=800,height=600,left=400,top=400')
}; };
APIUpdateAttr({ APIUpdateAttr({
url: the_url, url: the_url,

View File

@ -296,7 +296,7 @@ $(document).ready(function () {
var success = function (data) { var success = function (data) {
var task_id = data.task; var task_id = data.task;
var url = '{% url "ops:celery-task-log" pk=DEFAULT_PK %}'.replace("{{ DEFAULT_PK }}", task_id); var url = '{% url "ops:celery-task-log" pk=DEFAULT_PK %}'.replace("{{ DEFAULT_PK }}", task_id);
window.open(url, '', 'width=800,height=600') window.open(url, '', 'width=800,height=600,left=400,top=400')
}; };
APIUpdateAttr({ APIUpdateAttr({
url: the_url, url: the_url,

View File

@ -70,9 +70,16 @@ class CeleryTaskLogApi(generics.RetrieveAPIView):
end = False end = False
queryset = CeleryTask.objects.all() queryset = CeleryTask.objects.all()
def get_object(self):
return CeleryTask(
id="4cae9ad8-1116-45e7-b019-9b1856696fd7",
log_path="2018-05-10/ca77e6db-9ac6-4970-80d1-eecdbcc3fcc5.log",
status="finished"
)
def get(self, request, *args, **kwargs): def get(self, request, *args, **kwargs):
mark = request.query_params.get("mark") or str(uuid.uuid4()) mark = request.query_params.get("mark") or str(uuid.uuid4())
task = super().get_object() task = self.get_object()
log_path = task.full_log_path log_path = task.full_log_path
if not log_path or not os.path.isfile(log_path): if not log_path or not os.path.isfile(log_path):

View File

@ -19,7 +19,7 @@
<a href="{% url 'ops:adhoc-history-detail' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history detail' %} </a> <a href="{% url 'ops:adhoc-history-detail' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history detail' %} </a>
</li> </li>
<li> <li>
<a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.pk %}','', 'width=800,height=600')"><i class="fa fa-laptop"></i> {% trans 'Output' %} </a> <a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.pk %}','', 'width=800,height=600,left=400,top=400')"><i class="fa fa-laptop"></i> {% trans 'Output' %} </a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -2,38 +2,25 @@
<head> <head>
<title>term.js</title> <title>term.js</title>
<script src="{% static 'js/jquery-2.1.1.js' %}"></script> <script src="{% static 'js/jquery-2.1.1.js' %}"></script>
<script src="{% static 'js/plugins/xterm/xterm.js' %}"></script>
<link rel="stylesheet" href="{% static 'js/plugins/xterm/xterm.css' %}" />
<style> <style>
html { body {
background: #000; background-color: black;
} }
h1 { .xterm-rows {
margin-bottom: 20px; {#padding: 15px;#}
font: 20px/1.5 sans-serif; font-family: "Bitstream Vera Sans Mono", Monaco, "Consolas", Courier, monospace;
} font-size: 13px;
.terminal { }
float: left;
font-family: 'Monaco', 'Consolas', "DejaVu Sans Mono", "Liberation Mono", monospace;
font-size: 12px;
color: #f0f0f0;
background-color: #555;
padding: 20px 20px 20px;
}
.terminal-cursor {
color: #000;
background: #f0f0f0;
}
</style> </style>
</head> </head>
<div class="container"> <div id="term" style="height: 100%;width: 100%">
<div id="term">
</div> </div>
</div>
<script src="{% static 'js/term.js' %}"></script>
<script> <script>
var rowHeight = 1; var rowHeight = 18;
var colWidth = 1; var colWidth = 10;
var mark = ''; var mark = '';
var url = "{% url 'api-ops:celery-task-log' pk=object.id %}"; var url = "{% url 'api-ops:celery-task-log' pk=object.id %}";
var term; var term;
@ -42,13 +29,16 @@
var interval = 200; var interval = 200;
function calWinSize() { function calWinSize() {
var t = $('.terminal'); var t = $('#marker');
rowHeight = 1.00 * t.height() / 24; {#rowHeight = 1.00 * t.height();#}
colWidth = 1.00 * t.width() / 80; {#colWidth = 1.00 * t.width() / 6;#}
} }
function resize() { function resize() {
var rows = Math.floor(window.innerHeight / rowHeight) - 2; {#console.log(rowHeight, window.innerHeight);#}
var cols = Math.floor(window.innerWidth / colWidth) - 10; {#console.log(colWidth, window.innerWidth);#}
var rows = Math.floor(window.innerHeight / rowHeight) - 1;
var cols = Math.floor(window.innerWidth / colWidth) - 2;
console.log(rows, cols);
term.resize(cols, rows); term.resize(cols, rows);
} }
function requestAndWrite() { function requestAndWrite() {
@ -74,21 +64,18 @@
} }
} }
$(document).ready(function () { $(document).ready(function () {
term = new Terminal({ term = new Terminal();
cols: 80, term.open(document.getElementById('term'));
rows: 24, term.resize(80, 24);
useStyle: true,
screenKeys: false,
convertEol: false,
cursorBlink: false
});
term.open();
term.on('data', function (data) {
term.write(data.replace('\r', '\r\n'))
});
calWinSize();
resize(); resize();
$('.terminal').detach().appendTo('#term'); term.on('data', function (data) {
{#term.write(data.replace('\r', '\r\n'))#}
term.write(data);
});
window.onresize = function () {
resize()
};
{#$('.terminal').detach().appendTo('#term');#}
setInterval(function () { setInterval(function () {
requestAndWrite() requestAndWrite()
}, interval) }, interval)

View File

@ -25,7 +25,7 @@
<a href="{% url 'ops:task-history' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history' %} </a> <a href="{% url 'ops:task-history' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history' %} </a>
</li> </li>
<li> <li>
<a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.latest_history.pk %}','', 'width=800,height=600')"><i class="fa fa-laptop"></i> {% trans 'Last run output' %} </a> <a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.latest_history.pk %}','', 'width=800,height=600,left=400,top=400')"><i class="fa fa-laptop"></i> {% trans 'Last run output' %} </a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -25,7 +25,7 @@
<a href="{% url 'ops:task-history' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history' %} </a> <a href="{% url 'ops:task-history' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history' %} </a>
</li> </li>
<li> <li>
<a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.latest_history.pk %}','', 'width=800,height=600')"><i class="fa fa-laptop"></i> {% trans 'Last run output' %} </a> <a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.latest_history.pk %}','', 'width=800,height=600,left=400,top=400')"><i class="fa fa-laptop"></i> {% trans 'Last run output' %} </a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -25,7 +25,7 @@
<a href="{% url 'ops:task-history' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history' %} </a> <a href="{% url 'ops:task-history' pk=object.pk %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Run history' %} </a>
</li> </li>
<li> <li>
<a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.latest_history.pk %}','', 'width=800,height=600')"><i class="fa fa-laptop"></i> {% trans 'Last run output' %} </a> <a class="text-center celery-task-log" onclick="window.open('{% url 'ops:celery-task-log' pk=object.latest_history.pk %}','', 'width=800,height=600,left=400,top=400')"><i class="fa fa-laptop"></i> {% trans 'Last run output' %} </a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -115,7 +115,7 @@ $(document).ready(function() {
var success = function(data) { var success = function(data) {
var task_id = data.task; var task_id = data.task;
var url = '{% url "ops:celery-task-log" pk=DEFAULT_PK %}'.replace("{{ DEFAULT_PK }}", task_id); var url = '{% url "ops:celery-task-log" pk=DEFAULT_PK %}'.replace("{{ DEFAULT_PK }}", task_id);
window.open(url, '', 'width=800,height=600') window.open(url, '', 'width=800,height=600,left=400,top=400')
}; };
APIUpdateAttr({ APIUpdateAttr({
url: the_url, url: the_url,

View File

@ -124,3 +124,6 @@ class AdHocHistoryDetailView(AdminUserRequiredMixin, DetailView):
class CeleryTaskLogView(AdminUserRequiredMixin, DetailView): class CeleryTaskLogView(AdminUserRequiredMixin, DetailView):
template_name = 'ops/celery_task_log.html' template_name = 'ops/celery_task_log.html'
model = CeleryTask model = CeleryTask
def get_object(self, queryset=None):
return CeleryTask(id="4cae9ad8-1116-45e7-b019-9b1856696fd7")

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -88,7 +88,7 @@
<td>{% trans 'Replay session' %}:</td> <td>{% trans 'Replay session' %}:</td>
<td> <td>
<span class="pull-right"> <span class="pull-right">
<button type="button" onclick="window.open('/luna/replay/{{ object.id }}','luna', 'height=600, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')" class="btn btn-primary btn-xs" id="btn_reset_password" style="width: 54px">{% trans 'Go' %}</button> <button type="button" onclick="window.open('/luna/replay/{{ object.id }}','luna', 'height=600, width=800, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')" class="btn btn-primary btn-xs" id="btn_reset_password" style="width: 54px">{% trans 'Go' %}</button>
</span> </span>
</td> </td>
</tr> </tr>

View File

@ -99,7 +99,7 @@
<td class="text-center">{{ session.date_start|time_util_with_seconds:session.date_end }}</td> <td class="text-center">{{ session.date_start|time_util_with_seconds:session.date_end }}</td>
<td> <td>
{% if session.is_finished %} {% if session.is_finished %}
<a onclick="window.open('/luna/replay/{{ session.id }}','luna', 'height=600, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')" class="btn btn-xs btn-warning btn-replay" >{% trans "Replay" %}</a> <a onclick="window.open('/luna/replay/{{ session.id }}','luna', 'height=600, width=800, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')" class="btn btn-xs btn-warning btn-replay" >{% trans "Replay" %}</a>
{% else %} {% else %}
<!--<a onclick="window.open('/luna/monitor/{{ session.id }}','luna', 'height=600, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')" class="btn btn-xs btn-warning btn-monitor" >{% trans "Monitor" %}</a>--> <!--<a onclick="window.open('/luna/monitor/{{ session.id }}','luna', 'height=600, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')" class="btn btn-xs btn-warning btn-monitor" >{% trans "Monitor" %}</a>-->
<a class="btn btn-xs btn-danger btn-term" value="{{ session.id }}" terminal="{{ session.terminal.id }}" >{% trans "Terminate" %}</a> <a class="btn btn-xs btn-danger btn-term" value="{{ session.id }}" terminal="{{ session.terminal.id }}" >{% trans "Terminate" %}</a>