Enhancement/show chart icon and description (#70)

* New API to fetch chart.yaml for an installec chart

* Show icon and description for installed chart list

Co-authored-by: Harshit Mehta <harshitm@nvidia.com>

pkg/dashboard/api.go

@@ -90,6 +90,7 @@ func configureHelms(api *gin.RouterGroup, data *subproc.DataLayer) {
 	api.GET("/charts/history", h.History)
 	api.GET("/charts/resources", h.Resources)
 	api.GET("/charts/:section", h.GetInfoSection)
+	api.GET("/charts/show", h.Show)
 	api.POST("/charts/install", h.Install)
 	api.POST("/charts/rollback", h.Rollback)
 

pkg/dashboard/handlers/helmHandlers.go

@@ -2,12 +2,13 @@ package handlers
 
 import (
 	"errors"
-	"github.com/gin-gonic/gin"
-	"github.com/komodorio/helm-dashboard/pkg/dashboard/subproc"
-	"github.com/komodorio/helm-dashboard/pkg/dashboard/utils"
 	"net/http"
 	"strconv"
 	"strings"
+
+	"github.com/gin-gonic/gin"
+	"github.com/komodorio/helm-dashboard/pkg/dashboard/subproc"
+	"github.com/komodorio/helm-dashboard/pkg/dashboard/utils"
 )
 
 type HelmHandler struct {
@@ -127,6 +128,22 @@ func (h *HelmHandler) RepoUpdate(c *gin.Context) {
 	c.Status(http.StatusNoContent)
 }
 
+func (h *HelmHandler) Show(c *gin.Context) {
+	qp, err := utils.GetQueryProps(c, false)
+	if err != nil {
+		_ = c.AbortWithError(http.StatusBadRequest, err)
+		return
+	}
+
+	res, err := h.Data.ShowChart(qp.Name)
+	if err != nil {
+		_ = c.AbortWithError(http.StatusInternalServerError, err)
+		return
+	}
+
+	c.IndentedJSON(http.StatusOK, res)
+}
+
 func (h *HelmHandler) Install(c *gin.Context) {
 	qp, err := utils.GetQueryProps(c, false)
 	if err != nil {

pkg/dashboard/static/list-view.js

@@ -20,7 +20,7 @@ function loadChartsList() {
 }
 
 function buildChartCard(elm) {
-    const card = $(`<div class="row m-0 py-3 bg-white rounded-1 b-shadow border-4 border-start">
+    const card = $(`<div class="row m-0 py-4 bg-white rounded-1 b-shadow border-4 border-start">
             <div class="col-4 rel-name"><span class="link">release-name</span><div></div></div>
             <div class="col-3 rel-status"><span></span><div></div></div>
             <div class="col-2 rel-chart text-nowrap"><span></span><div>Chart Version</div></div>
@@ -28,6 +28,27 @@ function buildChartCard(elm) {
             <div class="col-1 rel-ns text-nowrap"><span>default</span><div>Namespace</div></div>
             <div class="col-1 rel-date text-nowrap"><span>today</span><div>Updated</div></div>
         </div>`)
+    
+    $.getJSON("/api/helm/repo/search?name=" + elm.name).fail(function (xhr) {
+        reportError("Failed to get repo name for charts", xhr)
+    }).done(function (data) {
+        if(data.length > 0) {
+            $.getJSON("/api/helm/charts/show?name=" + data[0].name).fail(function (xhr) {
+                reportError("Failed to get list of charts", xhr)
+            }).done(function (data) {
+                if(data) {
+                    var res = data[0]
+                    if(res.icon) {
+                        card.find(".rel-name").attr("style", "background-image: url(" + res.icon + ")")
+                    }
+                    if(res.description) {
+                        card.find(".rel-name div").text(res.description)
+                    }
+                }
+
+            })
+        }
+    })
 
     card.find(".rel-name span").text(elm.name)
     card.find(".rel-rev span").text("#" + elm.revision)

pkg/dashboard/static/styles.css

@@ -162,6 +162,10 @@ span.link {
     background-size: 3rem;
 }
 
+#installedList .rel-name div {
+    overflow: hidden;
+}
+
 #installedList .rel-name span {
     font-family: Roboto Slab, sans-serif;
     font-weight: 700;

pkg/dashboard/subproc/data.go

@@ -17,6 +17,7 @@ import (
 	"github.com/komodorio/helm-dashboard/pkg/dashboard/utils"
 	log "github.com/sirupsen/logrus"
 	"gopkg.in/yaml.v3"
+	"helm.sh/helm/v3/pkg/chart"
 	"helm.sh/helm/v3/pkg/release"
 	v1 "k8s.io/apimachinery/pkg/apis/testapigroup/v1"
 )
@@ -449,6 +450,33 @@ func (d *DataLayer) ShowValues(chart string, ver string) (string, error) {
 	return d.runCommandHelm("show", "values", chart, "--version", ver)
 }
 
+func (d *DataLayer) ShowChart(chartName string) ([]*chart.Metadata, error) {
+	out, err := d.runCommandHelm("show", "chart", chartName)
+	if err != nil {
+		return nil, err
+	}
+
+	deccoder := yaml.NewDecoder(bytes.NewReader([]byte(out)))
+	res := make([]*chart.Metadata, 0)
+	var tmp interface{}
+
+	for deccoder.Decode(&tmp) == nil {
+		jsoned, err := json.Marshal(tmp)
+		if err != nil {
+			return nil, err
+		}
+
+		var resjson chart.Metadata
+		err = json.Unmarshal(jsoned, &resjson)
+		if err != nil {
+			return nil, err
+		}
+		res = append(res, &resjson)
+	}
+
+	return res, nil
+}
+
 func (d *DataLayer) ChartRepoList() (res []RepositoryElement, err error) {
 	out, err := d.runCommandHelm("repo", "list", "--output", "json")
 	if err != nil {