Skip to content

Commit

Permalink
Apply statnd alone swagger ui
Browse files Browse the repository at this point in the history
  • Loading branch information
cb-github-robot authored Aug 17, 2024
2 parents 862f43c + 352895d commit c4aac1a
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 4 deletions.
1 change: 1 addition & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ COPY --from=builder /app/img ./dist/img
COPY --from=builder /app/index.html ./
COPY --from=builder /app/index.js ./
COPY --from=builder /app/redoc-swagger.html ./
COPY --from=builder /app/swagger.html ./
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package-lock.json ./package-lock.json
COPY --from=builder /app/package.json ./package.json
Expand Down
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -782,7 +782,7 @@

<!-- Admin dashboards -->
<div id="console" style="display:none; width:100%; height:100%; position:absolute; top:0; left:0;">
<iframe id="iframe" src="http://localhost:1323/tumblebug/api/index.html"
<iframe id="iframe" src="http://localhost:1324/swagger.html"
style="visibility:visible; width:50%; height:100%; position:relative;"></iframe>
<iframe id="iframe2" src="http://localhost:1024/spider/adminweb"
style="visibility:visible; width:50%; height:100%; position:relative;"></iframe>
Expand Down
4 changes: 2 additions & 2 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ function endpointChanged() {
var iframe = document.getElementById('iframe');
var iframe2 = document.getElementById('iframe2');

iframe.src = "http://" + hostname + ":1323/tumblebug/api/index.html";
iframe.src = "http://" + hostname + ":1324/swagger.html";
iframe2.src = "http://" + hostname + ":1024/spider/adminweb";
}
window.endpointChanged = endpointChanged;
Expand Down Expand Up @@ -1535,7 +1535,7 @@ function addRegionMarker(spec) {
var username = usernameElement.value;
var password = passwordElement.value;

var url = `http://${hostname}:${port}/tumblebug/ns/system-purpose-common-ns/resources/spec/${spec}`;
var url = `http://${hostname}:${port}/tumblebug/ns/system/resources/spec/${spec}`;

axios({
method: "get",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
},
"scripts": {
"start": "parcel -p 1324 --host 0.0.0.0 index.html",
"build": "echo 'Removing temporal cache files' && rm -rf dist/* .parcel-cache/* && mkdir -p dist/img/ && cp -r img/ dist/ && cp redoc-swagger.html dist/ && parcel build --public-url . index.html"
"build": "echo 'Removing temporal cache files' && rm -rf dist/* .parcel-cache/* && mkdir -p dist/img/ && cp -r img/ dist/ && cp redoc-swagger.html dist/ && cp swagger.html dist/ && parcel build --public-url . index.html"
},
"description": "MapUI Client for CB-Tumblebug (display multi-cloud infra service)",
"repository": {
Expand Down
113 changes: 113 additions & 0 deletions swagger.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CB-Tumblebug API Dashboard</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
overflow: hidden;
}

#swagger-container {
width: 100%; /* Swagger UI takes the full width */
height: 100%;
display: flex;
flex-direction: column;
}
#swagger-header {
height: 50px; /* Header height */
background-color: #262626;
color: #fcfcfc;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
}
#swagger-ui-container {
height: calc(100% - 50px); /* Adjust height based on header */
overflow-y: scroll;
}
</style>

<!-- Load Swagger UI styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.css">
</head>
<body>
<div id="swagger-header">CB-Tumblebug API Dashboard</div>
<div id="swagger-container">
<div id="swagger-ui-container"></div>
</div>

<!-- Load the latest Swagger UI scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@3.14.0/dist/js-yaml.min.js"></script>

<script>
// Basic authentication details
const username = 'default';
const password = 'default';
const credentials = btoa(username + ':' + password);
const authHeader = 'Basic ' + credentials;

console.log('Starting to fetch YAML');

// Fetch the YAML file with authentication
fetch('http://localhost:1323/tumblebug/api/doc.yaml', {
headers: {
'Authorization': authHeader
}
})
.then(response => {
console.log('Fetch response:', response);
if (!response.ok) {
throw new Error('Authentication failed: ' + response.statusText);
}
return response.text();
})
.then(yamlText => {
console.log('YAML fetched successfully');
const spec = jsyaml.load(yamlText);

console.log('YAML parsed successfully');

// Initialize Swagger UI
const ui = SwaggerUIBundle({
url: 'http://localhost:1323/tumblebug/api/doc.yaml',
dom_id: '#swagger-ui-container',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
docExpansion: "list",
layout: "BaseLayout",
deepLinking: true, // Enable deep linking
tagsSorter: "alpha",
operationsSorter: "alpha",
requestInterceptor: (request) => {
request.headers['Authorization'] = authHeader;
return request;
},
validatorUrl: null,
onComplete: () => {
console.log('Swagger UI loaded');
}
});

console.log('Swagger UI initialized');
})
.catch(error => {
console.error('Failed to load API specification:', error);
alert('Failed to load API specification: ' + error.message);
});
</script>
</body>
</html>

0 comments on commit c4aac1a

Please sign in to comment.