NOISSUE - Implement muuri grid system (#91)

* implement muuri grid system Signed-off-by: ianmuchyri <[email protected]> * enable removal of a widget from the dashboard Signed-off-by: ianmuchyri <[email protected]> * add modal for collecting details Signed-off-by: ianmuchyri <[email protected]> * add license header Signed-off-by: ianmuchyri <[email protected]> * add validation to dashboard endpoint Signed-off-by: ianmuchyri <[email protected]> * fix logging.go error Signed-off-by: ianmuchyri <[email protected]> * add json object sample Signed-off-by: ianmuchyri <[email protected]> * add modals for linechart and gauge Signed-off-by: ianmuchyri <[email protected]> * enable edit and disable edit of canvas Signed-off-by: ianmuchyri <[email protected]> * move content to separate files move javascript and css to separate files Signed-off-by: ianmuchyri <[email protected]> * remove unused argument Signed-off-by: ianmuchyri <[email protected]> * add empty line Signed-off-by: ianmuchyri <[email protected]> --------- Signed-off-by: ianmuchyri <[email protected]>
absmach · Feb 9, 2024 · fe4c36f · fe4c36f
1 parent 380d8c4
commit fe4c36f
Show file tree

Hide file tree

Showing 13 changed files with 706 additions and 4 deletions.
diff --git a/ui/api/endpoint.go b/ui/api/endpoint.go
@@ -2079,6 +2079,25 @@ func deleteInvitationEndpoint(svc ui.Service) endpoint.Endpoint {
 	}
 }
 
+func dashboardsEndpoint(svc ui.Service) endpoint.Endpoint {
+	return func(_ context.Context, request interface{}) (interface{}, error) {
+		req := request.(dashboardsReq)
+		if err := req.validate(); err != nil {
+			return nil, err
+		}
+
+		res, err := svc.Dashboards(req.token)
+		if err != nil {
+			return nil, err
+		}
+
+		return uiRes{
+			code: http.StatusOK,
+			html: res,
+		}, nil
+	}
+}
+
 func extractTokenExpiry(token string) (time.Time, error) {
 	jwtToken, _, err := new(jwt.Parser).ParseUnverified(token, jwt.MapClaims{})
 	if err != nil {

diff --git a/ui/api/logging.go b/ui/api/logging.go
@@ -1660,3 +1660,17 @@ func (lm *loggingMiddleware) DeleteInvitation(token, userID, domainID string) (e
 
 	return lm.svc.DeleteInvitation(token, userID, domainID)
 }
+
+// Dashboards adds logging middleware to dashboards method.
+func (lm *loggingMiddleware) Dashboards(token string) (b []byte, err error) {
+	defer func(begin time.Time) {
+		duration := slog.String("duration", time.Since(begin).String())
+		if err != nil {
+			lm.logger.Warn("View dashboards failed to complete successfully", slog.Any("error", err), duration)
+			return
+		}
+		lm.logger.Info("View dashboards completed successfully", duration)
+	}(time.Now())
+
+	return lm.svc.Dashboards(token)
+}
diff --git a/ui/api/metrics.go b/ui/api/metrics.go
@@ -948,3 +948,13 @@ func (mm *metricsMiddleware) DeleteInvitation(token, userID, domainID string) er
 
 	return mm.svc.DeleteInvitation(token, userID, domainID)
 }
+
+// Dashboards adds metrics middleware to dashboards method.
+func (mm *metricsMiddleware) Dashboards(token string) (b []byte, err error) {
+	defer func(begin time.Time) {
+		mm.counter.With("method", "dashboards").Add(1)
+		mm.latency.With("method", "dashboards").Observe(time.Since(begin).Seconds())
+	}(time.Now())
+
+	return mm.svc.Dashboards(token)
+}
diff --git a/ui/api/requests.go b/ui/api/requests.go
@@ -1106,3 +1106,14 @@ func (req listInvitationsReq) validate() error {
 
 	return nil
 }
+
+type dashboardsReq struct {
+	token string
+}
+
+func (req dashboardsReq) validate() error {
+	if req.token == "" {
+		return errAuthorization
+	}
+	return nil
+}
diff --git a/ui/api/transport.go b/ui/api/transport.go
@@ -60,6 +60,8 @@ const (
 	groupsItem              = "groups"
 	accessTokenKey          = "token"
 	refreshTokenKey         = "refresh_token"
+	channelKey              = "channel"
+	thingKey                = "thing"
 )
 
 var (
@@ -163,6 +165,12 @@ func MakeHandler(svc ui.Service, r *chi.Mux, instanceID string) http.Handler {
 			encodeResponse,
 			opts...,
 		).ServeHTTP))
