plugins/examples: Add platformeng example

This shows how people might customize their Headlamp and
gives examples of a variety of plugin API uses, where
the other examples focus on specific things.

Signed-off-by: René Dudfield <[email protected]>

plugins/examples/platformeng/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# The output for npm run storybook-book, static html built storybook for the plugin
+storybook-static
+
+.eslintcache
+

plugins/examples/platformeng/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

plugins/examples/platformeng/.vscode/settings.json

@@ -0,0 +1,17 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

plugins/examples/platformeng/.vscode/tasks.json

@@ -0,0 +1,33 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "problemMatcher": ["$tsc-watch", "$eslint-compact"],
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "problemMatcher": ["$tsc-watch", "$eslint-compact"],
+      "isBackground": true,
+      "presentation": {
+        "reveal": "always"
+      },
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      }
+    }
+  ]
+}

plugins/examples/platformeng/README.md

@@ -0,0 +1,21 @@
+# Example Plugin: Pod Counter
+
+This example plugin shows how to put something in the appbar at the top of Headlamp. Also how to
+use the K8s API to count the number of pods in the cluster.
+
+![screenshot of the logo being changed](../../../docs/development/plugins/images/podcounter_screenshot.png)
+
+To run the plugin:
+
+```bash
+cd plugins/examples/pod-counter
+npm install
+npm start
+# See the app bar at the top of Headlamp has changed to show the number of Pods.
+```
+
+The main code for the plugin is in [src/index.tsx](src/index.tsx).
+
+See the API documentation for:
+
+- [registerAppBarAction](https://headlamp.dev/docs/latest/development/api/modules/plugin_registry/#registerappbaraction)