删除离线的计算节点时，经过提示框进行确认操作

docs/todo.md

@@ -12,36 +12,24 @@
 - [x] 分离出 API 与 views 出入口，涉及 add_rule 与 route_table
 - [x] 加入被动更新 Guest xml 的功能，由宿主机主动推送。具体时机待定
 - [x] 重置Guest密码功能
-- [ ] 增加模板镜像上传功能
 - [x] 虚拟机加入用户级的重启作业功能
 - [x] 提示待做的启动作业
 - [x] 密码栏默认隐藏，加入显示开关
-- [ ] 加入 tag 功能
 - [x] `不予支持`收集存在于 JimV-N，却不存在于 JimV-C 的 Guest。(无法确定其创建的规范，比如是否使用了规划的分布式文件系统、模板、开启vnc等。这样导致迁移、重置密码、前端ICON显示有问题)
 - [x] `不予支持`IP 为空的，允许用户手动补入 Guest 的真实 IP，补入时并检查新 IP 是否可用
 - [x] 批量添加启动作业
 - [x] 单独写页面展现已有启动作业的虚拟机列表
 - [x] 磁盘页面，默认不显示系统盘，加 CheckBox 来控制
 - [x] 不显示系统级别的启动作业
-- [ ] 添加对 Guest 的IP管理功能
-- [ ] 设计、制作替换 Guest IP 的系统级启动作业
-> 1. 给宿主机替换当前 IP 池中可用的 IP。替换后，新 IP 置为已用状态，被替换的 IP，
-> 要与系统配置中的可用 IP 范围做计算。计算其是不是可以被自动分配的合法 IP。如果是，
-> 则回收。如果不是，则直接丢弃；
-> 2. 给宿主机替换手动指定的任意 IP。此时需要判断手动分配的 IP 是否与已用的 IP 冲突；
 - [x] 宿主机性能状态展现
 - [x] 设计、实现 Dashboard 页面
 - [x] 重新设计创建虚拟机时的机制，虚拟机创建分配由 JimV-C 角色实现
-- [ ] 虚拟机状态变化时时展现在前端页面上
-- [ ] 迁移时计算出剩余时间
 - [x] 创建虚拟机时显示进度
 - [x] 重新设计 JimV-N 到 JimV-C 的回调机制，现有实现比较混乱。改进为基于对象的回调
 - [x] 重新设计创建虚拟机机制，批量创建虚拟机时，依照宿主机负载大小，倒序依次挨个分配虚拟机的创建任务
 - [x] 规范日志路径。把日志路径调整至 /var/log/ 下
 - [x] 清除15天前的监控日志
-- [ ] 初始化页面检测redis、mysql是否准备好
 - [x] 允许删除创建失败的虚拟机
-- [ ] 日志里面加入操作轨迹
 - [x] 日志实现简短字段及详情字段，详情字段用text，存储完整的日志文本。因为日志太长，无法在简短日志字段存放完整。
 - [x] 修改密码功能
 - [x] 密码[找回|重置]功能
@@ -50,3 +38,16 @@
 - [x] 显示计算节点离线时间
 - [x] 系统模板加入是否为Windows类系统的标记
 - [x] 系统模板为 Windows 时，时钟偏移值设定为 localtime，否则为 utc
+- [ ] 增加模板镜像上传功能
+- [ ] 加入 tag 功能
+- [ ] 添加对 Guest 的IP管理功能
+- [ ] 设计、制作替换 Guest IP 的系统级启动作业
+> 1. 给宿主机替换当前 IP 池中可用的 IP。替换后，新 IP 置为已用状态，被替换的 IP，
+> 要与系统配置中的可用 IP 范围做计算。计算其是不是可以被自动分配的合法 IP。如果是，
+> 则回收。如果不是，则直接丢弃；
+> 2. 给宿主机替换手动指定的任意 IP。此时需要判断手动分配的 IP 是否与已用的 IP 冲突；
+- [ ] 虚拟机状态变化时时展现在前端页面上
+- [ ] 迁移时计算出剩余时间
+- [ ] 初始化页面检测redis、mysql是否准备好
+- [ ] 日志里面加入操作轨迹
+- [ ] 计算节点页面，展现每个计算节点上功能线程的状态

templates/hosts_show.html

@@ -56,7 +56,7 @@
     }
 
     function delete_at(me) {
-        var node_id = $(me).prev().text();
+        var node_id = $('#instance_node_id').val();
         remove([node_id]);
         refresh()
     }
@@ -100,7 +100,11 @@
                                 <div style="{% if item.alive == true %}display: none;{% endif %}position: absolute; z-index: 9999; margin-top: 0; top: 56px; right: 0; left: 0;">
                                     <span style="color: white; background-color: black; font-size: 13px; display: block; color: #2d2d2d; background-color: #cbcbcb;">&nbsp;&nbsp;&nbsp;&nbsp;最后在线时间: {{ format_datetime_by_tus(item.timestamp * 1000 * 1000) }}&nbsp;&nbsp;&nbsp;&nbsp;
                                         <span style="display: none;">{{ item.node_id }}</span>
-                                        <a href="javascript:;" onclick="delete_at(this);" style="color: black;">删除该计算节点</a>
+                                        <a href="javascript:;" style="color: black;" data-toggle="modal" data-target="#delete_modal"
+                                           onclick="$('#instance_node_id').val($(this).prev().text());
+                                                $('#delete_instance_desc').text($(this).parent().parent().parent().prev()[0].innerText)">
+                                        删除该计算节点
+                                        </a>
                                     </span>
                                 </div>
                                 <span>{{ '%0.2f'| format(item.system_load[0] / item.cpu) }}</span>
@@ -128,4 +132,24 @@
             </div>
         </div>
     </div>
+
+    <input id="instance_node_id" title="实例 node id" class="form-control" name="node_id" hidden>
+
+    <div class="modal" id="delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">删除离线的计算节点：</h4>
+                </div>
+                <div class="modal-body">
+                    <p>删除的计算节点，上面的统计数据将永久消失。你确定要删除该计算节点吗？</p>
+                    <h3 style="color: orangered;" id="delete_instance_desc"></h3>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-sm btn-primary" onclick="delete_at();">确定</button>
+                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock content %}