@splunk/react-page 6.3.1 → 6.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/lib/index.js +370 -421
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
Change Log
|
|
2
2
|
============
|
|
3
3
|
|
|
4
|
+
6.3.3 - November 7, 2023
|
|
5
|
+
----------
|
|
6
|
+
Bug Fixes:
|
|
7
|
+
* Fixed issue with the Splunk Enterprise global banner not fitting correctly when `options.lazyLoadLayout=true` (SPL-245739).
|
|
8
|
+
|
|
9
|
+
6.3.2 - October 11, 2023
|
|
10
|
+
----------
|
|
11
|
+
Bug Fixes:
|
|
12
|
+
* This package should now load correctly in Webpack 4 environments (SUI-5802).
|
|
13
|
+
|
|
4
14
|
6.3.1 - October 4, 2023
|
|
5
15
|
----------
|
|
6
16
|
Bug Fixes:
|
package/lib/index.js
CHANGED
|
@@ -1,279 +1,269 @@
|
|
|
1
|
-
/******/ (() => {
|
|
2
|
-
|
|
3
|
-
/******/
|
|
4
|
-
/******/
|
|
5
|
-
/******/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/******/
|
|
9
|
-
/******/
|
|
10
|
-
/******/
|
|
11
|
-
/******/
|
|
12
|
-
/******/
|
|
13
|
-
/******/
|
|
14
|
-
/******/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/******/
|
|
20
|
-
/******/
|
|
21
|
-
/******/
|
|
22
|
-
/******/
|
|
23
|
-
/******/
|
|
24
|
-
/******/
|
|
25
|
-
/******/
|
|
26
|
-
/******/
|
|
27
|
-
/******/
|
|
28
|
-
/******/
|
|
29
|
-
/******/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/******/
|
|
34
|
-
/******/
|
|
35
|
-
/******/
|
|
36
|
-
/******/
|
|
37
|
-
/******/
|
|
38
|
-
/******/
|
|
39
|
-
/******/
|
|
40
|
-
/******/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/******/
|
|
44
|
-
/******/
|
|
45
|
-
/******/
|
|
46
|
-
/******/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
function
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
var
|
|
143
|
-
var
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
var
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
function
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
function
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
1
|
+
/******/ (() => {
|
|
2
|
+
// webpackBootstrap
|
|
3
|
+
/******/ "use strict";
|
|
4
|
+
/******/ // The require scope
|
|
5
|
+
/******/ var e = {};
|
|
6
|
+
/******/
|
|
7
|
+
/************************************************************************/
|
|
8
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
9
|
+
/******/ (() => {
|
|
10
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
11
|
+
/******/ e.n = n => {
|
|
12
|
+
/******/ var r = n && n.__esModule ?
|
|
13
|
+
/******/ () => n["default"]
|
|
14
|
+
/******/ : () => n
|
|
15
|
+
/******/;
|
|
16
|
+
e.d(r, {
|
|
17
|
+
a: r
|
|
18
|
+
});
|
|
19
|
+
/******/ return r;
|
|
20
|
+
/******/ };
|
|
21
|
+
/******/ })();
|
|
22
|
+
/******/
|
|
23
|
+
/******/ /* webpack/runtime/define property getters */
|
|
24
|
+
/******/ (() => {
|
|
25
|
+
/******/ // define getter functions for harmony exports
|
|
26
|
+
/******/ e.d = (n, r) => {
|
|
27
|
+
/******/ for (var t in r) {
|
|
28
|
+
/******/ if (e.o(r, t) && !e.o(n, t)) {
|
|
29
|
+
/******/ Object.defineProperty(n, t, {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: r[t]
|
|
32
|
+
});
|
|
33
|
+
/******/ }
|
|
34
|
+
/******/ }
|
|
35
|
+
/******/ };
|
|
36
|
+
/******/ })();
|
|
37
|
+
/******/
|
|
38
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
39
|
+
/******/ (() => {
|
|
40
|
+
/******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
|
|
41
|
+
/******/;
|
|
42
|
+
})();
|
|
43
|
+
/******/
|
|
44
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
45
|
+
/******/ (() => {
|
|
46
|
+
/******/ // define __esModule on exports
|
|
47
|
+
/******/ e.r = e => {
|
|
48
|
+
/******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
|
|
49
|
+
/******/ Object.defineProperty(e, Symbol.toStringTag, {
|
|
50
|
+
value: "Module"
|
|
51
|
+
});
|
|
52
|
+
/******/ }
|
|
53
|
+
/******/ Object.defineProperty(e, "__esModule", {
|
|
54
|
+
value: true
|
|
55
|
+
});
|
|
56
|
+
/******/ };
|
|
57
|
+
/******/ })();
|
|
58
|
+
/******/
|
|
59
|
+
/************************************************************************/ var n = {};
|
|
60
|
+
// ESM COMPAT FLAG
|
|
61
|
+
e.r(n);
|
|
62
|
+
// EXPORTS
|
|
63
|
+
e.d(n, {
|
|
64
|
+
default: () => /* binding */ X
|
|
65
|
+
});
|
|
66
|
+
// CONCATENATED MODULE: external "react-dom"
|
|
67
|
+
const r = require("react-dom");
|
|
68
|
+
// CONCATENATED MODULE: external "react"
|
|
69
|
+
const t = require("react");
|
|
70
|
+
var a = e.n(t);
|
|
71
|
+
// CONCATENATED MODULE: external "scriptjs"
|
|
72
|
+
const i = require("scriptjs");
|
|
73
|
+
var o = e.n(i);
|
|
74
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/Layer"
|
|
75
|
+
const l = require("@splunk/react-ui/Layer");
|
|
76
|
+
// CONCATENATED MODULE: external "@splunk/splunk-utils/url"
|
|
77
|
+
const u = require("@splunk/splunk-utils/url");
|
|
78
|
+
// CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
|
|
79
|
+
const c = require("@splunk/themes/SplunkThemeProvider");
|
|
80
|
+
var d = e.n(c);
|
|
81
|
+
// CONCATENATED MODULE: external "styled-components"
|
|
82
|
+
const p = require("styled-components");
|
|
83
|
+
var s = e.n(p);
|
|
84
|
+
// CONCATENATED MODULE: external "@splunk/themes"
|
|
85
|
+
const v = require("@splunk/themes");
|
|
86
|
+
// CONCATENATED MODULE: ./src/LoadingStyles.js
|
|
87
|
+
function f() {
|
|
88
|
+
var e = k([ "\n animation-name: ", ";\n animation-duration: 1.4s;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n background-color: ", ";\n width: 10px;\n height: 10px;\n border-radius: 5px;\n display: inline-block;\n margin-right: ", ";\n\n &:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n &:nth-child(3) {\n animation-delay: 0.4s;\n }\n" ]);
|
|
89
|
+
f = function n() {
|
|
90
|
+
return e;
|
|
91
|
+
};
|
|
92
|
+
return e;
|
|
93
|
+
}
|
|
94
|
+
function m() {
|
|
95
|
+
var e = k([ "\n color: ", ";\n padding-top: 30vh;\n text-align: center;\n min-height: 400px;\n" ]);
|
|
96
|
+
m = function n() {
|
|
97
|
+
return e;
|
|
98
|
+
};
|
|
99
|
+
return e;
|
|
100
|
+
}
|
|
101
|
+
function h() {
|
|
102
|
+
var e = k([ "\n background-color: ", ";\n min-height: ", "px;\n" ]);
|
|
103
|
+
h = function n() {
|
|
104
|
+
return e;
|
|
105
|
+
};
|
|
106
|
+
return e;
|
|
107
|
+
}
|
|
108
|
+
function b() {
|
|
109
|
+
var e = k([ "\n padding: 0;\n background-color: ", ";\n height: ", "px;\n" ]);
|
|
110
|
+
b = function n() {
|
|
111
|
+
return e;
|
|
112
|
+
};
|
|
113
|
+
return e;
|
|
114
|
+
}
|
|
115
|
+
function y() {
|
|
116
|
+
var e = k([ "\n background-color: ", ";\n position: fixed;\n opacity: 1;\n z-index: 10000;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n" ]);
|
|
117
|
+
y = function n() {
|
|
118
|
+
return e;
|
|
119
|
+
};
|
|
120
|
+
return e;
|
|
121
|
+
}
|
|
122
|
+
function g() {
|
|
123
|
+
var e = k([ "\n 0% {\n opacity: 0.2;\n }\n\n 20% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.2;\n }\n" ]);
|
|
124
|
+
g = function n() {
|
|
125
|
+
return e;
|
|
126
|
+
};
|
|
127
|
+
return e;
|
|
128
|
+
}
|
|
129
|
+
function k(e, n) {
|
|
130
|
+
if (!n) {
|
|
131
|
+
n = e.slice(0);
|
|
132
|
+
}
|
|
133
|
+
return Object.freeze(Object.defineProperties(e, {
|
|
134
|
+
raw: {
|
|
135
|
+
value: Object.freeze(n)
|
|
136
|
+
}
|
|
137
|
+
}));
|
|
138
|
+
}
|
|
139
|
+
var S = 45;
|
|
140
|
+
var j = 34;
|
|
141
|
+
var w = (0, p.keyframes)(g());
|
|
142
|
+
var E = s().div(y(), v.variables.backgroundColorPage);
|
|
143
|
+
var C = s().div(b(), (0, v.pick)({
|
|
144
|
+
prisma: v.variables.backgroundColorSection,
|
|
145
|
+
enterprise: v.variables.gray20
|
|
146
|
+
}), j);
|
|
147
|
+
var B = s().div(h(), (0, v.pick)({
|
|
148
|
+
prisma: v.variables.backgroundColorPopup,
|
|
149
|
+
enterprise: v.variables.gray30
|
|
150
|
+
}), S);
|
|
151
|
+
var x = s().div(m(), v.variables.contentColorInverted);
|
|
152
|
+
var q = s().div(f(), w, v.variables.neutral500, (0, v.pick)({
|
|
153
|
+
prisma: v.variables.spacingMedium,
|
|
154
|
+
enterprise: v.variables.spacingHalf
|
|
155
|
+
}));
|
|
156
|
+
// CONCATENATED MODULE: external "prop-types"
|
|
157
|
+
const O = require("prop-types");
|
|
158
|
+
var A = e.n(O);
|
|
159
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
160
|
+
const P = require("@splunk/react-ui/ScreenReaderContent");
|
|
161
|
+
var F = e.n(P);
|
|
162
|
+
// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
|
|
163
|
+
const _ = require("@splunk/ui-utils/i18n");
|
|
164
|
+
// CONCATENATED MODULE: ./src/Loading.jsx
|
|
165
|
+
var L = {
|
|
166
|
+
hideAppBar: A().bool,
|
|
167
|
+
hideChrome: A().bool,
|
|
168
|
+
hideSplunkBar: A().bool,
|
|
169
|
+
AppBarFallback: A().elementType,
|
|
170
|
+
SplunkBarFallback: A().elementType
|
|
171
|
+
};
|
|
172
|
+
var T = {
|
|
173
|
+
hideAppBar: false,
|
|
174
|
+
hideChrome: false,
|
|
175
|
+
hideSplunkBar: false,
|
|
176
|
+
AppBarFallback: B,
|
|
177
|
+
SplunkBarFallback: C
|
|
178
|
+
};
|
|
179
|
+
function H(e) {
|
|
180
|
+
var n = e.hideAppBar, r = e.hideChrome, t = e.hideSplunkBar, i = e.SplunkBarFallback, o = e.AppBarFallback;
|
|
181
|
+
|
|
182
|
+
return a().createElement(E, null, !r && !t && a().createElement(i, null), !r && !n && a().createElement(o, null), a().createElement(x, null, a().createElement(q, null), a().createElement(q, null), a().createElement(q, null), a().createElement(F(), null, (0,
|
|
183
|
+
_._)("Loading"))));
|
|
184
|
+
}
|
|
185
|
+
H.propTypes = L;
|
|
186
|
+
H.defaultProps = T;
|
|
187
|
+
/* harmony default export */ const M = H;
|
|
188
|
+
// CONCATENATED MODULE: ./src/baseLayout.jsx
|
|
189
|
+
function z(e, n) {
|
|
190
|
+
if (e == null) return {};
|
|
191
|
+
var r = G(e, n);
|
|
192
|
+
var t, a;
|
|
193
|
+
if (Object.getOwnPropertySymbols) {
|
|
194
|
+
var i = Object.getOwnPropertySymbols(e);
|
|
195
|
+
for (a = 0; a < i.length; a++) {
|
|
196
|
+
t = i[a];
|
|
197
|
+
if (n.indexOf(t) >= 0) continue;
|
|
198
|
+
if (!Object.prototype.propertyIsEnumerable.call(e, t)) continue;
|
|
199
|
+
r[t] = e[t];
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
return r;
|
|
203
|
+
}
|
|
204
|
+
function G(e, n) {
|
|
205
|
+
if (e == null) return {};
|
|
206
|
+
var r = {};
|
|
207
|
+
var t = Object.keys(e);
|
|
208
|
+
var a, i;
|
|
209
|
+
for (i = 0; i < t.length; i++) {
|
|
210
|
+
a = t[i];
|
|
211
|
+
if (n.indexOf(a) >= 0) continue;
|
|
212
|
+
r[a] = e[a];
|
|
213
|
+
}
|
|
214
|
+
return r;
|
|
215
|
+
}
|
|
216
|
+
var I = "build/api/layout.js";
|
|
217
|
+
var R = "build/api/layout-dark.js";
|
|
218
|
+
var U = 'header[data-view="splunkjs/mvc/headerview"]';
|
|
219
|
+
/**
|
|
217
220
|
* Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
|
|
218
221
|
*
|
|
219
222
|
* @param {Function} callback - A callback invoked with the layout module once resolved.
|
|
220
223
|
* @param {object} [options]
|
|
221
224
|
* @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
|
|
222
225
|
* @private
|
|
223
|
-
*/
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
} else {
|
|
242
|
-
throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
|
|
226
|
+
*/ function N(e, n) {
|
|
227
|
+
var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, t = r.loader, a = t === void 0 ? "scriptjs" : t;
|
|
228
|
+
var i = e === "dark" ? R : I;
|
|
229
|
+
var l = (0, u.createStaticURL)(i);
|
|
230
|
+
if (a === "scriptjs") {
|
|
231
|
+
o()(l, (function() {
|
|
232
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
233
|
+
n(window.__splunk_layout__);
|
|
234
|
+
}));
|
|
235
|
+
} else if (a === "requirejs") {
|
|
236
|
+
if (window.requirejs) {
|
|
237
|
+
window.requirejs([ l ], n);
|
|
238
|
+
} else {
|
|
239
|
+
throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
|
|
240
|
+
}
|
|
241
|
+
} else {
|
|
242
|
+
throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
|
|
243
|
+
}
|
|
243
244
|
}
|
|
244
|
-
|
|
245
|
-
throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
/**
|
|
245
|
+
/**
|
|
249
246
|
* Computes the background css of the header container during lazy loading
|
|
250
247
|
*
|
|
251
248
|
* @param {HTMLDivElement} headerContainer
|
|
252
249
|
* @param {object} [options]
|
|
253
250
|
* @private
|
|
254
|
-
*/
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
var heightRatio = Math.round(firstFallbackHeight / headerHeight * 100);
|
|
271
|
-
return "linear-gradient(\n ".concat(firstFallbackColor, " 0%,\n ").concat(firstFallbackColor, " ").concat(heightRatio, "%,\n ").concat(secondFallbackColor, " ").concat(heightRatio, "%,\n ").concat(secondFallbackColor, " 100%\n )");
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
return firstFallbackColor;
|
|
275
|
-
}
|
|
276
|
-
/**
|
|
251
|
+
*/ function D(e) {
|
|
252
|
+
var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
253
|
+
var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
|
|
254
|
+
var i = e.children[0];
|
|
255
|
+
var o = i && getComputedStyle(i).backgroundColor;
|
|
256
|
+
if (!(r || t)) {
|
|
257
|
+
// compute background color to be same as both fallback components
|
|
258
|
+
var l = i === null || i === void 0 ? void 0 : i.offsetHeight;
|
|
259
|
+
var u = e.children[1];
|
|
260
|
+
var c = u && getComputedStyle(u).backgroundColor;
|
|
261
|
+
var d = Math.round(l / a * 100);
|
|
262
|
+
return "linear-gradient(\n ".concat(o, " 0%,\n ").concat(o, " ").concat(d, "%,\n ").concat(c, " ").concat(d, "%,\n ").concat(c, " 100%\n )");
|
|
263
|
+
}
|
|
264
|
+
return o;
|
|
265
|
+
}
|
|
266
|
+
/**
|
|
277
267
|
* renders body element and attaches it to container node in DOM
|
|
278
268
|
*
|
|
279
269
|
* @param {element} element
|
|
@@ -282,16 +272,13 @@ function getHeaderBackground(headerContainer) {
|
|
|
282
272
|
* @param {boolean} useGlobalLayerStack
|
|
283
273
|
* @param {object} splunkTheme
|
|
284
274
|
* @private
|
|
285
|
-
*/
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
return render(wrappedElement, container);
|
|
293
|
-
}
|
|
294
|
-
/**
|
|
275
|
+
*/ function J(e, n, r) {
|
|
276
|
+
var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
277
|
+
var i = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
278
|
+
var o = t ? a().createElement(l.LayerStackGlobalProvider, null, a().createElement(d(), i, e)) : a().createElement(d(), i, e);
|
|
279
|
+
return n(o, r);
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
295
282
|
* Renders a React element into the Layout API.
|
|
296
283
|
* @public
|
|
297
284
|
* @param {element} element - A React element.
|
|
@@ -315,144 +302,111 @@ function renderBody(element, render, container) {
|
|
|
315
302
|
* @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
|
|
316
303
|
* @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
|
|
317
304
|
* @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
|
|
318
|
-
*/
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
var _ref2$useGlobalLayerS = _ref2.useGlobalLayerStack,
|
|
325
|
-
useGlobalLayerStack = _ref2$useGlobalLayerS === void 0 ? true : _ref2$useGlobalLayerS,
|
|
326
|
-
pageTitle = _ref2.pageTitle,
|
|
327
|
-
_ref2$theme = _ref2.theme,
|
|
328
|
-
theme = _ref2$theme === void 0 ? 'light' : _ref2$theme,
|
|
329
|
-
_ref2$loader = _ref2.loader,
|
|
330
|
-
loader = _ref2$loader === void 0 ? 'scriptjs' : _ref2$loader,
|
|
331
|
-
layoutAPIOptions = _objectWithoutProperties(_ref2, ["useGlobalLayerStack", "pageTitle", "theme", "loader"]);
|
|
332
|
-
|
|
333
|
-
if (pageTitle) {
|
|
334
|
-
document.title = pageTitle;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
var hideChrome = layoutAPIOptions.hideChrome,
|
|
338
|
-
hideAppBar = layoutAPIOptions.hideAppBar,
|
|
339
|
-
hideSplunkBar = layoutAPIOptions.hideSplunkBar,
|
|
340
|
-
_layoutAPIOptions$Spl = layoutAPIOptions.SplunkBarFallback,
|
|
341
|
-
SplunkBarFallback = _layoutAPIOptions$Spl === void 0 ? SplunkBar : _layoutAPIOptions$Spl,
|
|
342
|
-
_layoutAPIOptions$App = layoutAPIOptions.AppBarFallback,
|
|
343
|
-
AppBarFallback = _layoutAPIOptions$App === void 0 ? AppBar : _layoutAPIOptions$App,
|
|
344
|
-
_layoutAPIOptions$laz = layoutAPIOptions.lazyLoadLayout,
|
|
345
|
-
lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz,
|
|
346
|
-
onLayoutComplete = layoutAPIOptions.onLayoutComplete;
|
|
347
|
-
var bodyContainer = document.createElement('div');
|
|
348
|
-
var headerContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
|
|
349
|
-
|
|
350
|
-
var colorScheme = theme === 'light' || theme === 'enterprise' ? 'light' : 'dark';
|
|
351
|
-
var splunkTheme = {
|
|
352
|
-
family: 'enterprise',
|
|
353
|
-
colorScheme: colorScheme,
|
|
354
|
-
density: 'comfortable'
|
|
355
|
-
};
|
|
356
|
-
var bodyRoot;
|
|
357
|
-
var headerRoot;
|
|
358
|
-
|
|
359
|
-
if (lazyLoadLayout) {
|
|
360
|
-
// render the React app immediately without waiting for layout API
|
|
361
|
-
if (!hideChrome) {
|
|
362
|
-
document.body.appendChild(headerContainer);
|
|
363
|
-
headerRoot = render( /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, !hideSplunkBar && /*#__PURE__*/external_react_default().createElement(SplunkBarFallback, null), !hideAppBar && /*#__PURE__*/external_react_default().createElement(AppBarFallback, null)), headerContainer); // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
|
|
364
|
-
|
|
365
|
-
var headerHeight = headerContainer.offsetHeight;
|
|
366
|
-
var headerBackground = getHeaderBackground(headerContainer, {
|
|
367
|
-
hideSplunkBar: hideSplunkBar,
|
|
368
|
-
hideAppBar: hideAppBar,
|
|
369
|
-
headerHeight: headerHeight,
|
|
370
|
-
AppBarFallback: AppBarFallback,
|
|
371
|
-
SplunkBarFallback: SplunkBarFallback
|
|
372
|
-
});
|
|
373
|
-
headerContainer.style.height = "".concat(headerHeight, "px");
|
|
374
|
-
headerContainer.style.background = "".concat(headerBackground);
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
document.body.appendChild(bodyContainer);
|
|
378
|
-
bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
|
|
379
|
-
} else {
|
|
380
|
-
document.body.appendChild(bodyContainer);
|
|
381
|
-
bodyRoot = render( /*#__PURE__*/external_react_default().createElement((SplunkThemeProvider_default()), splunkTheme, /*#__PURE__*/external_react_default().createElement(src_Loading, layoutAPIOptions)), bodyContainer);
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
getLayoutApi(theme, function (layoutApi) {
|
|
385
|
-
var containerEl;
|
|
386
|
-
|
|
387
|
-
if (layoutApi) {
|
|
388
|
-
containerEl = layoutApi.create(layoutAPIOptions).getContainerElement();
|
|
389
|
-
|
|
390
|
-
if (layoutAPIOptions.layout === 'fixed') {
|
|
391
|
-
// the above create method adds flex: 1 0 0
|
|
392
|
-
// IE 11 disregards 0px shorthand for flex-basis component.
|
|
393
|
-
// flex-basis 0% is better than 0px because css minification can remove px
|
|
394
|
-
if (!containerEl.style.flex || containerEl.style.flex === '1 0 0px') {
|
|
395
|
-
containerEl.style.flex = '1 0 0%';
|
|
396
|
-
} // all elements in the hierarchy must have 'overflow: hidden' for children
|
|
397
|
-
// to support scrolling correctly.
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
if (!containerEl.style.overflow) {
|
|
401
|
-
containerEl.style.overflow = 'hidden';
|
|
402
|
-
} // splunk hijacks the width of the body when printing, so we have to force width to the size
|
|
403
|
-
// of the viewport so that things print at the correct width
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
if (!containerEl.style.width) {
|
|
407
|
-
containerEl.style.width = '100vw';
|
|
305
|
+
*/ function K(e, n) {
|
|
306
|
+
var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
307
|
+
var t = r.useGlobalLayerStack, i = t === void 0 ? true : t, o = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.loader, p = c === void 0 ? "scriptjs" : c, s = z(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
|
|
308
|
+
if (o) {
|
|
309
|
+
document.title = o;
|
|
408
310
|
}
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
311
|
+
var v = s.hideChrome, f = s.hideAppBar, m = s.hideSplunkBar, h = s.SplunkBarFallback, b = h === void 0 ? C : h, y = s.AppBarFallback, g = y === void 0 ? B : y, k = s.lazyLoadLayout, w = k === void 0 ? false : k, E = s.onLayoutComplete;
|
|
312
|
+
var x = document.createElement("div");
|
|
313
|
+
var q = document.createElement("div");
|
|
314
|
+
// The "theme" in enterprise used to be "enterprise" instead of "light"...
|
|
315
|
+
var O = u === "light" || u === "enterprise" ? "light" : "dark";
|
|
316
|
+
var A = {
|
|
317
|
+
family: "enterprise",
|
|
318
|
+
colorScheme: O,
|
|
319
|
+
density: "comfortable"
|
|
320
|
+
};
|
|
321
|
+
var P;
|
|
322
|
+
var F;
|
|
323
|
+
if (w) {
|
|
324
|
+
// render the React app immediately without waiting for layout API
|
|
325
|
+
if (!v) {
|
|
326
|
+
document.body.appendChild(q);
|
|
327
|
+
F = n( a().createElement(a().Fragment, null, !m && a().createElement(b, null), !f && a().createElement(g, null)), q);
|
|
328
|
+
// explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
|
|
329
|
+
var _ = q.offsetHeight;
|
|
330
|
+
var L = D(q, {
|
|
331
|
+
hideSplunkBar: m,
|
|
332
|
+
hideAppBar: f,
|
|
333
|
+
headerHeight: _,
|
|
334
|
+
AppBarFallback: g,
|
|
335
|
+
SplunkBarFallback: b
|
|
336
|
+
});
|
|
337
|
+
q.style.height = "".concat(_, "px");
|
|
338
|
+
q.style.background = "".concat(L);
|
|
339
|
+
}
|
|
340
|
+
document.body.appendChild(x);
|
|
341
|
+
P = J(e, n, x, i, A);
|
|
342
|
+
} else {
|
|
343
|
+
document.body.appendChild(x);
|
|
344
|
+
P = n( a().createElement(d(), A, a().createElement(M, s)), x);
|
|
345
|
+
}
|
|
346
|
+
N(u, (function(r) {
|
|
347
|
+
var t;
|
|
348
|
+
if (r) {
|
|
349
|
+
t = r.create(s).getContainerElement();
|
|
350
|
+
if (s.layout === "fixed") {
|
|
351
|
+
// the above create method adds flex: 1 0 0
|
|
352
|
+
// IE 11 disregards 0px shorthand for flex-basis component.
|
|
353
|
+
// flex-basis 0% is better than 0px because css minification can remove px
|
|
354
|
+
if (!t.style.flex || t.style.flex === "1 0 0px") {
|
|
355
|
+
t.style.flex = "1 0 0%";
|
|
356
|
+
}
|
|
357
|
+
// all elements in the hierarchy must have 'overflow: hidden' for children
|
|
358
|
+
// to support scrolling correctly.
|
|
359
|
+
if (!t.style.overflow) {
|
|
360
|
+
t.style.overflow = "hidden";
|
|
361
|
+
}
|
|
362
|
+
// splunk hijacks the width of the body when printing, so we have to force width to the size
|
|
363
|
+
// of the viewport so that things print at the correct width
|
|
364
|
+
if (!t.style.width) {
|
|
365
|
+
t.style.width = "100vw";
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
} else {
|
|
369
|
+
// eslint-disable-next-line no-console
|
|
370
|
+
console.error("Unable to load layout.");
|
|
371
|
+
t = document.createElement("div");
|
|
372
|
+
document.body.appendChild(t);
|
|
373
|
+
}
|
|
374
|
+
if (w) {
|
|
375
|
+
if (!v) {
|
|
376
|
+
// replace placeholder nav bar with real nav bar
|
|
377
|
+
F.unmount(q);
|
|
378
|
+
var a = document.querySelector(U);
|
|
379
|
+
var o = (!v && !m ? j : 0) + (!v && !f ? S : 0);
|
|
380
|
+
// set a min-height for basic nav bar components and auto height for any additional components like global banner
|
|
381
|
+
q.style.minHeight = "".concat(o, "px");
|
|
382
|
+
q.style.height = "auto";
|
|
383
|
+
q.appendChild(a);
|
|
384
|
+
}
|
|
385
|
+
t.appendChild(x);
|
|
386
|
+
E === null || E === void 0 ? void 0 : E();
|
|
387
|
+
} else {
|
|
388
|
+
setTimeout((function() {
|
|
389
|
+
P.unmount(x);
|
|
390
|
+
P = J(e, n, x, i, A);
|
|
391
|
+
t.appendChild(x);
|
|
392
|
+
E === null || E === void 0 ? void 0 : E();
|
|
393
|
+
}), 30);
|
|
394
|
+
}
|
|
395
|
+
}), {
|
|
396
|
+
loader: p
|
|
397
|
+
});
|
|
452
398
|
}
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
399
|
+
/* harmony default export */ const Q = K;
|
|
400
|
+
// CONCATENATED MODULE: ./src/index.jsx
|
|
401
|
+
var V = function e(n, t) {
|
|
402
|
+
(0, r.render)(n, t);
|
|
403
|
+
return {
|
|
404
|
+
unmount: function e() {
|
|
405
|
+
return (0, r.unmountComponentAtNode)(t);
|
|
406
|
+
}
|
|
407
|
+
};
|
|
408
|
+
};
|
|
409
|
+
/**
|
|
456
410
|
* Renders a React element into the Layout API.
|
|
457
411
|
* @public
|
|
458
412
|
* @param {element} element - A React element.
|
|
@@ -475,14 +429,9 @@ var renderShim = function renderShim(elementToRender, container) {
|
|
|
475
429
|
* @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
|
|
476
430
|
* @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
|
|
477
431
|
* @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
|
|
478
|
-
*/
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
/* harmony default export */ const src = (src_layout);
|
|
486
|
-
module.exports = __webpack_exports__;
|
|
487
|
-
/******/ })()
|
|
488
|
-
;
|
|
432
|
+
*/ function W(e, n) {
|
|
433
|
+
Q(e, V, n);
|
|
434
|
+
}
|
|
435
|
+
/* harmony default export */ const X = W;
|
|
436
|
+
module.exports = n;
|
|
437
|
+
/******/})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@splunk/react-page",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.3",
|
|
4
4
|
"description": "Load React components into the latest layout from Splunk Enterprise",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"test:cypress:ci": "node src/tests/run-cypress-tests.js"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@splunk/react-ui": "^4.
|
|
25
|
+
"@splunk/react-ui": "^4.22.0",
|
|
26
26
|
"@splunk/splunk-utils": "^2.3.4",
|
|
27
|
-
"@splunk/themes": "^0.16.
|
|
27
|
+
"@splunk/themes": "^0.16.3",
|
|
28
28
|
"@splunk/ui-utils": "^1.6.0",
|
|
29
29
|
"prop-types": "^15.6.2",
|
|
30
30
|
"scriptjs": "^2.5.8"
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@splunk/babel-preset": "^4.0.0",
|
|
35
35
|
"@splunk/eslint-config": "^4.0.0",
|
|
36
36
|
"@splunk/stylelint-config": "^4.0.0",
|
|
37
|
-
"@splunk/webpack-configs": "^7.0.
|
|
37
|
+
"@splunk/webpack-configs": "^7.0.2",
|
|
38
38
|
"babel-eslint": "^10.1.0",
|
|
39
39
|
"babel-loader": "^8.3.0",
|
|
40
40
|
"babel-plugin-transform-imports": "^2.0.0",
|
|
@@ -64,6 +64,6 @@
|
|
|
64
64
|
"styled-components": "^5.3.10"
|
|
65
65
|
},
|
|
66
66
|
"engines": {
|
|
67
|
-
"node": ">=
|
|
67
|
+
"node": ">=14"
|
|
68
68
|
}
|
|
69
69
|
}
|