';
/* Actions bar */
var acts=document.getElementById('drawerActions');
if(state==='running'){
acts.innerHTML=''+
''+
''+
''+
'';
} else if(state==='exited'||state==='created'||state==='dead'){
acts.innerHTML=''+
''+
'';
} else if(state==='paused'){
acts.innerHTML=''+
'';
} else { acts.innerHTML=''; }
drawer.classList.add('open');backdrop.classList.add('open');document.body.style.overflow='hidden';
/* Fetch full inspect data */
postAPI('/containers/inspect/',{container_id:cid}).then(function(res){
if(!res.success){
document.getElementById('drawerBody').innerHTML='
'+escHtml(res.error||'Inspect failed')+'
';
return;
}
var d=res.data;
var conf=d.Config||{};
var state_d=d.State||{};
var net=d.NetworkSettings||{};
var mounts=d.Mounts||[];
var hostCfg=d.HostConfig||{};
/* Overview tab */
var overviewHtml='
';
if(mounts.length){
mounts.forEach(function(m){
var typeClass=m.Type==='bind'?'mount-bind':m.Type==='volume'?'mount-volume':'mount-tmpfs';
mountHtml+='
'+m.Type+''+(m.RW?'RW':'RO')+'
'+
'
'+escHtml(m.Source||'')+'
'+
'
→ '+escHtml(m.Destination||'')+'
';
});
} else { mountHtml+='
No mounts configured.
'; }
mountHtml+='
';
/* Network tab */
var nets=net.Networks||{};
var nk=Object.keys(nets);
var netHtml='
Networks ('+nk.length+')
';
if(nk.length){
nk.forEach(function(nn){
var ni=nets[nn];
netHtml+='
'+escHtml(nn)+'
'+
'
IP Address
'+(ni.IPAddress||'—')+'
'+
'
Gateway
'+(ni.Gateway||'—')+'
'+
'
MAC Address
'+(ni.MacAddress||'—')+'
'+
'
Network ID
'+(ni.NetworkID||'').substring(0,12)+'
';
});
} else { netHtml+='
Not connected to any network.
'; }
netHtml+='
';
/* Logs tab */
var logsHtml='
'+
'
'+
'
Container Logs
'+
'
'+
'
'+
'Loading logs...
';
/* Inspect tab (raw JSON) */
var inspectHtml='
Raw Inspect Output
'+
'
'+jsonToHtml(d)+'
';
/* Exec tab (shell) */
var execHtml='
'+
'
Execute Command
'+
'
Run commands inside the container. '+(state==='running'?'':'Container must be running to exec.')+'
'+
'
🖥️ '+escHtml(name)+' shell
'+
'
Type a command below and press Enter...
'+
'
$
'+
'
'+
''+
''+
''+
''+
''+
''+
'
';
/* Processes tab */
var procHtml='
'+
'
'+
'
Running Processes
'+
'
'+
'
'+(state==='running'?'
Loading...
':'Container is not running')+'
'+
'
';
/* Filesystem Changes tab */
var diffHtml='
'+
'
'+
'
Filesystem Changes
'+
'
'+
'
Files added (A), changed (C) or deleted (D) since container creation.
'+
'
Loading...
'+
'
';
document.getElementById('drawerBody').innerHTML=overviewHtml+envHtml+mountHtml+netHtml+execHtml+procHtml+diffHtml+logsHtml+inspectHtml;
/* Set up exec input */
setTimeout(function(){
var inp=document.getElementById('execInput');
if(inp){inp.addEventListener('keydown',function(e){if(e.key==='Enter'&&this.value.trim()){runExecCommand(cid,this.value.trim());this.value='';}});}
},100);
/* Fetch live stats */
fetch(_API+'/containers/api/').then(function(r){return r.json();}).then(function(data){
var c=(data.containers||[]).find(function(ct){return ct.id===cid;});
var el=document.getElementById('drawerLiveStats');
if(c&&c.stats&&el){
el.innerHTML='
'+
'
CPU: '+c.stats.cpu+'
'+
'
Memory: '+c.stats.memory+'
'+
'
Net I/O: '+c.stats.net_io+'
'+
'
Block I/O: '+(c.stats.block_io||'—')+'
'+
'
PIDs: '+(c.stats.pids||'—')+'
';
} else if(el){ el.innerHTML='Container is not running'; }
});
/* Fetch logs for drawer */
fetchDrawerLogs(cid);
/* Fetch processes for running containers */
if(state==='running') loadContainerProcesses(cid);
/* Fetch filesystem diff */
loadContainerDiff(cid);
}).catch(function(e){
document.getElementById('drawerBody').innerHTML='
Error: '+escHtml(e.message)+'
';
});
}
var _drawerLogTimer=null,_drawerLogTs='';
function fetchDrawerLogs(cid){
var body=document.getElementById('drawerLogBody');
if(!body)return;
if(_drawerLogTimer){clearInterval(_drawerLogTimer);_drawerLogTimer=null;}
_drawerLogTs='';
body.innerHTML='Connecting...';
_fetchDrawerLogsInc(cid,true);
/* Live poll every 2s for new lines */
_drawerLogTimer=setInterval(function(){_fetchDrawerLogsInc(cid,false);},2000);
}
function _fetchDrawerLogsInc(cid,isInit){
var params={container_id:cid,tail:isInit?'100':'500'};
if(!isInit&&_drawerLogTs)params.since=_drawerLogTs;
postAPI('/containers/logs/',params).then(function(res){
var body=document.getElementById('drawerLogBody');
if(!body)return;
if(res.success&&res.logs){
var lines=res.logs.split('\n'),frag=[],newTs=_drawerLogTs;
lines.forEach(function(l){
if(!l.trim())return;
var cls='log-stdout';
if(l.match(/error|Error|ERROR|fatal|Fatal|FATAL|panic|exception/i))cls='log-stderr';
else if(l.match(/warn|Warn|WARN/i))cls='log-warn';
else if(l.match(/info|Info|INFO/i))cls='log-info';
var ts='',msg=l;
var tsMatch=l.match(/^(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\s*(.*)/);
if(tsMatch){ts=tsMatch[1].substring(11,19);msg=tsMatch[2];if(tsMatch[1]>newTs)newTs=tsMatch[1];}
var line='
';
var isDefault=['bridge','host','none'].indexOf(name)!==-1;
document.getElementById('drawerActions').innerHTML=isDefault?'':'';
drawer.classList.add('open');backdrop.classList.add('open');document.body.style.overflow='hidden';
postAPI('/containers/network-inspect/',{network_id:id}).then(function(res){
if(!res.success){
document.getElementById('drawerBody').innerHTML='
'+escHtml(res.error||'Inspect failed')+'
';
return;
}
var d=res.data;
var ipam=d.IPAM||{};
var ipamCfg=(ipam.Config||[])[0]||{};
var containers=d.Containers||{};
var ck=Object.keys(containers);
var html='
';
}
/* Layers */
var layers=d.RootFS;
if(layers&&layers.Layers){
html+='
Layers ('+layers.Layers.length+')
'+
'Show layers'+
'
';
layers.Layers.forEach(function(l,i){html+='
'+(i+1)+'. '+l.substring(0,50)+'…
';});
html+='
';
}
/* Close dt-imgdetails panel */
html+='
';
/* History / Layers tab panel */
html+='
';
html+='
Image History / Layers
';
html+='
Loading image history...
';
html+='
';
/* Inspect (Raw JSON) tab panel */
html+='
';
html+='
Raw Inspect
'+jsonToHtml(d)+'
';
html+='
';
document.getElementById('drawerBody').innerHTML=html;
/* Load image history */
loadImageHistory(id);
}).catch(function(e){
document.getElementById('drawerBody').innerHTML='
Error: '+escHtml(e.message)+'
';
});
}
/* ═══════════════════════════════════════════════════════════════
Drawer close / escape
═══════════════════════════════════════════════════════════════ */
function closeDrawer(){
document.getElementById('detailDrawer').classList.remove('open');
document.getElementById('drawerBackdrop').classList.remove('open');
document.body.style.overflow='';
/* Stop live log polling for drawer */
if(_drawerLogTimer){clearInterval(_drawerLogTimer);_drawerLogTimer=null;}
/* Reset status dot display */
var dot=document.getElementById('drawerStatusDot');
if(dot)dot.style.display='';
}
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeDrawer();});
/* ═══════════════════════════════════════════════════════════════
Logs viewer (real docker logs)
═══════════════════════════════════════════════════════════════ */
var _logTimer=null,_logCid='',_logLastTs='',_logPaused=false,_logLineCount=0;
function loadContainerLogs(cid){
if(_logTimer){clearInterval(_logTimer);_logTimer=null;}
_logCid=cid;_logLastTs='';_logPaused=false;_logLineCount=0;
var body=document.getElementById('logsPanelBody'),nm=document.getElementById('logContainerName');
if(!cid){body.innerHTML='
Select a container.
';nm.textContent='No container selected';_updateLiveIndicator(false);return;}
/* Find container name */
var row=document.querySelector('tr[data-cid="'+cid+'"]');
nm.textContent=row?row.getAttribute('data-cname'):cid.substring(0,12);
body.innerHTML='Connecting...';
_updateLiveIndicator(true);
/* Initial fetch: full tail */
_fetchLogsIncremental(cid,true);
/* Live stream: poll every 2s for new lines only */
_logTimer=setInterval(function(){
if(!_logPaused)_fetchLogsIncremental(cid,false);
},2000);
}
function _fetchLogsIncremental(cid,isInitial){
var tailSel=document.getElementById('logTailCount');
var tail=isInitial?(tailSel?tailSel.value:'200'):'500';
var params={container_id:cid,tail:tail};
/* For incremental fetches, only get new lines since last timestamp */
if(!isInitial&&_logLastTs)params.since=_logLastTs;
postAPI('/containers/logs/',params).then(function(res){
var body=document.getElementById('logsPanelBody');
if(!body)return;
if(res.success&&res.logs){
var lines=res.logs.split('\n');
var html='',newTs=_logLastTs;
var frag=[];
lines.forEach(function(l){
if(!l.trim())return;
var cls='log-stdout';
if(l.match(/error|Error|ERROR|fatal|Fatal|FATAL|panic|exception/i))cls='log-stderr';
else if(l.match(/warn|Warn|WARN/i))cls='log-warn';
else if(l.match(/info|Info|INFO/i))cls='log-info';
var ts='',msg=l;
var tsMatch=l.match(/^(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\s*(.*)/);
if(tsMatch){
ts=tsMatch[1].substring(11,19);
msg=tsMatch[2];
/* Track latest timestamp for incremental fetches */
if(tsMatch[1]>newTs)newTs=tsMatch[1];
}
var line='
';
frag.push(line);
});
if(frag.length>0){
if(isInitial){
body.innerHTML=frag.join('');
_logLineCount=frag.length;
} else {
/* Append new lines only (incremental) */
body.insertAdjacentHTML('beforeend',frag.join(''));
_logLineCount+=frag.length;
/* Cap at 5000 lines to prevent memory bloat */
while(_logLineCount>5000&&body.firstChild){body.removeChild(body.firstChild);_logLineCount--;}
}
_logLastTs=newTs;
if(document.getElementById('logFollow').checked)body.scrollTop=body.scrollHeight;
} else if(isInitial){
body.innerHTML='No logs yet — waiting for output...';
}
} else if(isInitial){
body.innerHTML=''+(res.error||'No logs available')+'';
}
}).catch(function(){});
}
function _updateLiveIndicator(on){
var el=document.getElementById('logLiveIndicator');
if(!el)return;
el.style.display=on?'inline-flex':'none';
}
function toggleLogPause(){
_logPaused=!_logPaused;
var btn=document.getElementById('logPauseBtn');
if(btn){
btn.innerHTML=_logPaused?' Resume':' Pause';
btn.title=_logPaused?'Resume live streaming':'Pause live streaming';
}
_updateLiveIndicator(!_logPaused&&!!_logCid);
}
function refreshLogs(){
if(_logCid){
_logLastTs='';_logLineCount=0;
document.getElementById('logsPanelBody').innerHTML='';
_fetchLogsIncremental(_logCid,true);
}
}
function toggleLogWrap(){
var body=document.getElementById('logsPanelBody');
body.style.whiteSpace=document.getElementById('logWrap').checked?'pre-wrap':'pre';
}
function copyLogs(){var t=document.getElementById('logsPanelBody').innerText;navigator.clipboard.writeText(t).then(function(){if(typeof showToast==='function')showToast('Logs copied to clipboard','success');});}
function downloadLogs(){var t=document.getElementById('logsPanelBody').innerText,b=new Blob([t],{type:'text/plain'}),a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='logs-'+(_logCid||'container').substring(0,12)+'-'+new Date().toISOString().replace(/[:.]/g,'-')+'.txt';a.click();}
function clearLogs(){document.getElementById('logsPanelBody').innerHTML='
Cleared.
';}
function refreshContainers(){location.reload();}
/* ═══════════════════════════════════════════════════════════════
Live Table Refresh (updates containers without page reload)
═══════════════════════════════════════════════════════════════ */
var _autoRefreshEnabled=true;
function toggleAutoRefresh(on){_autoRefreshEnabled=on;}
function refreshContainersLive(){
fetch(_API+'/containers/api/').then(function(r){return r.json();}).then(function(data){
_rebuildContainerTable(data.containers||[]);
_updateLogContainerSelect(data.containers||[]);
/* Update stat counters */
var si=data.system_info||{};
var el;
el=document.getElementById('stat-running');if(el)el.textContent=si.running||0;
el=document.getElementById('stat-stopped');if(el)el.textContent=si.stopped||0;
el=document.getElementById('stat-paused');if(el)el.textContent=si.paused||0;
el=document.getElementById('stat-images');if(el)el.textContent=(data.images||[]).length;
el=document.getElementById('stat-volumes');if(el)el.textContent=(data.volumes||[]).length;
el=document.getElementById('stat-networks');if(el)el.textContent=(data.networks||[]).length;
}).catch(function(){});
}
function _statusClass(state){
var s=state.toLowerCase();
if(s==='running')return{cls:'running',icon:'▶'};
if(s==='exited')return{cls:'stopped',icon:'■'};
if(s==='paused')return{cls:'paused',icon:'⏸'};
if(s==='restarting'||s==='removing')return{cls:'warning',icon:'↻'};
if(s==='created')return{cls:'created',icon:'○'};
if(s==='dead')return{cls:'dead',icon:'✕'};
return{cls:'unknown',icon:'?'};
}
function _containerActionBtns(cid,state){
var s=state.toLowerCase(),h='';
if(s==='running'){
h+='';
h+='';
h+='';
h+='';
} else if(s==='exited'||s==='created'||s==='dead'){
h+='';
h+='';
} else if(s==='paused'){
h+='';
h+='';
} else if(s==='restarting'){
h+='';
h+='';
}
return h;
}
function _rebuildContainerTable(containers){
var tbody=document.getElementById('containersTableBody');
if(!tbody)return;
if(!containers.length){
tbody.innerHTML='
📦
No containers found.
';
return;
}
var html='';
containers.forEach(function(c){
var sc=_statusClass(c.state||'unknown');
var cid=c.id||'';
var ports=c.ports||'';
var portsHtml='—';
if(ports){
portsHtml=ports.split(', ').filter(function(p){return p;}).map(function(p){return ''+escHtml(p)+'';}).join('');
}
var cpuHtml='—';
var memHtml='—';
var netHtml='—';
if(c.stats){
var cpuV=parseFloat((c.stats.cpu||'0').replace('%',''))||0;
var cpuCls=cpuV<50?'green':cpuV<80?'amber':'red';
cpuHtml=''+escHtml(c.stats.cpu)+'
';
var memV=parseFloat((c.stats.mem_perc||'0').replace('%',''))||0;
var memCls=memV<60?'green':memV<85?'amber':'red';
memHtml=''+escHtml(c.stats.memory)+'
';
netHtml=escHtml(c.stats.net_io||'');
}
var uptime=escHtml(c.running_for||'');
if(!uptime&&c.created)uptime=escHtml(c.created.substring(0,19));
if(!uptime)uptime='—';
html+='
';
html+='
';
html+='
'+escHtml(c.name||cid.substring(0,12))+'
';
html+='
'+escHtml(c.image||'')+'
';
html+='
'+sc.icon+' '+escHtml(c.state||'')+'
';
html+='
'+portsHtml+'
';
html+='
'+cpuHtml+'
';
html+='
'+memHtml+'
';
html+='
'+netHtml+'
';
html+='
'+uptime+'
';
html+='
'+_containerActionBtns(cid,c.state||'')+'
';
html+='
';
});
tbody.innerHTML=html;
/* Re-apply filter if active */
var q=document.getElementById('containerSearch');
if(q&&q.value)filterContainers(q.value);
}
function _updateLogContainerSelect(containers){
var sel=document.getElementById('logContainerSelect');
if(!sel)return;
var cur=sel.value;
sel.innerHTML='';
containers.forEach(function(c){
var opt=document.createElement('option');
opt.value=c.id||'';
opt.textContent=(c.name||c.id.substring(0,12))+' ('+c.state+')';
if(opt.value===cur)opt.selected=true;
sel.appendChild(opt);
});
}
/* ═══════════════════════════════════════════════════════════════
Run Container Dialog
═══════════════════════════════════════════════════════════════ */
function runContainerDialog(){
var bd=document.getElementById('runContainerBackdrop'),dg=document.getElementById('runContainerDialog');
bd.style.opacity='1';bd.style.pointerEvents='auto';
dg.style.opacity='1';dg.style.pointerEvents='auto';dg.style.transform='translate(-50%,-50%) scale(1)';
document.getElementById('runImage').focus();
}
function closeRunDialog(){
var bd=document.getElementById('runContainerBackdrop'),dg=document.getElementById('runContainerDialog');
bd.style.opacity='0';bd.style.pointerEvents='none';
dg.style.opacity='0';dg.style.pointerEvents='none';dg.style.transform='translate(-50%,-50%) scale(0.95)';
document.getElementById('runOutput').style.display='none';
}
function executeRunContainer(){
var img=document.getElementById('runImage').value.trim();
if(!img){if(typeof showToast==='function')showToast('Image name is required','error');return;}
var params={image:img};
var name=document.getElementById('runName').value.trim();
if(name)params.name=name;
var hp=document.getElementById('runHostPort').value.trim();
var cp=document.getElementById('runContPort').value.trim();
if(hp&&cp)params.ports=hp+':'+cp;
else if(cp)params.ports=cp+':'+cp;
var envs=document.getElementById('runEnvVars').value.trim();
if(envs)params.env_vars=envs;
var flags=document.getElementById('runFlags').value.trim();
if(flags)params.extra_flags=flags;
if(document.getElementById('runDetach').checked)params.detach='1';
if(document.getElementById('runRemove').checked)params.auto_remove='1';
var btn=document.getElementById('runBtn');
btn.disabled=true;btn.innerHTML=' Running...';
postAPI('/containers/action/',{container_id:'__run__',action:'run',run_params:JSON.stringify(params)}).then(function(res){
btn.disabled=false;btn.innerHTML=' Run Container';
var out=document.getElementById('runOutput'),outBody=document.getElementById('runOutputBody');
if(res.success){
if(typeof showToast==='function')showToast('Container started successfully','success');
out.style.display='block';
outBody.innerHTML=''+escHtml(res.message||'Container started')+'';
setTimeout(function(){closeRunDialog();refreshContainersLive();},2000);
} else {
out.style.display='block';
outBody.innerHTML=''+escHtml(res.error||'Failed to start container')+'';
}
}).catch(function(e){
btn.disabled=false;btn.innerHTML=' Run Container';
if(typeof showToast==='function')showToast('Failed: '+e.message,'error');
});
}
/* ═══════════════════════════════════════════════════════════════
Docker Build
═══════════════════════════════════════════════════════════════ */
function executeBuild(){
var tag=document.getElementById('buildTag').value.trim();
if(!tag){if(typeof showToast==='function')showToast('Image tag is required','error');return;}
var target=document.getElementById('buildTarget').value.trim();
var argsRaw=document.getElementById('buildArgs').value.trim();
var noCache=document.getElementById('buildNoCache').checked;
var params={tag:tag,no_cache:noCache?'1':'0'};
if(target)params.target=target;
if(argsRaw)params.build_args=argsRaw;
var outEl=document.getElementById('buildOutput');
outEl.style.display='block';
outEl.innerHTML='
';
if(typeof showToast==='function')showToast('Image built successfully','success');
setTimeout(refreshContainersLive,1500);
} else {
outEl.innerHTML='
✗ Build failed
'+escHtml(res.error||'Build failed')+'
';
}
}).catch(function(e){
outEl.innerHTML='
✗ Error: '+escHtml(e.message)+'
';
});
}
/* ═══════════════════════════════════════════════════════════════
Docker System / Disk Usage
═══════════════════════════════════════════════════════════════ */
function loadDiskUsage(){
var el=document.getElementById('diskUsageContent');
if(!el)return;
el.innerHTML='
';
/* Add visual bars for each type */
var typeMatches=output.match(/^(\w[\w\s]*?)\s{2,}(\d+)\s{2,}(\d+)\s{2,}([\d.]+\w+)\s{2,}([\d.]+\w+\s*\(\d+%\))/gm);
if(typeMatches&&typeMatches.length){
html+='
Space Overview
';
html+='
';
typeMatches.forEach(function(m){
var parts=m.split(/\s{2,}/);
var type=parts[0]||'';
var total=parts[1]||'0';
var active=parts[2]||'0';
var size=parts[3]||'0B';
var reclaim=parts[4]||'';
var pctMatch=reclaim.match(/(\d+)%/);
var pct=pctMatch?parseInt(pctMatch[1]):0;
html+='
';
});
}
function dockerPrune(target){
var labels={system:'entire system',images:'unused images',containers:'stopped containers',volumes:'unused volumes',builder:'build cache'};
showConfirm('Prune '+labels[target]+'?','This will permanently remove all '+(labels[target]||target)+'. This action cannot be undone.',function(){
var outEl=document.getElementById('pruneOutput');
outEl.style.display='block';
outEl.innerHTML=' Pruning '+escHtml(target)+'...';
postAPI('/containers/prune/',{target:target}).then(function(res){
if(res.success){
outEl.innerHTML='
';
});
}
/* ═══════════════════════════════════════════════════════════════
Docker Events Stream
═══════════════════════════════════════════════════════════════ */
function loadDockerEvents(){
var el=document.getElementById('eventFeed');
if(!el)return;
var sinceEl=document.getElementById('eventSince');
var since=sinceEl?sinceEl.value:'5m';
el.innerHTML='
';return;}
var events=res.events||[];
if(!events.length){el.innerHTML='
No events in the selected time range.
';return;}
var html='';
events.forEach(function(ev){
var action=ev.Action||ev.status||'unknown';
var type=ev.Type||'container';
var actor=(ev.Actor&&ev.Actor.Attributes)?ev.Actor.Attributes:{};
var name=actor.name||actor.image||(ev.Actor&&ev.Actor.ID?ev.Actor.ID.substring(0,12):'')||'';
var time=ev.time?new Date(ev.time*1000).toLocaleTimeString():(ev.timeNano?new Date(ev.timeNano/1000000).toLocaleTimeString():'');
var iconClass='default';
if(action==='create')iconClass='create';
else if(action==='start')iconClass='start';
else if(action==='stop')iconClass='stop';
else if(action==='die')iconClass='die';
else if(action==='kill')iconClass='kill';
else if(action==='destroy')iconClass='destroy';
else if(action==='pull')iconClass='pull';
html+='