76 lines
2.9 KiB
HTML
76 lines
2.9 KiB
HTML
{$layout}
|
||
{$template "menu"}
|
||
|
||
<div style="display:flex;align-items:baseline;gap:0.8em;margin-bottom:0.5em">
|
||
<h3 style="margin:0">ClickHouse 配置</h3>
|
||
<span v-if="connStatus === 'connected'" class="ui label green tiny" style="vertical-align:baseline">
|
||
<i class="icon circle" style="margin-right:0.25em"></i>已连接
|
||
</span>
|
||
<span v-else-if="connStatus === 'disconnected'" class="ui label red tiny" style="vertical-align:baseline"
|
||
:title="connError">
|
||
<i class="icon circle" style="margin-right:0.25em"></i>已断开
|
||
</span>
|
||
<span v-else class="ui label grey tiny" style="vertical-align:baseline">
|
||
<i class="icon circle outline" style="margin-right:0.25em"></i>未配置
|
||
</span>
|
||
</div>
|
||
<p class="comment">配置后，需要在网站列表-日志策略中创建"文件+ClickHouse"的策略，才能将访问日志绕过api组件直接由边缘节点发送给ClickHouse。</p>
|
||
|
||
<form method="post" class="ui form" @submit.prevent="onSubmit">
|
||
<csrf-token></csrf-token>
|
||
<table class="ui table definition selectable">
|
||
<tr>
|
||
<td class="title">连接地址（Host）</td>
|
||
<td>
|
||
<input type="text" name="host" maxlength="200" ref="focus"
|
||
placeholder="如 127.0.0.1 或 clickhouse.example.com" v-model="form.host" />
|
||
<p class="comment">ClickHouse 服务器地址。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>协议（Scheme）</td>
|
||
<td>
|
||
<select name="scheme" class="ui dropdown auto-width" v-model="form.scheme">
|
||
<option value="http">HTTP</option>
|
||
<option value="https">HTTPS</option>
|
||
</select>
|
||
<p class="comment">默认 HTTPS；当前后台固定跳过证书校验。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>端口（Port）</td>
|
||
<td>
|
||
<input type="number" name="port" min="1" max="65535" style="width:6em" v-model.number="form.port" />
|
||
<p class="comment">接口端口默认 8443（HTTPS）；请与 ClickHouse 实际开放端口保持一致。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>用户名（User）</td>
|
||
<td>
|
||
<input type="text" name="user" maxlength="100" v-model="form.user" />
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>密码（Password）</td>
|
||
<td>
|
||
<input type="password" name="password" maxlength="200" placeholder="不修改请留空" v-model="form.password" />
|
||
<p class="comment">留空则不修改已保存的密码。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>数据库名（Database）</td>
|
||
<td>
|
||
<input type="text" name="database" maxlength="100" placeholder="default" v-model="form.database" />
|
||
<p class="comment">logs_ingest 表所在库，默认 default。</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div style="display:flex; align-items:center; gap:0.5em; margin-top:1em">
|
||
<submit-btn></submit-btn>
|
||
<button type="button" class="ui button basic blue" @click="testConnection" :disabled="isTesting">
|
||
<i :class="isTesting ? 'icon spinner loading' : 'icon plug'"></i> 测试连接
|
||
</button>
|
||
<span v-if="testResult"
|
||
:style="{color: testOk ? '#21ba45' : '#db2828', fontWeight:'bold'}">{{testResult}}</span>
|
||
</div>
|
||
</form> |