Skip to content

Commit e78a58b

Browse files
mtmr0xmtmr0x
committed
refac: improve success page for new proxy
1 parent cc73c71 commit e78a58b

File tree

4 files changed

+133
-44
lines changed

4 files changed

+133
-44
lines changed

‎client/src/webclient/components/clipboard.cljs

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
(ns webclient.components.clipboard
2+
(:require
3+
[reagent.core :as r]
4+
["@mantine/core" :refer [Button Tooltip]]
5+
["@tabler/icons-react" :refer [IconCopy]]))
6+
7+
(defn icon []
8+
(let [copied (r/atom false)
9+
copy-to-clipboard (fn [text]
10+
(reset! copied true)
11+
(js/navigator.clipboard.writeText text)
12+
(js/setTimeout #(reset! copied false) 1000))]
13+
(fn [{:keys [text]}]
14+
[:div
15+
[:> Tooltip {:label (if @copied "Copied!" "Copy to clipboard")
16+
:withArrow true
17+
:closeDelay (if @copied 500 100)}
18+
[:> Button {:variant :subtle
19+
:p "2px"
20+
:radius :sm
21+
:size :compact-xs
22+
:onClick #(copy-to-clipboard text)}
23+
[:> IconCopy {:size 16
24+
:color (if copied
25+
"var(--mantine-color-gray-8)"
26+
"var(--mantine-color-gray-6)")}]]]])))

‎client/src/webclient/events/proxies.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
:success-fxs [[:proxies->get]
4444
[:notifications->success {:title "Proxy deleted!"
4545
:level :success}]
46-
[:navigate :home]]}}))
46+
[:navigate {:handler :home}]]}}))
4747

4848
(rf/reg-event-fx
4949
:proxies->create-success

‎client/src/webclient/proxies/new_proxy_success.cljs

+106-41
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,123 @@
22
(:require
33
[reagent.core :as r]
44
[re-frame.core :as rf]
5-
["@mantine/core" :refer [Stack Group Paper Code Anchor]]
6-
["@tabler/icons-react" :refer [IconBrandDocker IconBrandGithubFilled]]
5+
["@mantine/core" :refer [Stack Group Paper Code Tabs Accordion Box Table Timeline Text]]
6+
["@tabler/icons-react" :refer [IconBrandDocker IconExternalLink IconCpu
7+
IconBrandGithubFilled IconDownload IconTerminal]]
78
["js-confetti" :as JSConfetti]
89
[webclient.components.h :as h]
9-
[webclient.components.ui.anchor :as anchor]
10-
[webclient.components.ui.text :as text]))
10+
[webclient.components.clipboard :as clipboard]
11+
[webclient.components.ui.title :as title]
12+
[webclient.components.ui.text :as text]
13+
[webclient.components.ui.anchor :as anchor]))
14+
15+
(defn docker-installation []
16+
(let [architectures [{:value "intel"
17+
:title "Intel Based Chips"
18+
:image "duckthq/proxy"}
19+
{:value "arm"
20+
:title "ARM64/Apple Silicon"
21+
:image "duckthq/proxy-arm64"}]]
22+
(fn [proxy-info]
23+
[:> Stack {:gap :lg}
24+
[:> Tabs {:defaultValue "intel"}
25+
[:> Tabs.List
26+
[:> Tabs.Tab {:value "intel"} "Intel Based Chips"]
27+
[:> Tabs.Tab {:value "arm"} "ARM64/Apple Silicon"]]
28+
29+
(doall
30+
(for [a architectures]
31+
^{:key (:value a)}
32+
[:> Tabs.Panel {:value (:value a)
33+
:py :lg
34+
:px :md}
35+
[:> Stack {:gap :lg}
36+
[:> Group
37+
[text/Dimmed "Image:"]
38+
[:> Code (:image a)]
39+
[clipboard/icon {:text (:image a)}]]
40+
41+
[:> Table {:variant :vertical}
42+
[:> Table.Tbody
43+
[:> Table.Tr
44+
[:> Table.Th "Environment Variable"]
45+
[:> Table.Th "Value"]]
46+
(comment
47+
[:> Table.Tr
48+
[:> Table.Th "DUCKT_SERVER_URL"]
49+
[:> Table.Td "URL of the Duckt server"]])
50+
[:> Table.Tr
51+
[:> Table.Th "PROXY_TOKEN"]
52+
[:> Table.Td (:proxy-key proxy-info)]]]]
53+
[:> Stack
54+
[h/h5 "You may also run the container locally"]
55+
[:> Paper {:withBorder true
56+
:p :md}
57+
[:> Group {:justify :end}
58+
[:> Code
59+
(str "docker run --rm -it -p 4445:4445"
60+
" -e PROXY_TOKEN=" (:proxy-key proxy-info) " " (:image a))]]]]]]))]])))
61+
62+
(defn bare-metal-installation []
63+
(fn [proxy-info]
64+
[:> Stack
65+
[text/Base "You can download the standalone jar file and run it on any machine with Java installed."]
66+
[:> Timeline
67+
[:> Timeline.Item {:title "Download the standalone jar file"
68+
:bullet (r/as-element [:> IconBrandGithubFilled {:size 16}])}
69+
[text/Base
70+
[:span
71+
[:span "Download the latest proxy standalone jar file from the "]
72+
[anchor/Base {:href "https://github.com/duckthq/duckt/releases"
73+
:target "_blank"}
74+
[:span
75+
[:span "Duckt GitHub releases page."]
76+
[:> IconExternalLink {:size 14}]]]]]]
77+
[:> Timeline.Item {:title "Install Java"
78+
:bullet (r/as-element [:> IconDownload {:size 16}])}
79+
[text/Base [:span [:span "Make sure you have Java installed on your machine. "]
80+
[anchor/Base
81+
{:href "https://www.java.com/en/download/help/download_options.html"
82+
:target "_blank"}
83+
"You can download Java from the official website."]]]]
84+
[:> Timeline.Item {:title "Run the jar file"
85+
:bullet (r/as-element [:> IconTerminal {:size 16}])}
86+
[text/Base "Run the jar file replacing <version> with the actual downloaded version"]
87+
[:> Paper {:withBorder true
88+
:p :md}
89+
[:> Group
90+
[:> Code (str
91+
"PROXY_TOKEN=" (:proxy-key proxy-info) " "
92+
"java -jar proxy-standalone-<version>.jar")]]]]]]))
1193

