Skip to content

Commit

Permalink
Initial implementation of request history
Browse files Browse the repository at this point in the history
  • Loading branch information
@wilkerlucio
wilkerlucio committed Apr 8, 2020
1 parent bf0cdeb commit fd3a474
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 48 deletions.
4 changes: 3 additions & 1 deletion shells/electron/css/codemirror.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
height: 100% !important;
width: 100% !important;
color: black;
}


/* PADDING */

.CodeMirror-lines {
Expand Down
27 changes: 27 additions & 0 deletions src/cards/com/wsscode/pathom/viz/request_history_cards.cljs
View file

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions src/cards/com/wsscode/pathom/viz/ui/kit_cards.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
(ns com.wsscode.pathom.viz.ui.kit-cards
(:require [nubank.workspaces.lib.fulcro-portal :as f.portal]
[nubank.workspaces.card-types.fulcro :as ct.fulcro]
(:require [nubank.workspaces.card-types.fulcro3 :as ct.fulcro]
[nubank.workspaces.card-types.react :as ct.react]
[nubank.workspaces.core :as ws]
[nubank.workspaces.model :as wsm]
Expand Down Expand Up @@ -80,4 +79,4 @@
(js/console.log "RESET!" n)
(reset! state n))})))))

(f.portal/add-component-css! ui/UIKit)
(ct.fulcro/add-component-css! ui/UIKit)
2 changes: 1 addition & 1 deletion src/core/com/wsscode/pathom/viz/index_explorer.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -584,7 +584,7 @@
:font-family ui/font-base
:font-size "1.1rem"}]
[:.graph-options {:font-size "0.9rem"}
[(ui/component-class ui/ToggleAction :.container)
[(str "." (ui/component-class ui/ToggleAction :.container))
{:margin "0 2px"}]]
[:.data-list {:white-space "nowrap"
;:overflow "auto"
Expand Down
15 changes: 1 addition & 14 deletions src/core/com/wsscode/pathom/viz/query_editor.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
(let [response (pvh/env-parser-response env)]
(swap! state update-in ref assoc
:ui/query-running? false
:com.wsscode.pathom/trace (get response :com.wsscode.pathom/trace)
::result (pvh/pprint (dissoc response :com.wsscode.pathom/trace)))
(pvh/swap-in! env [:ui/trace-viewer] assoc
:com.wsscode.pathom/trace (get response :com.wsscode.pathom/trace))
Expand Down Expand Up @@ -181,7 +180,7 @@
:overflow "auto"
:padding "5px"
:white-space "pre"}
[:&:hover {:background "#9fdcff"}]]]}
[:&:hover {:background ui/color-highlight}]]]}
(dom/div :.container
(dom/div :.title "History")
(for [query (rseq query-history)]
Expand Down Expand Up @@ -266,18 +265,6 @@
[:input {:margin-right "5px"}]]]
[:.flex {:flex "1"}]
[:.editor {:position "relative"}]
[:.divisor-v {:width "20px"
:background "#eee"
:border "1px solid #e0e0e0"
:border-top "0"
:border-bottom "0"
:z-index "2"}]
[:.divisor-h {:height "20px"
:background "#eee"
:border "1px solid #e0e0e0"
:border-left "0"
:border-right "0"
:z-index "2"}]
[:.result {:flex "1"
:position "relative"}
[:$CodeMirror {:background "#f6f7f8"}]]
Expand Down
137 changes: 110 additions & 27 deletions src/core/com/wsscode/pathom/viz/request_history.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,123 @@
(ns com.wsscode.pathom.viz.request-history
(:require [com.fulcrologic.fulcro.components :as fc]
[com.fulcrologic.fulcro-css.localized-dom :as dom]))
[com.fulcrologic.fulcro-css.localized-dom :as dom]
[com.wsscode.pathom.viz.ui.kit :as ui]
[com.wsscode.pathom.viz.helpers :as pvh]
[com.fulcrologic.fulcro.mutations :as fm]
[com.wsscode.pathom.viz.codemirror :as cm]
[com.wsscode.pathom.viz.trace-with-plan :as trace+plan]))

(defn pre-merge-request [{:keys [current-normalized data-tree]}]
(let [id (or (::request-id data-tree)
(::request-id current-normalized)
(random-uuid))
trace (-> data-tree ::response :com.wsscode.pathom/trace)
res (merge {::request-id id
::trace-viewer (if trace
{::trace+plan/id id
:com.wsscode.pathom/trace trace})}
current-normalized data-tree)]
(js/console.log "START" res)
res))

(fc/defsc RequestView
[this {::keys [request response trace-viewer]}]
{:pre-merge pre-merge-request
:ident ::request-id
:query [::request-id
::request
::response
{::trace-viewer (fc/get-query trace+plan/TraceWithPlan)}]
:css [[:.header {:background "#f7f7f7"
:border-bottom "1px solid #ddd"
:padding "4px 8px"}
ui/text-sans-13]
[:.trace {:display "flex"
:overflow "hidden"}]]
:use-hooks? true}
(let [response-size (pvh/use-persistent-state ::response-size 400)
trace-size (pvh/use-persistent-state ::trace-size 300)]
(ui/column (ui/gc :.flex)
(ui/row (ui/gc :.flex)
(ui/column (ui/gc :.flex)
(dom/div :.header "Request")
(cm/clojure {::cm/options {::cm/readOnly true}
:style {:flex "1"
:overflow "auto"
:height (if trace-viewer (str @trace-size "px") "100%")}
:value (pvh/pprint request)}))
(ui/drag-resize {:state response-size :direction "right"})
(ui/column {:style {:width (str @response-size "px")}}
(dom/div :.header "Response")
(cm/clojure {::cm/options {::cm/readOnly true}
:style {:flex "1"
:overflow "auto"
:height (if trace-viewer (str @trace-size "px") "100%")}
:value (pvh/pprint response)})))
(if trace-viewer
(fc/fragment
(ui/drag-resize {:state trace-size :direction "up"})
(dom/div :.header "Trace")
(dom/div :.trace
(trace+plan/trace-with-plan trace-viewer)))))))

