优化界面

This commit is contained in:
GoEdgeLab
2022-04-02 16:28:22 +08:00
parent 18e6c19a66
commit e9afe1d7e0
21 changed files with 94 additions and 56 deletions

View File

@@ -72,7 +72,7 @@ func (this *NodesAction) RunGet(params struct {
return
}
page := this.NewPage(countResp.Count)
var page = this.NewPage(countResp.Count)
this.Data["page"] = page.AsHTML()
var req = &pb.ListEnabledNodesMatchRequest{
@@ -107,7 +107,7 @@ func (this *NodesAction) RunGet(params struct {
this.ErrorPage(err)
return
}
nodeMaps := []maps.Map{}
var nodeMaps = []maps.Map{}
for _, node := range nodesResp.Nodes {
// 状态
isSynced := false
@@ -215,7 +215,7 @@ func (this *NodesAction) RunGet(params struct {
this.Data["nodes"] = nodeMaps
// 所有分组
groupMaps := []maps.Map{}
var groupMaps = []maps.Map{}
groupsResp, err := this.RPC().NodeGroupRPC().FindAllEnabledNodeGroupsWithNodeClusterId(this.AdminContext(), &pb.FindAllEnabledNodeGroupsWithNodeClusterIdRequest{
NodeClusterId: params.ClusterId,
})
@@ -224,12 +224,12 @@ func (this *NodesAction) RunGet(params struct {
return
}
for _, group := range groupsResp.NodeGroups {
countResp, err := this.RPC().NodeRPC().CountAllEnabledNodesWithNodeGroupId(this.AdminContext(), &pb.CountAllEnabledNodesWithNodeGroupIdRequest{NodeGroupId: group.Id})
countNodesInGroupResp, err := this.RPC().NodeRPC().CountAllEnabledNodesWithNodeGroupId(this.AdminContext(), &pb.CountAllEnabledNodesWithNodeGroupIdRequest{NodeGroupId: group.Id})
if err != nil {
this.ErrorPage(err)
return
}
countNodes := countResp.Count
countNodes := countNodesInGroupResp.Count
groupName := group.Name
if countNodes > 0 {
groupName += "(" + strconv.FormatInt(countNodes, 10) + ")"
@@ -248,7 +248,7 @@ func (this *NodesAction) RunGet(params struct {
this.ErrorPage(err)
return
}
regionMaps := []maps.Map{}
var regionMaps = []maps.Map{}
for _, region := range regionsResp.NodeRegions {
regionMaps = append(regionMaps, maps.Map{
"id": region.Id,

View File

@@ -65,18 +65,23 @@ func (this *ClusterHelper) BeforeAction(actionPtr actions.ActionWrapper) (goNext
tabbar.Add("集群节点", "", "/clusters/cluster/nodes?clusterId="+clusterIdString, "server", selectedTabbar == "node")
tabbar.Add("集群设置", "", "/clusters/cluster/settings?clusterId="+clusterIdString, "setting", selectedTabbar == "setting")
tabbar.Add("删除集群", "", "/clusters/cluster/delete?clusterId="+clusterIdString, "trash", selectedTabbar == "delete")
{
m := tabbar.Add("当前集群:"+cluster.Name, "", "/clusters/cluster?clusterId="+clusterIdString, "", false)
m["right"] = true
}
actionutils.SetTabbar(action, tabbar)
// 左侧菜单
secondMenuItem := action.Data.GetString("secondMenuItem")
switch selectedTabbar {
case "setting":
action.Data["leftMenuItems"] = this.createSettingMenu(cluster, clusterInfo, secondMenuItem)
var menuItems = this.createSettingMenu(cluster, clusterInfo, secondMenuItem)
action.Data["leftMenuItems"] = menuItems
// 当前菜单
action.Data["leftMenuActiveItem"] = nil
for _, item := range menuItems {
if item.GetBool("isActive") {
action.Data["leftMenuActiveItem"] = item
break
}
}
}
}

View File

@@ -0,0 +1,3 @@
Vue.component("raquo-item", {
template: `<span class="item disabled" style="padding: 0">&raquo;</span>`
})

View File

@@ -1,4 +1,6 @@
<second-menu>
<menu-item :href="'/clusters/cluster?clusterId=' + clusterId">{{currentClusterName}}</menu-item>
<span class="disabled item" style="padding: 0">&raquo;</span>
<menu-item :href="'/clusters/cluster/nodes?clusterId=' + clusterId" code="index">节点列表</menu-item>
<menu-item :href="'/clusters/cluster/createNode?clusterId=' + clusterId" code="create">创建节点</menu-item>
<menu-item :href="'/clusters/cluster/installManual?clusterId=' + clusterId" code="install">安装升级</menu-item>

View File

@@ -1,5 +1,11 @@
{$layout}
<second-menu>
<menu-item :href="'/clusters/cluster?clusterId=' + clusterId">{{currentClusterName}}</menu-item>
<span class="disabled item" style="padding: 0">&raquo;</span>
<span class="item active">删除</span>
</second-menu>
<div class="buttons-box">
<button class="ui button red" type="button" @click.prevent="deleteCluster(clusterId)">删除当前集群</button>
</div>

View File

@@ -1,7 +1,7 @@
Tea.context(function () {
this.deleteCluster = function (clusterId) {
let that = this
teaweb.confirm("确定要删除此集群吗?", function () {
teaweb.confirm("html:确定要删除此集群吗?<br/>删除后不可恢复!", function () {
that.$post("/clusters/cluster/delete")
.params({
clusterId: clusterId

View File

@@ -1,10 +1,13 @@
<second-menu>
<a :href="'/clusters/cluster/nodes?clusterId=' + clusterId" class="item" style="padding-right: 0">{{currentClusterName}} &raquo;</a>
<a :href="'/clusters/cluster/nodes?clusterId=' + clusterId + '&groupId=' + node.group.id" v-if="node.group != null" class="item" style="padding-left: 0"> &nbsp; {{node.group.name}} &raquo;</a>
<menu-item :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id" code="node"
v-if="!teaIsPlus" style="padding-left: 0">"{{node.name}}"节点详情</menu-item>
<menu-item :href="'/clusters/cluster/node/boards?clusterId=' + clusterId + '&nodeId=' + node.id" code="board" v-if="teaIsPlus" style="padding-left: 0">"{{node.name}}" 节点看板</menu-item>
<menu-item :href="'/clusters/cluster/node/detail?clusterId=' + clusterId + '&nodeId=' + node.id" code="node" v-if="teaIsPlus" style="padding-left: 0">节点详情</menu-item>
<a :href="'/clusters/cluster/nodes?clusterId=' + clusterId" class="item">{{currentClusterName}}</a>
<raquo-item></raquo-item>
<a :href="'/clusters/cluster/nodes?clusterId=' + clusterId + '&groupId=' + node.group.id" v-if="node.group != null" class="item" style="padding-left: 0">{{node.group.name}}</a>
<raquo-item v-if="node.group != null"></raquo-item>
<menu-item :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}</menu-item>
<raquo-item></raquo-item>
<menu-item :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id" code="node" v-if="!teaIsPlus">节点详情</menu-item>
<menu-item :href="'/clusters/cluster/node/boards?clusterId=' + clusterId + '&nodeId=' + node.id" code="board" v-if="teaIsPlus">节点看板</menu-item>
<menu-item :href="'/clusters/cluster/node/detail?clusterId=' + clusterId + '&nodeId=' + node.id" code="node" v-if="teaIsPlus">节点详情</menu-item>
<menu-item :href="'/clusters/cluster/node/logs?clusterId=' + clusterId + '&nodeId=' + node.id" code="log">运行日志</menu-item>
<menu-item :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id" code="install">安装节点</menu-item>
<menu-item :href="'/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + node.id" code="update">修改设置</menu-item>

View File

@@ -5,18 +5,25 @@
<form class="ui form" action="/clusters/cluster/nodes" v-show="countAll > 0">
<input type="hidden" name="clusterId" :value="clusterId"/>
<div class="ui fields inline">
<div class="ui field" v-if="regions.length > 0">
<select class="ui dropdown" name="regionId" v-model="regionId">
<option value="0">[全部区域]</option>
<option v-for="region in regions" :value="region.id">{{region.name}}</option>
</select>
</div>
<div class="ui field" v-if="groups.length > 0">
<select class="ui dropdown" name="groupId" v-model="groupId">
<option value="0">[全部分组]</option>
<option v-for="group in groups" :value="group.id">{{group.name}}</option>
</select>
</div>
<div class="ui field" v-if="regions.length > 0">
<select class="ui dropdown" name="regionId" v-model="regionId">
<option value="0">[全部区域]</option>
<option v-for="region in regions" :value="region.id">{{region.name}}</option>
</select>
</div>
<div class="ui field">
<select class="ui dropdown" name="activeState" v-model="activeState">
<option value="0">[在线状态]</option>
<option value="1">在线</option>
<option value="2">不在线</option>
</select>
</div>
<div class="ui field">
<select class="ui dropdown" name="installedState" v-model="installState">
<option value="0">[安装状态]</option>
@@ -24,13 +31,6 @@
<option value="2">未安装</option>
</select>
</div>
<div class="ui field">
<select class="ui dropdown" name="activeState" v-model="activeState">
<option value="0">[在线状态]</option>
<option value="1">在线</option>
<option value="2">不在线</option>
</select>
</div>
<div class="ui field">
<input type="text" name="keyword" placeholder="关键词" v-model="keyword" style="width:10em"/>
</div>

View File

@@ -0,0 +1,7 @@
<second-menu>
<menu-item :href="'/clusters/cluster?clusterId=' + clusterId">{{currentClusterName}}</menu-item>
<span class="disabled item" style="padding: 0">&raquo;</span>
<menu-item :href="'/clusters/cluster/settings?clusterId=' + clusterId">设置</menu-item>
<span class="disabled item" style="padding: 0" v-if="leftMenuActiveItem != null">&raquo;</span>
<a class="item active" v-if="leftMenuActiveItem != null" :href="leftMenuActiveItem.url">"{{leftMenuActiveItem.name}}"设置</a>
</second-menu>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="clusterId" :value="clusterId"/>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<p class="comment"><a :href="'/dns/clusters/cluster?clusterId=' + clusterId">查看DNS解析记录 &raquo;</a></p>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="clusterId" :value="clusterId"/>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<first-menu>
<menu-item @click.prevent="createAction">添加动作</menu-item>
<span class="item disabled">|</span>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="clusterId" :value="clusterId"/>
<health-check-config-box :v-health-check-config="healthCheckConfig"></health-check-config-box>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="clusterId" :value="cluster.id"/>
<table class="ui table selectable definition">

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<form class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="clusterId" :value="clusterId"/>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<first-menu>
<menu-item :href="'/clusters/cluster/settings/metrics?category=http&clusterId=' + clusterId" :active="category == 'http'">HTTP</menu-item>
<!--<menu-item :href="'/clusters/cluster/settings/metrics?category=tcp&clusterId=' + clusterId" :active="category == 'tcp'">TCP</menu-item>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
{$template "menu"}
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<first-menu>
<menu-item @click.prevent="createThreshold">添加阈值</menu-item>
</first-menu>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<tip-icon content="TCP Option Address(TOA)可以在TCP选项中传递客户端IP多用在源站需要获取客户端真实IP的场景。<br/><br/>如需修改配置,请在专业人士指导下操作。"></tip-icon>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="clusterId" :value="clusterId"/>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="clusterId" :value="clusterId"/>

View File

@@ -1,7 +1,8 @@
{$layout}
{$template "/left_menu"}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box">
<div class="right-box with-menu">
<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="clusterId" :value="clusterId"/>