Created
March 2, 2015 19:15
-
-
Save pandeiro/08a4cf849143f0918af1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns dashwise-dashboard.views | |
(:require | |
[clojure.string :as s] | |
[reagent.core :as r] | |
[dashwise-dashboard.views.bootstrap :as bootstrap] | |
[dashwise-dashboard.views.styles :as styles] | |
[dashwise-dashboard.views.util :refer [target-val]] | |
[dashwise-dashboard.models :as models] | |
[dashwise-dashboard.state :refer [app-state history]])) | |
(defn logo [path] | |
[:img {:src path}]) | |
(declare service-filter machines-filter) | |
(defn header [app-state] | |
[:header styles/header | |
[bootstrap/grid-6ths | |
[logo "img/heinz-logo.png"] | |
[service-filter app-state] | |
[machines-filter app-state]]]) | |
(defn- set-service-token [e] | |
(let [token (or (not-empty (target-val e)) "")] | |
(.setToken history (str "/" token)))) | |
(defn service-filter [app-state] | |
[bootstrap/select (merge {:on-change set-service-token} styles/filters) | |
[:option {:value ""} "All Services"] | |
[:option {:value "oracle"} "Oracle"] | |
[:option {:value "mysql"} "MySQL"] | |
[:option {:value "postgres"} "PostgreSQL"] | |
[:option {:value "linux"} "Linux"]]) | |
(defn- enumerate-machines [app-state] | |
(sort (set (map :machine (get-in @app-state models/facts))))) | |
(defn- set-machine-filter [e] | |
(let [machine (not-empty (target-val e))] | |
(swap! app-state assoc-in models/machines | |
(if machine [machine] [])))) | |
(defn machines-filter [app-state] | |
(let [machines (enumerate-machines app-state)] | |
[bootstrap/select (merge {:on-change set-machine-filter} styles/filters) | |
[:option {:value ""} "All Machines"] | |
(for [machine machines] | |
[:option machine])])) | |
(defn update-or-select-dates [selecting?] | |
(fn [e] | |
(if (= (target-val e) "select-dates") | |
(reset! selecting? true) | |
))) | |
(defn dates-filter [app-state] | |
(let [selecting? (r/atom false)] | |
(fn [app-state] | |
(if-not @selecting? | |
[bootstrap/select | |
{:on-change (update-or-select-dates selecting?)} | |
[:option {:value ""} "All Dates"] | |
[:option {:value "select-dates"} "Select Dates..."]] | |
[bootstrap/inline-form | |
[bootstrap/form-group | |
[:label {:for "from-date"} "From "] | |
[:input#from-date.form-control | |
{:type "date" | |
:default-value "2015-01-10"}]] | |
[bootstrap/form-group | |
[:label {:for "to-date"} "To "] | |
[:input#to-date.form-control | |
{:type "date" | |
:default-value "2015-01-22"}]] | |
[bootstrap/button "OK"] | |
[bootstrap/button "Cancel"]])))) | |
(defn from-date-filter [app-state] | |
[bootstrap/form-group | |
[:label {:for "from-date"} "From "] | |
[:input#from-date.form-control | |
{:type "date" | |
:default-value "2015-01-10" | |
:on-change #(.log js/console (target-val %))}]]) | |
(defn filters [app-state] | |
[:div.filters | |
[bootstrap/grid-6ths | |
[service-filter app-state] | |
[machines-filter app-state] | |
;;[dates-filter app-state] | |
]]) | |
(defn- column-as-text [col] | |
(s/join " " (s/split (name col) "_"))) | |
(defn facts-table-headings [] | |
[:thead | |
[:tr | |
(for [col models/fact-columns] | |
[:th (styles/fact-cell col) (column-as-text col)])]]) | |
(defn extended-value-cell [edn] | |
(let [expanded? (r/atom false)] | |
(fn [edn] | |
(if (> (count edn) 64) | |
[:span (if @expanded? | |
edn | |
(.substring edn 0 64)) | |
[:button {:on-click #(swap! expanded? not)} | |
(if @expanded? "Hide" "Read more...")]])))) | |
(def fact-xforms | |
{:timestamp | |
(fn [date] | |
(.toISOString date)) | |
:extended_value | |
(fn [edn] | |
[extended-value-cell edn])}) | |
(defn fact-row [fact] | |
[:tr | |
{:on-click #(.log js/console (pr-str fact))} | |
(for [col models/fact-columns] | |
(let [data (get fact col) | |
process (get fact-xforms col identity)] | |
[:td (styles/fact-cell col) (process data)]))]) | |
(defn facts-table-body [facts] | |
[:tbody | |
(for [fact facts] | |
[fact-row fact])]) | |
(defn- filter-facts-by-machines [machines facts] | |
(filter (comp (set machines) :machine) facts)) | |
(defn facts [app-state] | |
(let [facts (get-in @app-state models/facts) | |
machines (get-in @app-state models/machines) | |
display (if (empty? machines) | |
facts | |
(filter-facts-by-machines machines facts))] | |
[:div.facts | |
[bootstrap/table styles/table | |
[facts-table-headings] | |
[facts-table-body display]]])) | |
(defn content [app-state] | |
[:div.content styles/content | |
[facts app-state]]) | |
(defn main [app-state] | |
[:div.main | |
[header app-state] | |
[content app-state]]) | |
(defn render-main [node] | |
(r/render [#'main app-state] node)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment