Skip to content

Commit bd543f6

Browse files
peterbarnett03jstirnamansandersonCopilot
authored
update: start explorer docs (#6102)
* update: start explorer docs * fix(explorer): Add Explorer to products.yml, move to version folder, add get-started step nav, cleanup * Updated explorer directory structure, homepage, and beta styling (#6108) * updated explorer dirctory struction, homepage, and beta styling * clean up homepage state tags * Add InfluxDB 3 Explorer installation documentation (#6111) * InfluxDB 3 Explorer installation instructions * fixed broken links * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * update: add getting started video * updated to address PR feedback * adjust page weights for explorer docs * other minor updates * more minor updates --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Peter Barnett <peter.barnett03@gmail.com> --------- Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com> Co-authored-by: Scott Anderson <sanderson@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent f008d6e commit bd543f6

File tree

17 files changed

+612
-63
lines changed

17 files changed

+612
-63
lines changed

‎assets/styles/layouts/_homepage.scss

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
.product {
106106
padding: 0 1rem;
107107
display: flex;
108-
flex: 1 1 50%;
108+
flex: 1 1 33%;
109109
flex-direction: column;
110110
justify-content: space-between;
111111
max-width: 33%;
@@ -118,11 +118,10 @@
118118
line-height: 1.5rem;
119119
color: rgba($article-text, .7);
120120
}
121-
}
122121

123-
&.new {
124-
.product-info h3::after {
125-
content: "New";
122+
h3[state] {
123+
&::after {
124+
content: attr(state);
126125
margin-left: .5rem;
127126
font-size: 1rem;
128127
padding: .25em .5em .25em .4em;
@@ -132,6 +131,8 @@
132131
font-style: italic;
133132
vertical-align: middle;
134133
}
134+
135+
}
135136
}
136137

137138
ul.product-links {
@@ -227,13 +228,38 @@
227228
background: $article-bg;
228229
}
229230

231+
.categories {
232+
display: flex;
233+
flex-direction: row;
234+
flex-wrap: wrap;
235+
// margin: 0 -1rem;
236+
width: calc(100% + 2rem);
237+
238+
.category {
239+
&.full-width {
240+
width: 100%;
241+
}
242+
&.two-thirds {
243+
width: 66.66%;
244+
.product { max-width: 50%; }
245+
}
246+
&.one-third {
247+
width: 33.33%;
248+
.product {
249+
max-width: 100%;
250+
}
251+
}
252+
}
253+
}
254+
230255
.category-head{
231256
margin: 1rem 0 2rem;
232257
&::after {
233258
content: "";
234259
display: block;
235260
border-top: 1px solid $article-hr;
236261
margin-top: -1.15rem;
262+
width: calc(100% - 2rem);
237263
}
238264
}
239265
}
@@ -441,6 +467,16 @@
441467
ul {margin-bottom: 0;}
442468
}
443469
}
470+
.categories .category {
471+
&.two-thirds {
472+
width: 100%;
473+
.product { max-width: 100%; }
474+
}
475+
&.one-third {
476+
width: 100%;
477+
.product { max-width: 100%; }
478+
}
479+
}
444480
}
445481
#telegraf {
446482
flex-direction: column;

