Refactor lite console highlight global configuration selection.

RoyZeng · Apr 7, 2017 · 758bc8e · 758bc8e
1 parent 765259a
commit 758bc8e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 26 deletions.
diff --git a/elastic-job-lite/elastic-job-lite-console/src/main/resources/console/index.html b/elastic-job-lite/elastic-job-lite-console/src/main/resources/console/index.html
@@ -30,10 +30,10 @@
  <nav class="navbar navbar-static-top" role="navigation">
  <div id="navbar" class="navbar-custom-menu">
  <ul class="nav navbar-nav">
- <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">切换注册中心<span class="caret"></span></a>
+ <li class="dropdown"><a id='registry-center-dimension-link' href="#" class="dropdown-toggle" data-toggle="dropdown">切换注册中心<span class="caret"></span></a>
  <ul class="dropdown-menu" id="registry-center-dimension"></ul>
  </li>
- <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">切换事件追踪数据源<span class="caret"></span></a>
+ <li class="dropdown"><a id='data-source-dimension-link' href="#" class="dropdown-toggle" data-toggle="dropdown">切换事件追踪数据源<span class="caret"></span></a>
  <ul class="dropdown-menu" id="data-source-dimension"></ul>
  </li>
  <li><a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a></li>

diff --git a/.../elastic-job-lite-console/src/main/resources/console/js/global/event_trace_data_source.js b/.../elastic-job-lite-console/src/main/resources/console/js/global/event_trace_data_source.js
@@ -44,7 +44,6 @@ function generateOperationButtons(val, row) {
  var operationTd;
  var name = row.name;
  if (row.activated) {
- $("#activated-data-source").text(name);
  operationTd = "<button disabled operation='connectDataSource' class='btn-xs' dataSourceName='" + name + "'>已连</button>&nbsp;<button operation='deleteDataSource' class='btn-xs btn-danger' data-toggle='modal' id='delete-dialog' dataSourceName='" + name + "'>删除</button>";
  } else {
  operationTd = "<button operation='connectDataSource' class='btn-xs btn-primary' dataSourceName='" + name + "' data-loading-text='切换中...'>连接</button>&nbsp;<button operation='deleteDataSource' class='btn-xs btn-danger' data-toggle='modal' id='delete-dialog' dataSourceName='" + name + "'>删除</button>";
@@ -64,7 +63,6 @@ function bindConnectButtons() {
  dataType: "json",
  success: function(data) {
  if (data) {
- $("#activated-data-source").text(dataSourceName);
  $("#data-sources").bootstrapTable("refresh");
  renderDataSourceForDashboardNav();
  showSuccessDialog();

diff --git a/...job-lite/elastic-job-lite-console/src/main/resources/console/js/global/registry_center.js b/...job-lite/elastic-job-lite-console/src/main/resources/console/js/global/registry_center.js
@@ -44,7 +44,6 @@ function generateOperationButtons(val, row) {
  var operationTd;
  var name = row.name;
  if (row.activated) {
- $("#activated-reg-center").text(name);
  operationTd = "<button disabled operation='connect' class='btn-xs' regName='" + name + "'>已连</button>&nbsp;<button operation='delete' class='btn-xs btn-danger' data-toggle='modal' id='delete-dialog' regName='" + name + "'>删除</button>";
  } else {
  operationTd = "<button operation='connect' class='btn-xs btn-primary' regName='" + name + "' data-loading-text='切换中...'>连接</button>&nbsp;<button operation='delete' class='btn-xs btn-danger' data-toggle='modal' id='delete-dialog' regName='" + name + "'>删除</button>";
@@ -64,7 +63,6 @@ function bindConnectButtons() {
  dataType: "json",
  success: function(data) {
  if (data) {
- $("#activated-reg-center").text(regName);
  $("#reg-centers").bootstrapTable("refresh");
  renderRegCenterForDashboardNav();
  refreshJobNavTag();

diff --git a/elastic-job-lite/elastic-job-lite-console/src/main/resources/console/js/util/dashboard.js b/elastic-job-lite/elastic-job-lite-console/src/main/resources/console/js/util/dashboard.js
@@ -5,53 +5,70 @@ $(function() {
  switchDataSource();
  renderSkin();
  controlSubMenuStyle();
- controlDropdownMenuStyle();
  refreshRegCenterNavTag();
  refreshEventTraceNavTag();
 });
 
 function renderRegCenterForDashboardNav() {
  $.get("api/registry-center", {}, function(data) {
  var index;
+ var activatedRegCenter;
  for (index = 0; index < data.length; index++) {
  if (data[index].activated) {
- $("#activated-reg-center").text(data[index].name);
+ activatedRegCenter = data[index].name;
  }
  }
- var activatedRegCenter = $("#activated-reg-center");
  var registryCenterDimension = $("#registry-center-dimension");
  registryCenterDimension.empty();
  for (index = 0; index < data.length; index++) {
  var regName = data[index].name;
- var liContent = "<a href='#' reg-name='" + regName + "' data-loading-text='切换中...'>" + regName + "</a>";
+ var liContent;
  if (activatedRegCenter && activatedRegCenter === regName) {
- registryCenterDimension.append("<li class='open'>" + liContent + "</li>");
+ liContent = "<a href='#' reg-name='" + regName + "' data-loading-text='切换中...'><b>" + regName + "&nbsp;&nbsp;(已连接)</b></a>";
  } else {
- registryCenterDimension.append("<li>" + liContent + "</li>");
+ liContent = "<a href='#' reg-name='" + regName + "' data-loading-text='切换中...'>" + regName + "</a>";
  }
+ registryCenterDimension.append("<li>" + liContent + "</li>");
+ }
+ if (0 === data.length) {
+ registryCenterDimension.hide();
+ }
+ });
+ $(document).on("click", "#registry-center-dimension-link", function(event) {
+ if ($("#registry-center-dimension").children("li").length > 0) {
+ $("#registry-center-dimension").css("display", "");
  }
  });
 }
 
 function renderDataSourceForDashboardNav() {
  $.get("api/data-source", {}, function(data) {
  var index;
+ var activatedDataSource;
  for (index = 0; index < data.length; index++) {
  if (data[index].activated) {
- $("#activated-data-source").text(data[index].name);
+ activatedDataSource = data[index].name;
  }
  }
- var activatedDataSource = $("#activated-data-source");
  var dataSourceDimension = $("#data-source-dimension");
  dataSourceDimension.empty();
  for (index = 0; index < data.length; index++) {
  var dataSourceName = data[index].name;
- var liContent = "<a href='#' data-source-name='" + dataSourceName + "' data-loading-text='切换中...'>" + dataSourceName + "</a>";
+ var liContent;
  if (activatedDataSource && activatedDataSource === dataSourceName) {
- dataSourceDimension.append("<li class='open'>" + liContent + "</li>");
+ liContent = "<a href='#' data-source-name='" + dataSourceName + "' data-loading-text='切换中...'><b>" + dataSourceName + "&nbsp;&nbsp;(已连接)</b></a>";
  } else {
- dataSourceDimension.append("<li>" + liContent + "</li>");
+ liContent = "<a href='#' data-source-name='" + dataSourceName + "' data-loading-text='切换中...'>" + dataSourceName + "</a>";
  }
+ dataSourceDimension.append("<li>" + liContent + "</li>");
+ }
+ if (0 === data.length) {
+ dataSourceDimension.hide();
+ }
+ });
+ $(document).on("click", "#data-source-dimension-link", function(event) {
+ if ($("#data-source-dimension").children("li").length > 0) {
+ $("#data-source-dimension").css("display", "");
  }
  });
 }
@@ -131,7 +148,7 @@ function renderSkin() {
 
 function changeSkin(skinClass) {
  $.each(my_skins, function(index) {
- $("body").removeClass(my_skins[index]);
+  $("body").removeClass(my_skins[index]);
  });
  $("body").addClass(skinClass);
 }
@@ -143,14 +160,6 @@ function controlSubMenuStyle() {
  });
 }
 
-function controlDropdownMenuStyle() {
- $("a.dropdown-toggle").click(function() {
- if (0 === $(this).parent().children("ul").children("li").length) {
- $(this).parent().children("ul").hide();
- }
- });
-}
-
 function refreshRegCenterNavTag() {
  $.ajax({
  url: "api/registry-center",