andere image
This commit is contained in:
allard
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Executable
+10
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
|
||||
version="3.1">
|
||||
<display-name>Liberty Project</display-name>
|
||||
|
||||
<welcome-file-list>
|
||||
<welcome-file>index.html</welcome-file>
|
||||
</welcome-file-list>
|
||||
</web-app>
|
||||
@@ -0,0 +1,424 @@
|
||||
/*******************************************************************************
|
||||
* Copyright (c) 2018, 2024 IBM Corporation and others.
|
||||
* All rights reserved. This program and the accompanying materials
|
||||
* are made available under the terms of the Eclipse Public License v1.0
|
||||
* which accompanies this distribution, and is available at
|
||||
* http://www.eclipse.org/legal/epl-v10.html
|
||||
*
|
||||
* Contributors:
|
||||
* IBM Corporation - initial API and implementation
|
||||
*******************************************************************************/
|
||||
@font-face {
|
||||
font-family: BunueloLight;
|
||||
src: url("/fonts/BunueloCleanPro-Light.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: BunueloSemiBold;
|
||||
src: url("/fonts/BunueloCleanPro-SemiBold.otf");
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: BunueloSemiBold;
|
||||
font-size: 16px;
|
||||
color: #24243b;
|
||||
background-color: white;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-top: 55px;
|
||||
padding-left: 8%;
|
||||
padding-right: 8%;
|
||||
/* font-weight: 400; */
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-right: 200px;
|
||||
height: 1px;
|
||||
background-color: #C8D3D3;
|
||||
}
|
||||
|
||||
.headerImage {
|
||||
background-image: url("/img/header_ufo.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 20px right 15px;
|
||||
height: 103px;
|
||||
margin-top: -94px;
|
||||
}
|
||||
|
||||
#whereTo {
|
||||
padding-bottom: 80px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 22px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
h1 {
|
||||
font-family: BunueloSemiBold;
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h4 {
|
||||
margin-top: 52px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#appIntro {
|
||||
background-image: linear-gradient(#141427 0%, #2c2e50 100%);
|
||||
background-size: 100% calc(100% - 70px);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#titleSection {
|
||||
color: white;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#appTitle {
|
||||
font-family: BunueloLight;
|
||||
font-size: 55px;
|
||||
}
|
||||
|
||||
.headerRow {
|
||||
height: 100px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
|
||||
}
|
||||
.headerRow > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.collapsibleRow {
|
||||
transition: border 400ms ease-out, box-shadow 200ms linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapsibleRow:hover .headerTitle {
|
||||
background-color: #f4f4f4;
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
.collapsed .collapsibleRow {
|
||||
box-shadow: none;
|
||||
border-bottom: 4px solid;
|
||||
}
|
||||
.collapsed#healthSection > .headerRow {
|
||||
border-bottom-color: #D6D9E4;
|
||||
}
|
||||
.collapsed#configSection > .headerRow {
|
||||
border-bottom-color: #F8D7C1;
|
||||
}
|
||||
.collapsed#metricsSection > .headerRow {
|
||||
border-bottom-color: #EEF3C3;
|
||||
}
|
||||
|
||||
.collapsed .collapsibleContent { /* collapsing animation */
|
||||
transition: all 400ms ease-out, opacity 300ms ease-in;
|
||||
}
|
||||
.expanded .collapsibleContent { /* expanding animation */
|
||||
transition: all 400ms ease-out, opacity 450ms ease-out;
|
||||
}
|
||||
.collapsed .collapsibleContent {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.expanded .collapsibleContent {
|
||||
opacity: 1;
|
||||
max-height: 1000px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.headerIcon {
|
||||
width: 160px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
background-color: #E8EAEF;
|
||||
}
|
||||
.headerIcon img {
|
||||
display: Block;
|
||||
margin:auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#healthSection .headerIcon {
|
||||
background-color: #E8EAEF;
|
||||
}
|
||||
#configSection .headerIcon {
|
||||
background-color: #FDE4D1;
|
||||
}
|
||||
#metricsSection .headerIcon {
|
||||
background-color: #F5F8DA;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
background-color: white;
|
||||
color: #5d6a8e;
|
||||
letter-spacing:0;
|
||||
text-align:left;
|
||||
padding-left: 40px;
|
||||
padding-top: 10px;
|
||||
width: calc(100% - 200px); /* 160 from icon, 40 from padding */
|
||||
}
|
||||
#healthSection h2 {
|
||||
color: #5D6A8E;
|
||||
}
|
||||
#configSection h2 {
|
||||
color: #E57000;
|
||||
}
|
||||
#metricsSection h2 {
|
||||
color: #4F6700;
|
||||
}
|
||||
|
||||
#sysPropTitle {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.headerTitle > h2 {
|
||||
font-family: BunueloLight;
|
||||
font-size: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.collapsed#configSection .caret {
|
||||
background-image: url("../img/carets/caret_down_orange.svg")
|
||||
}
|
||||
.expanded#configSection .caret {
|
||||
background-image: url("../img/carets/caret_up_orange.svg")
|
||||
}
|
||||
|
||||
.msSection {
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px 0 rgba(63,70,89,0.31);
|
||||
}
|
||||
|
||||
.sectionContent {
|
||||
margin-left: 160px;
|
||||
}
|
||||
|
||||
#systemPropertiesTable {
|
||||
padding-left: 160px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 100px;
|
||||
height: 44px;
|
||||
color: #24253a;
|
||||
text-align: center;
|
||||
font-family: BunueloSemiBold;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 70px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button a {
|
||||
text-decoration: none;
|
||||
color: #F4914D;
|
||||
}
|
||||
|
||||
#guidesButton {
|
||||
background-color: #abd155;
|
||||
width: 269px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
#guidesButton:hover {
|
||||
background-color: #C7EE63;
|
||||
}
|
||||
#mpGuidesButton {
|
||||
border: 2px solid #f4914d8c;
|
||||
border-radius: 100px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
background-color: white;
|
||||
transition: background-color .2s, color .2s;
|
||||
}
|
||||
#mpGuidesButton:hover {
|
||||
background-color: #f4914d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
section#openLibertyAndMp {
|
||||
background: #f4f4f5;
|
||||
background-size: 100% calc(100% - 70px);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#healthBox {
|
||||
text-align: left;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 47%;
|
||||
}
|
||||
|
||||
#healthBox > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#healthIcon {
|
||||
padding-left: 73px;
|
||||
padding-top: 56px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
#healthStatusIcon {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
#healthText {
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
#serviceStatus {
|
||||
font-size: 50px;
|
||||
font-family: BunueloLight;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#healthNote {
|
||||
text-align: left;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-left: 43px;
|
||||
line-height: 26px;
|
||||
width: 53%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
height: 63px;
|
||||
padding-left: 41px;
|
||||
font-size: 16px;
|
||||
}
|
||||
tr {
|
||||
height: 45px;
|
||||
}
|
||||
td {
|
||||
padding-left: 41px;
|
||||
}
|
||||
#systemPropertiesTable tr:first-child {
|
||||
background: #D6D9E4;
|
||||
}
|
||||
#configTable tr:first-child {
|
||||
background: #F8D7C1;;
|
||||
}
|
||||
#metricsTable tr:first-child {
|
||||
background: #EEF3C3;
|
||||
}
|
||||
|
||||
#systemPropertiesTable tr:nth-child(2n+3) {
|
||||
background: #EEEFF3;
|
||||
}
|
||||
#configTable tr:nth-child(2n+2) {
|
||||
background: #FEF8F4;
|
||||
}
|
||||
#metricsTable tr:nth-child(2n+2) {
|
||||
background: #FBFCEE;
|
||||
}
|
||||
|
||||
#systemPropertiesTable .sourceRow,
|
||||
#healthTable .sourceRow {
|
||||
border-top: 4px solid #D6D9E4;
|
||||
}
|
||||
#systemPropertiesTable .sourceRow a,
|
||||
#healthTable .sourceRow a {
|
||||
color: #5D6A8E;
|
||||
}
|
||||
#configTable .sourceRow {
|
||||
border-top: 4px solid #F8D7C1;
|
||||
}
|
||||
#configTable .sourceRow a {
|
||||
color: #E57000;
|
||||
}
|
||||
#metricsTable .sourceRow {
|
||||
border-top: 4px solid #EEF3C3;
|
||||
}
|
||||
#metricsTable .sourceRow a {
|
||||
color: #4F6700;
|
||||
}
|
||||
.sourceRow a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#learnMore {
|
||||
margin-top: 120px;
|
||||
padding: 0px 200px 100px;
|
||||
}
|
||||
|
||||
#learnMore > h2 {
|
||||
color: #5e6b8d;
|
||||
}
|
||||
|
||||
.bodyFooter {
|
||||
padding: 5px 8%;
|
||||
background-image: url("/img/footer_main.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 20px right 110px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 50px;
|
||||
color: #3F4659;
|
||||
}
|
||||
|
||||
.bodyFooterLink {
|
||||
font-family: BunueloSemiBold;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
border-bottom: solid 1px #C8D3D3;
|
||||
margin-top: 30px;
|
||||
margin-right: 130px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bodyFooterLink > a {
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
color: #96bc32;
|
||||
}
|
||||
|
||||
#licenseLink {
|
||||
color: #5E6B8D;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#footer_text {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#footer_copyright {
|
||||
font-size: 11px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#5D6A8E;}
|
||||
</style>
|
||||
<path class="st0" d="M23.3,0.6c-0.9-0.8-2.2-0.8-3.1,0l0,0l0,0l0,0l0,0L12,9L3.8,0.7l0,0v0l0,0l0,0c-0.8-0.9-2.2-0.9-3.1,0
|
||||
c-0.9,0.8-0.9,2.2,0,3.1l11.3,11.6L23.4,3.7C24.2,2.9,24.2,1.5,23.3,0.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 634 B |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#4F6700;}
|
||||
</style>
|
||||
<path class="st0" d="M23.3,0.6c-0.9-0.8-2.2-0.8-3.1,0l0,0l0,0l0,0l0,0L12,9L3.8,0.7l0,0v0l0,0l0,0c-0.8-0.9-2.2-0.9-3.1,0
|
||||
c-0.9,0.8-0.9,2.2,0,3.1l11.3,11.6L23.4,3.7C24.2,2.9,24.2,1.5,23.3,0.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 634 B |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E57000;}
|
||||
</style>
|
||||
<path class="st0" d="M23.3,0.6c-0.9-0.8-2.2-0.8-3.1,0l0,0l0,0l0,0l0,0L12,9L3.8,0.7l0,0v0l0,0l0,0c-0.8-0.9-2.2-0.9-3.1,0
|
||||
c-0.9,0.8-0.9,2.2,0,3.1l11.3,11.6L23.4,3.7C24.2,2.9,24.2,1.5,23.3,0.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 634 B |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#5D6A8E;}
|
||||
</style>
|
||||
<path class="st0" d="M23.3,14.7c-0.9,0.8-2.2,0.8-3.1,0l0,0l0,0l0,0l0,0L12,6.3l-8.2,8.4l0,0v0l0,0l0,0c-0.8,0.9-2.2,0.9-3.1,0
|
||||
c-0.9-0.8-0.9-2.2,0-3.1L11.9,0l11.4,11.6C24.2,12.5,24.2,13.9,23.3,14.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#4F6700;}
|
||||
</style>
|
||||
<path class="st0" d="M23.3,14.7c-0.9,0.8-2.2,0.8-3.1,0l0,0l0,0l0,0l0,0L12,6.3l-8.2,8.4l0,0v0l0,0l0,0c-0.8,0.9-2.2,0.9-3.1,0
|
||||
c-0.9-0.8-0.9-2.2,0-3.1L11.9,0l11.4,11.6C24.2,12.5,24.2,13.9,23.3,14.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E57000;}
|
||||
</style>
|
||||
<path class="st0" d="M23.3,14.7c-0.9,0.8-2.2,0.8-3.1,0l0,0l0,0l0,0l0,0L12,6.3l-8.2,8.4l0,0v0l0,0l0,0c-0.8,0.9-2.2,0.9-3.1,0
|
||||
c-0.9-0.8-0.9-2.2,0-3.1L11.9,0l11.4,11.6C24.2,12.5,24.2,13.9,23.3,14.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="72px" height="57.6px" viewBox="-363 252.2 72 57.6" style="enable-background:new -363 252.2 72 57.6;"
|
||||
xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E57000;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M-334.3,260.6c-0.6-4.7-4.6-8.4-9.5-8.4c-4.9,0-8.9,3.7-9.5,8.4h-9.7v2.4h9.7c0.6,4.7,4.6,8.4,9.5,8.4
|
||||
c4.9,0,8.9-3.7,9.5-8.4h43.3v-2.4H-334.3z M-343.8,264.2c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
|
||||
C-341.4,263.1-342.5,264.2-343.8,264.2z"/>
|
||||
<path class="st0" d="M-310.2,271.4c-4.9,0-8.9,3.7-9.5,8.4H-363v2.4h43.3c0.6,4.7,4.6,8.4,9.5,8.4c4.9,0,8.9-3.7,9.5-8.4h9.7v-2.4
|
||||
h-9.7C-301.3,275.1-305.3,271.4-310.2,271.4z M-310.2,283.4c-1.3,0-2.4-1.1-2.4-2.4s1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
|
||||
S-308.9,283.4-310.2,283.4z"/>
|
||||
<path class="st0" d="M-343.8,290.6c-4.9,0-8.9,3.7-9.5,8.4h-9.7v2.4h9.7c0.6,4.7,4.6,8.4,9.5,8.4c4.9,0,8.9-3.7,9.5-8.4h43.3V299
|
||||
h-43.3C-334.9,294.3-338.9,290.6-343.8,290.6z M-343.8,302.6c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
|
||||
C-341.4,301.5-342.5,302.6-343.8,302.6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="81px" height="59px" viewBox="0 0 81 59" style="enable-background:new 0 0 81 59;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#7D86A3;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M65,59v-0.1C64.3,59,63.7,59,63,59H65z"/>
|
||||
<path class="st0" d="M16,59h2c-0.7,0-1.3,0-2-0.1V59z"/>
|
||||
<path class="st0" d="M0,30v11c0,9.3,7,16.9,16,17.9V12.1C7,13.1,0,20.7,0,30z"/>
|
||||
<path class="st0" d="M65,12.1v46.8c9-1,16-8.6,16-17.9V30C81,20.7,74,13.1,65,12.1z"/>
|
||||
<path class="st0" d="M54,12V0h-2.4h-1.1h-19h-0.6H27v12h-7v47h41V12H54z M31,4h19v8H31V4z M55,38H43v12h-5V38H26v-5h12V21h5v12h12
|
||||
V38z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 866 B |
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="70px" height="51.3px" viewBox="-361 255.3 70 51.3" style="enable-background:new -361 255.3 70 51.3;"
|
||||
xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#4F6700;}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="-358.7,304.3 -358.7,255.3 -361,255.3 -361,304.3 -361,306.7 -358.7,306.7 -291,306.7 -291,304.3 "/>
|
||||
<rect x="-354" y="281" class="st0" width="16.3" height="18.7"/>
|
||||
<path class="st0" d="M-316.7,262.3H-333v37.3h16.3V262.3z M-319,297.3h-11.7v-32.7h11.7V297.3z"/>
|
||||
<rect x="-312" y="274" class="st0" width="16.3" height="2.3"/>
|
||||
<rect x="-312" y="278.7" class="st0" width="16.3" height="2.3"/>
|
||||
<rect x="-312" y="283.3" class="st0" width="16.3" height="2.3"/>
|
||||
<rect x="-312" y="288" class="st0" width="16.3" height="2.3"/>
|
||||
<rect x="-312" y="292.7" class="st0" width="16.3" height="2.3"/>
|
||||
<rect x="-312" y="297.3" class="st0" width="16.3" height="2.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="77px" height="71px" viewBox="0 0 77 71" style="enable-background:new 0 0 77 71;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#7D86A3;}
|
||||
</style>
|
||||
<path class="st0" d="M56.2,15c0-0.6-0.1-1.2-0.2-1.8l3.7-3.2l-3.1-5.1l-4.4,1.4c-1-0.9-2.2-1.6-3.6-2.1l-1-4.2h-6l-1,4.2
|
||||
c-1.3,0.5-2.5,1.2-3.6,2.1l-4.4-1.4L29.7,10l3.7,3.2c-0.1,0.6-0.2,1.2-0.2,1.8c0,0.6,0.1,1.2,0.2,1.8L29.7,20l3.1,5.1l4.4-1.4
|
||||
c1,0.9,2.2,1.6,3.6,2.1l1,4.2h6l1-4.2c1.3-0.5,2.5-1.2,3.6-2.1l4.4,1.4l3.1-5.1l-3.7-3.2C56.2,16.2,56.2,15.6,56.2,15z M38.7,15
|
||||
c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6s-2.7,6-6,6C41.4,21,38.7,18.3,38.7,15z"/>
|
||||
<path class="st0" d="M73.8,57.4c0-0.6-0.1-1.1-0.1-1.6l3.3-2.9l-2.8-4.6l-4,1.3c-0.9-0.8-2-1.5-3.2-1.9l-0.9-3.8h-5.4l-0.9,3.8
|
||||
c-1.2,0.4-2.3,1.1-3.2,1.9l-4-1.3l-2.8,4.6l3.3,2.9C53,56.3,53,56.8,53,57.4c0,0.6,0.1,1.1,0.1,1.6l-3.3,2.9l2.8,4.6l4-1.3
|
||||
c0.9,0.8,2,1.5,3.2,1.9l0.9,3.8h5.4l0.9-3.8c1.2-0.4,2.3-1.1,3.2-1.9l4,1.3l2.8-4.6L73.7,59C73.8,58.5,73.8,58,73.8,57.4z M58,57.4
|
||||
c0-3,2.4-5.4,5.4-5.4c3,0,5.4,2.4,5.4,5.4s-2.4,5.4-5.4,5.4C60.4,62.8,58,60.4,58,57.4z"/>
|
||||
<path class="st0" d="M34.9,40.4c0-0.8-0.1-1.6-0.2-2.4l4.8-4.2l-4.1-6.7L29.7,29c-1.4-1.2-3-2.1-4.7-2.8l-1.3-5.6h-7.9l-1.3,5.6
|
||||
c-1.7,0.6-3.3,1.6-4.7,2.8l-5.7-1.9L0,33.9l4.8,4.2c-0.1,0.8-0.2,1.6-0.2,2.4c0,0.8,0.1,1.6,0.2,2.4L0,47l4.1,6.7l5.7-1.9
|
||||
c1.4,1.2,3,2.1,4.7,2.8l1.3,5.6h7.9l1.3-5.6c1.7-0.6,3.3-1.6,4.7-2.8l5.7,1.9l4.1-6.7l-4.8-4.2C34.8,42,34.9,41.3,34.9,40.4z
|
||||
M11.9,40.4c0-4.4,3.5-7.9,7.9-7.9c4.4,0,7.9,3.5,7.9,7.9s-3.5,7.9-7.9,7.9C15.4,48.3,11.9,44.8,11.9,40.4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="110px" height="110px" viewBox="-405 226 110 110" style="enable-background:new -405 226 110 110;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F9D7BF;}
|
||||
.st1{fill:#E57000;}
|
||||
</style>
|
||||
<circle class="st0" cx="-350" cy="281.1" r="52.2"/>
|
||||
<g>
|
||||
<polygon class="st1" points="-333.1,258.6 -350,275.4 -366.9,258.6 -372.4,264.1 -355.6,281 -372.4,297.9 -366.9,303.4 -350,286.6
|
||||
-333.1,303.4 -327.6,297.9 -344.4,281 -327.6,264.1 "/>
|
||||
<path class="st1" d="M-350,226c-30.4,0-55,24.6-55,55s24.6,55,55,55c30.4,0,55-24.6,55-55S-319.6,226-350,226z M-350,332.1
|
||||
c-28.2,0-51.1-22.9-51.1-51.1s22.9-51.1,51.1-51.1s51.1,22.9,51.1,51.1S-321.8,332.1-350,332.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 936 B |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="110px" height="110px" viewBox="-406.3 226 110 110" style="enable-background:new -406.3 226 110 110;"
|
||||
xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E9F4D1;}
|
||||
.st1{fill:#ABD155;}
|
||||
</style>
|
||||
<circle class="st0" cx="-350.9" cy="281.2" r="52.2"/>
|
||||
<g>
|
||||
<polygon class="st1" points="-359.2,291.2 -372.1,278.2 -377.6,283.8 -359.2,302.3 -324.9,268.1 -330.5,262.5 "/>
|
||||
<path class="st1" d="M-351.3,226c-30.4,0-55,24.6-55,55s24.6,55,55,55c30.4,0,55-24.6,55-55S-320.9,226-351.3,226z M-351.3,332.1
|
||||
c-28.2,0-51.1-22.9-51.1-51.1s22.9-51.1,51.1-51.1s51.1,22.9,51.1,51.1S-323.1,332.1-351.3,332.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 879 B |
Executable
+117
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>olproperties</title>
|
||||
<script src="js/mpData.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="appIntro">
|
||||
<div id="titleSection">
|
||||
<h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 1.7</h1>
|
||||
<div class="line"></div>
|
||||
<div class="headerImage"></div>
|
||||
<h2>Open Liberty Java17 applicatie op Container Hosting Platform!</h2>
|
||||
<p>Dit voorbeeld gebruikt de System Properties microservice om de eigenschappen van de Liberty server te tonen.</p>
|
||||
</div>
|
||||
|
||||
<div class="msSection" id="systemProperties">
|
||||
<div class="headerRow">
|
||||
<div class="headerIcon"><img src="img/sysProps.svg"/></div>
|
||||
<div class="headerTitle" id="sysPropTitle"><h2>System Properties</h2></div>
|
||||
</div>
|
||||
<div class="sectionContent">
|
||||
<table id="systemPropertiesTable">
|
||||
<tbody id="sysPropertiesTableBody">
|
||||
<tr><th>Eigenschap</th><th>Waarde</th></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="whereTo">
|
||||
<p>Dit voorbeeld toont de eigenschappen van de host evenals health en metrics.</p>
|
||||
</section>
|
||||
|
||||
<section id="openLibertyAndMp">
|
||||
<h1>System properties voorbeeld</h1>
|
||||
<h2>Gebouwd met Microprofile op Open Liberty </h2>
|
||||
<div class="msSection collapsed" id="healthSection">
|
||||
<div class="collapsibleRow headerRow" onClick="toggle()">
|
||||
<div class="headerIcon"><img src="img/health.svg"/></div>
|
||||
<div class="headerTitle">
|
||||
<h2>Health</h2>
|
||||
<p>Monitor de gezondheid van je microservice</p>
|
||||
<img class="caret" src="img/carets/caret_down_blue.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsibleContent" id="collapsibleHealth">
|
||||
<div class="sectionContent">
|
||||
<div id="healthBox">
|
||||
<div id="healthIcon"><div id="healthStatusIcon"><img id="healthStatusIconImage"/></div></div>
|
||||
<div id="healthText">
|
||||
<p id="serviceName"></p>
|
||||
<p id="serviceStatus"></p>
|
||||
</div>
|
||||
</div>
|
||||
<table id="healthTable"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msSection collapsed" id="metricsSection">
|
||||
<div class="collapsibleRow headerRow" onClick="toggle()">
|
||||
<div class="headerIcon"><img src="img/metrics.svg"/></div>
|
||||
<div class="headerTitle">
|
||||
<h2>Metrics</h2>
|
||||
<p>Monitoring hoe goed je service draait</p>
|
||||
<img class="caret" src="img/carets/caret_down_green.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsibleContent" id="collapsibleConfig">
|
||||
<div class="sectionContent" id="metricsText">
|
||||
<table id="metricsTable">
|
||||
<tbody id="metricsTableBody">
|
||||
<tr><th>PROPERTY</th><th>VALUE</th></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="learnMore">
|
||||
<h2>Want to learn more about Open Liberty and MicroProfile?</h2>
|
||||
<p>Continue your winning streak and keep building successful apps with the help of our guides. Our MicroProfile™ guides are a great place to start if you want to build something similar to this sample app.</p>
|
||||
<a href="https://openliberty.io/guides/?search=MicroProfile&key=tag"><button id="mpGuidesButton">Check out our MicroProfile guides</button></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
<section id="whereToNext">
|
||||
<h2>Waar wil je nu naartoe?</h2>
|
||||
<h4>Ga naar Open Liberty tutorials!</h4>
|
||||
<p>Alle verdere informatie, voorbeelden en hulp vind je hier:</p>
|
||||
<a href="https://openliberty.io/guides/"><button id="guidesButton">Open Liberty Tutorials</button></a>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
displaySystemProperties(); // this calls displayMetrics() because it is a dependency
|
||||
displayHealth();
|
||||
displayConfigProperties();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<footer class="bodyFooter">
|
||||
<div class="bodyFooterLink">
|
||||
<a id="licenseLink" href="https://github.com/OpenLiberty/open-liberty/blob/release/LICENSE">License</a>
|
||||
<a href="https://twitter.com/OpenLibertyIO">Twitter</a>
|
||||
<a href="https://github.com/OpenLiberty">GitHub</a>
|
||||
<a href="https://openliberty.io/">openliberty.io</a>
|
||||
</div>
|
||||
<p id="footerText">Een open-source project van Allard</p>
|
||||
<p id="footerCopyright">©Copyright AllardDCS 2025</p>
|
||||
</footer>
|
||||
</html>
|
||||
@@ -0,0 +1,243 @@
|
||||
/*******************************************************************************
|
||||
* Copyright (c) 2018, 2019 IBM Corporation and others.
|
||||
* All rights reserved. This program and the accompanying materials
|
||||
* are made available under the terms of the Eclipse Public License v1.0
|
||||
* which accompanies this distribution, and is available at
|
||||
* http://www.eclipse.org/legal/epl-v10.html
|
||||
*
|
||||
* Contributors:
|
||||
* IBM Corporation - initial API and implementation
|
||||
*******************************************************************************/
|
||||
function displayMetrics() {
|
||||
getSystemMetrics();
|
||||
}
|
||||
|
||||
function getSystemMetrics() {
|
||||
var url = "https://olproperties-dev.allarddcs.nl/metrics";
|
||||
var req = new XMLHttpRequest();
|
||||
|
||||
var metricToDisplay = {};
|
||||
var SRgetPropertiesTime = "io_openliberty_sample_system_SystemResource_getPropertiesTime";
|
||||
metricToDisplay["getProperties_total{mp_scope=\"application\",}"] = "Request Count";
|
||||
metricToDisplay[SRgetPropertiesTime + "_seconds{mp_scope=\"application\",quantile=\"0.999\",}"] = "Request Time (ms) at Quantile 0.999";
|
||||
metricToDisplay[SRgetPropertiesTime + "_seconds{mp_scope=\"application\",quantile=\"0.5\",}"] = "Request Time (ms) at Quantile 0.5";
|
||||
metricToDisplay[SRgetPropertiesTime + "_seconds_max{mp_scope=\"application\",}"] = "Max Request Time (ms)";
|
||||
metricToDisplay["cpu_processCpuLoad_percent{mp_scope=\"base\",}"] = "System CPU Usage (%)";
|
||||
metricToDisplay["memory_usedHeap_bytes{mp_scope=\"base\",}"] = "System Heap Usage (MB)";
|
||||
|
||||
var metricToMatch = "^(";
|
||||
for (var metricKey in metricToDisplay) {
|
||||
metricToMatch += metricKey + "|"
|
||||
}
|
||||
// remove the last |
|
||||
metricToMatch = metricToMatch.substring(0, metricToMatch.length-1);
|
||||
metricToMatch += ")\\s*(\\S*)$"
|
||||
|
||||
req.onreadystatechange = function() {
|
||||
if (req.readyState != 4) return; // Not there yet
|
||||
if (req.status != 200) {
|
||||
document.getElementById("metricsText").innerHTML = req.statusText;
|
||||
return;
|
||||
}
|
||||
|
||||
var resp = req.responseText;
|
||||
var regexpToMatch = new RegExp(metricToMatch, "gm");
|
||||
var matchMetrics = resp.match(regexpToMatch);
|
||||
|
||||
var keyValPairs = {};
|
||||
for (var metricKey in metricToDisplay) {
|
||||
matchMetrics.forEach(function(line) {
|
||||
var keyToMatch = metricKey + " (.*)";
|
||||
var keyVal = line.match(new RegExp(keyToMatch));
|
||||
if (keyVal) {
|
||||
var val = keyVal[1];
|
||||
if (metricKey.indexOf("application_io_openliberty_sample_system_SystemResource_getPropertiesTime") === 0) {
|
||||
val = val * 1000;
|
||||
} else if (metricKey.indexOf("base_memory_usedHeap_bytes") === 0) {
|
||||
val = val / 1000000;
|
||||
}
|
||||
keyValPairs[metricToDisplay[metricKey]] = val;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var table = document.getElementById("metricsTableBody");
|
||||
for (key in keyValPairs) {
|
||||
var row = document.createElement("tr");
|
||||
var keyData = document.createElement("td");
|
||||
keyData.innerText = key;
|
||||
var valueData = document.createElement("td");
|
||||
valueData.innerText = keyValPairs[key];
|
||||
row.appendChild(keyData);
|
||||
row.appendChild(valueData);
|
||||
table.appendChild(row);
|
||||
}
|
||||
|
||||
addSourceRow(table, url);
|
||||
};
|
||||
|
||||
req.open("GET", url, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
function displaySystemProperties() {
|
||||
getSystemPropertiesRequest();
|
||||
}
|
||||
|
||||
function getSystemPropertiesRequest() {
|
||||
var propToDisplay = ["java.vendor", "java.version", "user.name", "os.name", "wlp.install.dir", "wlp.server.name" ];
|
||||
var url = "https://olproperties-dev.allarddcs.nl/system/properties";
|
||||
var req = new XMLHttpRequest();
|
||||
var table = document.getElementById("systemPropertiesTable");
|
||||
// Create the callback:
|
||||
req.onreadystatechange = function () {
|
||||
if (req.readyState != 4) return; // Not there yet
|
||||
displayMetrics();
|
||||
if (req.status != 200) {
|
||||
table.innerHTML = "";
|
||||
var row = document.createElement("tr");
|
||||
var th = document.createElement("th");
|
||||
th.innerText = req.statusText;
|
||||
row.appendChild(th);
|
||||
table.appendChild(row);
|
||||
|
||||
addSourceRow(table, url);
|
||||
return;
|
||||
}
|
||||
// Request successful, read the response
|
||||
var resp = JSON.parse(req.responseText);
|
||||
for (var i = 0; i < propToDisplay.length; i++) {
|
||||
var key = propToDisplay[i];
|
||||
if (resp.hasOwnProperty(key)) {
|
||||
var row = document.createElement("tr");
|
||||
var keyData = document.createElement("td");
|
||||
keyData.innerText = key;
|
||||
var valueData = document.createElement("td");
|
||||
valueData.innerText = resp[key];
|
||||
row.appendChild(keyData);
|
||||
row.appendChild(valueData);
|
||||
table.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
addSourceRow(table, url);
|
||||
};
|
||||
req.open("GET", url, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
function displayHealth() {
|
||||
getHealth();
|
||||
}
|
||||
|
||||
function getHealth() {
|
||||
var url = "https://olproperties-dev.allarddcs.nl/health";
|
||||
var req = new XMLHttpRequest();
|
||||
|
||||
var healthBox = document.getElementById("healthBox");
|
||||
var serviceName = document.getElementById("serviceName");
|
||||
var healthStatus = document.getElementById("serviceStatus");
|
||||
var healthIcon = document.getElementById("healthStatusIconImage");
|
||||
|
||||
req.onreadystatechange = function () {
|
||||
if (req.readyState != 4) return; // Not there yet
|
||||
|
||||
// Request successful, read the response
|
||||
if (req.responseText) {
|
||||
var resp = JSON.parse(req.responseText);
|
||||
var service = resp.checks[0]; //TODO: use for loop for multiple services
|
||||
|
||||
resp.checks.forEach(function (service) {
|
||||
serviceName.innerText = service.name;
|
||||
healthStatus.innerText = service.status;
|
||||
|
||||
if (service.status === "UP") {
|
||||
healthBox.style.backgroundColor = "#f0f7e1";
|
||||
healthIcon.setAttribute("src", "img/systemUp.svg");
|
||||
} else {
|
||||
healthBox.style.backgroundColor = "#fef7f2";
|
||||
healthIcon.setAttribute("src", "img/systemDown.svg");
|
||||
}
|
||||
});
|
||||
}
|
||||
var table = document.getElementById("healthTable");
|
||||
|
||||
addSourceRow(table, url);
|
||||
};
|
||||
req.open("GET", url, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
function displayConfigProperties() {
|
||||
getConfigPropertiesRequest();
|
||||
}
|
||||
|
||||
function getConfigPropertiesRequest() {
|
||||
var url = "https://olproperties-dev.allarddcs.nl/config";
|
||||
var req = new XMLHttpRequest();
|
||||
|
||||
var configToDisplay = {};
|
||||
configToDisplay["io_openliberty_sample_system_inMaintenance"] = "System In Maintenance";
|
||||
configToDisplay["io_openliberty_sample_testConfigOverwrite"] = "Test Config Overwrite";
|
||||
configToDisplay["io_openliberty_sample_port_number"] = "Port Number";
|
||||
// Create the callback:
|
||||
req.onreadystatechange = function () {
|
||||
if (req.readyState != 4) return; // Not there yet
|
||||
if (req.status != 200) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Request successful, read the response
|
||||
var resp = JSON.parse(req.responseText);
|
||||
var configProps = resp["ConfigProperties"];
|
||||
var table = document.getElementById("configTableBody");
|
||||
for (key in configProps) {
|
||||
var row = document.createElement("tr");
|
||||
var keyData = document.createElement("td");
|
||||
keyData.innerText = configToDisplay[key];
|
||||
var valueData = document.createElement("td");
|
||||
valueData.innerText = configProps[key];
|
||||
row.appendChild(keyData);
|
||||
row.appendChild(valueData);
|
||||
table.appendChild(row);
|
||||
}
|
||||
|
||||
addSourceRow(table, url);
|
||||
}
|
||||
req.open("GET", url, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
function toggle(e) {
|
||||
var callerElement;
|
||||
if (!e) {
|
||||
if (window.event) {
|
||||
e = window.event;
|
||||
callerElement = e.currentTarget;
|
||||
} else {
|
||||
callerElement = window.toggle.caller.arguments[0].currentTarget; // for firefox
|
||||
}
|
||||
}
|
||||
|
||||
var classes = callerElement.parentElement.classList;
|
||||
var collapsed = classes.contains("collapsed");
|
||||
var caretImg = callerElement.getElementsByClassName("caret")[0];
|
||||
var caretImgSrc = caretImg.getAttribute("src");
|
||||
if (collapsed) { // expand the section
|
||||
classes.replace("collapsed", "expanded");
|
||||
caretImg.setAttribute("src", caretImgSrc.replace("down", "up"));
|
||||
} else { // collapse the section
|
||||
classes.replace("expanded", "collapsed");
|
||||
caretImg.setAttribute("src", caretImgSrc.replace("up", "down"));
|
||||
}
|
||||
}
|
||||
|
||||
function addSourceRow(table, url) {
|
||||
var sourceRow = document.createElement("tr");
|
||||
sourceRow.classList.add("sourceRow");
|
||||
var sourceText = document.createElement("td");
|
||||
sourceText.setAttribute("colspan", "100%");
|
||||
sourceText.innerHTML = "API Source\: <a href='"+url+"'>"+url+"</a>";
|
||||
sourceRow.appendChild(sourceText);
|
||||
table.appendChild(sourceRow);
|
||||
}
|
||||
Reference in New Issue
Block a user