Added browsing webpage resources

Signed-off-by: Christian Pinto <christian.pinto@ibm.com>
OpenFabrics · Apr 23, 2024 · 8ee05c6 · 8ee05c6
1 parent 2b60d1f
commit 8ee05c6
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 0 deletions.
diff --git a/static/create.png b/static/create.png
diff --git a/static/re-allocate.png b/static/re-allocate.png
diff --git a/static/register-button.png b/static/register-button.png
diff --git a/static/reset-button.png b/static/reset-button.png
diff --git a/static/sunfish_logo.png b/static/sunfish_logo.png
diff --git a/static/sunfish_logo_no_bg.png b/static/sunfish_logo_no_bg.png
diff --git a/templates_web/browse.html b/templates_web/browse.html
@@ -0,0 +1,193 @@
+<!-- # Copyright Notice:                              -->
+<!-- # Copyright 2024 OpenFabrics Alliance. -->
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sunfish</title>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+    <style>
+        pre {
+            color: green;
+            padding: 0;
+            border: 0;
+            margin: 0;
+        }
+        header {
+            background-color: #dff3e8;
+            padding: 20px;
+            font-family: verdana;
+        }
+
+        /* Logo styles */
+        .logo {
+            width: 250px
+        }
+        .header {
+            font-size: 50px;
+            font-family: verdana;
+        }
+        .container {
+            display: flex;
+            align-items: center;
+            justify-content: left;
+        }
+        .code-container {
+            position: absolute;
+            top: 250px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            overflow: auto;
+            font-size: 14px;
+        }
+        .reset-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 16px;
+            justify-content: right;
+        }
+        .create-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 130px;
+            justify-content: right;
+        }
+        .realloc-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 260px;
+            justify-content: right;
+        }
+        #codebox {
+            width:100px;
+            display:none;
+            position: absolute;
+            bottom: 200px;
+            right: 650px;
+<!--            border-style: solid;-->
+<!--            z-index: 100500;-->
+        }
+        #codebox.inline-border {
+  display: inline-block;
+  border: 1px solid black;
+  padding: 5px; /* Optional: Add padding for spacing */
+}
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div><img src="{{url_for('static', filename='sunfish_logo_no_bg.png')}}" class="logo" ></div>
+            <div>&nbsp;</div>
+            <div class="header">Sunfish</div>
+        </div>
+    </header>
+    <div class="code-container">
+        <div id="jsonpath" style="color:blue;font-family:monospace;font-weight:bold">
+            <span style="border: 1px solid blue; cursor:pointer">/redfish/v1</span>
+        </div>
+        <div id="jsondata" style="display: inline-block"></div>
+    </div>
+
+<script type="text/javascript">
+    regex=/\/redfish\/v1\/CompositionService\/ResourceBlocks\/[a-zA-Z0-9-_]+$/
+    load({data:'/redfish/v1'});
+
+    function in_out(e){
+        if(e.type=='mouseover'){
+            document.getElementById("codebox").style.display='inline';
+          }
+        else if(e.type=='mouseout'){
+            document.getElementById("codebox").style.display='none';
+            }
+    }
+
+    function reset(){
+        $.ajax({
+            url: 'http://localhost:5000/redfish/v1/reset/',
+            type: 'DELETE',
+        });
+        $.ajax({
+            url: 'http://localhost:5002/redfish/v1/reset/',
+            type: 'DELETE',
+        });
+    }
+
+    function create_mchunk() {
+        $.get('/redfish/v1/createmchunk');
+    }
+
+    function realloc_mdev() {
+        $.get('/redfish/v1/reallocmdev');
+    }
+
+    function load(event) {
+        url=event.data;
+        if (url.substr(-1) != '/') url += '/';
+        showpath(url);
+        $.get(url,display);
+    }
+
+    function make_clickable_span(txt,path) {
+        if (txt.substr(-1) != '/' && txt != '') txt += '/';
+        return $('<span style="margin: 1px; border:1px solid blue; cursor:pointer">'+txt+'</span>').click(path,load);
+    }
+
+    function showpath(path) {
+        $('#jsonpath').text('');
+        resturl='/redfish/v1';
+        $('#jsonpath').append('<br>')
+        $('#jsonpath').append(make_clickable_span('/redfish/v1','/redfish/v1'));
+        var path=path.split('/');
+        for (var i=3;i<path.length;i++) {
+            var resturl=resturl+'/'+path[i];
+            $('#jsonpath').append(make_clickable_span(path[i],resturl));
+        }
+        compose=false;
+        if (path.length == 6) {
+            if (path[4] == 'ResourceZones') {
+              $('#jsonpath').append('<button onclick="do_compose()">compose</button>');
+              compose=true;
+              blocks={}
+            }
+        }
+    }
+
+    function display(data,status) {
+        if (compose)
+            zone_info=data;
+        $('#jsondata').text('');
+        var txt=JSON.stringify(data,null,4).split('\n');
+        for (var line in txt) {
+            if (txt[line].includes('"@odata.id"')) {
+                var odata_info=txt[line].split('"');
+                var line_i=$('<pre></pre>').text(odata_info[0]+odata_info[1]+': ').append(make_clickable_span(odata_info[3],odata_info[3]));
+                if (compose) {
+                    if (regex.test(odata_info[3])) {
+                        line_i.append($('<input type="checkbox">').click(odata_info[3], add_to_list));
+                    }
+                }
+            } else {
+                var line_i=$('<pre></pre>').text(txt[line]);
+                del_compose=false;
+                if (txt[line].includes('"SystemType": "Composed"')) {
+                    del_compose=true;
+                    id=data['@odata.id'];
+                    dlbtn=$('<button>delete</button>').click(id,do_delcompose);
+                    $('#jsonpath').append(dlbtn);
+                }
+            }
+            $('#jsondata').append(line_i);
+        }
+        $('#jsondata').append('<br>');
+    }
+
+    document.getElementById('reset').addEventListener('mouseover',in_out,false)
+    document.getElementById('reset').addEventListener('mouseout',in_out,false)
+
+</script>
+</body>
+</html>