(def request-view (fc/factory RequestView {:keyfn ::request-id}))

(fc/defsc RequestItem
[this {::keys [request response]}]
{:pre-merge (fn [{:keys [current-normalized data-tree]}]
(merge {::request-id (random-uuid)} current-normalized data-tree))
[this {::keys [request-id request]} {::keys [on-select selected?]}]
{:pre-merge pre-merge-request
:ident ::request-id
:query [::request-id
::request
::response]
:css [[:.container {:border "1px solid #ddd"}]]
{::trace-viewer (fc/get-query trace+plan/TraceWithPlan)}]
:css [[:.container
{:border-bottom "1px solid #ccc"
:cursor "pointer"
:font-family ui/font-code
:max-height "45px"
:overflow "auto"
:padding "5px"
:white-space "pre"}
[:&:hover {:background ui/color-highlight
:color "#000"}]
[:&.selected {:background "#cae9fb"}]]
[:.code {:white-space "pre"}]]
:use-hooks? true}
(dom/div :.container
(dom/div (pr-str request))
(dom/div (pr-str response))))
(dom/div :.container {:classes [(if selected? :.selected)] :onClick #(on-select request-id)}
(pvh/pprint request)))

(def request-item (fc/factory RequestItem {:keyfn ::request-id}))
(def request-item (fc/computed-factory RequestItem {:keyfn ::request-id}))

(fc/defsc RequestHistory
[this {::keys [requests]}]
{:pre-merge (fn [{:keys [current-normalized data-tree]}]
(merge {::id (random-uuid)} current-normalized data-tree))
:ident ::id
:query [::id
{::requests (fc/get-query RequestItem)}
{:ui/active-request (fc/get-query RequestItem)}]
:css [[:.container {:border "1px solid #ddd"
:display "flex"
:flex-direction "column"
:flex "1"
:max-width "100%"
:min-height "200px"}]]
:use-hooks? true}
(dom/div :.container
(for [req requests]
(request-item req))))
[this {::keys [requests]
:ui/keys [active-request]}]
{:pre-merge (fn [{:keys [current-normalized data-tree]}]
(merge {::id (random-uuid)} current-normalized data-tree))
:ident ::id
:query [::id
{::requests (fc/get-query RequestItem)}
{:ui/active-request (fc/get-query RequestView)}]
:css [[:.container {:border "1px solid #ddd"
:display "flex"
:flex-direction "column"
:flex "1"
:max-width "100%"}]]
:css-include [RequestItem ui/UIKit]
:use-hooks? true}
(let [select-item (pvh/use-callback #(fm/set-value! this :ui/active-request [::request-id %]))
request-size (pvh/use-persistent-state ::request-size 300)]
(ui/column {:classes [(ui/component-class RequestHistory :.container)]}
(dom/div (ui/gc :.flex)
(for [req requests]
(request-item req
{::on-select select-item
::selected? (= (::request-id req) (::request-id active-request))})))

(if active-request
(fc/fragment
(ui/drag-resize {:state request-size :direction "down"})
(ui/column {:classes [(ui/css :.scrollbars)]
:style {:height (str @request-size "px")}}
(request-view active-request)))))))

(def request-history (fc/factory RequestHistory {:keyfn ::id}))
8 changes: 7 additions & 1 deletion src/core/com/wsscode/pathom/viz/ui/kit.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
:-ms-user-select "none"
:user-select "none"})

(def color-highlight "#9fdcff")

; endregion

; region helpers
Expand Down Expand Up @@ -639,6 +641,10 @@
[:.nowrap {:white-space "nowrap"}]
[:.height-100 {:height "100%"}]
[:.max-width-100 {:max-width "100%"}]
[:.border-collapse-top {:border-top "none !important"}]
[:.border-collapse-right {:border-right "none !important"}]
[:.border-collapse-bottom {:border-bottom "none !important"}]
[:.border-collapse-left {:border-left "none !important"}]
[:.divisor-v {:cursor "ew-resize"
:width "20px"
:background "#eee"
Expand Down Expand Up @@ -689,7 +695,7 @@
{:classes (mapv css k)})

(defn component-class [class k]
(str "." (some-> class css/get-classnames (get-css k))))
(some-> class css/get-classnames (get-css k)))

(defn ccss [component & k]
(if-let [css-map (try
Expand Down
4 changes: 3 additions & 1 deletion workspaces/assets/css/codemirror.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
height: 100% !important;
width: 100% !important;
color: black;
}


/* PADDING */

.CodeMirror-lines {
Expand Down

0 comments on commit fd3a474

Please sign in to comment.