427 lines
15 KiB
HTML
427 lines
15 KiB
HTML
|
{% extends "layout.html" %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="main-content pb55">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="pos-box bgw mtb15">
|
||
|
|
<div class="tab-list" id="cutMode">
|
||
|
|
<div class="tabs-item" data-type="overview" style="display: none;">Overview</div>
|
||
|
|
<div class="tabs-item" data-type="container">Container</div>
|
||
|
|
<div class="tabs-item" data-type="compose">Compose</div>
|
||
|
|
<div class="tabs-item" data-type="model">Compose template</div>
|
||
|
|
<div class="tabs-item" data-type="image">Image</div>
|
||
|
|
<div class="tabs-item" data-type="host" style="display: none;">Host</div>
|
||
|
|
<div class="tabs-item" data-type="network">Network</div>
|
||
|
|
<div class="tabs-item" data-type="volume">Volume</div>
|
||
|
|
<div class="tabs-item" data-type="registry">Repository</div>
|
||
|
|
<div class="tabs-item" data-type="setup">Settings</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-title-tips">
|
||
|
|
<p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>[Reminder] This function is exclusive to the professional version, it is currently in the testing phase can be used by all users</p>
|
||
|
|
</div>
|
||
|
|
<div class="dk-container-view bgw mtb15 pd15 tab-view-box">
|
||
|
|
<div class="tab-con" style="padding: 0;overflow: inherit;">
|
||
|
|
<div class="tab-con-block">
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_container_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_compose_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_model_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_image_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_host_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_network_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_volume_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div id="dk_registry_table"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-con-block">
|
||
|
|
<div class="dk_setup_form" id="dk_setup_form"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mask_layer" style="display: none;"><div class="prompt_description"></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.mask_layer .prompt_description {
|
||
|
|
width: 500px;
|
||
|
|
}
|
||
|
|
.tab-view-box{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.add_container .bt-form th,
|
||
|
|
.add_container .bt-form td{
|
||
|
|
padding: 4px!important;
|
||
|
|
}
|
||
|
|
.add_container .line-tname,
|
||
|
|
.add_container span.minus{
|
||
|
|
padding:0 20px
|
||
|
|
}
|
||
|
|
.add_container span.plus{
|
||
|
|
margin-left: 5px;
|
||
|
|
font-size: 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.add_container span.plus:hover{
|
||
|
|
background-color: #20a53a;
|
||
|
|
color:#fff
|
||
|
|
}
|
||
|
|
.add_container .divtable {
|
||
|
|
width: 482px;
|
||
|
|
}
|
||
|
|
.add_container .divtable table td {
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
#container_box .bt-form .tname,
|
||
|
|
.add_project_form .bt-form .tname,
|
||
|
|
.add_container .tabpanel:nth-of-type(2) .tname {
|
||
|
|
width: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dk_setup_form .bt-form .tname,
|
||
|
|
.add_registry_form .bt-form .tname {
|
||
|
|
width: 170px;
|
||
|
|
}
|
||
|
|
.dk_setup_form .bt-form .line .info-r {
|
||
|
|
margin-left: 170px;
|
||
|
|
}
|
||
|
|
.cu-pointer{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.dk-container-view .size_ellipsis{
|
||
|
|
vertical-align: bottom;
|
||
|
|
}
|
||
|
|
.add_container .unit{
|
||
|
|
display: inline-block;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-left: 0;
|
||
|
|
border-radius: 2px;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
vertical-align: bottom;
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
ul.dk_volumes{
|
||
|
|
transition: all 500ms;
|
||
|
|
background: #fff;
|
||
|
|
position: absolute;
|
||
|
|
top: 30px;
|
||
|
|
left: 0;
|
||
|
|
display: none;
|
||
|
|
box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
|
||
|
|
border-radius: 1px;
|
||
|
|
width: 155px;
|
||
|
|
z-index: 999;
|
||
|
|
max-height: 200px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
ul.dk_volumes li {
|
||
|
|
height: 28px;
|
||
|
|
line-height: 28px;
|
||
|
|
padding: 0 10px;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
ul.dk_volumes li.active{
|
||
|
|
color: #fff;
|
||
|
|
background-color: #20a53a;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.dk_volumes li:hover {
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.dk_status_select{
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 0px 2px;
|
||
|
|
position: relative;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.dk_status_select:after{
|
||
|
|
content: "";
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
border-left: 1px solid #666;
|
||
|
|
border-bottom: 1px solid #666;
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
-webkit-transform: rotate(-45deg);
|
||
|
|
position: absolute;
|
||
|
|
right: 7px;
|
||
|
|
top: 5px;
|
||
|
|
}
|
||
|
|
.dk_status_select a {
|
||
|
|
/* color: #333!important; */
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.dk_status_select .glyphicon{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
ul.dk_status_select_list{
|
||
|
|
position: fixed;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #c9c9c9;
|
||
|
|
z-index: 10;
|
||
|
|
display: block;
|
||
|
|
width: 63px;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
ul.dk_status_select_list li{
|
||
|
|
height: 24px;
|
||
|
|
line-height: 24px;
|
||
|
|
padding:0 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
ul.dk_status_select_list li:hover{
|
||
|
|
background-color: #20a53a;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* json树 */
|
||
|
|
ul.jsontree_tree{
|
||
|
|
margin-left:0
|
||
|
|
}
|
||
|
|
.jsontree_value_string{
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
/* json树 end*/
|
||
|
|
|
||
|
|
|
||
|
|
/* 容器监控样式 */
|
||
|
|
.cont-chart-dialog{
|
||
|
|
font-size: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cont_chart_block {
|
||
|
|
display: inline-block;
|
||
|
|
width: 49.5%;
|
||
|
|
}
|
||
|
|
.cont_chart_line,
|
||
|
|
.cont_chart_block {
|
||
|
|
border-radius: 4px;
|
||
|
|
border: 1px solid #EBEEF5;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.cont_chart_block:nth-child(2n-1){
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.cont_chart_child_title{
|
||
|
|
border-bottom: 1px solid #EBEEF5;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.cont_chart_basis {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 15px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.cont_chart_basis span {
|
||
|
|
color: #919191;
|
||
|
|
}
|
||
|
|
.bt-ico-ask a{
|
||
|
|
color: #fb7d00;
|
||
|
|
}
|
||
|
|
.bt-ico-ask:hover a,
|
||
|
|
.bt-ico-ask a:hover{
|
||
|
|
color:#fff
|
||
|
|
}
|
||
|
|
/* 容器监控样式 end */
|
||
|
|
|
||
|
|
/* 添加Yaml模板 */
|
||
|
|
.model_sc_top{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.model_sc_child {
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
right: 110px;
|
||
|
|
top: 6px;
|
||
|
|
}
|
||
|
|
.model_sc_child::after {
|
||
|
|
content: 'Include subdir';
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
/* 添加Yaml模板 end */
|
||
|
|
</style>
|
||
|
|
<script type="text/template" id="aceTmplate">
|
||
|
|
<div id="ace_conter">
|
||
|
|
<div class="ace_header" style="top: 0">
|
||
|
|
<span class="saveFile"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i><span>Save</span></span>
|
||
|
|
<span class="saveFileAll"><i class="glyphicon glyphicon-duplicate" aria-hidden="true"></i><span>Save All</span></span>
|
||
|
|
<span class="refreshs"><i class="glyphicon glyphicon-refresh" aria-hidden="true"></i><span>Refresh</span></span>
|
||
|
|
<span class="searchs"><i class="glyphicon glyphicon-search" aria-hidden="true"></i><span>Search</span></span>
|
||
|
|
<span class="replaces"><i class="glyphicon glyphicon-retweet" aria-hidden="true"></i><span>Replace</span></span>
|
||
|
|
<span class="jumpLine"><i class="glyphicon glyphicon-pushpin" aria-hidden="true"></i><span>JumpLine</span></span>
|
||
|
|
<span class="fontSize"><i class="glyphicon glyphicon-text-width" aria-hidden="true"></i><span>Font</span></span>
|
||
|
|
<span class="themes"><i class="glyphicon glyphicon-magnet" aria-hidden="true"></i><span>Theme</span></span>
|
||
|
|
<span class="setUp"><i class="glyphicon glyphicon-cog" aria-hidden="true"></i><span>Set</span></span>
|
||
|
|
<span class="helps"><i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i><span>Help</span></span>
|
||
|
|
<div class="pull-down" title="Hide toolbar" style="top: 0"><i class="glyphicon glyphicon-menu-down" aria-hidden="true"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="ace_overall" style="top: 35px;">
|
||
|
|
<!-- 编辑器目录 -->
|
||
|
|
<div class="ace_catalogue" style="left:0px">
|
||
|
|
<div class="ace_catalogue_title">Directory<div class="dir-menu-right"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></div></div>
|
||
|
|
<div class="ace_dir_tools">
|
||
|
|
<div class="upper_level" title="Return to parent directory">
|
||
|
|
<i class="glyphicon glyphicon-share-alt" aria-hidden="true"></i>
|
||
|
|
<span>Back</span>
|
||
|
|
</div>
|
||
|
|
<div class="search_file" title="Search File">
|
||
|
|
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
|
||
|
|
<span>Search</span>
|
||
|
|
</div>
|
||
|
|
<div class="new_folder" title="File/Folder">
|
||
|
|
<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
|
||
|
|
<span>New</span>
|
||
|
|
<ul class="folder_down_up">
|
||
|
|
<li data-type="2"><i class="folder-icon"></i>Folder</li>
|
||
|
|
<li data-type="3"><i class="text-icon"></i>File</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="refresh_dir" title="Refresh list">
|
||
|
|
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
|
||
|
|
<span>Refresh</span>
|
||
|
|
</div>
|
||
|
|
<span class="ace_editor_main_storey"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ace_catalogue_list">
|
||
|
|
<ul class="cd-accordion-menu"></ul>
|
||
|
|
<ul class="ace_catalogue_menu">
|
||
|
|
<li data-type="0"><i class="glyphicon glyphicon-refresh" aria-hidden="true"></i><span>Refresh</span></li>
|
||
|
|
<li data-type="1"><i class="glyphicon glyphicon-folder-open" aria-hidden="true"></i><span>Subdirectory</span></li>
|
||
|
|
<li data-type="2"><i class="folder-icon"></i><span>New Folder</span></li>
|
||
|
|
<li data-type="3"><i class="text-icon"></i><span>New File</span></li>
|
||
|
|
<li data-type="4"><i class="rename-icon img-icon"></i><span>Rename</span></li>
|
||
|
|
<li data-type="5"><i class="down-icon img-icon"></i><span>Download</span></li>
|
||
|
|
<li data-type="6"><i class="del-icon img-icon"></i><span>Delete</span></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="ace_catalogue_drag_icon">
|
||
|
|
<div class="drag_icon_conter"></div>
|
||
|
|
<span class="fold_icon_conter" title="Hide file directory"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- 编辑内容 -->
|
||
|
|
<div class="ace_editor_main">
|
||
|
|
<ul class="ace_conter_menu"></ul>
|
||
|
|
<div class="ace_conter_tips"><div class="tips"></div></div>
|
||
|
|
<div class="ace_editor_main_storey"></div>
|
||
|
|
<div class="ace_conter_editor"></div>
|
||
|
|
<div class="ace_conter_toolbar">
|
||
|
|
<div class="pull-left size_ellipsis">
|
||
|
|
<span data-type="path" class="size_ellipsis"></span>
|
||
|
|
</div>
|
||
|
|
<div class="pull-right">
|
||
|
|
<span data-type="cursor"></span>
|
||
|
|
<span data-type="history"></span>
|
||
|
|
<span data-type="tab"></span>
|
||
|
|
<span data-type="encoding"></span>
|
||
|
|
<span data-type="lang"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ace_toolbar_menu" style="display: none;">
|
||
|
|
<div class="menu-item menu-tabs" style="display: none;">
|
||
|
|
<div class="menu-title">Set tabs</div>
|
||
|
|
<ul class="tabsType">
|
||
|
|
<li data-value="nbsp">Indent using spaces</li>
|
||
|
|
<li data-value="tabs">Indent using "Tab"</li>
|
||
|
|
</ul>
|
||
|
|
<div class="menu-title" style="margin-top:15px">Set the tab length</div>
|
||
|
|
<ul class="tabsSize">
|
||
|
|
<li data-value="1">1</li>
|
||
|
|
<li data-value="2">2</li>
|
||
|
|
<li data-value="3">3</li>
|
||
|
|
<li data-value="4">4</li>
|
||
|
|
<li data-value="5">5</li>
|
||
|
|
<li data-value="6">6</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-encoding" style="display: none;">
|
||
|
|
<div class="menu-title">Set file save encoding format</div>
|
||
|
|
<ul></ul>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-files" style="display: none;">
|
||
|
|
<div class="menu-conter">
|
||
|
|
<input type="text" class="menu-input" placeholder="Input language mode">
|
||
|
|
<i class="fa fa-close" aria-hidden="true"></i>
|
||
|
|
</div>
|
||
|
|
<div class="menu-title">Set file language association</div>
|
||
|
|
<ul></ul>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-fontSize" style="display: none;">
|
||
|
|
<div class="menu-title">Set editor font size</div>
|
||
|
|
<div class="menu-conter">
|
||
|
|
<div class="set_font_size">
|
||
|
|
<input type="number" min="12" max="45"/>
|
||
|
|
<span class="tips error">Font setting range 12-45</span>
|
||
|
|
<button class="btn-save">Save</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-jumpLine" style="display: none;">
|
||
|
|
<div class="menu-title">Jump to specified line</div>
|
||
|
|
<div class="menu-conter">
|
||
|
|
<div class="set_jump_line">
|
||
|
|
<input type="number" min="0"/>
|
||
|
|
<button class="btn-save">Jump</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-themes" style="display: none;">
|
||
|
|
<div class="menu-title">Set editor theme</div>
|
||
|
|
<ul></ul>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-history" style="display: none;">
|
||
|
|
<div class="menu-title">History version</div>
|
||
|
|
<ul></ul>
|
||
|
|
</div>
|
||
|
|
<div class="menu-item menu-setUp" style="display: none;">
|
||
|
|
<div class="menu-title">Editor setting [ Some settings need to be restart editor ]</div>
|
||
|
|
<ul class="editor_menu">
|
||
|
|
<li data-type="wrap">Auto wrap</li>
|
||
|
|
<li data-type="enableLiveAutocompletion">Code autocomplete</li>
|
||
|
|
<li data-type="enableSnippets">Enable snippets</li>
|
||
|
|
<li data-type="showInvisibles">Show hidden characters</li>
|
||
|
|
<li data-type="showLineNumbers">Show line numbers</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
{{ super() }}
|
||
|
|
<script type="text/javascript" src="{{g.cdn_url}}/js/docker.js?version={{g['version']}}&repair={{data['js_random']}}"></script>
|
||
|
|
<script type="text/javascript" src="{{g.cdn_url}}/jsonTree/jsonTree.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="{{g.cdn_url}}/js/jquery.dragsort-0.5.2.min.js" defer></script>
|
||
|
|
<script type="text/javascript" src="{{g.cdn_url}}/ace/ace.js" defer></script>
|
||
|
|
<script type="text/javascript" src="{{g.cdn_url}}/ace/ext-language_tools.js" defer></script>
|
||
|
|
<script type="text/javascript" src="{{g.cdn_url}}/js/xterm.js" defer></script>
|
||
|
|
<link rel="stylesheet" href="{{g.cdn_url}}/jsonTree/jsonTree.css" />
|
||
|
|
{% endblock %}
|