+		r.Get("/dashboards", kithttp.NewServer(
+			dashboardsEndpoint(svc),
+			decodeDashboardsRequest,
+			encodeResponse,
+			opts...,
+		).ServeHTTP)
 
 		r.Get("/entities", kithttp.NewServer(
 			getEntitiesEndpoint(svc),
@@ -799,6 +807,19 @@ func decodeViewRegistrationRequest(_ context.Context, _ *http.Request) (interfac
 	return nil, nil
 }
 
+func decodeDashboardsRequest(_ context.Context, r *http.Request) (interface{}, error) {
+	token, err := tokenFromCookie(r, "token")
+	if err != nil {
+		return nil, err
+	}
+
+	req := dashboardsReq{
+		token: token,
+	}
+
+	return req, nil
+}
+
 func decodeLoginRequest(_ context.Context, _ *http.Request) (interface{}, error) {
 	return nil, nil
 }

diff --git a/ui/jsonObject.go b/ui/jsonObject.go
@@ -0,0 +1,77 @@
+// To be Deleted. This is simulating the charts that we are going to get from the backend.
+package ui
+
+type Item struct {
+	Id      int    `json:"id"`
+	Title   string `json:"title"`
+	Content string `json:"content"`
+	Image   string `json:"image"`
+	Widget  string `json:"widget"`
+}
+
+func CreateItem() []Item {
+	items := []Item{
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image1.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image2.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Guage",
+			Content: "This is a small sentence about a guage",
+			Image:   "https://example.com/image3.jpg",
+			Widget:  "gauge",
+		},
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image4.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image5.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Guage",
+			Content: "This is a small sentence about a guage",
+			Image:   "https://example.com/image6.jpg",
+			Widget:  "gauge",
+		},
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image7.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image8.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Guage",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image9.jpg",
+			Widget:  "gauge",
+		},
+		{
+			Title:   "Line Chart",
+			Content: "This is a small sentence about a line chart",
+			Image:   "https://example.com/image10.jpg",
+			Widget:  "lineChart",
+		},
+	}
+
+	return items
+}
diff --git a/ui/service.go b/ui/service.go
@@ -32,7 +32,8 @@ const (
 	enabled                 = "enabled"
 	statePending            = "pending"
 	statusAll               = "all"
-	dashboardActive         = "dashboard"
+	homepageActive          = "homepage"
+	dashboardsActive        = "dashboards"
 	usersActive             = "users"
 	userActive              = "user"
 	thingsActive            = "things"
@@ -123,6 +124,12 @@ var (
 		"member",
 		"members",
 		"invitations",
+
+		"dashboard",
+
+		// Modals
+		"linechartmodal",
+		"gaugemodal",
 	}
 	ErrToken                = errors.New("failed to create token")
 	ErrTokenRefresh         = errors.New("failed to refresh token")
@@ -348,6 +355,9 @@ type Service interface {
 	AcceptInvitation(token, domainID string) error
 	// DeleteInvitation deletes an invitation.
 	DeleteInvitation(token, userID, domainID string) error
+
+	// Dashboards displays the dashboards page.
+	Dashboards(token string) ([]byte, error)
 }
 
 var _ Service = (*uiService)(nil)
@@ -440,8 +450,8 @@ func (us *uiService) Index(token string) (b []byte, err error) {
 		CollapseActive string
 		Summary        dataSummary
 	}{
-		dashboardActive,
-		dashboardActive,
+		homepageActive,
+		homepageActive,
 		summary,
 	}
 
@@ -2349,6 +2359,26 @@ func (us *uiService) DeleteInvitation(token, userID, domainID string) error {
 	return us.sdk.DeleteInvitation(userID, domainID, token)
 }
 
+func (us *uiService) Dashboards(token string) ([]byte, error) {
+	charts := CreateItem()
+	data := struct {
+		NavbarActive   string
+		CollapseActive string
+		Charts         []Item
+	}{
+		dashboardsActive,
+		dashboardsActive,
+		charts,
+	}
+
+	var btpl bytes.Buffer
+	if err := us.tpls.ExecuteTemplate(&btpl, "dashboard", data); err != nil {
+		return []byte{}, errors.Wrap(err, ErrExecTemplate)
+	}
+
+	return btpl.Bytes(), nil
+}
+
 func parseTemplates(mfsdk sdk.SDK, templates []string) (tpl *template.Template, err error) {
 	tpl = template.New("mainflux")
 	tpl = tpl.Funcs(template.FuncMap{

diff --git a/ui/web/static/css/dashboards.css b/ui/web/static/css/dashboards.css
@@ -0,0 +1,41 @@
+/* Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 */
+
+.grid {
+  position: relative;
+}
+
+.item {
+  display: block;
+  position: absolute;
+  margin: 5px;
+  z-index: 1;
+  background: #d2cece;
+  padding: 1rem;
+}
+
+.item.muuri-item-dragging {
+  z-index: 3;
+}
+
+.item.muuri-item-releasing {
+  z-index: 2;
+}
+
+.item.muuri-item-hidden {
+  z-index: 0;
+}
+
+.item-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.no-opacity {
+  opacity: 0 !important;
+}
+
+.item-editable {
+  border: 1px solid #000000;
+}