feat(Deployment group detail page): Support for auto update at custom…

… interval

feat(Deployment group page): Set default view to table view and use new table component

code/portfolio/src/sixsq/nuvla/ui/components/duration_picker_scenes.cljs

@@ -0,0 +1,49 @@
+(ns sixsq.nuvla.ui.components.duration-picker-scenes
+  (:require [reagent.core :as r]
+            [sixsq.nuvla.ui.portfolio-utils :refer [defscene]]
+            [sixsq.nuvla.ui.common-components.plugins.duration-picker :refer [DurationPickerController]]
+            [sixsq.nuvla.ui.utils.semantic-ui :as ui]))
+
+(defn BoolParam
+  [!value? test-id label]
+  [:div {:style {:margin-bottom "5px"}}
+   [ui/Checkbox {:data-testid test-id
+                 :label       label
+                 :style       {:position       :relative
+                               :vertical-align :middle}
+                 :checked     @!value?
+                 :on-click    #(swap! !value? not)}]])
+
+(defscene basic-picker
+  (r/with-let [!seconds       (r/atom 0)
+               !show-days?    (r/atom true)
+               !show-hours?   (r/atom true)
+               !show-minutes? (r/atom true)
+               !show-seconds? (r/atom true)]
+    [:div {:style {:width 400}}
+     [BoolParam !show-days? "checkbox-show-days" "Show days ?"]
+     [BoolParam !show-hours? "checkbox-show-hours" "Show hours ?"]
+     [BoolParam !show-minutes? "checkbox-show-minutes" "Show minutes ?"]
+     [BoolParam !show-seconds? "checkbox-show-seconds" "Show seconds ?"]
+     [:div {:style {:margin 10}}
+      [DurationPickerController {:!value         !seconds
+                                 :!show-days?    !show-days?
+                                 :!show-hours?   !show-hours?
+                                 :!show-minutes? !show-minutes?
+                                 :!show-seconds? !show-seconds?}]]
+     [:div {:data-testid "total-seconds"} "Duration in seconds: " @!seconds]]))
+
+(defscene custom-options
+  (r/with-let [!seconds         (r/atom 0)
+               !days-options    (r/atom [0 5 10])
+               !hours-options   (r/atom [0 5 10 15 20])
+               !minutes-options (r/atom [0 10 20 30 40 50])
+               !seconds-options (r/atom [0 30])]
+    [:div {:style {:width 400}}
+     [:div {:style {:margin 10}}
+      [DurationPickerController {:!value           !seconds
+                                 :!days-options    !days-options
+                                 :!hours-options   !hours-options
+                                 :!minutes-options !minutes-options
+                                 :!seconds-options !seconds-options}]]
+     [:div {:data-testid "total-seconds"} "Duration in seconds: " @!seconds]]))

code/portfolio/src/sixsq/nuvla/ui/components/table_refactor_scenes.cljs

@@ -155,6 +155,15 @@
      [TableController {:!enable-row-selection? !enable-row-selection?
                        :!selected              !selected}]]))
 
+(defscene clickable-rows
+  (r/with-let [clicked-rows (r/atom #{})
+               on-row-click #(swap! clicked-rows conj %)]
+    [:div
+     [:div {:data-testid "clicked-rows-summary"
+            :style       {:margin "10px"}}
+      (str (count @clicked-rows) " rows clicked")]
+     [TableController {:on-row-click on-row-click}]]))
+
 (defn SearchInput
   [!global-filter]
   (js/console.info "Render SearchInput")

code/portfolio/src/sixsq/nuvla/ui/portfolio.cljs

@@ -10,6 +10,7 @@
             [sixsq.nuvla.ui.components.table-refactor-scenes]
             [sixsq.nuvla.ui.components.job-cell-scenes]
             [sixsq.nuvla.ui.components.msg-scenes]
+            [sixsq.nuvla.ui.components.duration-picker-scenes]
             [sixsq.nuvla.ui.portfolio-utils :refer [Scene]]))
 
 (defn init [])

code/src/cljs/sixsq/nuvla/ui/common_components/deployment_dialog/events.cljs

@@ -45,7 +45,7 @@
                         routes/deployment-groups-details
                         {:uuid :create}
                         {depl-group-subs/creation-temp-id-key id}]]
