Skip to content

Commit 2eb219f

Browse files
sezen-datadogsezen-datadog
committed
corrections wip
Signed-off-by: sezen.leblay <[email protected]>
1 parent 80b591d commit 2eb219f

File tree

12 files changed

+303
-8
lines changed

12 files changed

+303
-8
lines changed

‎assets/scripts/components/environments.js

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import Cookies from 'js-cookie';
2+
import { loadPage } from './async-loading'; // eslint-disable-line import/no-cycle
3+
4+
function addEnvTabEventListeners() {
5+
const envLinks = document.querySelectorAll('.js-env-example-link');
6+
7+
if (envLinks.length) {
8+
envLinks.forEach((envLink) => {
9+
envLink.addEventListener('click', envTabClickHandler);
10+
envLink.addEventListener('mouseover', envTabHoverHandler);
11+
});
12+
}
13+
}
14+
15+
function redirectEnv(env = '') {
16+
let newEnv = env;
17+
18+
const queryParams = new URLSearchParams(window.location.search);
19+
const { pageCodeLang } = document.documentElement.dataset;
20+
21+
if (document.documentElement.dataset.type === 'multi-env') {
22+
newEnv = pageCodeLang;
23+
24+
Cookies.set('env', newEnv, { path: '/' });
25+
toggleEnvironments(newEnv);
26+
} else if (queryParams.get('env')) {
27+
newEnv = queryParams.get('env');
28+
29+
Cookies.set('env', newEnv, { path: '/' });
30+
toggleEnvironments(newEnv);
31+
} else if (Cookies.get('env')) {
32+
if (newEnv !== '') {
33+
Cookies.set('env', newEnv, { path: '/' });
34+
toggleEnvironments(newEnv);
35+
} else {
36+
newEnv = Cookies.get('env');
37+
toggleEnvironments(newEnv);
38+
}
39+
} else {
40+
// if cookie is not set, default to linux
41+
newEnv = 'linux';
42+
Cookies.set('env', newEnv, { path: '/' });
43+
toggleEnvironments(newEnv);
44+
}
45+
}
46+
47+
redirectEnv();
48+
49+
// When hovering over multi-env tabs make sure proper href is reflected,
50+
// making it easier for support/sales teams to "Copy Link Address" and send correct URL out.
51+
function envTabHoverHandler(event) {
52+
if (
53+
document.documentElement.dataset.type === 'multi-env' &&
54+
(document.body.classList.contains('kind-section') || document.body.classList.contains('kind-page'))
55+
) {
56+
const tabElement = event.target;
57+
const env = event.target.dataset.envTrigger;
58+
const { currentSection, baseUrl } = document.documentElement.dataset;
59+
const updatedHref = `${baseUrl}${currentSection}${env}/?env=${env}`;
60+
tabElement.href = updatedHref;
61+
}
62+
}
63+
64+
function envTabClickHandler(event) {
65+
const queryParams = new URLSearchParams(window.location.search);
66+
const env = event.target.dataset.envTrigger;
67+
const { currentSection, baseUrl } = document.documentElement.dataset;
68+
69+
event.preventDefault();
70+
71+
if (document.documentElement.dataset.type === 'multi-env' &&
72+
(document.body.classList.contains('kind-section') || document.body.classList.contains('kind-page'))
73+
) {
74+
Cookies.set('env', env, { path: '/' });
75+
loadPage(`${baseUrl}${currentSection}${env}`);
76+
window.history.replaceState({}, '', `${baseUrl}${currentSection}${env}`);
77+
} else {
78+
Cookies.set('env', env, { path: '/' });
79+
toggleEnvironments(env);
80+
queryParams.set('env', env);
81+
window.history.replaceState({}, '', `${window.location.pathname}?${queryParams}`);
82+
}
83+
}
84+
85+
addEnvTabEventListeners();
86+
87+
function activateEnvNav(activeEnv) {
88+
const envLinks = document.querySelectorAll('.js-env-example-link');
89+
90+
if (envLinks.length) {
91+
envLinks.forEach((envLink) => {
92+
envLink.classList.remove('active');
93+
94+
if (envLink.dataset.envTrigger === activeEnv) {
95+
envLink.classList.add('active');
96+
}
97+
});
98+
}
99+
}
100+
101+
function toggleEnvironments(activeEnv) {
102+
activateEnvNav(activeEnv);
103+
toggleMultiEnvNav(activeEnv);
104+
105+
// non-api page environment blocks
106+
const envWrappers = document.querySelectorAll('body:not(.api) [class*=js-env-snippet-wrapper]');
107+
108+
const allEnvBlocksInWrappers = document.querySelectorAll('.js-env-snippet-wrapper .js-env-block');
109+
110+
if (allEnvBlocksInWrappers.length) {
111+
allEnvBlocksInWrappers.forEach((envBlock) => {
112+
if (envBlock.dataset.envBlock === activeEnv) {
113+
envBlock.style.display = 'block';
114+
} else {
115+
envBlock.style.display = 'none';
116+
}
117+
});
118+
}
119+
120+
if (envWrappers.length) {
121+
envWrappers.forEach((envWrapper) => {
122+
const envBlocks = envWrapper.querySelectorAll(`[data-env-block="${activeEnv}"`);
123+
124+
if (envBlocks.length) {
125+
// loop through environment blocks and check if they contain the active env
126+
envBlocks.forEach((envBlock) => {
127+
envBlock.style.display = 'block';
128+
});
129+
} else {
130+
// find the first environment block in the env wrapper and turn on
131+
const firstEnvBlock = envWrapper.querySelector('.js-env-block');
132+
firstEnvBlock.style.display = 'block';
133+
const dcl = envWrapper.querySelector('[data-env-trigger]');
134+
if(dcl) {
135+
dcl.classList.add('active');
136+
}
137+
}
138+
});
139+
}
140+
}
141+
142+
function toggleMultiEnvNav(env) {
143+
/*
144+
- Find any nav entries with type multi-env
145+
- Look for child entry that has data-name matching the current env
146+
- Switch that url into the parent url, so its the appropriate environment version
147+
*/
148+
if(typeof(env) === 'string' && env.length > 0) {
149+
const items = document.querySelectorAll('a[data-type="multi-env"]');
150+
if(items) {
151+
items.forEach((item) => {
152+
const li = item.closest('li');
153+
const a = (li) ? li.querySelector(`a[data-name="${env}"]`) : null;
154+
if (a) {
155+
item.setAttribute('href', a.getAttribute('href'));
156+
}
157+
});
158+
}
159+
}
160+
}
161+
162+
toggleMultiEnvNav(Cookies.get('env') || '');
163+
164+
export { redirectEnv, addEnvTabEventListeners, activateEnvNav, toggleMultiEnvNav };

