Update Dockerfile to expose port 8080, add new search dropdown for na…

…mespaces, and enhance search page with improved button styles and pagination
EliasDeHondt · Jan 14, 2025 · 8f985a3 · 8f985a3
1 parent 551e8d5
commit 8f985a3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 10 deletions.
diff --git a/App/Frontend/Dockerfile b/App/Frontend/Dockerfile
@@ -21,6 +21,6 @@ COPY ./js /usr/share/nginx/html/js
 COPY ./pages /usr/share/nginx/html/pages
 COPY ./manifest.json /usr/share/nginx/html/manifest.json
 
-EXPOSE 80
+EXPOSE 8080
 
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/App/Frontend/css/search.css b/App/Frontend/css/search.css
@@ -124,7 +124,8 @@
 }
 
 .search-dropdown1,
-.search-dropdown2 {
+.search-dropdown2,
+.search-dropdown3 {
     position: relative;
     display: inline-block;
     width: 100%;
@@ -178,7 +179,8 @@
 }
 
 .search-dropdown1.show .search-dropdown-menu,
-.search-dropdown2.show .search-dropdown-menu {
+.search-dropdown2.show .search-dropdown-menu,
+.search-dropdown3.show .search-dropdown-menu {
     display: block;
 }
 

diff --git a/App/Frontend/default.conf b/App/Frontend/default.conf
@@ -3,7 +3,7 @@
 # @since 01/01/2025             #
 #################################
 server {
-    listen 80;
+    listen 8080;
     server_name localhost;
 
     root /usr/share/nginx/html;

diff --git a/App/Frontend/includes/nav.html b/App/Frontend/includes/nav.html
@@ -34,6 +34,14 @@
             <span class="cursor-pointer">Settings</span>
         </a>
     </li>
+    <li class="nav-menu-item">
+        <a href="https://k10s.eliasdh.com">
+            <svg viewBox="0 0 24 24">
+                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z">
+            </svg>
+            <span class="cursor-pointer">K10s</span>
+        </a>
+    </li>
     <li class="nav-menu-item">
         <a href="/pages/login.html">
             <svg viewBox="0 0 52 52" class="cursor-pointer">

diff --git a/App/Frontend/pages/search.html b/App/Frontend/pages/search.html
@@ -45,7 +45,7 @@
             <section class="search-header-section3">
                 <article class="search-header-article3">
                     <section class="search-dropdown1">
-                        <button class="search-dropdown-button cursor-pointer" onclick="toggleDropdown('.search-dropdown1')">Select Node</button>
+                        <button class="search-dropdown-button cursor-pointer" onclick="toggleDropdown('.search-dropdown1')">Node</button>
                         <ul class="search-dropdown-menu cursor-pointer">
                             <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown1')">None</li>
                             <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown1')">Node A</li>
@@ -55,14 +55,25 @@
                 </article>
                 <article class="search-header-article3">
                     <section class="search-dropdown2">
-                        <button class="search-dropdown-button cursor-pointer" onclick="toggleDropdown('.search-dropdown2')">Select Cluster</button>
+                        <button class="search-dropdown-button cursor-pointer" onclick="toggleDropdown('.search-dropdown2')">Cluster</button>
                         <ul class="search-dropdown-menu cursor-pointer">
                             <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown2')">None</li>
                             <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown2')">Cluster A</li>
                             <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown2')">Cluster B</li>
                         </ul>
                     </section>
                 </article>
+                <article class="search-header-article3">
+                    <section class="search-dropdown3">
+                        <button class="search-dropdown-button cursor-pointer" onclick="toggleDropdown('.search-dropdown3')">Namespace</button>
+                        <ul class="search-dropdown-menu cursor-pointer">
+                            <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown3')">None</li>
+                            <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown3')">Webserver001</li>
+                            <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown3')">Database001</li>
+                            <li class="cursor-pointer" onclick="toggleDropdown('.search-dropdown3')">Monitoring001</li>
+                        </ul>
+                    </section>
+                </article>
             </section>
         </header>
         <!--Header-->
@@ -270,10 +281,10 @@
                 </tbody>
             </table>
             <section class="search-main-pagination">
-                <button>20</button>
-                <button>50</button>
-                <button>100</button>
-                <button>All</button>
+                <button class="cursor-pointer">20</button>
+                <button class="cursor-pointer">50</button>
+                <button class="cursor-pointer">100</button>
+                <button class="cursor-pointer">All</button>
             </section>
         </main>
         <!--Main-->