同步更新

2025-11-02 20:36:13 +08:00
commit aaa6bf7f87
69 changed files with 40278 additions and 0 deletions
--- a/luasrc/view/dockerman/apply_widget.htm
+++ b/luasrc/view/dockerman/apply_widget.htm
@@ -0,0 +1,147 @@
+<style type="text/css">
+	#docker_apply_overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.7);
+		display: none;
+		z-index: 20000;
+	}
+
+	#docker_apply_overlay .alert-message {
+		position: relative;
+		top: 10%;
+		width: 60%;
+		margin: auto;
+		display: flex;
+		flex-wrap: wrap;
+		min-height: 32px;
+		align-items: center;
+	}
+
+	#docker_apply_overlay .alert-message > h4,
+	#docker_apply_overlay .alert-message > p,
+	#docker_apply_overlay .alert-message > div {
+		flex-basis: 100%;
+	}
+
+	#docker_apply_overlay .alert-message > img {
+		margin-right: 1em;
+		flex-basis: 32px;
+	}
+
+	body.apply-overlay-active {
+		overflow: hidden;
+		height: 100vh;
+	}
+
+	body.apply-overlay-active #docker_apply_overlay {
+		display: block;
+	}
+</style>
+
+<script type="text/javascript">//<![CDATA[
+	var xhr = new XHR(),
+	uci_apply_rollback = <%=math.max(luci.config and luci.config.apply and luci.config.apply.rollback or 90, 90)%>,
+	uci_apply_holdoff = <%=math.max(luci.config and luci.config.apply and luci.config.apply.holdoff or 4, 1)%>,
+	uci_apply_timeout = <%=math.max(luci.config and luci.config.apply and luci.config.apply.timeout or 5, 1)%>,
+	uci_apply_display = <%=math.max(luci.config and luci.config.apply and luci.config.apply.display or 1.5, 1)%>,
+	was_xhr_poll_running = false;
+
+	function docker_status_message(type, content) {
+		document.getElementById('docker_apply_overlay') || document.body.insertAdjacentHTML("beforeend",'<div id="docker_apply_overlay"><div class="alert-message"></div></div>')
+		var overlay = document.getElementById('docker_apply_overlay')
+		message = overlay.querySelector('.alert-message');
+
+		if (message && type) {
+			if (!message.classList.contains(type)) {
+				message.classList.remove('notice');
+				message.classList.remove('warning');
+				message.classList.add(type);
+			}
+
+			if (content)
+				message.innerHTML = content;
+
+			document.body.classList.add('apply-overlay-active');
+			document.body.scrollTop = document.documentElement.scrollTop = 0;
+			if (!was_xhr_poll_running) {
+				was_xhr_poll_running = XHR.running();
+				XHR.halt();
+			}
+		}
+		else {
+			document.body.classList.remove('apply-overlay-active');
+			if (was_xhr_poll_running)
+				XHR.run();
+		}
+	}
+
+	var loading_msg="Loading.."
+	function uci_confirm_docker() {
+		var tt;
+		docker_status_message('notice');
+		var call = function(r, resjson, duration) {
+			if (r && r.status === 200 ) {
+				var indicator = document.querySelector('.uci_change_indicator');
+				if (indicator)
+					indicator.style.display = 'none';
+				docker_status_message('notice', '<%:Docker actions done.%>');
+				document.body.classList.remove('apply-overlay-active');
+				window.clearTimeout(tt);
+				return;
+			}
+			loading_msg = resjson?resjson.info:loading_msg
+			// var delay = isNaN(duration) ? 0 : Math.max(1000 - duration, 0);
+			var delay =1000
+			window.setTimeout(function() {
+				xhr.get('<%=url("admin/docker/confirm")%>', null, call, uci_apply_timeout * 1000);
+			},delay);
+		};
+
+		var tick = function() {
+			var now = Date.now();
+
+			docker_status_message(
+				'notice',
+				'<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> <span style="white-space:pre-line; word-break:break-all; font-family: \'Courier New\', Courier, monospace;">' + loading_msg + '</span>'
+			);
+
+			tt = window.setTimeout(tick, 200);
+			ts = now;
+		};
+
+		tick();
+		/* wait a few seconds for the settings to become effective */
+		window.setTimeout(call, Math.max(uci_apply_holdoff * 1000 , 1));
+	}
+	// document.getElementsByTagName("form")[0].addEventListener("submit", (e)=>{
+	// uci_confirm_docker()
+	// })
+
+	function fnSubmitForm(el){
+		if (el.id != "cbid.table.1._new") {
+			uci_confirm_docker()
+		}
+	}
+
+	<% if self.err then -%>
+		docker_status_message('warning', '<span style="white-space:pre-line; word-break:break-all; font-family: \'Courier New\', Courier, monospace;">'+`<%=self.err%>`+'</span>');
+		document.getElementById('docker_apply_overlay').addEventListener(
+			"click",
+			(e)=>{
+				docker_status_message()
+			}
+		)
+	<%- end %>
+
+	window.onload= function (){
+		var buttons = document.querySelectorAll('input[type="submit"]');
+		[].slice.call(buttons).forEach(function (el) {
+			el.onclick = fnSubmitForm.bind(this, el);
+		});
+	}
+
+//]]></script>
--- a/luasrc/view/dockerman/cbi/inlinebutton.htm
+++ b/luasrc/view/dockerman/cbi/inlinebutton.htm
@@ -0,0 +1,7 @@
+<div style="display: inline-block;">
+	<% if self:cfgvalue(section) ~= false then %>
+		<input class="btn cbi-button cbi-button-<%=self.inputstyle or "button" %>" type="submit"" <% if self.disable then %>disabled <% end %><%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self.inputtitle or self.title)%> />
+	<% else %>
+		-
+	<% end %>
+</div>
--- a/luasrc/view/dockerman/cbi/inlinevalue.htm
+++ b/luasrc/view/dockerman/cbi/inlinevalue.htm
@@ -0,0 +1,33 @@
+<div style="display: inline-block;">
+	<!-- <%- if self.title then -%>
+	<label class="cbi-value-title"<%= attr("for", cbid) %>>
+		<%- if self.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=self.titleref%>"><%- end -%>
+			<%-=self.title-%>
+		<%- if self.titleref then -%></a><%- end -%>
+		</label>
+	<%- end -%> -->
+	<%- if self.password then -%>
+		<input type="password" style="position:absolute; left:-100000px" aria-hidden="true"<%=
+			attr("name", "password." .. cbid)
+		%> />
+	<%- end -%>
+	<input data-update="change"<%=
+		attr("id", cbid) ..
+		attr("name", cbid) ..
+		attr("type", self.password and "password" or "text") ..
+		attr("class", self.password and "cbi-input-password" or "cbi-input-text") ..
+		attr("value", self:cfgvalue(section) or self.default) ..
+		ifattr(self.password, "autocomplete", "new-password") ..
+		ifattr(self.size, "size") ..
+		ifattr(self.placeholder, "placeholder") ..
+		ifattr(self.readonly, "readonly") ..
+		ifattr(self.maxlength, "maxlength") ..
+		ifattr(self.datatype, "data-type", self.datatype) ..
+		ifattr(self.datatype, "data-optional", self.optional or self.rmempty) ..
+		ifattr(self.combobox_manual, "data-manual", self.combobox_manual) ..
+		ifattr(#self.keylist > 0, "data-choices", { self.keylist, self.vallist })
+	%> />
+	<%- if self.password then -%>
+		<div class="btn cbi-button cbi-button-neutral" title="<%:Reveal/hide password%>" onclick="var e = this.previousElementSibling; e.type = (e.type === 'password') ? 'text' : 'password'">∗</div>
+	<% end %>
+</div>
--- a/luasrc/view/dockerman/cbi/namedsection.htm
+++ b/luasrc/view/dockerman/cbi/namedsection.htm
@@ -0,0 +1,9 @@
+<% if self:cfgvalue(self.section) then section = self.section %>
+	<div class="cbi-section" id="cbi-<%=self.config%>-<%=section%>">
+		<%+cbi/tabmenu%>
+		<div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>">
+			<%+cbi/ucisection%>
+		</div>
+	</div>
+<% end %>
+<!-- /nsection -->
--- a/luasrc/view/dockerman/cbi/xfvalue.htm
+++ b/luasrc/view/dockerman/cbi/xfvalue.htm
@@ -0,0 +1,10 @@
+<%+cbi/valueheader%>
+	<input type="hidden" value="1"<%=
+		attr("name", "cbi.cbe." .. self.config .. "." .. section .. "." .. self.option)
+	%> />
+	<input class="cbi-input-checkbox" data-update="click change" type="checkbox" <% if self.disable == 1 then %>disabled <% end %><%=
+		attr("id", cbid) .. attr("name", cbid) .. attr("value", self.enabled or 1) ..
+		ifattr((self:cfgvalue(section) or self.default) == self.enabled, "checked", "checked")
+	%> />
+	<label<%= attr("for", cbid)%>></label>
+<%+cbi/valuefooter%>
--- a/luasrc/view/dockerman/container.htm
+++ b/luasrc/view/dockerman/container.htm
@@ -0,0 +1,28 @@
+<br />
+<ul class="cbi-tabmenu">
+	<li id="cbi-tab-container_info"><a id="a-cbi-tab-container_info" href=""><%:Info%></a></li>
+	<li id="cbi-tab-container_resources"><a id="a-cbi-tab-container_resources" href=""><%:Resources%></a></li>
+	<li id="cbi-tab-container_stats"><a id="a-cbi-tab-container_stats" href=""><%:Stats%></a></li>
+	<li id="cbi-tab-container_file"><a id="a-cbi-tab-container_file" href=""><%:File%></a></li>
+	<li id="cbi-tab-container_console"><a id="a-cbi-tab-container_console" href=""><%:Console%></a></li>
+	<li id="cbi-tab-container_inspect"><a id="a-cbi-tab-container_inspect" href=""><%:Inspect%></a></li>
+	<li id="cbi-tab-container_logs"><a id="a-cbi-tab-container_logs" href=""><%:Logs%></a></li>
+</ul>
+
+<script type="text/javascript">
+	let re = /\/admin\/docker\/container\//
+	let p = window.location.href
+	let path = p.split(re)
+	let container_id = path[1].split('/')[0] || path[1]
+	let action = path[1].split('/')[1] || "info"
+	let actions=["info","resources","stats","file","console","logs","inspect"]
+	actions.forEach(function(item) {
+		document.getElementById("a-cbi-tab-container_" + item).href= path[0]+"/admin/docker/container/"+container_id+'/'+item
+		if (action === item) {
+			document.getElementById("cbi-tab-container_" + item).className="cbi-tab"
+		}
+		else {
+			document.getElementById("cbi-tab-container_" + item).className="cbi-tab-disabled"
+		}
+	})
+</script>
--- a/luasrc/view/dockerman/container_console.htm
+++ b/luasrc/view/dockerman/container_console.htm
@@ -0,0 +1,6 @@
+<div class="cbi-map">
+	<iframe id="terminal" style="width: 100%; min-height: 500px; border: none; border-radius: 3px;"></iframe>
+</div>
+<script type="text/javascript">
+	document.getElementById("terminal").src = window.location.protocol + "//" + window.location.hostname + ":7682";
+</script>
--- a/luasrc/view/dockerman/container_file.htm
+++ b/luasrc/view/dockerman/container_file.htm
@@ -0,0 +1,73 @@
+<div id="upload-container" class="cbi-value cbi-value-last">
+	<label class="cbi-value-title" for="archive"><%:Upload%></label>
+	<div class="cbi-value-field">
+		<input type="file" name="upload_archive" accept="application/x-tar" id="upload_archive" />
+	</div>
+	<br />
+	<label class="cbi-value-title" for="path"><%:Path%></label>
+	<div class="cbi-value-field">
+		<input type="text" class="cbi-input-text" name="path" value="/tmp/" id="path" />
+	</div>
+	<br />
+	<div class="cbi-value-field">
+		<input type="button"" class="btn cbi-button cbi-button-action important" id="upload" name="upload" value="<%:Upload%>" />
+		<input type="button"" class="btn cbi-button cbi-button-action important" id="download" name="download" value="<%:Download%>" />
+	</div>
+</div>
+
+<script type="text/javascript">
+	let btnUpload = document.getElementById('upload')
+	btnUpload.onclick = function (e) {
+		let uploadArchive = document.getElementById('upload_archive')
+		let uploadPath = document.getElementById('path').value
+		if (!uploadArchive.value || !uploadPath) {
+			docker_status_message('warning', "<%:Please input the PATH and select the file !%>")
+			document.getElementById('docker_apply_overlay').addEventListener(
+				"click",
+				(e)=>{
+					docker_status_message()
+				}
+			)
+			return
+		}
+		let fileName = uploadArchive.files[0].name
+		let formData = new FormData()
+		formData.append('upload-filename', fileName)
+		formData.append('upload-path', uploadPath)
+		formData.append('upload-archive', uploadArchive.files[0])
+		let xhr = new XMLHttpRequest()
+		xhr.open("POST", '<%=luci.dispatcher.build_url("admin/docker/container_put_archive")%>/<%=self.container%>', true)
+		xhr.onload = function() {
+			if (xhr.status == 200) {
+				uploadArchive.value = ''
+				docker_status_message('notice', "<%:Upload Success%>")
+			}
+			else {
+				docker_status_message('warning', "<%:Upload Error%>:" + xhr.statusText)
+			}
+			document.getElementById('docker_apply_overlay').addEventListener(
+				"click",
+				(e)=>{
+					docker_status_message()
+				}
+			)
+		}
+		xhr.send(formData)
+	}
+
+	let btnDownload = document.getElementById('download')
+	btnDownload.onclick = function (e) {
+		let downloadPath = document.getElementById('path').value
+		if (!downloadPath) {
+			docker_status_message('warning', "<%:Please input the PATH !%>")
+			document.getElementById('docker_apply_overlay').addEventListener(
+				"click",
+				(e)=>{
+					docker_status_message()
+				}
+			)
+			return
+		}
+		window.open('<%=luci.dispatcher.build_url("admin/docker/container_get_archive")%>?id=<%=self.container%>&path=' + encodeURIComponent(downloadPath))
+	}
+</script>
--- a/luasrc/view/dockerman/container_stats.htm
+++ b/luasrc/view/dockerman/container_stats.htm
@@ -0,0 +1,81 @@
+<script type="text/javascript">//<![CDATA[
+	let last_bw_tx
+	let last_bw_rx
+	let interval = 3
+
+	function progressbar(v, m, pc, np, f) {
+		m = m || 100
+
+		return String.format(
+			'<div style="width:100%%; max-width:500px; position:relative; border:1px solid #999999">' +
+			'<div style="background-color:#CCCCCC; width:%d%%; height:15px">' +
+			'<div style="position:absolute; left:0; top:0; text-align:center; width:100%%; color:#000000">' +
+			'<small>%s '+(f?f:'/')+' %s ' + (np ? "" : '(%d%%)') + '</small>' +
+			'</div>' +
+			'</div>' +
+			'</div>', pc, v, m, pc, f
+		);
+	}
+
+	function niceBytes(bytes, decimals) {
+		if (bytes == 0) return '0 Bytes';
+		var k = 1000,
+			dm = decimals + 1 || 3,
+			sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+			i = Math.floor(Math.log(bytes) / Math.log(k));
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+	}
+
+	XHR.poll(interval, '<%=luci.dispatcher.build_url("admin/docker/container_stats")%>/<%=self.container_id%>', { status: 1 },
+		function (x, info) {
+			var e;
+
+			if (e = document.getElementById('cbi-table-cpu-value'))
+				e.innerHTML = progressbar(
+					(info.cpu_percent), 100, (info.cpu_percent ? info.cpu_percent : 0));
+			if (e = document.getElementById('cbi-table-memory-value'))
+				e.innerHTML = progressbar(
+					niceBytes(info.memory.mem_useage),
+					niceBytes(info.memory.mem_limit),
+					((100 / (info.memory.mem_limit ? info.memory.mem_limit : 100)) * (info.memory.mem_useage ? info.memory.mem_useage : 0))
+				);
+
+			for (var eth in info.bw_rxtx) {
+				if (!document.getElementById("cbi-table-speed_" + eth + "-value")) {
+					let tab = document.getElementById("cbi-table-cpu").parentNode
+					let div = document.getElementById('cbi-table-cpu').cloneNode(true);
+					div.id = "cbi-table-speed_" + eth;
+					div.children[0].innerHTML = "<%:Upload/Download%>: " + eth
+					div.children[1].id = "cbi-table-speed_" + eth + "-value"
+					tab.appendChild(div)
+				}
+				if (!document.getElementById("cbi-table-network_" + eth + "-value")) {
+					let tab = document.getElementById("cbi-table-cpu").parentNode
+					let div = document.getElementById('cbi-table-cpu').cloneNode(true);
+					div.id = "cbi-table-network_" + eth;
+					div.children[0].innerHTML = "<%:TX/RX%>: " + eth
+					div.children[1].id = "cbi-table-network_" + eth + "-value"
+					tab.appendChild(div)
+				}
+				e = document.getElementById("cbi-table-network_" + eth + "-value")
+				e.innerHTML = progressbar(
+					'￪'+niceBytes(info.bw_rxtx[eth].bw_tx),
+					'￬'+niceBytes(info.bw_rxtx[eth].bw_rx),
+					null,
+					true, " "
+				);
+				e = document.getElementById("cbi-table-speed_" + eth + "-value")
+				if (! last_bw_tx) last_bw_tx = info.bw_rxtx[eth].bw_tx
+				if (! last_bw_rx) last_bw_rx = info.bw_rxtx[eth].bw_rx
+				e.innerHTML = progressbar(
+					'￪'+niceBytes((info.bw_rxtx[eth].bw_tx - last_bw_tx)/interval)+'/s',
+					'￬'+niceBytes((info.bw_rxtx[eth].bw_rx - last_bw_rx)/interval)+'/s',
+					null,
+					true, " "
+				);
+				last_bw_tx = info.bw_rxtx[eth].bw_tx
+				last_bw_rx = info.bw_rxtx[eth].bw_rx
+			}
+
+		});
+//]]></script>
--- a/luasrc/view/dockerman/images_import.htm
+++ b/luasrc/view/dockerman/images_import.htm
@@ -0,0 +1,104 @@
+<input type="text" class="cbi-input-text" name="isrc" placeholder="http://host/image.tar" id="isrc" />
+<input type="text" class="cbi-input-text" name="itag" placeholder="repository:tag" id="itag" />
+<div style="display: inline-block;">
+	<input type="button"" class="btn cbi-button cbi-button-add" id="btnimport" name="import" value="<%:Import%>" />
+	<input type="file" id="file_import" style="visibility:hidden; position: absolute;top: 0px; left: 0px;" />
+</div>
+
+<script type="text/javascript">
+	let btnImport = document.getElementById('btnimport')
+	let valISrc = document.getElementById('isrc')
+	let valITag = document.getElementById('itag')
+	btnImport.onclick = function (e) {
+		if (valISrc.value == "") {
+			document.getElementById("file_import").click()
+			return
+		}
+		else {
+			let formData = new FormData()
+			formData.append('src', valISrc.value)
+			formData.append('tag', valITag.value)
+			let xhr = new XMLHttpRequest()
+			uci_confirm_docker()
+			xhr.open("POST", "<%=luci.dispatcher.build_url('admin/docker/images_import')%>", true)
+			xhr.onload = function () {
+				location.reload()
+			}
+			xhr.send(formData)
+		}
+	}
+
+	let fileimport = document.getElementById('file_import')
+	fileimport.onchange = function (e) {
+		let fileimport = document.getElementById('file_import')
+		if (!fileimport.value) {
+			return
+		}
+		let valITag = document.getElementById('itag')
+		let fileName = fileimport.files[0].name
+		let formData = new FormData()
+		formData.append('upload-filename', fileName)
+		formData.append('tag', valITag.value)
+		formData.append('upload-archive', fileimport.files[0])
+		let xhr = new XMLHttpRequest()
+		uci_confirm_docker()
+		xhr.open("POST", "<%=luci.dispatcher.build_url('admin/docker/images_import')%>", true)
+		xhr.onload = function () {
+			fileimport.value = ''
+			location.reload()
+		}
+		xhr.send(formData)
+	}
+
+	let new_tag = function (image_id) {
+		let new_tag = prompt("<%:New tag%>\n<%:Image%>" + "ID: " + image_id + "\n<%:Please input new tag%>:", "")
+		if (new_tag) {
+			(new XHR()).post("<%=luci.dispatcher.build_url('admin/docker/images_tag')%>",
+				{
+					id: image_id,
+					tag: new_tag
+				},
+				function (r) {
+					if (r.status == 201) {
+						location.reload()
+					}
+					else {
+						docker_status_message('warning', 'Image: untagging ' + tag + '...fail code:' + r.status + r.statusText);
+						document.getElementById('docker_apply_overlay').addEventListener(
+							"click",
+							(e)=>{
+								docker_status_message()
+							}
+						)
+					}
+				}
+			)
+		}
+	}
+
+	let un_tag = function (tag) {
+		if (tag.match("<none>"))
+			return
+		if (confirm("<%:Remove tag%>: " + tag + " ?")) {
+			(new XHR()).post("<%=luci.dispatcher.build_url('admin/docker/images_untag')%>",
+				{
+					tag: tag
+				},
+				function (r) {
+					if (r.status == 200) {
+						location.reload()
+					}
+					else {
+						docker_status_message('warning', 'Image: untagging ' + tag + '...fail code:' + r.status + r.statusText);
+						document.getElementById('docker_apply_overlay').addEventListener(
+							"click",
+							(e)=>{
+								docker_status_message()
+							}
+						)
+					}
+				}
+			)
+		}
+	}
+</script>
--- a/luasrc/view/dockerman/images_load.htm
+++ b/luasrc/view/dockerman/images_load.htm
@@ -0,0 +1,30 @@
+<div style="display: inline-block;">
+	<input type="button"" class="btn cbi-button cbi-button-add" id="btnload" name="load" value="<%:Load%>" />
+	<input type="file" id="file_load" style="visibility:hidden; position: absolute;top: 0px; left: 0px;" accept="application/x-tar" />
+</div>
+<script type="text/javascript">
+	let btnLoad = document.getElementById('btnload')
+	btnLoad.onclick = function (e) {
+		document.getElementById("file_load").click()
+		e.preventDefault()
+	}
+
+	let fileLoad = document.getElementById('file_load')
+	fileLoad.onchange = function(e){
+		let fileLoad = document.getElementById('file_load')
+		if (!fileLoad.value) {
+			return
+		}
+		let fileName = fileLoad.files[0].name
+		let formData = new FormData()
+		formData.append('upload-filename', fileName)
+		formData.append('upload-archive', fileLoad.files[0])
+		let xhr = new XMLHttpRequest()
+		uci_confirm_docker()
+		xhr.open("POST", '<%=luci.dispatcher.build_url("admin/docker/images_load")%>', true)
+		xhr.onload = function() {
+			location.reload()
+		}
+	xhr.send(formData)
+	}
+</script>
--- a/luasrc/view/dockerman/logs.htm
+++ b/luasrc/view/dockerman/logs.htm
@@ -0,0 +1,13 @@
+<% if self.title == "Events" then %>
+<%+header%>
+<h2 name="content"><%:Docker%></h2>
+<div class="cbi-section">
+<h3><%:Events%></h3>
+<% end %>
+<div id="content_syslog">
+<textarea readonly="readonly" wrap="off" rows="<%=self.syslog:cmatch('\n')+2%>" id="syslog"><%=self.syslog:pcdata()%></textarea>
+</div>
+<% if self.title == "Events" then %>
+</div>
+<%+footer%>
+<% end %>
--- a/luasrc/view/dockerman/newcontainer_resolve.htm
+++ b/luasrc/view/dockerman/newcontainer_resolve.htm
@@ -0,0 +1,102 @@
+<style type="text/css">
+	#dialog_reslov {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.7);
+		display: none;
+		z-index: 20000;
+	}
+
+	#dialog_reslov .dialog_box {
+		position: relative;
+		background: rgba(255, 255, 255);
+		top: 10%;
+		width: 50%;
+		margin: auto;
+		display: flex;
+		flex-wrap: wrap;
+		height:auto;
+		align-items: center;
+	}
+
+	#dialog_reslov .dialog_line {
+		margin-top: .5em;
+		margin-bottom: .5em;
+		margin-left: 2em;
+		margin-right: 2em;
+	}
+
+	#dialog_reslov .dialog_box>h4,
+	#dialog_reslov .dialog_box>p,
+	#dialog_reslov .dialog_box>div {
+		flex-basis: 100%;
+	}
+
+	#dialog_reslov .dialog_box>img {
+		margin-right: 1em;
+		flex-basis: 32px;
+	}
+
+	body.dialog-reslov-active {
+		overflow: hidden;
+		height: 100vh;
+	}
+
+	body.dialog-reslov-active #dialog_reslov {
+		display: block;
+	}
+</style>
+
+<script type="text/javascript">
+	function close_reslov_dialog() {
+		document.body.classList.remove('dialog-reslov-active')
+		document.documentElement.style.overflowY = 'scroll'
+	}
+
+	function reslov_container() {
+		let s = document.getElementById('cmd-line-status')
+
+		if (!s)
+			return
+
+		let cmd_line = document.getElementById("dialog_reslov_text").value;
+		if (cmd_line == null || cmd_line == "") {
+			return
+		}
+
+		cmd_line = cmd_line.replace(/(^\s*)/g,"")
+		if (!cmd_line.match(/^docker\s+(run|create)/)) {
+			s.innerHTML = "<font color='red'><%:Command line Error%></font>"
+			return
+		}
+
+		let reg_space = /\s+/g
+		let reg_muti_line= /\\\s*\n/g
+		//   reg_rem =/(?<!\\)`#.+(?<!\\)`/g  // the command has `# `
+		let reg_rem =/`#.+`/g// the command has `# `
+		cmd_line = cmd_line.replace(/^docker\s+(run|create)/,"DOCKERCLI").replace(reg_rem, " ").replace(reg_muti_line, " ").replace(reg_space, " ")
+		console.log(cmd_line)
+		window.location.href = '<%=luci.dispatcher.build_url("admin/docker/newcontainer")%>/' + encodeURI(cmd_line)
+	}
+
+	function clear_text(){
+		let s = document.getElementById('cmd-line-status')
+		s.innerHTML = ""
+	}
+
+	function show_reslov_dialog() {
+		document.getElementById('dialog_reslov') || document.body.insertAdjacentHTML("beforeend", '<div id="dialog_reslov"><div class="dialog_box"><div class="dialog_line"></div><div class="dialog_line"><span><%:Plese input <docker create/run> command line:%></span><br /><span id="cmd-line-status"></span></div><div class="dialog_line"><textarea class="cbi-input-textarea" id="dialog_reslov_text" style="width: 100%; height:100%;" rows="15" onkeyup="clear_text()"></textarea></div><div class="dialog_line" style="text-align: right;"><input type="button" class="btn cbi-button cbi-button-apply" type="submit" value="<%:Submit%>" onclick="reslov_container()" /> <input type="button" class="btn cbi-button cbi-button-reset" type="reset" value="<%:Cancel%>" onclick="close_reslov_dialog()" /></div><div class="dialog_line"></div></div></div>')
+		document.body.classList.add('dialog-reslov-active')
+		let s = document.getElementById('cmd-line-status')
+		s.innerHTML = ""
+		document.documentElement.style.overflowY = 'hidden'
+	}
+</script>
+<%+cbi/valueheader%>
+
+<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Command line%>" onclick="show_reslov_dialog()" />
+
+<%+cbi/valuefooter%>
--- a/luasrc/view/dockerman/overview.htm
+++ b/luasrc/view/dockerman/overview.htm
@@ -0,0 +1,230 @@
+<%
+local fs = require "nixio.fs"
+local uci = require 'luci.model.uci'.cursor()
+local mode = 'normal'
+if fs.access('/etc/config/argon') then
+	mode = uci:get_first('argon', 'global', 'mode')
+end
+-%>
+<style>
+	/*!
+	Pure v1.0.1
+	Copyright 2013 Yahoo!
+	Licensed under the BSD License.
+	https://github.com/pure-css/pure/blob/master/LICENSE.md
+	*/
+	.pure-g {
+		letter-spacing: -.31em;
+		text-rendering: optimizespeed;
+		font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-box-orient: horizontal;
+		-webkit-box-direction: normal;
+		-webkit-flex-flow: row wrap;
+		-ms-flex-flow: row wrap;
+		flex-flow: row wrap;
+		-webkit-align-content: flex-start;
+		-ms-flex-line-pack: start;
+		align-content: flex-start
+	}
+
+	.pure-u {
+		display: inline-block;
+		zoom: 1;
+		letter-spacing: normal;
+		word-spacing: normal;
+		vertical-align: top;
+		text-rendering: auto
+	}
+
+	.pure-g [class*=pure-u] {
+		font-family: sans-serif
+	}
+
+	.pure-u-1-4,
+	.pure-u-2-5,
+	.pure-u-3-5 {
+		display: inline-block;
+		zoom: 1;
+		letter-spacing: normal;
+		word-spacing: normal;
+		vertical-align: top;
+		text-rendering: auto
+	}
+
+	.pure-u-1-4 {
+		width: 25%
+	}
+
+	.pure-u-2-5 {
+		width: 40%
+	}
+
+	.pure-u-3-5 {
+		width: 60%
+	}
+
+	.status {
+		margin: 1rem -0.5rem 1rem -0.5rem;
+	}
+
+	.block {
+		margin: 0.5rem 0.5rem;
+		padding: 0;
+		font-weight: normal;
+		font-style: normal;
+		line-height: 1;
+		font-family: inherit;
+		min-width: inherit;
+		overflow-x: auto;
+		overflow-y: hidden;
+		border: 1px solid rgba(0, 0, 0, .05);
+		border-radius: .375rem;
+		box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
+	}
+
+	.img-con {
+		margin: 1rem;
+		min-width: 4rem;
+		max-width: 4rem;
+		min-height: 4rem;
+		max-height: 4rem;
+	}
+
+	.block h4 {
+		font-size: .8125rem;
+		font-weight: 600;
+		margin: 1rem;
+		color: #8898aa !important;
+		line-height: 1.8em;
+	}
+
+	.cbi-section-table-cell {
+		position: relative;
+	}
+
+	@media screen and (max-width: 700px) {
+		.pure-u-1-4 {
+			width: 50%;
+		}
+
+		.cbi-button-add {
+			position: fixed;
+			padding: 0.3rem 0.5rem;
+			z-index: 1000;
+			width: 50px !important;
+			height: 50px;
+			bottom: 90px;
+			right: 5px;
+			font-size: 16px;
+			border-radius: 50%;
+			display: block;
+			background-color: #fb6340 !important;
+			border-color: #fb6340 !important;
+			box-shadow: 0 0 1rem 0 rgba(136, 152, 170, .75);
+		}
+	}
+
+	.shadow {
+		background-color: #e6e6e6;
+		border-radius: 0.375rem;
+	}
+	@media (prefers-color-scheme: dark) {
+		.shadow {
+			background-color: #2c323c;
+			border-radius: 0.375rem;
+		}
+		.block {
+			border: 2px solid #2c323c;
+			box-shadow: none;
+		}
+	}
+	<% if mode == 'dark' then %>
+		.shadow {
+			background-color: #2c323c;
+			border-radius: 0.375rem;
+		}
+		.block {
+			border: 2px solid #2c323c;
+			box-shadow: none;
+		}
+	<% end -%>
+</style>
+
+<div class="pure-g status">
+	<div class="pure-u-1-4">
+		<div class="block pure-g">
+			<div class="pure-u-2-5">
+				<div class="img-con">
+					<img src="<%=resource%>/dockerman/containers.svg" />
+				</div>
+			</div>
+			<div class="pure-u-3-5">
+				<h4 style="text-align: right; font-size: 1rem"><%:Containers%></h4>
+				<h4 class="shadow" style="text-align: right;">
+					<%- if self.containers_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/containers")%>'><%- end -%>
+					<span style="font-size: 2rem; color: #2dce89;"><%=self.containers_running%></span>
+					<span style="font-size: 1rem; color: #8898aa !important;">/<%=self.containers_total%></span>
+				<%- if self.containers_total ~= "-" then -%></a><%- end -%>
+				</h4>
+			</div>
+		</div>
+	</div>
+	<div class="pure-u-1-4">
+		<div class="block pure-g">
+			<div class="pure-u-2-5">
+				<div class="img-con">
+					<img src="<%=resource%>/dockerman/images.svg" />
+				</div>
+			</div>
+			<div class="pure-u-3-5">
+				<h4 style="text-align: right; font-size: 1rem"><%:Images%></h4>
+				<h4 class="shadow" style="text-align: right;">
+					<%- if self.images_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/images")%>'><%- end -%>
+					<span style="font-size: 2rem; color: #2dce89;"><%=self.images_used%></span>
+					<span style="font-size: 1rem; color: #8898aa !important;">/<%=self.images_total%></span>
+					<%- if self.images_total ~= "-" then -%></a><%- end -%>
+				</h4>
+			</div>
+		</div>
+	</div>
+	<div class="pure-u-1-4">
+		<div class="block pure-g">
+			<div class="pure-u-2-5">
+				<div class="img-con">
+					<img src="<%=resource%>/dockerman/networks.svg" />
+				</div>
+			</div>
+			<div class="pure-u-3-5">
+				<h4 style="text-align: right; font-size: 1rem"><%:Networks%></h4>
+				<h4 class="shadow" style="text-align: right;">
+					<%- if self.networks_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/networks")%>'><%- end -%>
+					<span style="font-size: 2rem; color: #2dce89;"><%=self.networks_total%></span>
+					<!-- <span style="font-size: 1rem; color: #8898aa !important;">/20</span> -->
+					<%- if self.networks_total ~= "-" then -%></a><%- end -%>
+				</h4>
+			</div>
+		</div>
+	</div>
+	<div class="pure-u-1-4">
+		<div class="block pure-g">
+			<div class="pure-u-2-5">
+				<div class="img-con">
+					<img src="<%=resource%>/dockerman/volumes.svg" />
+				</div>
+			</div>
+			<div class="pure-u-3-5">
+				<h4 style="text-align: right; font-size: 1rem"><%:Volumes%></h4>
+				<h4 class="shadow" style="text-align: right;">
+					<%- if self.volumes_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/volumes")%>'><%- end -%>
+					<span style="font-size: 2rem; color: #2dce89;"><%=self.volumes_total%></span>
+					<!-- <span style="font-size: 1rem; color: #8898aa !important;">/20</span> -->
+					<%- if self.volumes_total ~= "-" then -%></a><%- end -%>
+				</h4>
+			</div>
+		</div>
+	</div>
+</div>