1294
(defn panel []
1395
(let [new-proxy-info (rf/subscribe [:proxies->new-proxy-info])
1496
js-confetti (new JSConfetti)]
15-
(println :new-proxy-info @new-proxy-info)
1697
(fn []
17-
(let [proxy-key (:proxy-key @new-proxy-info)]
1898
(.addConfetti js-confetti
1999
(clj->js {:confettiRadius 2
20100
:confettiColors ["#999" "#ddd" "#aaa"]
21101
:confettiNumber 3000}))
22-
[:> Stack {:p :md}
102+
[:> Stack {:p :md
103+
:gap :xl}
23104
[h/page-title
24105
"Set up your proxy"
25106
"Deploy your proxy with the following information."]
26-
[:> Stack
27-
[h/h3 "Using Docker"]
28-
[h/h5 "Pull the image"]
29-
[:> Paper {:withBorder true
30-
:p :md}
31-
[:> Group
32-
[:> IconBrandDocker {:size 24
33-
:color "var(--mantine-color-blue-7)"
34-
:stroke 1}]
35-
[:> Code
36-
"docker pull duckthq/proxy"]]]
37-
[h/h5 "Run the container"]
38-
[:> Paper {:withBorder true
39-
:p :md}
40-
[:> Group
41-
[:> Code
42-
(str "docker run --rm -it -p 4445:4445"
43-
" -e DUCKT_SERVER_URL=" "URL"
44-
" -e PROXY_TOKEN=" proxy-key " duckthq/proxy")]]]
45-
]
46-
[:> Stack
47-
[h/h3 "Build from source"]
48-
[:> Group
49-
[anchor/Dark {:href "https://github.com/duckthq/duckt/tree/main/proxy"
50-
:target "_blank"
51-
:inherit true}
52-
[:> Paper {:withBorder true
53-
:p :md}
54-
[:> Stack
55-
[:> Group {:gap :xs}
56-
[:> IconBrandGithubFilled {:size 20}]
57-
[h/h5 "GitHub"]]
58-
[text/Base
59-
"Visit our GitHub repository to build the proxy from source."]]]]]]]))))
107+
[:> Accordion {:variant :contained
108+
:defaultValue "Docker"
109+
:radius :lg}
110+
[:> Accordion.Item {:value "Docker"}
111+
[:> Accordion.Control {:icon (r/as-element
112+
[:> IconBrandDocker
113+
{:size 24
114+
:stroke 1}])}
115+
[title/h3 "Docker"]]
116+
[:> Accordion.Panel [docker-installation @new-proxy-info]]]
117+
118+
[:> Accordion.Item {:value "Bare Metal"}
119+
[:> Accordion.Control {:icon (r/as-element
120+
[:> IconCpu
121+
{:size 24
122+
:stroke 1}])}
123+
[title/h3 "Bare Metal"]]
124+
[:> Accordion.Panel [bare-metal-installation @new-proxy-info]]]]])))

‎client/src/webclient/proxies/overview/panel.cljs

-2
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,12 @@
9191

9292
[:> BarChart {:data (clj->js data)
9393
:dataKey "date"
94-
:curveType "monotone"
9594
:yAxisProps {:orientation :right
9695
:tickMargin 20}
9796
:gridAxis "none"
9897
:withLegend true
9998
:legendProps {:verticalAlign :bottom}
10099
:barProps {:radius 10}
101-
:dotProps {:r 0}
102100
:tooltipAnimationDuration 200
103101
:strokeWidth 1
104102
:series [{:name "all" :color "gray.6"}

0 commit comments

Comments
 (0)