blog: Add blog post about the Map

Signed-off-by: Oleksandr Dubenko <[email protected]>
headlamp-k8s · Dec 18, 2024 · a024ef9 · a024ef9
1 parent 7386582
commit a024ef9
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 0 deletions.
diff --git a/blog/2024-12-12-map/grafana-glance.png b/blog/2024-12-12-map/grafana-glance.png
diff --git a/blog/2024-12-12-map/grafana.png b/blog/2024-12-12-map/grafana.png
diff --git a/blog/2024-12-12-map/index.mdx b/blog/2024-12-12-map/index.mdx
@@ -0,0 +1,62 @@
+---
+title: "Making sense of Kubernetes with Map view"
+description: "Introducing Map View feature to Headlamp"
+image: ./thumbnail.jpg
+authors: ["olek"]
+---
+
+import mapDemo from "./map-demo.mp4";
+
+In version 0.26, Headlamp introduced a new feature: the Map View. It provides a graphical way to see how components like pods, services, and deployments interact in your Kubernetes cluster. This makes it easier to understand dependencies, troubleshoot issues, and optimize your cluster setup.
+
+<!--truncate-->
+
+## About
+
+<p>
+  <video controls width="100%">
+    <source src={mapDemo} type="video/mp4" />
+  </video>
+</p>
+
+Instead of working with tables or YAML files, you can now visually explore the connections between resources. For example, you can see which pods are linked to which services or how deployments relate to replica sets. This makes it much simpler to understand your cluster’s structure.
+
+When troubleshooting, the Map View is especially useful. If a pod fails, you can find which services or deployments depend on it, helping you identify the cause of the issue.
+
+We’re also working on providing APIs for plugins, allowing you to extend the Map View with extra details.
+
+The Map View is available now. [Try out Headlamp with Map view now.](/)
+
+## Examples
+
+<figure style={{ margin:"0 0 2rem 0" }}>
+
+![Screenshot showing a graph representation of Grafana deployment](./grafana.png)
+
+<figcaption>Prometheus Grafana Deployment</figcaption>
+
+</figure>
+
+<figure style={{ margin: "0 0 2rem 0" }}>
+
+![Screenshot hovering over Pod node showing additional details like container names and IP address](./grafana-glance.png)
+
+<figcaption>Hover over a resource to see more information.</figcaption>
+
+</figure>
+
+<figure style={{ margin: "0 0 2rem 0" }}>
+
+![Screenshot showing a list of different kinds of resource types like Workloads, Storage, Network, Security and Configuration](./picker.png)
+
+<figcaption>Select which resources to display</figcaption>
+
+</figure>
+
+<figure style={{ margin: "0 0 2rem 0" }}>
+
+![Screenshot of a group of nodes outlined by a border with a label namespace: store](./namespace-group.png)
+
+<figcaption>View all resources in a namespace</figcaption>
+
+</figure>
diff --git a/blog/2024-12-12-map/map-demo.mp4 b/blog/2024-12-12-map/map-demo.mp4
diff --git a/blog/2024-12-12-map/map-full.png b/blog/2024-12-12-map/map-full.png
diff --git a/blog/2024-12-12-map/namespace-group.png b/blog/2024-12-12-map/namespace-group.png
diff --git a/blog/2024-12-12-map/picker.png b/blog/2024-12-12-map/picker.png
diff --git a/blog/2024-12-12-map/prometheus.png b/blog/2024-12-12-map/prometheus.png
diff --git a/blog/2024-12-12-map/thumbnail.jpg b/blog/2024-12-12-map/thumbnail.jpg
diff --git a/blog/authors.yml b/blog/authors.yml
@@ -62,3 +62,5 @@ will-case:
   name: Will Case
 evangelos:
   name: Evangelos Skopelitis
+olek:
+  name: Oleksandr Dubenko