delete support

master
codeskyblue 8 years ago
parent f00268de0f
commit 5e14107315

@ -33,3 +33,7 @@ body {
small.user {
color: #cccccc;
}
.color-red {
color: red;
}

@ -79,14 +79,17 @@
<span class="glyphicon glyphicon-stop"></span> Stop
</button>
<button class="btn btn-default btn-xs" v-on:click="cmdTail(p.program.name)">
<span class="glyphicon glyphicon-text-size"></span> Tail
<span class="fa fa-file-text-o"></span> Log
</button>
<a href="/settings/{{p.program.name}}" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-cog"></span> More
<span class="fa fa-bar-chart"></span> Profiles
</a>
<button class="btn btn-default btn-xs" data-toggle="tooltip" title="{{p.program.command}}" >
<button class="btn btn-default btn-xs" data-toggle="tooltip" title="{{p.program.command}}">
<span class="glyphicon glyphicon-info-sign"></span> Info
</button>
<button class="btn btn-default btn-xs" v-on:click="cmdDelete(p.program.name)">
<span class="color-red glyphicon glyphicon-trash"></span> Delete
</button>
</td>
</tr>
<!-- <tr class="success">
@ -124,7 +127,9 @@
<div class="modal-content">
<form id="formNewProgram" action="/api/programs" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">New program</h4>
</div>
<div class="modal-body">
@ -167,7 +172,9 @@
<div class="modal-content">
<form id="formNewProgram" action="/api/programs" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Tail</h4>
</div>
<div class="modal-body">

@ -2,238 +2,250 @@
var W = {};
var testPrograms = [{
program: {
name: "gggg",
command: "",
dir: "",
autoStart: true,
},
status: "running",
program: {
name: "gggg",
command: "",
dir: "",
autoStart: true,
},
status: "running",
}];
var vm = new Vue({
el: "#app",
data: {
isConnectionAlive: true,
log: {
content: '',
follow: true,
line_count: 0,
},
programs: [],
el: "#app",
data: {
isConnectionAlive: true,
log: {
content: '',
follow: true,
line_count: 0,
},
methods: {
addNewProgram: function() {
console.log("Add")
var form = $("#formNewProgram");
form.submit(function(e) {
console.log("HellO")
e.preventDefault();
console.log(e);
$("#newProgram").modal('hide')
return false;
});
// console.log(this.program.name);
},
updateBreadcrumb: function() {
var pathname = decodeURI(location.pathname || "/");
var parts = pathname.split('/');
this.breadcrumb = [];
if (pathname == "/") {
return this.breadcrumb;
}
var i = 2;
for (; i <= parts.length; i += 1) {
var name = parts[i - 1];
var path = parts.slice(0, i).join('/');
this.breadcrumb.push({
name: name + (i == parts.length ? ' /' : ''),
path: path
})
}
return this.breadcrumb;
},
refresh: function() {
// ws.send("Hello")
$.ajax({
url: "/api/programs",
success: function(data) {
vm.programs = data;
Vue.nextTick(function(){
$('[data-toggle="tooltip"]').tooltip()
})
}
});
},
reload: function() {
$.ajax({
url: "/api/reload",
method: "POST",
success: function(data) {
if (data.status == 0) {
alert("reload success");
} else {
alert(data.value);
}
}
});
},
test: function() {
console.log("test");
},
cmdStart: function(name) {
console.log(name);
$.ajax({
url: "/api/programs/" + name + "/start",
method: 'post',
success: function(data) {
console.log(data);
}
})
},
cmdStop: function(name) {
$.ajax({
url: "/api/programs/" + name + "/stop",
method: 'post',
success: function(data) {
console.log(data);
}
})
},
cmdTail: function(name) {
var that = this;
if (W.wsLog) {
W.wsLog.close()
}
W.wsLog = newWebsocket("/ws/logs/" + name, {
onopen: function(evt) {
that.log.content = "";
that.log.line_count = 0;
},
onmessage: function(evt) {
// strip ansi color
// console.log("DT:", evt.data)
that.log.content += evt.data.replace(/\033\[[0-9;]*m/g, "");
that.log.line_count = $.trim(that.log.content).split(/\r\n|\r|\n/).length;
if (that.log.follow) {
var pre = $(".realtime-log")[0];
setTimeout(function() {
pre.scrollTop = pre.scrollHeight - pre.clientHeight;
}, 1);
}
}
});
this.log.follow = true;
$("#modalTailf").modal({
show: true,
keyboard: true,
// keyboard: false,
// backdrop: 'static',
})
},
canStop: function(status) {
switch (status) {
case "running":
case "retry wait":
return true;
}
programs: [],
},
methods: {
addNewProgram: function() {
console.log("Add")
var form = $("#formNewProgram");
form.submit(function(e) {
console.log("HellO")
e.preventDefault();
console.log(e);
$("#newProgram").modal('hide')
return false;
});
// console.log(this.program.name);
},
updateBreadcrumb: function() {
var pathname = decodeURI(location.pathname || "/");
var parts = pathname.split('/');
this.breadcrumb = [];
if (pathname == "/") {
return this.breadcrumb;
}
var i = 2;
for (; i <= parts.length; i += 1) {
var name = parts[i - 1];
var path = parts.slice(0, i).join('/');
this.breadcrumb.push({
name: name + (i == parts.length ? ' /' : ''),
path: path
})
}
return this.breadcrumb;
},
refresh: function() {
// ws.send("Hello")
$.ajax({
url: "/api/programs",
success: function(data) {
vm.programs = data;
Vue.nextTick(function() {
$('[data-toggle="tooltip"]').tooltip()
})
}
});
},
reload: function() {
$.ajax({
url: "/api/reload",
method: "POST",
success: function(data) {
if (data.status == 0) {
alert("reload success");
} else {
alert(data.value);
}
}
});
},
test: function() {
console.log("test");
},
cmdStart: function(name) {
console.log(name);
$.ajax({
url: "/api/programs/" + name + "/start",
method: 'post',
success: function(data) {
console.log(data);
}
})
},
cmdStop: function(name) {
$.ajax({
url: "/api/programs/" + name + "/stop",
method: 'post',
success: function(data) {
console.log(data);
}
})
},
cmdTail: function(name) {
var that = this;
if (W.wsLog) {
W.wsLog.close()
}
W.wsLog = newWebsocket("/ws/logs/" + name, {
onopen: function(evt) {
that.log.content = "";
that.log.line_count = 0;
},
}
onmessage: function(evt) {
// strip ansi color
// console.log("DT:", evt.data)
that.log.content += evt.data.replace(/\033\[[0-9;]*m/g, "");
that.log.line_count = $.trim(that.log.content).split(/\r\n|\r|\n/).length;
if (that.log.follow) {
var pre = $(".realtime-log")[0];
setTimeout(function() {
pre.scrollTop = pre.scrollHeight - pre.clientHeight;
}, 1);
}
}
});
this.log.follow = true;
$("#modalTailf").modal({
show: true,
keyboard: true,
// keyboard: false,
// backdrop: 'static',
})
},
cmdDelete: function(name) {
if (!confirm("Confirm delete \"" + name + "\"")) {
return
}
$.ajax({
url: "/api/programs/" + name,
method: 'delete',
success: function(data) {
console.log(data);
}
})
},
canStop: function(status) {
switch (status) {
case "running":
case "retry wait":
return true;
}
},
}
})
Vue.filter('fromNow', function(value) {
return moment(value).fromNow();
return moment(value).fromNow();
})
Vue.filter('formatBytes', function(value) {
var bytes = parseFloat(value);
if (bytes < 0) return "-";
else if (bytes < 1024) return bytes + " B";
else if (bytes < 1048576) return (bytes / 1024).toFixed(0) + " KB";
else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + " MB";
else return (bytes / 1073741824).toFixed(1) + " GB";
var bytes = parseFloat(value);
if (bytes < 0) return "-";
else if (bytes < 1024) return bytes + " B";
else if (bytes < 1048576) return (bytes / 1024).toFixed(0) + " KB";
else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + " MB";
else return (bytes / 1073741824).toFixed(1) + " GB";
})
Vue.filter('colorStatus', function(value) {
var makeColorText = function(text, color) {
return "<span class='status' style='background-color:" + color + "'>" + text + "</span>";
}
switch (value) {
case "stopping":
return makeColorText(value, "#996633");
case "running":
return makeColorText(value, "green");
case "fatal":
return makeColorText(value, "red");
default:
return makeColorText(value, "gray");
}
return value;
var makeColorText = function(text, color) {
return "<span class='status' style='background-color:" + color + "'>" + text + "</span>";
}
switch (value) {
case "stopping":
return makeColorText(value, "#996633");
case "running":
return makeColorText(value, "green");
case "fatal":
return makeColorText(value, "red");
default:
return makeColorText(value, "gray");
}
return value;
})
Vue.directive('disable', function(value) {
this.el.disabled = !!value
this.el.disabled = !!value
})
$(function() {
vm.refresh();
vm.refresh();
$("#formNewProgram").submit(function(e) {
var url = "/api/programs",
data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
success: function(data) {
if (data.status === 0) {
$("#newProgram").modal('hide');
} else {
window.alert(data.error);
}
},
error: function(err) {
console.log(err.responseText);
}
})
e.preventDefault()
});
$("#formNewProgram").submit(function(e) {
var url = "/api/programs",
data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
success: function(data) {
if (data.status === 0) {
$("#newProgram").modal('hide');
} else {
window.alert(data.error);
}
},
error: function(err) {
console.log(err.responseText);
}
})
e.preventDefault()
});
console.log("HEE")
console.log("HEE")
function newEventWatcher() {
W.events = newWebsocket("/ws/events", {
onopen: function(evt) {
vm.isConnectionAlive = true;
},
onmessage: function(evt) {
console.log("response:" + evt.data);
vm.refresh();
},
onclose: function(evt) {
W.events = null;
vm.isConnectionAlive = false;
console.log("Reconnect after 3s")
setTimeout(newEventWatcher, 3000)
}
});
};
function newEventWatcher() {
W.events = newWebsocket("/ws/events", {
onopen: function(evt) {
vm.isConnectionAlive = true;
},
onmessage: function(evt) {
console.log("response:" + evt.data);
vm.refresh();
},
onclose: function(evt) {
W.events = null;
vm.isConnectionAlive = false;
console.log("Reconnect after 3s")
setTimeout(newEventWatcher, 3000)
}
});
};
newEventWatcher();
newEventWatcher();
// cancel follow log if people want to see the original data
$(".realtime-log").bind('mousewheel', function(evt) {
if (evt.originalEvent.wheelDelta >= 0) {
vm.log.follow = false;
}
})
$('#modalTailf').on('hidden.bs.modal', function() {
// do something…
console.log("Hiddeen")
if (W.wsLog) {
console.log("wsLog closed")
W.wsLog.close()
}
})
// cancel follow log if people want to see the original data
$(".realtime-log").bind('mousewheel', function(evt) {
if (evt.originalEvent.wheelDelta >= 0) {
vm.log.follow = false;
}
})
$('#modalTailf').on('hidden.bs.modal', function() {
// do something…
console.log("Hiddeen")
if (W.wsLog) {
console.log("wsLog closed")
W.wsLog.close()
}
})
});

@ -37,7 +37,7 @@ func init() {
type Supervisor struct {
ConfigDir string
names []string
names []string // order of programs
pgMap map[string]Program
procMap map[string]*Process
mu sync.Mutex
@ -138,7 +138,6 @@ func (s *Supervisor) addOrUpdateProgram(pg Program) error {
}
}()
} else {
// s.pgs = append(s.pgs, &pg)
s.names = append(s.names, pg.Name)
s.pgMap[pg.Name] = pg
s.procMap[pg.Name] = s.newProcess(pg)
@ -190,12 +189,13 @@ func (s *Supervisor) loadDB() error {
if visited[pg.Name] {
continue
}
name := pg.Name
log.Printf("stop before delete program: %s", name)
s.stopAndWait(name)
delete(s.procMap, name)
delete(s.pgMap, name)
s.broadcastEvent(pg.Name + " deleted")
s.removeProgram(pg.Name)
// name := pg.Name
// log.Printf("stop before delete program: %s", name)
// s.stopAndWait(name)
// delete(s.procMap, name)
// delete(s.pgMap, name)
// s.broadcastEvent(name + " deleted")
}
return nil
}
@ -210,6 +210,22 @@ func (s *Supervisor) saveDB() error {
return ioutil.WriteFile(s.programPath(), data, 0644)
}
func (s *Supervisor) removeProgram(name string) {
names := make([]string, 0, len(s.names))
for _, pName := range s.names {
if pName == name {
continue
}
names = append(names, pName)
}
s.names = names
log.Printf("stop before delete program: %s", name)
s.stopAndWait(name)
delete(s.procMap, name)
delete(s.pgMap, name)
s.broadcastEvent(name + " deleted")
}
type WebConfig struct {
User string
Version string
@ -360,6 +376,26 @@ func (s *Supervisor) hAddProgram(w http.ResponseWriter, r *http.Request) {
w.Write(data)
}
func (s *Supervisor) hDelProgram(w http.ResponseWriter, r *http.Request) {
name := mux.Vars(r)["name"]
w.Header().Set("Content-Type", "application/json")
var data []byte
if _, ok := s.pgMap[name]; !ok {
data, _ = json.Marshal(map[string]interface{}{
"status": 1,
"error": fmt.Sprintf("Program %s not exists", strconv.Quote(name)),
})
} else {
s.removeProgram(name)
s.saveDB()
data, _ = json.Marshal(map[string]interface{}{
"status": 0,
})
}
w.Write(data)
}
func (s *Supervisor) hStartProgram(w http.ResponseWriter, r *http.Request) {
name := mux.Vars(r)["name"]
proc, ok := s.procMap[name]
@ -593,6 +629,7 @@ func newSupervisorHandler() (suv *Supervisor, hdlr http.Handler, err error) {
r.HandleFunc("/api/programs", suv.hGetProgramList).Methods("GET")
r.HandleFunc("/api/programs/{name}", suv.hGetProgram).Methods("GET")
r.HandleFunc("/api/programs/{name}", suv.hDelProgram).Methods("DELETE")
r.HandleFunc("/api/programs", suv.hAddProgram).Methods("POST")
r.HandleFunc("/api/programs/{name}/start", suv.hStartProgram).Methods("POST")
r.HandleFunc("/api/programs/{name}/stop", suv.hStopProgram).Methods("POST")

Loading…
Cancel
Save