status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#13395] Add some stylings for RPC stats page. (#13609) 

Co-authored-by: artamonov.nikolay <nikolay.artamonov@arrival.com>
This commit is contained in:
Nikolay 2022-07-02 14:11:59 +03:00 committed by GitHub
parent 934cecbdd6
commit 13ae5dcc8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo/components/text_input.cljs
View File

@ -39,7 +39,8 @@
(s/def ::before (s/nilable ::accessory)) (s/def ::before (s/nilable ::accessory))
(s/def ::style (s/nilable map?)) (s/def ::style (s/nilable map?))
(s/def ::input-style (s/nilable map?)) (s/def ::input-style ::style)
(s/def ::container-style ::style)
(s/def ::text-input (s/keys :opt-un (s/def ::text-input (s/keys :opt-un
[::label [::label
@ -53,6 +54,7 @@
::cancel-label ::cancel-label
::on-focus ::on-focus
::on-blur ::on-blur
::container-style
::show-cancel ::show-cancel
::accessibility-label ::accessibility-label
::bottom-value ::bottom-value

83
src/status_im/ui/screens/rpc_usage_info.cljs
View File

@ -1,15 +1,16 @@
(ns status-im.ui.screens.rpc-usage-info (ns status-im.ui.screens.rpc-usage-info
(:require [status-im.ui.components.react :as react] (:require [clojure.string :as string]
[status-im.i18n.i18n :as i18n]
[reagent.core :as reagent]
[quo.core :as quo.core] [quo.core :as quo.core]
[quo.design-system.typography :as typography]
[quo.react-native :as quo.react-native] [quo.react-native :as quo.react-native]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.utils.fx :as fx] [reagent.core :as reagent]
[status-im.ethereum.json-rpc :as json-rpc] [status-im.ethereum.json-rpc :as json-rpc]
[taoensso.timbre :as log] [status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :as react]
[status-im.utils.fx :as fx]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[clojure.string :as clojure.string])) [taoensso.timbre :as log]))
(re-frame/reg-sub :rpc-usage/raw-data (fn [db] (get db :rpc-usage/data))) (re-frame/reg-sub :rpc-usage/raw-data (fn [db] (get db :rpc-usage/data)))
(re-frame/reg-sub :rpc-usage/filter (fn [db] (get db :rpc-usage/filter))) (re-frame/reg-sub :rpc-usage/filter (fn [db] (get db :rpc-usage/filter)))
@ -24,27 +25,27 @@
(map (fn [[k v]] (map (fn [[k v]]
[(name k) v])) [(name k) v]))
(filter (fn [[k]] (filter (fn [[k]]
(clojure.string/includes? k method-filter))) (string/includes? k method-filter)))
(sort-by second >)) (sort-by second >))
filtered-total (reduce + (map second data))] filtered-total (reduce + (map second data))]
{:stats data {:stats data
:filtered-total filtered-total :filtered-total filtered-total
:total total}))) :total (or total 0)})))
(re-frame/reg-fx (re-frame/reg-fx
::get-stats ::get-stats
(fn [] (fn []
(status-im.ethereum.json-rpc/call (status-im.ethereum.json-rpc/call
{:method "rpcstats_getStats" {:method "rpcstats_getStats"
:params [] :params []
:on-success #(re-frame/dispatch [::handle-stats %])}))) :on-success #(re-frame/dispatch [::handle-stats %])})))
(re-frame/reg-fx (re-frame/reg-fx
::reset ::reset
(fn [] (fn []
(status-im.ethereum.json-rpc/call (status-im.ethereum.json-rpc/call
{:method "rpcstats_reset" {:method "rpcstats_reset"
:params [] :params []
:on-success #(log/debug "rpcstats_reset success")}))) :on-success #(log/debug "rpcstats_reset success")})))
;; RPC refresh interval ID ;; RPC refresh interval ID
@ -86,35 +87,43 @@
[quo.react-native/scroll-view [quo.react-native/scroll-view
{:style {:padding-horizontal 8}} {:style {:padding-horizontal 8}}
[quo.react-native/view [quo.react-native/view
{:style {:flex-direction :row {:style {:flex-direction :row
:justify-content :space-between}} :justify-content :space-between
[quo.core/text "TOTAL"] :margin-bottom 2}}
[quo.core/text (str filtered-total " of " total)]] [quo.core/text {:style typography/font-semi-bold}
(i18n/label :t/rpc-usage-total)]
[quo.core/text {:style typography/font-semi-bold}
(i18n/label :t/rpc-usage-filtered-total {:filtered-total filtered-total :total total})]]
(when (seq stats) (when (seq stats)
(for [[k v] stats] (for [[k v] stats]
^{:key (str k v)} ^{:key (str k v)}
[quo.react-native/view [:<>
{:style {:flex-direction :row [quo.react-native/view
:align-items :center}} {:style {:flex-direction :row
[quo.core/text {:style {:flex 1}} k] :align-items :center
[quo.core/text {:style {:margin-left 16}} v]]))]) :margin-vertical 10}}
[quo.core/text {:style {:flex 1}}
k]
[quo.core/text {:style {:margin-left 16}}
v]]
[quo.core/separator]]))])
(defn prepare-stats [{:keys [stats]}] (defn prepare-stats [{:keys [stats]}]
(clojure.string/join (string/join
"\n" "\n"
(map (fn [[k v]] (map (fn [[k v]]
(str k " " v)) (str k " " v))
stats))) stats)))
(defn usage-info-render [] (defn usage-info-render []
(let [stats @(re-frame/subscribe [:rpc-usage/data]) (let [stats @(re-frame/subscribe [:rpc-usage/data])
methods-filter @(re-frame/subscribe [:rpc-usage/filter])] methods-filter @(re-frame/subscribe [:rpc-usage/filter])]
[react/view {:flex 1 [react/view {:flex 1
:margin-horizontal 8} :margin-horizontal 8}
[quo.react-native/view [quo.react-native/view
{:style {:flex-direction :row {:style {:flex-direction :row
:margin-top 8 :margin-vertical 8
:justify-content :space-around}} :justify-content :space-between}}
[quo.core/button [quo.core/button
{:on-press #(re-frame/dispatch [::reset]) {:on-press #(re-frame/dispatch [::reset])
:accessibility-label :rpc-usage-reset} :accessibility-label :rpc-usage-reset}
@ -126,7 +135,11 @@
(i18n/label :t/rpc-usage-copy)]] (i18n/label :t/rpc-usage-copy)]]
[quo.core/text-input [quo.core/text-input
{:on-change-text #(re-frame/dispatch [::set-filter %]) {:on-change-text #(re-frame/dispatch [::set-filter %])
:label (i18n/label :t/rpc-usage-filter) :label (i18n/label :t/rpc-usage-filter-methods)
:placeholder (i18n/label :t/rpc-usage-filter)
:container-style {:margin-vertical 18}
:before {:icon :main-icons/search
:style {:padding-horizontal 8}}
:default-value methods-filter :default-value methods-filter
:auto-capitalize :none :auto-capitalize :none
:show-cancel false :show-cancel false
@ -134,9 +147,13 @@
[stats-table stats]])) [stats-table stats]]))
(defn usage-info [] (defn usage-info []
(reagent/create-class {:component-did-mount (fn [] (reagent/create-class
(reset! rpc-refresh-interval (utils/set-interval #(re-frame/dispatch [::get-stats]) rpc-usage-refresh-interval-ms))) {:component-did-mount
:component-will-unmount (fn [] (fn []
(utils/clear-interval @rpc-refresh-interval) (reset! rpc-refresh-interval
(reset! rpc-refresh-interval nil)) (utils/set-interval #(re-frame/dispatch [::get-stats]) rpc-usage-refresh-interval-ms)))
:reagent-render usage-info-render}))
:component-will-unmount (fn []
(utils/clear-interval @rpc-refresh-interval)
(reset! rpc-refresh-interval nil))
:reagent-render usage-info-render}))

5
translations/en.json
View File

@ -1578,8 +1578,11 @@
"rpc-usage-info": "RPC usage stats", "rpc-usage-info": "RPC usage stats",
"rpc-usage-get-stats": "Refresh", "rpc-usage-get-stats": "Refresh",
"rpc-usage-reset": "Reset", "rpc-usage-reset": "Reset",
"rpc-usage-filter": "Filter methods", "rpc-usage-filter": "Filter",
"rpc-usage-filter-methods": "Filter methods",
"rpc-usage-copy": "Copy", "rpc-usage-copy": "Copy",
"rpc-usage-total": "Total",
"rpc-usage-filtered-total": "{{filtered-total}} of {{total}}",
"community-message-preview": "Invitation to join {{community-name}}", "community-message-preview": "Invitation to join {{community-name}}",
"non-contacts": "Non contacts", "non-contacts": "Non contacts",
"community": "Community", "community": "Community",