EdgeAdmin/web/views/@default/clusters/cluster/createNode.html

{$layout}
{$template "/clusters/cluster/menu"}
{$template "/left_menu"}
{$template "/code_editor"}

<div class="right-box">
    <div class="ui steps small fluid">
        <div class="ui step" :class="{active: step == 'info'}">
            <div class="content">1. 填写节点信息</div>
        </div>
        <div class="ui step" :class="{active: step == 'install'}">
            <div class="content">2. 安装节点</div>
        </div>
        <div class="ui step" :class="{active: step == 'finish'}">
            <div class="content">3. 完成</div>
        </div>
    </div>

    <!-- 填写信息 -->
	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success" v-show="step == 'info'">
		<input type="hidden" name="clusterId" :value="clusterId"/>
		<table class="ui table definition selectable">
			<tr>
				<td class="title">节点名称 *</td>
				<td>
					<input type="text" name="name" maxlength="50" ref="focus" v-model="name" @input="changeName"/>
				</td>
			</tr>
			<tr>
				<td>IP地址 *</td>
				<td>
					<node-ip-addresses-box></node-ip-addresses-box>
                    <p class="comment">用于访问节点和域名解析等<span v-if="defaultIP.length > 0"><strong>，如果没有填写默认为{{defaultIP}}</strong></span>。</p>
				</td>
			</tr>
			<tr v-if="dnsRoutes.length > 0">
				<td>DNS线路</td>
				<td>
					<input type="hidden" name="dnsDomainId" :value="dnsDomainId"/>
					<dns-route-selector :v-all-routes="dnsRoutes"></dns-route-selector>
					<p class="comment">当前节点对应的DNS线路，可用线路是根据集群设置的域名获取的，注意DNS服务商可能对这些线路有其他限制。</p>
				</td>
			</tr>
			<tr>
				<td>所属分组</td>
				<td>
					<node-group-selector :v-cluster-id="clusterId"></node-group-selector>
                    <p class="comment">用来筛选节点<span v-if="teaIsPlus">，同时可以在分组中设置二级缓存节点</span>。</p>
				</td>
			</tr>
            <tr>
                <td>所属区域</td>
                <td>
                    <node-region-selector></node-region-selector>
                    <p class="comment">设置区域后可以根据区域进行流量统计和计费。</p>
                </td>
            </tr>
			<tr>
				<td colspan="2">
					<more-options-indicator></more-options-indicator>
				</td>
			</tr>
			<tbody v-show="moreOptionsVisible">
			<tr>
				<td>SSH主机地址</td>
				<td>
					<input type="text" name="sshHost" maxlength="64"/>
					<p class="comment">比如192.168.1.100，用于远程安装节点应用程序。</p>
				</td>
			</tr>
			<tr>
				<td>SSH主机端口</td>
				<td>
					<input type="text" name="sshPort" maxlength="5"/>
					<p class="comment">常见的比如22。</p>
				</td>
			</tr>
			<tr>
				<td>SSH登录认证</td>
				<td>
					<grant-selector :v-node-cluster-id="clusterId"></grant-selector>
				</td>
			</tr>
			</tbody>
		</table>
		<submit-btn>下一步</submit-btn>
	</form>

    <!-- 安装节点 -->
    <div v-if="step == 'install'">
        <div class="ui tabular menu">
            <a href="" class="item" :class="{active: installMethod == 'remote'}" @click.prevent="switchInstallMethod('remote')">远程安装</a>
            <a href="" class="item" :class="{active: installMethod == 'manual'}" @click.prevent="switchInstallMethod('manual')">手动安装</a>
        </div>

        <!-- 远程安装 -->
        <div v-if="installMethod == 'remote'">
            <form class="ui form">
                <table class="ui table definition selectable">
                    <tr>
                        <td class="title">SSH主机地址 *</td>
                        <td>
                            <input type="text" name="sshHost2" maxlength="64" v-model="sshHost" ref="installSSHHostRef" style="width: 16em" @change="changeSSHHost"/>
                            <div v-if="node.addresses != null && node.addresses.length > 1" style="margin-top: 1em">
                                <a href="" class="ui label small basic" v-for="addr in node.addresses" title="点击使用" @click.prevent="selectSSHHost(addr)">{{addr}}</a>
                            </div>
                            <p class="comment">比如192.168.1.100，用于远程安装节点应用程序。</p>
                        </td>
                    </tr>
                    <tr>
                        <td>SSH主机端口 *</td>
                        <td>
                            <input type="text" name="sshPort2" maxlength="5" v-model="sshPort" style="width:5em"/>
                            <p class="comment"><node-login-suggest-ports ref="nodeLoginSuggestPortsRef" @select="selectLoginPort" @auto-select="autoSelectLoginPort"></node-login-suggest-ports></p>
                        </td>
                    </tr>
                    <tr>
                        <td>SSH登录认证 *</td>
                        <td>
                            <grant-selector :v-grant="node.grant" :v-node-cluster-id="clusterId" @change="changeGrant"></grant-selector>
                        </td>
                    </tr>
                </table>


                <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
                     class="ui segment installing-box">
                    <div v-if="installStatus.isRunning" class="blue">安装中...</div>
                    <div v-if="installStatus.isFinished">
                        <span v-if="installStatus.isOk" class="green">已安装成功</span>
                        <span v-if="!installStatus.isOk" class="red">安装过程中发生错误：{{installStatus.error}}</span>
                    </div>
                </div>

                <button class="ui primary button" type="button" @click.prevent="install" v-if="!isInstalling">远程安装</button>
                <button class="ui button disabled" v-if="isInstalling">正在安装</button>
                <a href="" @click.prevent="finish" v-if="!isInstalling" style="margin-left: 1em; float: right">跳过安装</a>
            </form>
        </div>

        <!-- 手动安装 -->
        <div v-if="installMethod == 'manual'">
            <div class="row">上传边缘节点程序到服务器并解压，然后在边缘节点安装目录下，复制<code-label>configs/api.template.yaml</code-label>为<code-label>configs/api.yaml</code-label>，修改文件里面的内容为以下内容：</div>
            <div class="margin"></div>
            <source-code-box id="rpc-code" type="text/yaml">rpc:
    endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
            <div class="margin"></div>
            <div class="row">然后再使用<code-label>bin/edge-node start</code-label>命令启动节点。</div>
            <div class="margin"></div>

            <div v-if="installerFiles != null && installerFiles.length > 0">
                <h4>边缘节点安装文件下载</h4>
                <table class="ui table celled">
                    <thead class="full-width">
                    <tr>
                        <th>文件名</th>
                        <th>操作系统</th>
                        <th>CPU架构</th>
                        <th>版本</th>
                    </tr>
                    </thead>
                    <tr v-for="installerFile in installerFiles">
                        <td>
                            <a :href="'/clusters/cluster/downloadInstaller?name=' + installerFile.name" target="_blank" style="font-weight: normal">{{installerFile.name}}</a>
                        </td>
                        <td>{{installerFile.os}}</td>
                        <td>{{installerFile.arch}}</td>
                        <td>v{{installerFile.version}}</td>
                    </tr>
                </table>
            </div>

            <div>
                <div class="ui divider"></div>
                <a href="" @click.prevent="finish">安装完成</a>
                <a href="" @click.prevent="finish" style="float: right">跳过安装</a>
            </div>
        </div>
    </div>

    <!-- 完成 -->
    <div v-show="step == 'finish'">
        <div>
            <div style="text-align: center; font-size: 1.4em; margin-top: 2.4em" v-if="isInstalled"><span class="green">"{{node.name}}"节点已被创建并安装成功。</span></div>
            <div style="text-align: center; font-size: 1.4em; margin-top: 2.4em" v-if="!isInstalled"><span class="green">"{{node.name}}"节点已创建成功。</span></div>
            <div style="text-align: center; margin-top: 3em">
                <a :href="'/clusters/cluster/node?nodeId=' + nodeId + '&clusterId=' + clusterId" class="ui button primary" type="button">现在进入节点详情<i class="ui icon long arrow alternate right"></i></a>
            </div>
            <div style="text-align: center; margin-top: 1em">
                <a href="" @click.prevent="createNext">继续创建下一个节点</a>
            </div>
        </div>
    </div>
</div>