Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SITE] Implementation of Dashboard Page #309

Merged
merged 3 commits into from
Apr 4, 2022
Merged

[SITE] Implementation of Dashboard Page #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3a4d55
implemented basic structure of dashboard page
asubedy Apr 4, 2022
61c5089
removed unnecessary comments
asubedy Apr 4, 2022
761003f
fixed toggle, used layout to display page, added style to different file
asubedy Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/_data/navigation.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,6 @@ nav:

- title: "Connect"
section: subscribe

- title: "Dashboard"
url: benchmark
13 changes: 11 additions & 2 deletions docs/_includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
{% if page.layout == "dashboardPage" %}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="dashBoardNav">
{% else %}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
{% endif %}

<div class="container">
<a class="navbar-brand js-scroll-trigger" href="/#page-top">
{% if page.layout == "dashboardPage" %}
<img class="logoDetails dashboard-logo header_logo" src="/assets/img/logo/smp-white.svg"/>
{% else %}
<img class="logoDetails header_logo" src="/assets/img/logo/smp-white.svg"/>
{% endif %}
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
Expand All @@ -13,7 +22,7 @@
{%- for link in site.data.navigation.nav -%}
<li class="nav-item">
{%- if link.url -%}
<a class="nav-link js-scroll-trigger" href="/{{ link.url }}">{{ link.title }}</a>
<a class="nav-link" href="/{{ link.url }}">{{ link.title }}</a>
{%- else if link.section -%}
<a class="nav-link js-scroll-trigger" href="/#{{ link.section }}">{{ link.title }}</a>
{%- else -%}
Expand Down
84 changes: 84 additions & 0 deletions docs/_layouts/dashboardPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>

{% include head.html %}

<body id="dashboard-page-top">

{% include nav.html %}

<section id="dashboardPagecontainer">
<div class="vertical-nav" id="sidebar">
<p class="text-gray font-weight-bold text-uppercase px-1 small pb-4">Service Mesh Performance Results</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic"> <i class="fa fa-th-large mr-3 text-primary fa-fw"></i> All results </a>
</li>
</ul>
<p class="text-gray font-weight-bold text-uppercase px-3 small py-4 mb-0">Service Mesh</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic"> <i class="fa fa-area-chart mr-3 text-primary fa-fw"></i> Istio </a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic"> <i class="fa fa-bar-chart mr-3 text-primary fa-fw"></i> Linkered </a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic"> <i class="fa fa-pie-chart mr-3 text-primary fa-fw"></i> Consul </a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic"> <i class="fa fa-line-chart mr-3 text-primary fa-fw"></i> OSM </a>
</li>
</ul>
</div>
<!-- End vertical navbar -->
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Demo content -->
<section class="resultsContainer">
<h5 class="display-5 text-black">Select Load Generator: </h5>
<form class="load-generators">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="fortio">
<label class="form-check-label" for="inlineCheckbox1">Fortio</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="nighthawk">
<label class="form-check-label" for="inlineCheckbox2">Nighthawk</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="wrk2">
<label class="form-check-label" for="inlineCheckbox3">wrk2</label>
</div>
</form>
<select class=" test-selector drop-down custom-select custom-select-lg mb-3" name="performance-ids" id="performance-ids">
<option value="test-id-1">test-id-1</option>
<option value="test-id-2">test-id-2</option>
<option value="test-id-2">test-id-2</option>
<option value="test-id-3">test-id-3</option>
<option value="test-id-4">test-id-4</option>
</select>
<div class="performance-graph">
<h4 class="test-text">TEST DATA NOT FOR COMPARISION</h4> <img class="graph-image" src="../assets/img/dashboard.jpg"> </div>
</section>
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="toggle-button text-light ">
<i class="icon-left fa fa-angle-left mr-2" style="display: block;"></i>
<i class="icon-right fa fa-angle-right mr-2" style="display: none;"></i>
</button>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/assets/js/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="/assets/js/jqBootstrapValidation.js"></script>
<script src="/assets/js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="/assets/js/agency.min.js"></script>
<script src="/assets/js/toggle.js"></script>
</body>

