UniqueSoft/swirl
3
0
Fork 0
mirror of https://github.com/cuigh/swirl synced 2024-12-28 23:02:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add action buttons to service detail page

Browse Source
This commit is contained in:
cuigh 2018-06-25 16:53:30 +08:00
parent 1eadf2934b
commit 81c2439ea4
6 changed files with 198 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
assets/swirl/js/swirl.js
View File

@ -1781,6 +1781,68 @@ var Swirl;
})(Config = Swirl.Config || (Swirl.Config = {}));
})(Swirl || (Swirl = {}));
var Swirl;
(function (Swirl) {
var Container;
(function (Container) {
class ExecPage {
constructor() {
this.$cmd = $("#txt-cmd");
this.$connect = $("#btn-connect");
this.$disconnect = $("#btn-disconnect");
this.$connect.click(this.connect.bind(this));
this.$disconnect.click(this.disconnect.bind(this));
Terminal.applyAddon(fit);
}
connect(e) {
this.$connect.hide();
this.$disconnect.show();
let url = location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/connect?cmd=" + encodeURIComponent(this.$cmd.val());
let ws = new WebSocket("ws://" + url);
ws.onopen = () => {
this.term = new Terminal();
this.term.on('data', (data) => {
if (ws.readyState == WebSocket.OPEN) {
ws.send(data);
}
});
this.term.open(document.getElementById('terminal-container'));
this.term.focus();
let width = Math.floor(($('#terminal-container').width() - 20) / 8.39);
let height = 30;
this.term.resize(width, height);
this.term.setOption('cursorBlink', true);
this.term.fit();
window.onresize = () => {
this.term.fit();
};
ws.onmessage = (e) => {
this.term.write(e.data);
};
ws.onerror = function (error) {
console.log("error: " + error);
};
ws.onclose = () => {
console.log("close");
};
};
this.ws = ws;
}
disconnect(e) {
if (this.ws && this.ws.readyState != WebSocket.CLOSED) {
this.ws.close();
}
if (this.term) {
this.term.destroy();
this.term = null;
}
this.$connect.show();
this.$disconnect.hide();
}
}
Container.ExecPage = ExecPage;
})(Container = Swirl.Container || (Swirl.Container = {}));
})(Swirl || (Swirl = {}));
var Swirl;
(function (Swirl) {
var Container;
(function (Container) {
@ -2449,21 +2511,20 @@ var Swirl;
let $tr = $(e.target).closest("tr");
let name = $tr.find("td:eq(0)").text().trim();
Modal.confirm(`Are you sure to remove service: <strong>${name}</strong>?`, "Delete service", (dlg, e) => {
$ajax.post(`${name}/delete`, { names: name }).trigger(e.target).encoder("form").json(() => {
$ajax.post(`${name}/delete`).trigger(e.target).encoder("form").json(() => {
$tr.remove();
dlg.close();
});
});
}
scaleService(e) {
let $target = $(e.target), $tr = $target.closest("tr");
let $target = $(e.target), $tr = $target.closest("tr"), name = $tr.find("td:eq(0)").text().trim();
let data = {
name: $tr.find("td:eq(0)").text().trim(),
count: $target.data("replicas"),
};
Modal.confirm(`<input name="count" value="${data.count}" class="input" placeholder="Replicas">`, "Scale service", dlg => {
data.count = dlg.find("input[name=count]").val();
$ajax.post(`${data.name}/scale`, data).encoder("form").json(() => {
$ajax.post(`${name}/scale`, data).encoder("form").json(() => {
location.reload();
});
});
@ -2471,7 +2532,7 @@ var Swirl;
rollbackService(e) {
let $tr = $(e.target).closest("tr"), name = $tr.find("td:eq(0)").text().trim();
Modal.confirm(`Are you sure to rollback service: <strong>${name}</strong>?`, "Rollback service", dlg => {
$ajax.post(`${name}/rollback`, { name: name }).encoder("form").json(() => {
$ajax.post(`${name}/rollback`).encoder("form").json(() => {
dlg.close();
});
});
@ -2479,7 +2540,7 @@ var Swirl;
restartService(e) {
let $tr = $(e.target).closest("tr"), name = $tr.find("td:eq(0)").text().trim();
Modal.confirm(`Are you sure to restart service: <strong>${name}</strong>?`, "Restart service", dlg => {
$ajax.post(`${name}/restart`, { name: name }).encoder("form").json(() => {
$ajax.post(`${name}/restart`).encoder("form").json(() => {
dlg.close();
});
});
@ -2837,64 +2898,53 @@ var Swirl;
})(Swirl || (Swirl = {}));
var Swirl;
(function (Swirl) {
var Container;
(function (Container) {
class ExecPage {
var Service;
(function (Service) {
var Modal = Swirl.Core.Modal;
class DetailPage {
constructor() {
this.$cmd = $("#txt-cmd");
this.$connect = $("#btn-connect");
this.$disconnect = $("#btn-disconnect");
this.$connect.click(this.connect.bind(this));
this.$disconnect.click(this.disconnect.bind(this));
Terminal.applyAddon(fit);
$("#btn-delete").click(this.deleteService.bind(this));
$("#btn-scale").click(this.scaleService.bind(this));
$("#btn-restart").click(this.restartService.bind(this));
$("#btn-rollback").click(this.rollbackService.bind(this));
}
connect(e) {
this.$connect.hide();
this.$disconnect.show();
let url = location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/connect?cmd=" + encodeURIComponent(this.$cmd.val());
let ws = new WebSocket("ws://" + url);
ws.onopen = () => {
this.term = new Terminal();
this.term.on('data', (data) => {
if (ws.readyState == WebSocket.OPEN) {
ws.send(data);
}
deleteService(e) {
let name = $("#h2-name").text().trim();
Modal.confirm(`Are you sure to remove service: <strong>${name}</strong>?`, "Delete service", (dlg, e) => {
$ajax.post(`delete`).trigger(e.target).encoder("form").json(() => {
location.href = "/service/";
});
this.term.open(document.getElementById('terminal-container'));
this.term.focus();
let width = Math.floor(($('#terminal-container').width() - 20) / 8.39);
let height = 30;
this.term.resize(width, height);
this.term.setOption('cursorBlink', true);
this.term.fit();
window.onresize = () => {
this.term.fit();
};
ws.onmessage = (e) => {
this.term.write(e.data);
};
ws.onerror = function (error) {
console.log("error: " + error);
};
ws.onclose = () => {
console.log("close");
};
};
this.ws = ws;
});
}
disconnect(e) {
if (this.ws && this.ws.readyState != WebSocket.CLOSED) {
this.ws.close();
}
if (this.term) {
this.term.destroy();
this.term = null;
}
this.$connect.show();
this.$disconnect.hide();
scaleService(e) {
let data = {
count: $("#span-replicas").text().trim(),
};
Modal.confirm(`<input name="count" value="${data.count}" class="input" placeholder="Replicas">`, "Scale service", dlg => {
data.count = dlg.find("input[name=count]").val();
$ajax.post(`scale`, data).trigger(e.target).encoder("form").json(() => {
location.reload();
});
});
}
rollbackService(e) {
let name = $("#h2-name").text().trim();
Modal.confirm(`Are you sure to rollback service: <strong>${name}</strong>?`, "Rollback service", dlg => {
$ajax.post(`rollback`).trigger(e.target).encoder("form").json(() => {
location.reload();
});
});
}
restartService(e) {
let name = $("#h2-name").text().trim();
Modal.confirm(`Are you sure to restart service: <strong>${name}</strong>?`, "Restart service", dlg => {
$ajax.post(`restart`).trigger(e.target).encoder("form").json(() => {
location.reload();
});
});
}
}
Container.ExecPage = ExecPage;
})(Container = Swirl.Container || (Swirl.Container = {}));
Service.DetailPage = DetailPage;
})(Service = Swirl.Service || (Swirl.Service = {}));
})(Swirl || (Swirl = {}));
//# sourceMappingURL=swirl.js.map

2
assets/swirl/js/swirl.js.map
View File

File diff suppressed because one or more lines are too long

53
assets/swirl/ts/service/detail.ts Normal file
View File

@ -0,0 +1,53 @@
///<reference path="../core/core.ts" />
namespace Swirl.Service {
import Modal = Swirl.Core.Modal;
import AjaxResult = Swirl.Core.AjaxResult;
export class DetailPage {
constructor() {
$("#btn-delete").click(this.deleteService.bind(this));
$("#btn-scale").click(this.scaleService.bind(this));
$("#btn-restart").click(this.restartService.bind(this));
$("#btn-rollback").click(this.rollbackService.bind(this));
}
private deleteService(e: JQueryEventObject) {
let name = $("#h2-name").text().trim();
Modal.confirm(`Are you sure to remove service: <strong>${name}</strong>?`, "Delete service", (dlg, e) => {
$ajax.post(`delete`).trigger(e.target).encoder("form").json<AjaxResult>(() => {
location.href = "/service/";
})
});
}
private scaleService(e: JQueryEventObject) {
let data = {
count: $("#span-replicas").text().trim(),
};
Modal.confirm(`<input name="count" value="${data.count}" class="input" placeholder="Replicas">`, "Scale service", dlg => {
data.count = dlg.find("input[name=count]").val();
$ajax.post(`scale`, data).trigger(e.target).encoder("form").json<AjaxResult>(() => {
location.reload();
})
});
}
private rollbackService(e: JQueryEventObject) {
let name = $("#h2-name").text().trim();
Modal.confirm(`Are you sure to rollback service: <strong>${name}</strong>?`, "Rollback service", dlg => {
$ajax.post(`rollback`).trigger(e.target).encoder("form").json<AjaxResult>(() => {
location.reload();
})
});
}
private restartService(e: JQueryEventObject) {
let name = $("#h2-name").text().trim();
Modal.confirm(`Are you sure to restart service: <strong>${name}</strong>?`, "Restart service", dlg => {
$ajax.post(`restart`).trigger(e.target).encoder("form").json<AjaxResult>(() => {
location.reload();
})
});
}
}
}

12
assets/swirl/ts/service/list.ts
View File

@ -21,7 +21,7 @@ namespace Swirl.Service {
let $tr = $(e.target).closest("tr");
let name = $tr.find("td:eq(0)").text().trim();
Modal.confirm(`Are you sure to remove service: <strong>${name}</strong>?`, "Delete service", (dlg, e) => {
$ajax.post(`${name}/delete`, {names: name}).trigger(e.target).encoder("form").json<AjaxResult>(() => {
$ajax.post(`${name}/delete`).trigger(e.target).encoder("form").json<AjaxResult>(() => {
$tr.remove();
dlg.close();
})
@ -30,14 +30,14 @@ namespace Swirl.Service {
private scaleService(e: JQueryEventObject) {
let $target = $(e.target),
$tr = $target.closest("tr");
$tr = $target.closest("tr"),
name = $tr.find("td:eq(0)").text().trim();
let data = {
name: $tr.find("td:eq(0)").text().trim(),
count: $target.data("replicas"),
};
Modal.confirm(`<input name="count" value="${data.count}" class="input" placeholder="Replicas">`, "Scale service", dlg => {
data.count = dlg.find("input[name=count]").val();
$ajax.post(`${data.name}/scale`, data).encoder("form").json<AjaxResult>(() => {
$ajax.post(`${name}/scale`, data).encoder("form").json<AjaxResult>(() => {
location.reload();
})
});
@ -47,7 +47,7 @@ namespace Swirl.Service {
let $tr = $(e.target).closest("tr"),
name = $tr.find("td:eq(0)").text().trim();
Modal.confirm(`Are you sure to rollback service: <strong>${name}</strong>?`, "Rollback service", dlg => {
$ajax.post(`${name}/rollback`, {name: name}).encoder("form").json<AjaxResult>(() => {
$ajax.post(`${name}/rollback`).encoder("form").json<AjaxResult>(() => {
dlg.close();
})
});
@ -57,7 +57,7 @@ namespace Swirl.Service {
let $tr = $(e.target).closest("tr"),
name = $tr.find("td:eq(0)").text().trim();
Modal.confirm(`Are you sure to restart service: <strong>${name}</strong>?`, "Restart service", dlg => {
$ajax.post(`${name}/restart`, {name: name}).encoder("form").json<AjaxResult>(() => {
$ajax.post(`${name}/restart`).encoder("form").json<AjaxResult>(() => {
dlg.close();
})
});

17
controller/service.go
View File

@ -2,7 +2,6 @@ package controller
import (
"strconv"
"strings"
"time"
"github.com/cuigh/auxo/data"
@ -145,14 +144,12 @@ func serviceFetchLogs(ctx web.Context) error {
}
func serviceDelete(ctx web.Context) error {
names := strings.Split(ctx.F("names"), ",")
for _, name := range names {
if err := docker.ServiceRemove(name); err != nil {
return ajaxResult(ctx, err)
}
name := ctx.P("name")
err := docker.ServiceRemove(name)
if err == nil {
biz.Event.CreateService(model.EventActionDelete, name, ctx.User())
}
return ajaxSuccess(ctx, nil)
return ajaxResult(ctx, err)
}
func serviceNew(ctx web.Context) error {
@ -266,7 +263,7 @@ func serviceUpdate(ctx web.Context) error {
}
func serviceScale(ctx web.Context) error {
name := ctx.F("name")
name := ctx.P("name")
count, err := strconv.Atoi(ctx.F("count"))
if err != nil {
return err
@ -280,7 +277,7 @@ func serviceScale(ctx web.Context) error {
}
func serviceRollback(ctx web.Context) error {
name := ctx.F("name")
name := ctx.P("name")
err := docker.ServiceRollback(name)
if err == nil {
biz.Event.CreateService(model.EventActionRollback, name, ctx.User())
@ -289,7 +286,7 @@ func serviceRollback(ctx web.Context) error {
}
func serviceRestart(ctx web.Context) error {
name := ctx.F("name")
name := ctx.P("name")
err := docker.ServiceRestart(name)
if err == nil {
biz.Event.CreateService(model.EventActionRestart, name, ctx.User())

24
views/service/detail.jet
View File

@ -1,6 +1,10 @@
{{ extends "_base" }}
{{ import "../_modules/detail" }}
{{ block script() }}
<script>$(() => new Swirl.Service.DetailPage())</script>
{{ end }}
{{ block body_content() }}
<div class="container">
<nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
@ -15,7 +19,7 @@
<section class="hero is-small is-light">
<div class="hero-body">
<div class="container">
<h2 class="title is-2">
<h2 id="h2-name" class="title is-2">
{{ .Service.Spec.Name }}
</h2>
</div>
@ -37,6 +41,22 @@
<section class="section">
<div class="container">
<div class="buttons">
<button id="btn-delete" class="button is-danger">
<span class="icon"><i class="far fa-trash-alt"></i></span><span>{{ i18n("button.delete") }}</span>
</button>
{{ if .Service.Spec.Mode.Replicated }}
<button id="btn-scale" class="button is-dark">
<span class="icon"><i class="fas fa-adjust"></i></span><span>{{ i18n("button.scale") }}</span>
</button>
{{ end }}
<button id="btn-restart" class="button is-dark">
<span class="icon"><i class="fas fa-redo"></i></span><span>{{ i18n("button.restart") }}</span>
</button>
<button id="btn-rollback" class="button is-dark">
<span class="icon"><i class="fas fa-reply"></i></span><span>{{ i18n("button.rollback") }}</span>
</button>
</div>
<div class="message is-primary">
<div class="message-body">
<dl class="is-horizontal is-marginless">
@ -49,7 +69,7 @@
<div class="tags has-addons">
<span class="tag is-info">{{if .Service.Spec.Mode.Replicated}}replicated{{else}}global{{end}}</span>
{{if .Service.Spec.Mode.Replicated}}
<span class="tag is-success">{{.Service.Replicas}}</span>
<span id="span-replicas" class="tag is-success">{{.Service.Replicas}}</span>
{{end}}
</div>
</dd>