Merge pull request #75 from reactiveops/rb/error-explanations

Add explanations for each error

Gopkg.toml

@@ -48,3 +48,11 @@
 [[constraint]]
   name = "github.com/gobuffalo/packr"
   version = "2.2.0"
+
+[[constraint]]
+  name = "github.com/gorilla/mux"
+  version = "1.7.1"
+
+[[constraint]]
+  revision = "772775880e1fbf39a7804149ed11c0f714ec89fe"
+  name = "gitlab.com/golang-commonmark/markdown"

main.go

@@ -22,7 +22,9 @@ import (
 	"io/ioutil"
 	"net/http"
 	"os"
+	"strings"
 
+	"github.com/gorilla/mux"
 	conf "github.com/reactiveops/fairwinds/pkg/config"
 	"github.com/reactiveops/fairwinds/pkg/dashboard"
 	"github.com/reactiveops/fairwinds/pkg/kube"
@@ -84,18 +86,24 @@ func main() {
 }
 
 func startDashboardServer(c conf.Configuration, k *kube.ResourceProvider, port int) {
-	http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
+	router := mux.NewRouter()
+	router.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
 		w.Write([]byte("OK"))
 	})
-	http.HandleFunc("/results.json", func(w http.ResponseWriter, r *http.Request) {
+	router.HandleFunc("/results.json", func(w http.ResponseWriter, r *http.Request) {
 		dashboard.EndpointHandler(w, r, c, k)
 	})
-	http.HandleFunc("/favicon.ico", func(w http.ResponseWriter, r *http.Request) {
+	router.HandleFunc("/favicon.ico", func(w http.ResponseWriter, r *http.Request) {
 		http.ServeFile(w, r, "public/favicon.ico")
 	})
+	router.HandleFunc("/details/{category}", func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		category := vars["category"]
+		category = strings.Replace(category, ".md", "", -1)
+		dashboard.DetailsHandler(w, r, category)
+	})
 	fileServer := http.FileServer(dashboard.GetAssetBox())
-	http.Handle("/static/", http.StripPrefix("/static/", fileServer))
-	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+	router.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
 		if r.URL.Path != "/" {
 			http.NotFound(w, r)
 			return
@@ -108,6 +116,8 @@ func startDashboardServer(c conf.Configuration, k *kube.ResourceProvider, port i
 		}
 		dashboard.MainHandler(w, r, auditData)
 	})
+	http.Handle("/static/", http.StripPrefix("/static/", fileServer))
+	http.Handle("/", router)
 
 	logrus.Infof("Starting Fairwinds dashboard server on port %d", port)
 	logrus.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))

pkg/dashboard/assets/css/check-details.css

@@ -0,0 +1,12 @@
+th, td {
+  padding: 4px 8px;
+  vertical-align: top;
+}
+
+body {
+  font-family: "Helvetica", "Arial", sans-serif
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Muli", "Helvetica", "Arial", sans-serif
+}

pkg/dashboard/assets/css/dashboard.css

@@ -0,0 +1,227 @@
+.charts {
+  height: 405px;
+}
+
+.card.cluster {
+  margin-top: 15px;
+}
+
+.card.namespace {
+  padding: 10px 20px;
+}
+
+.card h3 {
+  margin: 0;
+  font-weight: 300;
+  font-size: 28px;
+  padding: 15px 20px 20px;
+}
+
+.namespace h3 strong {
+  margin: 0;
+  font-weight: bold;
+}
+
+.cluster-overview {
+  height: 204px;
+}
+
+.cluster-overview .cluster-score {
+  width: 200px;
+  display: inline-block;
+  margin-left: 20px;
+}
+
+.cluster-overview .cluster-score .weather {
+    font-size: 90px;
+    color: #444;
+    margin-bottom: 15px;
+}
+
+.cluster-overview .cluster-score .sailing-message {
+  font-size: 16px;
+  line-height: 28px;
+  margin-left: 7px;
+  font-weight: 300;
+  color: #555;
+}
+
+.cluster-overview .cluster-score .scores {
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.cluster .expandable-table ul.message-list {
+  margin: 10px 26px;
+}
+
+#clusterScoreChart {
+  width: 550px;
+  position: relative;
+  top: -227px;
+  left: 120px;
+}
+
+.cluster-overview .result-messages {
+  margin: 0 20px;
+  display: inline-block;
+  position: relative;
+  left: -100px;
+  top: -45px;
+}
+
+.cluster-overview .result-messages ul {
+  position: relative;
+  top: 0px;
+  left: 400px;
+  font-size: 20px;
+  line-height: 35px;
+}
+
+.card.cluster .expandable-table {
+  margin-top: 20px;
+}
+
+.card.cluster .detail-label {
+  display: inline-block;
+  min-width: 140px;
+  font-weight: bold;
+}
+
+.expandable-table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.expandable-table tr {
+  height: 50px;
+}
+
+.expandable-table td {
+  padding: 15px 20px;
+  margin: 0;
+  font-size: 18px;
+  border-top: 1px solid #eee;
+}
+
+.expandable-table .resource-info .name {
+  cursor: pointer;
+}
+
+.expandable-table .resource-info .caret-expander {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin-right: 10px;
+  background-image: url('../images/caret-right.svg');
+  background-size: 13px auto;
+  background-repeat: no-repeat;
+  background-position: 2px center;
+}
+
+.expandable-table .resource-info.expanded .caret-expander {
+  background-image: url('../images/caret-bottom.svg');
+  background-position: center 2px;
+}
+
+.expandable-table .resource-info .expandable-content {
+  display: none;
+}
+
+.expandable-table .resource-info.expanded .expandable-content {
+  display: block;
+}
+
+.namespace .resource-info .result-messages {
+  color: #6a6a6a;
+}
+
+.namespace .result-messages h4 {
+  font-weight: bold;
+  font-size: 15px;
+  margin: 15px 25px 6px;
+}
+
+ul.message-list {
+  list-style-type: none;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 5px 35px;
+  padding: 0;
+  color: #6a6a6a;
+}
+
+ul.message-list li {
+  margin-bottom: 5px;
+}
+
+ul.message-list li i.message-icon {
+  display: inline-block;
+  margin-right: 7px;
+  text-align: center;
+  width: 20px;
+  font-size: 17px;
+  font-weight: bold;
+  position: relative;
+  bottom: -3px;
+}
+
+.result-messages .success i.message-icon {
+  color: #8BD2DC;
+}
+
+.result-messages .warning i.message-icon {
+  color: #f26c21;
+}
+
+.result-messages .error i.message-icon {
+  color: #a11f4c;
+}
+
+a.more-info {
+  color: #6a6a6a;
+  text-decoration: none;
+}
+
+.namespace .status-bar {
+  vertical-align: top;
+  padding-top: 18px;
+}
+.namespace .status-bar .status {
+  float: right;
+  animation: fadeIn 2s;
+}
+
+.cluster .status {
+  width: 280px;
+}
+.namespace .status {
+  width: 200px;
+}
+
+.status div {
+  height: 15px;
+  border-radius: 10px;
+}
+
+.status .passing {
+  background-color: #8BD2DC;
+  float: left;
+}
+
+.status .warning {
+  background-color: #f26c21;
+  float: left;
+}
+
+.status .failing {
+  background-color: #a11f4c;
+  width: 100%;
+}
+
+@keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+