</html>
44 changes: 42 additions & 2 deletions docs/_sass/components/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Styling for the navbar
#mainNav {
#mainNav,#dashBoardNav {
background-color: $background-color;
.navbar-toggler {
font-size: .85rem;
Expand Down Expand Up @@ -74,12 +74,52 @@
}
}
}
#dashBoardNav {
padding-top:0;
padding-bottom: 0;
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
transition: padding-top 0.3s, padding-bottom 0.3s;
border: none;
background-color: $background-color;
.navbar-brand {
font-size: 1.50em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-nav {
.nav-item {
.nav-link {
font-size: 1.2em;
padding: 0.80em 0.80em !important;
}
}
}
&.navbar-shrink {
padding-top: 0;
padding-bottom: 0;
background-color: $background-color;
.header_logo {
height: 60px;
transition: all 600ms;
}
.navbar-brand {
font-size: 1.50em;
padding: 12px 0;
}
}
}
}

.logoDetails {
float:left;
height:100px;
margin-left:3vw;

}

.dashboard-logo{
margin-left:-10rem;
}

@media(max-width:992px) {
Expand Down
116 changes: 116 additions & 0 deletions docs/_sass/layout/_dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
$color_1: #aaa;
$background-color_1: #3C494E;
$background-color_2: white;

.vertical-nav {
min-width: 13rem;
width: 13rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
padding-top: 160px;
background-color: $background-color_1;
z-index: 1;
}
.page-content {
width: calc(100% - 13rem);
margin-left: 12rem;
transition: all 0.4s;
}
#sidebar.active {
margin-left: -17rem;
}
#content.active {
width: 100%;
margin: 0;
}
#dashboardPagecontainer {
padding-top: 7.6rem;
overflow: hidden;
}
.text-uppercase {
letter-spacing: 0.1em;
}
.text-gray {
color: $color_1;
}
.load-generators {
display: flex;
width: 50%;
justify-content: space-between;
}
.test-selector {
width: 100%;
padding: 5px;
}
.drop-down {
margin-top: 2rem;
}
.toggle-button {
margin-left: -3rem;
position: sticky;
z-index: 3;
// bottom: 1.4rem;
text-align: right;
padding: 0.3rem;
background-color: $background-color_1;
border: #3C494E solid 1px;
}
.resultsContainer {
margin-top: -3rem;
}
.icon-left {
position: sticky;
bottom: 2rem;
z-index: 2;

}
.icon-right {
position: sticky;
bottom: 2rem;
z-index: 2;
}
.performance-graph {
width: fit-content;
margin-right: auto;
margin-left: auto;
border: solid 1px black;
position: relative;
background-color: $background-color_2;
}
.graph-image {
width: 79vw;
opacity: 0.5;
}
.test-text {
position: absolute;
top: 10rem;
left: 19rem;
}
@media only screen and (max-width: 991px) {
#dashboardPagecontainer {
padding-top: 120px;
}
.vertical-nav {
padding-top: 70px;
}
}
@media (max-width: 768px) {
#sidebar {
margin-left: -17rem;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
margin: 0;
}
#content.active {
margin-left: 17rem;
width: calc(100% - 17rem);
}
}
1 change: 1 addition & 0 deletions docs/assets/css/agency.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,4 @@ $subscribe-image: "{{ site.data.style.subscribe-image }}";
@import "layout/footer.scss";
@import "layout/blog.scss";
@import "layout/cncf-project.scss";
@import "layout/dashboard.scss";
Binary file added docs/assets/img/dashboard.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions docs/assets/js/toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// Sidebar toggle behavior
const toggleButton = document.getElementById("sidebarCollapse");
const vertNav = document.getElementById("sidebar")
const content = document.getElementById("content")
const leftChevron = document.querySelector(".icon-left")
const rightChevron = document.querySelector(".icon-right")
console.log(leftChevron.getc)

function toggleStyle(element){
if(element.style["display"] === "none"){
element.style["display"] = "block"
}
else{
element.style["display"]= "none"
}
}

toggleButton.addEventListener("click" ,function() {
vertNav.classList.toggle("active")
content.classList.toggle("active")
toggleStyle(leftChevron)
toggleStyle(rightChevron)

})
9 changes: 9 additions & 0 deletions docs/pages/dashboard/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
layout: dashboardPage
title: Project
permalink: benchmark
redirect_from: benchmark/
language: en
display-title: "false"
list: exclude
---