‎assets/styles/layouts/article/_blocks.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,5 @@ blockquote {
9696
"blocks/tip",
9797
"blocks/important",
9898
"blocks/warning",
99-
"blocks/caution";
99+
"blocks/caution",
100+
"blocks/beta";

‎assets/styles/layouts/article/blocks/_beta.scss

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.block.beta {
2+
@include gradient($grad-burningDusk);
3+
padding: 4px;
4+
border: none;
5+
border-radius: 25px !important;
6+
7+
.beta-content {
8+
background: $article-bg;
9+
border-radius: 21px;
10+
padding: calc(1.65rem - 4px) calc(2rem - 4px) calc(.1rem + 4px) calc(2rem - 4px);
11+
12+
h4 {
13+
color: $article-heading;
14+
}
15+
16+
p {margin-bottom: 1rem;}
17+
18+
.expand-wrapper {
19+
border: none;
20+
margin: .5rem 0 1.5rem;
21+
}
22+
.expand {
23+
border: none;
24+
padding: 0;
25+
26+
.expand-content p {
27+
margin-left: 2rem;
28+
}
29+
30+
ul {
31+
32+
margin-top: -1rem;
33+
34+
&.feedback-channels {
35+
36+
padding: 0;
37+
margin: -1rem 0 1.5rem 2rem;
38+
list-style: none;
39+
40+
a {
41+
color: $article-heading;
42+
font-weight: $medium;
43+
position: relative;
44+
45+
&.discord:before {
46+
content: url('/svgs/discord.svg');
47+
display: inline-block;
48+
height: 1.1rem;
49+
width: 1.25rem;
50+
vertical-align: top;
51+
margin: 2px .65rem 0 0;
52+
}
53+
54+
&.community:before {
55+
content: "\e900";
56+
color: $article-heading;
57+
margin: 0 .65rem 0 0;
58+
font-size: 1.2rem;
59+
font-family: 'icomoon-v2';
60+
vertical-align: middle;
61+
}
62+
63+
&.slack:before {
64+
content: url('/svgs/slack.svg');
65+
display: inline-block;
66+
height: 1.1rem;
67+
width: 1.1rem;
68+
vertical-align: text-top;
69+
margin-right: .65rem;
70+
}
71+
72+
&.reddit:before {
73+
content: url('/svgs/reddit.svg');
74+
display: inline-block;
75+
height: 1.1rem;
76+
width: 1.2rem;
77+
vertical-align: top;
78+
margin: 2px .65rem 0 0;
79+
}
80+
81+
&::after {
82+
content: "\e90a";
83+
font-family: 'icomoon-v4';
84+
font-weight: bold;
85+
font-size: 1.3rem;
86+
display: inline-block;
87+
position: absolute;
88+
@include gradient($grad-burningDusk);
89+
background-clip: text;
90+
-webkit-text-fill-color: transparent;
91+
right: 0;
92+
transform: translateX(.25rem);
93+
opacity: 0;
94+
transition: transform .2s, opacity .2s;
95+
}
96+
97+
&:hover {
98+
&::after {transform: translateX(1.5rem); opacity: 1;}
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}

‎content/influxdb3/explorer/_index.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: InfluxDB 3 Explorer documentation
3+
description: >
4+
InfluxDB 3 Explorer is a standalone web-based interface for interacting with InfluxDB 3 Core and Enterprise. Visualize, query, and manage your time series data efficiently.
5+
menu:
6+
influxdb3_explorer:
7+
name: InfluxDB 3 Explorer
8+
weight: 1
9+
---
10+
11+
InfluxDB 3 Explorer is the standalone web application designed for visualizing, querying, and managing your data stored in InfluxDB 3 Core and Enterprise.
12+
Explorer provides an intuitive interface for interacting with your time series data, streamlining database operations and enhancing data insights.
13+
14+
## Key features
15+
16+
Use InfluxDB 3 Explorer for:
17+
18+
- **Database and query management**: Create and manage InfluxDB 3 databases, admin and resource tokens, and configure new InfluxDB 3 Enterprise instances
19+
- **Data visualization and analysis**: Query data with a built-in visualizer for enhanced data insights
20+
- **Data ingestion**: Write new data and setup Telegraf configurations
21+
22+
## Quick start
23+
24+
Run the Docker image to start InfluxDB 3 Explorer:
25+
26+
```sh
27+
docker run --detach \
28+
--name influxdb3-explorer \
29+
--publish 8888:80 \
30+
--publish 8889:8888 \
31+
--env MODE=admin \
32+
quay.io/influxdb/influxdb3-explorer:latest
33+
```
34+
35+
<a class="btn" href="/influxdb3/explorer/install/">Install and run InfluxDB 3 Explorer</a>
36+
<a class="btn" href="/influxdb3/explorer/get-started/">Get started with InfluxDB 3 Explorer</a>

‎content/influxdb3/explorer/about/_index.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: About the InfluxDB 3 Explorer project
3+
description: >
4+
Learn about InfluxDB 3 Explorer, the user interface and query tool for InfluxDB 3.
5+
menu:
6+
influxdb3_explorer:
7+
name: About Explorer
8+
weight: 10
9+
---
10+
11+
InfluxDB 3 Explorer is the user interface component of the InfluxDB 3 platform.
12+
It provides visual management of databases and tokens and an easy way to querying
13+
your time series data. Explorer is fully-featured for [InfluxDB 3 Core](/influxdb3/core/)
14+
and [Enterprise](/influxdb3/enterprise/), but can also be used to query
15+
[InfluxDB Cloud Serverless](/influxdb3/cloud-serverless/),
16+
[InfluxDB Cloud Dedicated](/influxdb3/cloud-dedicated/)
17+
and [InfluxDB Clustered](/influxdb3/clustered/).
18+
19+
## Third Party Software
20+
21+
InfluxData products contain third party software, which means the copyrighted,
22+
patented, or otherwise legally protected software of third parties that is
23+
incorporated in InfluxData products.
24+
25+
Third party suppliers make no representation nor warranty with respect to such
26+
third party software or any portion thereof. Third party suppliers assume no
27+
liability for any claim that might arise with respect to such third party software,
28+
nor for a customer’s use of or inability to use the third party software.

‎content/influxdb3/explorer/get-started/_index.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Get started using InfluxDB 3 Explorer
3+
description: Follow steps to get started using InfluxDB 3 Explorer.
4+
menu:
5+
influxdb3_explorer:
6+
name: Get started
7+
weight: 3
8+
---
9+
10+
Follow steps to get started using InfluxDB 3 Explorer.
11+
12+
{{< youtube "TbAz0AdaGH0" >}}
13+
14+
<!-- {{< page-nav next="/explorer/v1/get-started/connect/" >}} -->

‎content/influxdb3/explorer/get-started/connect.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Connect to a server
3+
description:
4+
Use InfluxDB 3 Explorer to connect to an InfluxDB 3 server.
5+
menu:
6+
influxdb3_explorer:
7+
parent: Get started
8+
weight: 101
9+
draft: true
10+
---
11+
12+
Use InfluxDB 3 Explorer to connect to an InfluxDB 3 server.

0 commit comments

Comments
 (0)