Merge pull request #42 from openfin/deploy-health-check

created examples/deployment-health-check and examples/css-customization
openfin · Oct 12, 2021 · c1dd97d · c1dd97d
2 parents 5c54bac + 5123b72
commit c1dd97d
Show file tree

Hide file tree

Showing 9 changed files with 388 additions and 0 deletions.
diff --git a/examples/css-customization/README.md b/examples/css-customization/README.md
@@ -0,0 +1,11 @@
+# Sample CSS Customization for platform
+
+A [stylesheet](https://developers.openfin.co/docs/platform-api#section-standard-window-customization) is linked in the [platform-window.html](platform-window.html) file, and allows for [visual customization](styles/frame-styles.css). For a complete view of all properties, please refer to the [example stylesheet](https://github.com/openfin/layouts-v2-style-examples)
+
+## Files
+
+* custom-styles.css: sample custom styles.
+
+## Testing the styles
+* append content of custom-styles.css to styles/frame-styles.css.
+* launch the application: `npm start`
diff --git a/examples/css-customization/custom-styles.css b/examples/css-customization/custom-styles.css
@@ -0,0 +1,11 @@
+/* copy the following sample custom styles to styles/frame-styles.css */
+
+#layout-container {
+    background-color: indigo;
+}
+
+#of-frame-main {
+    height: 99.25%;
+    width: 99.25%;
+    border: solid red;
+}
diff --git a/examples/deployment-health-check/LICENSE b/examples/deployment-health-check/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Wenjun Che
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/deployment-health-check/README.md b/examples/deployment-health-check/README.md
@@ -0,0 +1,14 @@
+# OpenFin Service Deployment Health Check
+
+A sample page to show health of some webservices deployed at OpenFin.
+
+## Files
+
+* urls.json: metadata for webservices, including URLs.  CORS needs to be enabled for any endpoint in order for health check to work properly.
+* pinger.js: performs health checks with ```fetch``` API for all URLs listed in urls.json.
+* styles.css: CSS styles
+* index.html: main page.
+
+An example of this page is available [here](https://cdn.openfin.co/health/deployment/index.html).
+
+This page can also be used to check health of manifest URLs by passing ```?manifest=manifest_url```.   Here is an [example](https://cdn.openfin.co/health/deployment/index.html?manifest=https://cdn.openfin.co/process-manager/app.json) for checking health of the manifest for OpenFin process manager.
diff --git a/examples/deployment-health-check/favicon.ico b/examples/deployment-health-check/favicon.ico
diff --git a/examples/deployment-health-check/index.html b/examples/deployment-health-check/index.html
@@ -0,0 +1,106 @@
+<html>
+<head>
+    <title>OpenFin Deployment Health Check</title>
+    <link rel="shortcut icon" type="image/ico" href="favicon.ico">
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <script src="pinger.js"></script>
+    <script>
+    document.addEventListener('DOMContentLoaded', async function () {
+        const resultsDiv = document.getElementById('results');
+        const manifestDiv = document.getElementById('manifest');
+        const purl = new URL(window.location.href);
+        const manifURL = purl.searchParams.get('manifest');
+        const rerunBtn = document.getElementById('rerun');
+        const manStat = document.getElementById('manifestStatus');
+        const appStat = document.getElementById('appStatus');
+
+        // add cloud url status item
+        function addURLItem(idx, urlInfo) {
+            const li = document.createElement('li');
+            li.setAttribute('id', `url_${idx}`);
+            const led = document.createElement('led');
+            li.appendChild(led);
+            const msg = document.createElement('span');
+            msg.setAttribute('title', urlInfo.href);
+            msg.innerHTML = urlInfo.description;
+            li.appendChild(msg);
+            resultsDiv.appendChild(li);
+        }
+        // create a good url handler
+        function urlHandler(idx, passFail, msg) {
+            const li = document.getElementById(`url_${idx}`);
+            li.classList.add((passFail ? 'good' : 'bad'));
+            const led = li.querySelector('led');
+            led.setAttribute('title', msg.version);
+        }
+
+        function resetManifestResults() {
+            manifestDiv.classList.add('noshow');
+            manStat.classList.add('noshow');
+            appStat.classList.add('noshow');
+            manStat.querySelector('span').innerHTML = 'Checking Manifest';
+            appStat.querySelector('span').innerHTML = 'Checking Application';
+        }
+
+        function manifestHandler(result) {
+            const manMsg = manStat.querySelector('span');
+            manMsg.setAttribute('title', result.msg);
+            manMsg.innerHTML = result.url;
+            if (result.status === 'ok') {
+                manStat.classList.add('good');
+                appStat.classList.remove('noshow');
+            } else {
+                manStat.classList.add('bad');
+            }
+            manStat.classList.remove('noshow');
+        }
+
+        function appHandler(result) {
+            const manMsg = appStat.querySelector('span');
+            manMsg.setAttribute('title', result.msg);
+            manMsg.innerHTML = result.url;
+            if (result.status === 'ok') {
+                appStat.classList.add('good');
+            } else {
+                appStat.classList.add('bad');
+            }
+        }
+
+        function runIt() {
+            resultsDiv.innerHTML = '';
+            OpenFinPinger.phoneHome(addURLItem, urlHandler);
+
+            // test the manifest url if it's present
+            resetManifestResults();
+            if (manifURL && manifURL.length > 0) {
+                manifestDiv.classList.remove('noshow');
+                OpenFinPinger.pingManifest(manifURL, manifestHandler, appHandler);
+            }
+        }
+
+        rerunBtn.addEventListener('click', runIt);
+
+        runIt()
+    });
+    </script>
+</head>
+<body>
+    <panel>
+        <header>
+            <logo></logo>
+            <title>Deployment Health Check</title>
+        </header>
+        <content>
+            <ul id="results"></ul>
+            <ul id="manifest" class="noshow">
+                <li id="manifestStatus" class="noshow"><led></led><span></span></li>
+                <li id="appStatus" class="noshow"><led></led><span></span></li>
+            </ul>    
+        </content>
+        <footer>
+            <button id="rerun">Run Again</button>
+        </footer>
+    </panel>
+</body>
+</html>
+
diff --git a/examples/deployment-health-check/pinger.js b/examples/deployment-health-check/pinger.js
@@ -0,0 +1,86 @@
+const OpenFinPinger = {
+    loadURLs: async () => {
+        const resp = await fetch('urls.json');
+        const urlList = await resp.json();
+        return urlList.urls;
+    },
+    phoneHome: async (addItem, itemStatusHandler) => {
+        const urls = await OpenFinPinger.loadURLs();
+        urls.forEach((urlInfo, idx) => {
+            addItem(idx, urlInfo)
+            OpenFinPinger.ping(idx, urlInfo, itemStatusHandler);
+        });
+
+    },
+    ping: async (idx, urlInfo, urlHandler) => {
+        try {
+            const resp = await fetch(urlInfo.href);
+            if (!resp.ok) {
+                urlHandler(idx, false, `${resp.statusText} - ${resp.statusText$}`);
+                return;
+            }
+
+            let v = '';
+            const ct = resp.headers.get("content-type");
+            if (ct && ct.indexOf("application/json") !== -1) {
+                const j = await resp.json();
+                if (j.private) {
+                    v = `${j.private.version} (${j.private.sha})`;
+                } else if (j.projectVersion) {
+                    v = j.projectVersion;
+                } else if (j.revision) {
+                    v = `${j.version} (${j.revision})`
+                } else {
+                    v = j.version;
+                }
+            } else {
+                v = await resp.text();
+            }
+            urlHandler(idx, true, Object.assign(urlInfo, { version: v }));
+        } catch(e) {
+            urlHandler(idx, false, e);
+        }
+    },
+    pingManifest: async (manifest, manifestHandler, appHandler) => {
+        try {
+            const purl = new URL(manifest);
+            const resp = await fetch(purl.href);
+            if (!resp.ok) {
+                manifestHandler({ status: 'error', msg: `error loading manifest, response: ${resp.status}`, url: purl.href});
+                return;
+            }
+
+            const j = await resp.json();    
+            let appURL = '', appName = '', msg = '';
+            if (j.startup_app && j.startup_app.url) {
+                appURL = j.startup_app.url;
+                appName = j.startup_app.name || j.startup_app.uuid;
+                msg = `manifest ${appName} OK`;
+            } else if (j.platform) {
+                appURL = j.platform.url;
+                appName = j.platform.name;
+                msg = `manifest ${appName} OK`;
+            } else {
+                manifestHandler({ status: 'error', msg: `manifest error, unable to locate app url`, url: purl.href});
+            }
+            manifestHandler({ status: 'ok', msg: msg, url: purl.href});
+            OpenFinPinger.pingAppURL(appName, appURL, appHandler)
+        } catch(e) {
+            manifestHandler({ status: 'error', msg: `error loading manifest, response: ${e}`, url: manifest});
+        }
+    },
+    pingAppURL: async (appName, appURL, appHandler) => {
+        try {
+            const surl = new URL(appURL);
+            const resp = await fetch(surl.href, {mode: 'no-cors'});
+            if (resp.ok) {
+                appHandler({ status: 'ok', msg: `app ${appName} OK`, url: surl.href });
+                return;
+            }
+        } catch(e) {
+            appHandler({ status: 'error', msg: `app ${appName} ERROR: ${e}`, url: appURL });
+            return;
+        }
+        appHandler({ status: 'error', msg: `app ${appName} ERROR`, url: appURL });
+    }
+}
diff --git a/examples/deployment-health-check/styles.css b/examples/deployment-health-check/styles.css
@@ -0,0 +1,102 @@
+:root {
+    --font-family: Inter, Arial, "Helvetica Neue", sans-serif;
+    --logo-url: url("//cdn.openfin.co/ofbadge.png");
+    --color-btn: #504cff;
+    --color-btn-text: #fff;
+
+    --color-bg: #333;
+    --color-text: #f7f7f7;
+    --color-box-bg: #444;
+    --color-box-border: #666;
+
+    --color-good: lightgreen;
+    --color-bad: red;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-bg: #333;
+        --color-text: #f7f7f7;
+        --color-box-bg: #444;
+        --color-box-border: #666;
+
+        --color-good: lightgreen;
+    }
+}
+body {
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 18px;
+    display:flex;
+}
+panel {
+    margin: auto;
+}
+title {
+    display: block;
+    text-align: center;
+    margin: 10px 0 30px 0;
+    font-size: 20px;
+    font-weight: 600;
+}
+content {
+    display: block;
+    padding: 50px 100px 25px 100px;
+    border-radius: 10px;
+    border: 1px solid var(--color-box-border);
+    background-color: var(--color-box-bg);
+}
+footer {
+    display: block;
+    text-align: center;
+    margin-top: 30px;
+}
+button {
+    border: none;
+    border-radius: 5px;
+    padding: 15px 30px;
+    color: var(--color-btn-text);
+    background-color: var(--color-btn);
+    font-size: 18px;
+}
+ul {
+    list-style-type: none;
+    background: none;
+    padding:0;
+    margin:0;
+}
+li {
+    padding: 0px 0px 28px 0px;
+    margin:0;
+}
+li.good led {
+    background-color: var(--color-good)
+}
+li.bad led {
+    background-color: var(--color-bad)
+}
+li span {
+    margin-top: 5px;
+}
+led {
+    border-radius: 7px;
+    height: 14px;
+    width: 14px;
+    display: inline-block;
+    margin: 10px 20px 0 0;
+}
+logo {
+    margin: 0 auto;
+    width:70px;
+    height:70px;
+    background-image: var(--logo-url);
+    background-repeat: no-repeat;
+    background-size: 240px;
+    background-position-y: center;
+    display: block;
+}
+
+.noshow {
+    display: none;
+}