-            [:dispatch [::depl-group-events/add-app-from-picker (:module deployment)]]]})))
+            [:dispatch-later {:ms 200 :dispatch [::depl-group-events/add-app-from-picker (:module deployment)]}]]})))
 (reg-event-fx
   ::set-credentials
   (fn [{{:keys [::spec/selected-credential-id

code/src/cljs/sixsq/nuvla/ui/common_components/i18n/dictionary.cljs

@@ -503,6 +503,7 @@
         :install                                       "install"
         :instructions                                  "Instructions"
         :interfaces                                    "interfaces"
+        :interval                                      "Interval"
         :invitation                                    "invitation"
         :invitation-email-success-msg                  "An invitation email has been sent to his or her email account."
         :invite                                        "invite"
@@ -1559,6 +1560,7 @@
         :install                                       "installer"
         :instructions                                  "Instructions"
         :interfaces                                    "interfaces"
+        :interval                                      "Intervalle"
         :invitation                                    "Invitation"
         :invitation-email-success-msg                  "Une invitation a été envoyée à sa boîte courriel."
         :invite                                        "inviter"

code/src/cljs/sixsq/nuvla/ui/common_components/plugins/duration_picker.cljs

@@ -0,0 +1,119 @@
+(ns sixsq.nuvla.ui.common-components.plugins.duration-picker
+  (:require [clojure.string :as str]
+            [reagent.core :as r]
+            [sixsq.nuvla.ui.utils.semantic-ui :as ui]
+            [sixsq.nuvla.ui.utils.ui-callback :as ui-callback]))
+
+(defn decompose-duration
+  [total-seconds]
+  (let [days    (quot total-seconds 86400)
+        hours   (quot (rem total-seconds 86400) 3600)
+        minutes (quot (rem total-seconds 3600) 60)
+        seconds (rem total-seconds 60)]
+    {:days    days
+     :hours   hours
+     :minutes minutes
+     :seconds seconds}))
+
+(defn ->seconds
+  [{:keys [days hours minutes seconds] :as value}]
+  (apply + (remove nil?
+                   [(some-> days (* 3600 24))
+                    (some-> hours (* 3600))
+                    (some-> minutes (* 60))
+                    seconds])))
+
+(defn DurationPicker
+  [{:keys [::!value ::set-value-fn ::tr-fn
+           ::!show-days? ::!show-hours? ::!show-minutes? ::!show-seconds?
+           ::!days-options ::!hours-options ::!minutes-options ::!seconds-options] :as _control}]
+  (let [opts-fn   (fn [vals] (map (fn [i] {:key i :value i :content i :text i}) vals))
+        {:keys [days hours minutes seconds] :as value} (decompose-duration @!value)
+        set-value #(set-value-fn (->seconds %))]
+    [:div {:style {:display     :flex
+                   :align-items :center
+                   :gap         5}}
+     (when @!show-days?
+       [:<>
+        [:label (tr-fn [:days])]
+        [ui/Dropdown {:class     :duration-days
+                      :value     days
+                      :options   (opts-fn @!days-options)
+                      :selection true
+                      :style     {:min-width "70px"}
+                      :on-change (ui-callback/value #(set-value (assoc value :days %)))}]])
+     (when @!show-hours?
+       [:<>
+        [:label (tr-fn [:hours])]
+        [ui/Dropdown {:class     :duration-hours
+                      :value     hours
+                      :options   (opts-fn @!hours-options)
+                      :selection true
+                      :style     {:min-width "70px"}
+                      :on-change (ui-callback/value #(set-value (assoc value :hours %)))}]])
+     (when @!show-minutes?
+       [:<>
+        [:label (tr-fn [:minutes])]
+        [ui/Dropdown {:class     :duration-minutes
+                      :value     minutes
+                      :options   (opts-fn @!minutes-options)
+                      :selection true
+                      :style     {:min-width "70px"}
+                      :on-change (ui-callback/value #(set-value (assoc value :minutes %)))}]])
+     (when @!show-seconds?
+       [:<>
+        [:label (tr-fn [:seconds])]
+        [ui/Dropdown {:class     :duration-seconds
+                      :value     seconds
+                      :options   (opts-fn @!seconds-options)
+                      :selection true
+                      :style     {:min-width "70px"}
+                      :on-change (ui-callback/value #(set-value (assoc value :seconds %)))}]])]))
+
+(defn DurationPickerController
+  [{:keys [;; current value in seconds
+           !value
+           set-value-fn
+
+           ;; Optional (all enabled by default)
+           ;; whether to show days, hours, minutes and seconds
+           !show-days?
+           !show-hours?
+           !show-minutes?
+           !show-seconds?
+
+           ;; Optional
+           ;; Dropdown options to show
+           !days-options
+           !hours-options
+           !minutes-options
+           !seconds-options
+
+           ;; Optional
+           ;; Translations
+           tr-fn
+           ]}]
+  (r/with-let [!value           (or !value (r/atom 0))
+               set-value-fn     (or set-value-fn #(reset! !value %))
+               !show-days?      (or !show-days? (r/atom true))
+               !show-hours?     (or !show-hours? (r/atom true))
+               !show-minutes?   (or !show-minutes? (r/atom true))
+               !show-seconds?   (or !show-seconds? (r/atom true))
+               !days-options    (or !days-options (r/atom (range 0 31)))
+               !hours-options   (or !hours-options (r/atom (range 0 24)))
+               !minutes-options (or !minutes-options (r/atom (range 0 60)))
+               !seconds-options (or !seconds-options (r/atom (range 0 60)))
+               tr-fn            (or tr-fn (comp str/capitalize name first))]
+    [DurationPicker {::!value           !value
+                     ::set-value-fn     set-value-fn
+                     ::!show-days?      !show-days?
+                     ::!show-hours?     !show-hours?
+                     ::!show-minutes?   !show-minutes?
+                     ::!show-seconds?   !show-seconds?
+                     ::!days-options    !days-options
+                     ::!hours-options   !hours-options
+                     ::!minutes-options !minutes-options
+                     ::!seconds-options !seconds-options
+                     ::tr-fn            tr-fn}]))
+
+

code/src/cljs/sixsq/nuvla/ui/common_components/plugins/table_refactor.cljs

@@ -35,6 +35,8 @@
   (assoc control
     ::!processed-data
     (r/track (fn processed-data []
+               (when-not (vector? @!data)
+                 (throw (ex-info "Table data must be a vector" {})))
                (let [filtered-data (if @!enable-global-filter?
                                      (filterv #(or (nil? @!global-filter)
                                                    (some (partial global-filter-fn @!global-filter)
@@ -245,9 +247,12 @@
 
 (defn TableRow
   [{:keys [::row-id-fn ::!visible-columns ::!columns-by-key
-           ::!enable-row-selection?] :as control} row]
+           ::!enable-row-selection? ::on-row-click] :as control} row]
   (r/with-let [row-id (row-id-fn row)]
     [ui/TableRow
+     (when on-row-click
+       {:on-click #(on-row-click row)
+        :style    {:cursor "pointer"}})
      [dnd/SortableContext
       {:items    (mapv name @!visible-columns)
        :strategy dnd/horizontalListSortingStrategy}
@@ -383,7 +388,7 @@
 (defn Table
   [control]
   (r/with-let [{:keys [::!enable-column-customization? ::set-current-columns-fn
-                       ::!enable-pagination? ::!visible-columns ::!max-height] :as control}
+                       ::!enable-pagination? ::!visible-columns ::!max-height ::on-row-click] :as control}
                (->> control
                     set-!visible-columns
                     set-!columns-by-key
@@ -409,7 +414,8 @@
       [:div.table-wrapper
        {:style (cond-> {}
                        @!max-height (assoc :max-height @!max-height))}
-       [ui/Table {:style {:border :unset}}
+       [ui/Table (cond-> {:style {:border :unset}}
+                         on-row-click (assoc :class :selectable))
         [TableHeader control]
         [TableBody control]]]]
      (when @!enable-pagination?
@@ -475,6 +481,10 @@
            !pagination
            set-pagination-fn
 
+           ;; Optional
+           ;; If present, makes table rows clickable. Rows will be highlighted on hover
+           on-row-click
+
            ;; Optional
            ;; Translations
            tr-fn
@@ -529,6 +539,7 @@
                 ::tr-fn                         tr-fn
                 ::!sticky-headers?              !sticky-headers?
                 ::!max-height                   !max-height
+                ::on-row-click                  on-row-click
                 }]))
 
 ;; table

code/src/cljs/sixsq/nuvla/ui/pages/deployment_sets/subs.cljs

@@ -1,5 +1,7 @@
 (ns sixsq.nuvla.ui.pages.deployment-sets.subs
-  (:require [re-frame.core :refer [reg-sub]]
+  (:require [re-frame.core :refer [reg-event-fx reg-sub]]
+            [sixsq.nuvla.ui.main.events :as main-events]
+            [sixsq.nuvla.ui.main.subs :as main-subs]
             [sixsq.nuvla.ui.pages.deployment-sets.spec :as spec]))
 
 (reg-sub
@@ -10,10 +12,31 @@
   ::deployment-sets
   :-> ::spec/deployment-sets)
 
+(reg-sub
+  ::deployment-sets-resources
+  :<- [::deployment-sets]
+  (fn [deployment-sets-response]
+    (vec (:resources deployment-sets-response))))
+
 (reg-sub
   ::deployment-sets-summary
   :-> ::spec/deployment-sets-summary)
 
 (reg-sub
   ::state-selector
   :-> ::spec/state-selector)
+
+(def events-table-col-configs-local-storage-key "nuvla.ui.table.events.column-configs")
+
+(reg-sub
+  ::table-current-cols
+  :<- [::main-subs/current-cols events-table-col-configs-local-storage-key ::events-columns-ordering]
+  identity)
+
+(main-events/reg-set-current-cols-event-fx
+  ::set-table-current-cols-main events-table-col-configs-local-storage-key)
+
+(reg-event-fx
+  ::set-table-current-cols
+  (fn [_ [_ columns]]
+    {:fx [[:dispatch [::set-table-current-cols-main ::events-columns-ordering columns]]]}))