‎assets/scripts/main-dd-js.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import './components/global-modals';
1414
import './components/platforms';
1515
import './components/api';
1616
import './components/code-languages';
17+
import './components/environments';
1718
import './components/bootstrap-dropdown-custom';
1819
import './components/navbar'; // should move this to websites-modules
1920
import './components/mobile-nav'; // should move this to websites-modules

‎assets/styles/components/_tab-toggle.scss

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,68 @@ $tab-active-shadow: 0 -4px 12px rgba(99, 44, 166, 0.08);
6767
}
6868
}
6969

70+
// Multi-env tabs specific styles
71+
.env-list-container {
72+
background: #fff;
73+
z-index: 2;
74+
position: relative;
75+
border-bottom: none;
76+
margin-bottom: 0;
77+
padding: 0;
78+
padding-left: 0 !important;
79+
margin-left: 0 !important;
80+
81+
ul, ol {
82+
list-style: none;
83+
margin: 0;
84+
padding: 0;
85+
padding-top: 6px;
86+
}
87+
88+
.nav-item {
89+
margin-right: 10px;
90+
padding-bottom: 6px;
91+
92+
.nav-link {
93+
background: #fff;
94+
border: none;
95+
color: #444;
96+
font-size: 16px;
97+
font-weight: 600;
98+
padding: 6px 10px 7px 10px;
99+
border-radius: 3px;
100+
display: inline-block;
101+
margin-right: 0.625rem;
102+
transition: all 0.2s ease;
103+
104+
&:hover {
105+
box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.1);
106+
border: none;
107+
color: $tab-active-color;
108+
background: #fff;
109+
}
110+
111+
&.active {
112+
background: $tab-active-color;
113+
color: #fff;
114+
box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.1);
115+
border-radius: 3px;
116+
border: none;
117+
}
118+
}
119+
}
120+
121+
.nav-item::before {
122+
content: none !important;
123+
display: none !important;
124+
}
125+
126+
li::marker {
127+
content: none;
128+
display: none;
129+
}
130+
}
131+
70132
// API docs response toggle specific styles
71133
.nav-tabs.response-toggle {
72134
margin-bottom: 20px;

‎config/_default/params.yaml

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,14 @@ code_language_ids:
133133
apigateway: "Amazon API Gateway"
134134
ddsql_preview: "DDSQL (Preview)"
135135
ddsql_default: "DDSQL"
136+
137+
environment_ids:
138+
linux: Linux
139+
macos: macOS
140+
windows: Windows
141+
docker: Docker
142+
kubernetes: Kubernetes
143+
136144
branch: ""
137145

138146
signupclass: sign-up-trigger
@@ -286,4 +294,4 @@ unsupported_sites:
286294
test_optimization: [gov]
287295
universal_service_monitoring: [gov]
288296
watchdog_faulty_service_deployment: [us3,us5,eu,ap1,gov]
289-
workflows: [gov]
297+
workflows: [gov]

‎content/en/security/application_security/setup/environments/java/docker.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Setup App and API Protection for Java in Docker
33
code_lang: docker
4-
type: multi-code-lang
4+
type: multi-env
55
code_lang_weight: 10
66
further_reading:
77
- link: "/security/application_security/how-it-works/"

‎content/en/security/application_security/setup/environments/java/kubernetes.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Setup App and API Protection for Java in Kubernetes
33
code_lang: kubernetes
4-
type: multi-code-lang
4+
type: multi-env
55
code_lang_weight: 20
66
further_reading:
77
- link: "/security/application_security/how-it-works/"

‎content/en/security/application_security/setup/environments/java/linux.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Setup App and API Protection for Java on Linux
33
code_lang: linux
4-
type: multi-code-lang
4+
type: multi-env
55
code_lang_weight: 30
66
further_reading:
77
- link: "/security/application_security/how-it-works/"

‎content/en/security/application_security/setup/environments/java/macos.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Setup App and API Protection for Java on macOS
33
code_lang: macos
4-
type: multi-code-lang
4+
type: multi-env
55
code_lang_weight: 40
66
further_reading:
77
- link: "/security/application_security/how-it-works/"

‎content/en/security/application_security/setup/environments/java/troubleshooting.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Troubleshooting Java App and API Protection
2+
title: Troubleshooting App and API Protection for Java
33
---
44

55
## Common Issues
@@ -57,4 +57,4 @@ If you're still experiencing problems:
5757

5858
[1]: /security/application_security/troubleshooting
5959
[2]: /tracing/trace_collection/compatibility_requirements/java
60-
[3]: /help
60+
[3]: /help

‎content/en/security/application_security/setup/environments/java/windows.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Setup App and API Protection for Java on Windows
33
code_lang: windows
4-
type: multi-code-lang
4+
type: multi-env
55
code_lang_weight: 50
66
further_reading:
77
- link: "/security/application_security/how-it-works/"

0 commit comments

Comments
 (0)