Netflix · rsanteri · Nov 5, 2021 · Nov 5, 2021
diff --git a/plugin-api/Examples/hello-world/README.md b/plugin-api/Examples/hello-world/README.md
@@ -0,0 +1,3 @@
+# Hello world plugin
+
+Minimal plugin example. To try this out with UI service, copy this folder and include MetaflowPluginAPI.js to it. Documentation on installing plugins [here](https://github.com/Netflix/metaflow-service/blob/master/services/ui_backend_service/docs/plugins.md). 
diff --git a/...pi/Examples/template-plugin/manifest.json → ...in-api/Examples/hello-world/manifest.json b/...pi/Examples/template-plugin/manifest.json → ...in-api/Examples/hello-world/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Template plugin",
+  "name": "Hello world",
   "version": "0.0.1",
   "entrypoint": "plugin.html"
 }
diff --git a/plugin-api/Examples/hello-world/plugin.html b/plugin-api/Examples/hello-world/plugin.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello world plugin</title>
+</head>
+
+<body>
+  <div class="container" id="container">
+    Hello world!
+  </div>
+  <!-- MetaflowPluginAPI.js Must be used to register plugin for the UI -->
+  <!-- REMEMBER TO UPDATE THIS LINK TO ACTUAL METAFLOW JS API FILE. Check README for more info -->
+  <script src="MetaflowPluginAPI.js"></script>
+  <script>
+    (function () {
+      // Call register function to tell UI where application should be rendered. Callback will be called after
+      // plugin is placed to correct spot in UI.
+      Metaflow.register({ slot: 'run-header', container: 'titled-container'}, () => {
+        // Set fixed height for plugin
+        Metaflow.setHeight(40);
+        // Subscribe to any update on run data and show run number in plugin.
+        Metaflow.subscribe(['run'], (event) => {
+          document.getElementById('container').innerHTML = `Hello World! Run number is ${event.data.run_number}`;
+        });
+      })
+    })();
+  </script>
+</body>
+
+</html>
diff --git a/plugin-api/Examples/recent-runs/README.md b/plugin-api/Examples/recent-runs/README.md
@@ -0,0 +1,3 @@
+# Recent runs plugin
+
+Plugin that fetches most recent runs for current flow and shows up their durations.
diff --git a/plugin-api/Examples/recent-runs/index.html b/plugin-api/Examples/recent-runs/index.html
@@ -11,6 +11,7 @@
     body {
       margin: 0;
       padding: 0;
+      font-family: sans-serif;
     }
 
     .container {
@@ -21,27 +22,33 @@
       padding: 0 15px;
     }
 
+    #runs-list {
+      display: flex;
+    }
 
     .run {
-      display: flex;
+      background: #f7f7f7;
+      padding: 1rem;
+      border-radius: 4px;
+      margin-right: 1rem;
     }
 
     .run a {
       margin-right: 15px;
+      color: #000;
     }
   </style>
 </head>
 
 <body>
   <div class="container" id="container">
     <div class="column">
-      <div>Recent runs</div>
       <div id="runs-list"></div>
     </div>
   </div>
 
   <!--  REMEMBER TO UPDATE THIS LINK TO ACTUAL METAFLOW JS API FILE. Check README for more info -->
-  <script src="PATH_TO_METAFLOW_API/MetaflowPluginAPI.js"></script>
+  <script src="MetaflowPluginAPI.js"></script>
   <script>
     (function () {
       // Register plugin to run header section

diff --git a/plugin-api/Examples/recent-runs/manifest.json b/plugin-api/Examples/recent-runs/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "recent-runs",
+  "name": "Recent runs",
   "version": "0.0.1",
   "entrypoint": "index.html"
 }
diff --git a/plugin-api/Examples/template-plugin/README.md b/plugin-api/Examples/template-plugin/README.md
diff --git a/plugin-api/Examples/template-plugin/plugin.html b/plugin-api/Examples/template-plugin/plugin.html
diff --git a/plugin-api/Examples/template-plugin/templates/print-array.html b/plugin-api/Examples/template-plugin/templates/print-array.html
diff --git a/plugin-api/Examples/template-plugin/templates/print-object-array.html b/plugin-api/Examples/template-plugin/templates/print-object-array.html
diff --git a/plugin-api/Examples/template-plugin/templates/print-object.html b/plugin-api/Examples/template-plugin/templates/print-object.html
diff --git a/plugin-api/Examples/template-plugin/templates/some-variable.html b/plugin-api/Examples/template-plugin/templates/some-variable.html