github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/js/navbar.js (about)

     1  /*
     2  Copyright 2023.
     3  
     4  Licensed under the Apache License, Version 2.0 (the "License");
     5  you may not use this file except in compliance with the License.
     6  You may obtain a copy of the License at
     7  
     8      http://www.apache.org/licenses/LICENSE-2.0
     9  
    10  Unless required by applicable law or agreed to in writing, software
    11  distributed under the License is distributed on an "AS IS" BASIS,
    12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13  See the License for the specific language governing permissions and
    14  limitations under the License.
    15  */
    16  
    17  let navbarComponent = `
    18      <div>
    19          <div class="menu logo" title="">
    20              <a href="./index.html" class="nav-links"><img class="sslogo" src="./assets/siglens-logo.svg">
    21              </a>
    22          </div>
    23       
    24          <div class="menu nav-search" title="Logs">
    25              <a href="./index.html" class="nav-links"><span class="icon-search"></span><span
    26                      class="nav-link-text">Logs</span></a>
    27          </div>
    28          <div class="menu nav-traces" title="Tracing">
    29              <a href="./service-health.html" class="nav-links"><span class="icon-traces"></span><span
    30                      class="nav-link-text">Tracing</span></a>
    31           </div>
    32          <div class="menu nav-metrics" title="Metrics">
    33              <a href="./metrics.html" class="nav-links"><span class="icon-metrics"></span><span
    34                      class="nav-link-text">Metrics</span></a>
    35          </div>
    36          <div class="menu nav-live" title="Live Tail">
    37              <a href="./live-tail.html" class="nav-links"><span class="icon-live"></span><span
    38                      class="nav-link-text">Live Tail</span></a>
    39          </div>
    40          <div class="menu nav-alerts" title="Alerting">
    41              <a href="./all-alerts.html" class="nav-links"><span class="icon-alerts"></span><span class="nav-link-text">Alerting</span></a>
    42          </div>
    43          <div class="menu nav-ldb" title="Dashboards-home">
    44              <a href="../dashboards-home.html" class="nav-links">
    45                  <span class="icon-launchdb"></span><span class="nav-link-text">Dashboards</span></a>
    46          </div>
    47          <div class="menu nav-minion" title="Minion Searches">
    48              <a href="./minion-searches.html" class="nav-links"><span class="icon-minion"></span><span
    49                      class="nav-link-text">Minion</span></a>
    50          </div>
    51          <div class="menu nav-usq" title="Saved Queries">
    52              <a href="./saved-queries.html" class="nav-links"><span class="icon-usq"></span><span
    53                      class="nav-link-text">Saved Queries</span></a>
    54          </div>
    55          <div class="menu nav-myorg" title="My Org">
    56              <a href="./cluster-stats.html" class="nav-links"><span class="icon-myorg"></span><span
    57                      class="nav-link-text">My Org</span></a>
    58          </div>
    59          <div class="menu nav-ingest" title="Ingestion">
    60              <a href="./test-data.html" class="nav-links"><span class="icon-ingest"></span><span
    61                      class="nav-link-text">Ingestion</span></a>
    62          </div>
    63      </div>
    64      <div>
    65          <div>
    66              <div class="theme-btn-group" title="Theme Selector">
    67                  <button class="btn theme-btn dark-theme" id="theme-btn">
    68                      <img class="theme-img light" src="./assets/light-mode-inactive.svg"
    69                          onmouseover="this.src='./assets/light-mode-active.svg';"
    70                          onmouseout="this.src='assets/light-mode-inactive.svg';">
    71                      <img class="theme-img dark" src="./assets/dark-mode-inactive.svg"
    72                          onmouseover="this.src='./assets/dark-mode-active.svg';"
    73                          onmouseout="this.src='./assets/dark-mode-inactive.svg';">
    74                  </button>
    75              </div>
    76          </div>
    77          <div class="position-relative mb-2">
    78              <div class="nav-help" title="Help & Support">
    79                  <a href="#" class="nav-links"><span class="icon-help"> </span>
    80  
    81                      <span class="nav-link-text">Help & Support</span></a>
    82              </div>
    83              <div class="help-options">
    84                  <div class="menu nav-docs" title="SigLens Documentation">
    85                      <a href="https://www.siglens.com/siglens-docs/" class="nav-links" target="_blank"><span class="icon-docs"></span><span class="nav-link-text">Documentation</span></a>
    86                  </div>
    87                  <div class="menu nav-slack" title="Join Slack Community">
    88                      <a href="https://www.siglens.com/slack.html" class="nav-links" target="_blank"><span class="icon-slack"></span><span class="nav-link-text">Join Slack Community</span></a>
    89                  </div>
    90                  <div class="menu nav-linkedin" title="Share on LinkedIn">
    91                      <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://siglens.com" class="nav-links" target="_blank"><span class="icon-linkedin"></span><span class="nav-link-text">Share on LinkedIn</span></a>
    92                  </div>
    93                  <div class="menu nav-twitter" title="Share on Twitter">
    94                      <a href="https://twitter.com/intent/post?text=Checkout%20SigLens%2C%20industry%27s%20fastest%20observability%20solution%2C%201025x%20faster%20than%20ElasticSearch%2C%2054x%20faster%20than%20ClickHouse%20and%20it%20is%20open%20source.%20https%3A%2F%2Fsiglens.com%20%2C%20%23opensource%2C%20%23observability%20%23logmanagement%20via%20%40siglensHQ" 
    95                      class="nav-links" target="_blank"><span class="icon-twitter"></span><span class="nav-link-text">Share on Twitter</span></a>
    96                  </div>
    97                  <hr>
    98                  <div class="menu nav-feedback" title="Feedback">
    99                      <a href="https://docs.google.com/forms/d/e/1FAIpQLSfs_mxeX4LKbjAdX22cOknFaoi2TJcoOGD3OKj2RmZl7evD6A/viewform"
   100                          target="_blank" class="nav-links">
   101                          <span class="icon-feedback"></span><span class="nav-link-text feedback">Feedback</span>
   102                      </a>
   103                  </div>
   104              </div>
   105          </div>
   106      </div>
   107  `
   108  
   109  let orgUpperNavTabs = [
   110      { name: 'Cluster Stats', url: './cluster-stats.html', class: 'cluster-stats' },
   111      {{ .OrgUpperNavTabs}}
   112      { name: 'Settings', url: './org-settings.html', class : 'org-settings'},
   113      { name: 'Version', url: './application-version.html', class: 'application-version'}
   114  ];
   115  
   116  let tracingUpperNavTabs = [
   117      { name: 'Service Health', url: './service-health.html', class: 'service-health' },
   118      { name: 'Search Traces', url: './search-traces.html', class : 'search-traces'},
   119      { name: 'Dependency Graph', url: './dependency-graph.html', class : 'dependency-graph' },
   120  ];
   121  
   122  let alertsUpperNavTabs = [
   123      { name: 'Alert Rules', url: './all-alerts.html', class: 'all-alerts' },
   124      { name: 'Contact Points', url: './contacts.html', class : 'contacts'},
   125  ];
   126  
   127  let ingestionUpperNavTabs = [
   128      { name: 'Log Sources', url: './test-data.html', class : 'test-data' },
   129  ];
   130  
   131  $(document).ready(function () {
   132      $("#app-side-nav").prepend(navbarComponent);
   133      const currentUrl = window.location.href;
   134      const navItems = [
   135          ".nav-search",
   136          ".nav-metrics",
   137          ".nav-ldb",
   138          ".nav-usq", 
   139          ".nav-alerts", 
   140          ".nav-myorg",
   141          ".nav-minion",
   142          ".nav-live",
   143          ".nav-traces",
   144          ".nav-ingest",
   145      ];
   146      navItems.forEach((item) => $(item).removeClass("active"));
   147  
   148      if (currentUrl.includes("index.html")) {
   149          $(".nav-search").addClass("active");
   150      } else if (currentUrl.includes("metrics.html")) {
   151          $(".nav-metrics").addClass("active");
   152      } else if (currentUrl.includes("dashboards-home.html") || currentUrl.includes("dashboard.html")) {
   153          $(".nav-ldb").addClass("active");
   154      } else if (currentUrl.includes("saved-queries.html")) {
   155          $(".nav-usq").addClass("active");
   156      } else if (currentUrl.includes("alerts.html") || currentUrl.includes("alert.html") || currentUrl.includes("alert-details.html")   || currentUrl.includes("contacts.html")){
   157          $(".nav-alerts").addClass("active");
   158          $('.alerts-nav-tab').appendOrgNavTabs("Alerting", alertsUpperNavTabs);
   159      } else if (currentUrl.includes("cluster-stats.html")|| currentUrl.includes("org-settings.html") || currentUrl.includes("application-version.html") {{ .OrgUpperNavUrls}} ) {
   160          $(".nav-myorg").addClass("active");
   161          $('.org-nav-tab').appendOrgNavTabs("My Org", orgUpperNavTabs);
   162      } else if (currentUrl.includes("minion-searches.html")) {
   163          $(".nav-minion").addClass("active");
   164      } else if (currentUrl.includes("live-tail.html")) {
   165          $(".nav-live").addClass("active");
   166      } else if (currentUrl.includes("service-health.html")|| currentUrl.includes("service-health-overview.html") || currentUrl.includes("dependency-graph.html")|| currentUrl.includes("search-traces.html")) {
   167          $(".nav-traces").addClass("active");
   168          if ($('.subsection-navbar').length) {
   169              $('.subsection-navbar').appendOrgNavTabs("Tracing", tracingUpperNavTabs);
   170          }        
   171      } else if (currentUrl.includes("test-data.html")) {
   172          $(".nav-ingest").addClass("active");
   173          $('.ingestion-nav-tab').appendOrgNavTabs("Ingestion", ingestionUpperNavTabs);
   174      }
   175  
   176      $(".nav-help").on("click", function(event) {
   177          event.stopPropagation();
   178          event.preventDefault();
   179          $(".help-options").slideToggle(200);
   180      });
   181  
   182      $(document).on("click", function(event) {
   183          var helpOptions = $(".help-options");
   184          var menu = $(".nav-help");
   185          
   186          if (!menu.is(event.target) && !helpOptions.is(event.target) && helpOptions.has(event.target).length === 0) {
   187              helpOptions.slideUp(200);
   188          }
   189      });
   190  
   191      $(".help-options").on("click", "a", function(event) {
   192          $(".help-options").slideUp(200);
   193      });
   194  });
   195  
   196