@backstage/core-components 0.10.0 → 0.10.1-next.0
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 +7 -0
- package/dist/esm/{RealLogViewer-5b0c3451.esm.js → RealLogViewer-22a2ee94.esm.js} +182 -148
- package/dist/esm/{RealLogViewer-5b0c3451.esm.js.map → RealLogViewer-22a2ee94.esm.js.map} +1 -1
- package/dist/index.esm.js +2163 -1703
- package/dist/index.esm.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -20,33 +20,37 @@ import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
|
|
|
20
20
|
|
|
21
21
|
const ansiRegex = ansiRegexMaker();
|
|
22
22
|
const newlineRegex = /\n\r?/g;
|
|
23
|
-
const codeModifiers = Object.fromEntries(
|
|
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
|
-
|
|
23
|
+
const codeModifiers = Object.fromEntries(
|
|
24
|
+
Object.entries({
|
|
25
|
+
1: (m) => ({ ...m, bold: true }),
|
|
26
|
+
3: (m) => ({ ...m, italic: true }),
|
|
27
|
+
4: (m) => ({ ...m, underline: true }),
|
|
28
|
+
22: ({ bold: _, ...m }) => m,
|
|
29
|
+
23: ({ italic: _, ...m }) => m,
|
|
30
|
+
24: ({ underline: _, ...m }) => m,
|
|
31
|
+
30: (m) => ({ ...m, foreground: "black" }),
|
|
32
|
+
31: (m) => ({ ...m, foreground: "red" }),
|
|
33
|
+
32: (m) => ({ ...m, foreground: "green" }),
|
|
34
|
+
33: (m) => ({ ...m, foreground: "yellow" }),
|
|
35
|
+
34: (m) => ({ ...m, foreground: "blue" }),
|
|
36
|
+
35: (m) => ({ ...m, foreground: "magenta" }),
|
|
37
|
+
36: (m) => ({ ...m, foreground: "cyan" }),
|
|
38
|
+
37: (m) => ({ ...m, foreground: "white" }),
|
|
39
|
+
39: ({ foreground: _, ...m }) => m,
|
|
40
|
+
90: (m) => ({ ...m, foreground: "grey" }),
|
|
41
|
+
40: (m) => ({ ...m, background: "black" }),
|
|
42
|
+
41: (m) => ({ ...m, background: "red" }),
|
|
43
|
+
42: (m) => ({ ...m, background: "green" }),
|
|
44
|
+
43: (m) => ({ ...m, background: "yellow" }),
|
|
45
|
+
44: (m) => ({ ...m, background: "blue" }),
|
|
46
|
+
45: (m) => ({ ...m, background: "magenta" }),
|
|
47
|
+
46: (m) => ({ ...m, background: "cyan" }),
|
|
48
|
+
47: (m) => ({ ...m, background: "white" }),
|
|
49
|
+
49: ({ background: _, ...m }) => m
|
|
50
|
+
}).map(
|
|
51
|
+
([code, modifier]) => [`\x1B[${code}m`, modifier]
|
|
52
|
+
)
|
|
53
|
+
);
|
|
50
54
|
class AnsiLine {
|
|
51
55
|
constructor(lineNumber = 1, chunks = []) {
|
|
52
56
|
this.lineNumber = lineNumber;
|
|
@@ -77,7 +81,10 @@ class AnsiProcessor {
|
|
|
77
81
|
for (; ; ) {
|
|
78
82
|
const match = newlineRegex.exec(text);
|
|
79
83
|
if (!match) {
|
|
80
|
-
const chunks2 = this.processText(
|
|
84
|
+
const chunks2 = this.processText(
|
|
85
|
+
text.slice(prevIndex),
|
|
86
|
+
currentModifiers
|
|
87
|
+
);
|
|
81
88
|
lines.push(new AnsiLine(currentLineNumber, chunks2));
|
|
82
89
|
return lines;
|
|
83
90
|
}
|
|
@@ -123,7 +130,11 @@ class AnsiProcessor {
|
|
|
123
130
|
const lastLineIndex = this.lines.length > 0 ? this.lines.length - 1 : 0;
|
|
124
131
|
const lastLine = (_a = this.lines[lastLineIndex]) != null ? _a : new AnsiLine();
|
|
125
132
|
const lastChunk = lastLine.lastChunk();
|
|
126
|
-
const newLines = this.processLines(
|
|
133
|
+
const newLines = this.processLines(
|
|
134
|
+
((_b = lastChunk == null ? void 0 : lastChunk.text) != null ? _b : "") + text.slice(this.text.length),
|
|
135
|
+
lastChunk == null ? void 0 : lastChunk.modifiers,
|
|
136
|
+
lastLine == null ? void 0 : lastLine.lineNumber
|
|
137
|
+
);
|
|
127
138
|
lastLine.replaceLastChunk((_c = newLines[0]) == null ? void 0 : _c.chunks);
|
|
128
139
|
this.lines[lastLineIndex] = lastLine;
|
|
129
140
|
this.lines.push(...newLines.slice(1));
|
|
@@ -136,115 +147,118 @@ class AnsiProcessor {
|
|
|
136
147
|
}
|
|
137
148
|
|
|
138
149
|
const HEADER_SIZE = 40;
|
|
139
|
-
const useStyles = makeStyles(
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
150
|
+
const useStyles = makeStyles(
|
|
151
|
+
(theme) => ({
|
|
152
|
+
root: {
|
|
153
|
+
background: theme.palette.background.paper
|
|
154
|
+
},
|
|
155
|
+
header: {
|
|
156
|
+
height: HEADER_SIZE,
|
|
157
|
+
display: "flex",
|
|
158
|
+
alignItems: "center",
|
|
159
|
+
justifyContent: "flex-end"
|
|
160
|
+
},
|
|
161
|
+
log: {
|
|
162
|
+
fontFamily: '"Monaco", monospace',
|
|
163
|
+
fontSize: theme.typography.pxToRem(12)
|
|
164
|
+
},
|
|
165
|
+
line: {
|
|
166
|
+
position: "relative",
|
|
167
|
+
whiteSpace: "pre",
|
|
168
|
+
"&:hover": {
|
|
169
|
+
background: theme.palette.action.hover
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
lineSelected: {
|
|
173
|
+
background: theme.palette.action.selected,
|
|
174
|
+
"&:hover": {
|
|
175
|
+
background: theme.palette.action.selected
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
lineCopyButton: {
|
|
179
|
+
position: "absolute",
|
|
180
|
+
paddingTop: 0,
|
|
181
|
+
paddingBottom: 0
|
|
182
|
+
},
|
|
183
|
+
lineNumber: {
|
|
184
|
+
display: "inline-block",
|
|
185
|
+
textAlign: "end",
|
|
186
|
+
width: 60,
|
|
187
|
+
marginRight: theme.spacing(1),
|
|
188
|
+
cursor: "pointer"
|
|
189
|
+
},
|
|
190
|
+
textHighlight: {
|
|
191
|
+
background: alpha(theme.palette.info.main, 0.15)
|
|
192
|
+
},
|
|
193
|
+
textSelectedHighlight: {
|
|
194
|
+
background: alpha(theme.palette.info.main, 0.4)
|
|
195
|
+
},
|
|
196
|
+
modifierBold: {
|
|
197
|
+
fontWeight: theme.typography.fontWeightBold
|
|
198
|
+
},
|
|
199
|
+
modifierItalic: {
|
|
200
|
+
fontStyle: "italic"
|
|
201
|
+
},
|
|
202
|
+
modifierUnderline: {
|
|
203
|
+
textDecoration: "underline"
|
|
204
|
+
},
|
|
205
|
+
modifierForegroundBlack: {
|
|
206
|
+
color: colors.common.black
|
|
207
|
+
},
|
|
208
|
+
modifierForegroundRed: {
|
|
209
|
+
color: colors.red[500]
|
|
210
|
+
},
|
|
211
|
+
modifierForegroundGreen: {
|
|
212
|
+
color: colors.green[500]
|
|
213
|
+
},
|
|
214
|
+
modifierForegroundYellow: {
|
|
215
|
+
color: colors.yellow[500]
|
|
216
|
+
},
|
|
217
|
+
modifierForegroundBlue: {
|
|
218
|
+
color: colors.blue[500]
|
|
219
|
+
},
|
|
220
|
+
modifierForegroundMagenta: {
|
|
221
|
+
color: colors.purple[500]
|
|
222
|
+
},
|
|
223
|
+
modifierForegroundCyan: {
|
|
224
|
+
color: colors.cyan[500]
|
|
225
|
+
},
|
|
226
|
+
modifierForegroundWhite: {
|
|
227
|
+
color: colors.common.white
|
|
228
|
+
},
|
|
229
|
+
modifierForegroundGrey: {
|
|
230
|
+
color: colors.grey[500]
|
|
231
|
+
},
|
|
232
|
+
modifierBackgroundBlack: {
|
|
233
|
+
background: colors.common.black
|
|
234
|
+
},
|
|
235
|
+
modifierBackgroundRed: {
|
|
236
|
+
background: colors.red[500]
|
|
237
|
+
},
|
|
238
|
+
modifierBackgroundGreen: {
|
|
239
|
+
background: colors.green[500]
|
|
240
|
+
},
|
|
241
|
+
modifierBackgroundYellow: {
|
|
242
|
+
background: colors.yellow[500]
|
|
243
|
+
},
|
|
244
|
+
modifierBackgroundBlue: {
|
|
245
|
+
background: colors.blue[500]
|
|
246
|
+
},
|
|
247
|
+
modifierBackgroundMagenta: {
|
|
248
|
+
background: colors.purple[500]
|
|
249
|
+
},
|
|
250
|
+
modifierBackgroundCyan: {
|
|
251
|
+
background: colors.cyan[500]
|
|
252
|
+
},
|
|
253
|
+
modifierBackgroundWhite: {
|
|
254
|
+
background: colors.common.white
|
|
255
|
+
},
|
|
256
|
+
modifierBackgroundGrey: {
|
|
257
|
+
background: colors.grey[500]
|
|
164
258
|
}
|
|
165
|
-
},
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
paddingTop: 0,
|
|
169
|
-
paddingBottom: 0
|
|
170
|
-
},
|
|
171
|
-
lineNumber: {
|
|
172
|
-
display: "inline-block",
|
|
173
|
-
textAlign: "end",
|
|
174
|
-
width: 60,
|
|
175
|
-
marginRight: theme.spacing(1),
|
|
176
|
-
cursor: "pointer"
|
|
177
|
-
},
|
|
178
|
-
textHighlight: {
|
|
179
|
-
background: alpha(theme.palette.info.main, 0.15)
|
|
180
|
-
},
|
|
181
|
-
textSelectedHighlight: {
|
|
182
|
-
background: alpha(theme.palette.info.main, 0.4)
|
|
183
|
-
},
|
|
184
|
-
modifierBold: {
|
|
185
|
-
fontWeight: theme.typography.fontWeightBold
|
|
186
|
-
},
|
|
187
|
-
modifierItalic: {
|
|
188
|
-
fontStyle: "italic"
|
|
189
|
-
},
|
|
190
|
-
modifierUnderline: {
|
|
191
|
-
textDecoration: "underline"
|
|
192
|
-
},
|
|
193
|
-
modifierForegroundBlack: {
|
|
194
|
-
color: colors.common.black
|
|
195
|
-
},
|
|
196
|
-
modifierForegroundRed: {
|
|
197
|
-
color: colors.red[500]
|
|
198
|
-
},
|
|
199
|
-
modifierForegroundGreen: {
|
|
200
|
-
color: colors.green[500]
|
|
201
|
-
},
|
|
202
|
-
modifierForegroundYellow: {
|
|
203
|
-
color: colors.yellow[500]
|
|
204
|
-
},
|
|
205
|
-
modifierForegroundBlue: {
|
|
206
|
-
color: colors.blue[500]
|
|
207
|
-
},
|
|
208
|
-
modifierForegroundMagenta: {
|
|
209
|
-
color: colors.purple[500]
|
|
210
|
-
},
|
|
211
|
-
modifierForegroundCyan: {
|
|
212
|
-
color: colors.cyan[500]
|
|
213
|
-
},
|
|
214
|
-
modifierForegroundWhite: {
|
|
215
|
-
color: colors.common.white
|
|
216
|
-
},
|
|
217
|
-
modifierForegroundGrey: {
|
|
218
|
-
color: colors.grey[500]
|
|
219
|
-
},
|
|
220
|
-
modifierBackgroundBlack: {
|
|
221
|
-
background: colors.common.black
|
|
222
|
-
},
|
|
223
|
-
modifierBackgroundRed: {
|
|
224
|
-
background: colors.red[500]
|
|
225
|
-
},
|
|
226
|
-
modifierBackgroundGreen: {
|
|
227
|
-
background: colors.green[500]
|
|
228
|
-
},
|
|
229
|
-
modifierBackgroundYellow: {
|
|
230
|
-
background: colors.yellow[500]
|
|
231
|
-
},
|
|
232
|
-
modifierBackgroundBlue: {
|
|
233
|
-
background: colors.blue[500]
|
|
234
|
-
},
|
|
235
|
-
modifierBackgroundMagenta: {
|
|
236
|
-
background: colors.purple[500]
|
|
237
|
-
},
|
|
238
|
-
modifierBackgroundCyan: {
|
|
239
|
-
background: colors.cyan[500]
|
|
240
|
-
},
|
|
241
|
-
modifierBackgroundWhite: {
|
|
242
|
-
background: colors.common.white
|
|
243
|
-
},
|
|
244
|
-
modifierBackgroundGrey: {
|
|
245
|
-
background: colors.grey[500]
|
|
246
|
-
}
|
|
247
|
-
}), { name: "BackstageLogViewer" });
|
|
259
|
+
}),
|
|
260
|
+
{ name: "BackstageLogViewer" }
|
|
261
|
+
);
|
|
248
262
|
|
|
249
263
|
function getModifierClasses(classes, modifiers) {
|
|
250
264
|
const classNames = new Array();
|
|
@@ -258,11 +272,15 @@ function getModifierClasses(classes, modifiers) {
|
|
|
258
272
|
classNames.push(classes.modifierUnderline);
|
|
259
273
|
}
|
|
260
274
|
if (modifiers.foreground) {
|
|
261
|
-
const key = `modifierForeground${startCase(
|
|
275
|
+
const key = `modifierForeground${startCase(
|
|
276
|
+
modifiers.foreground
|
|
277
|
+
)}`;
|
|
262
278
|
classNames.push(classes[key]);
|
|
263
279
|
}
|
|
264
280
|
if (modifiers.background) {
|
|
265
|
-
const key = `modifierBackground${startCase(
|
|
281
|
+
const key = `modifierBackground${startCase(
|
|
282
|
+
modifiers.background
|
|
283
|
+
)}`;
|
|
266
284
|
classNames.push(classes[key]);
|
|
267
285
|
}
|
|
268
286
|
return classNames.length > 0 ? classNames.join(" ") : void 0;
|
|
@@ -342,11 +360,20 @@ function LogLine({
|
|
|
342
360
|
searchText,
|
|
343
361
|
highlightResultIndex
|
|
344
362
|
}) {
|
|
345
|
-
const chunks = useMemo(
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
363
|
+
const chunks = useMemo(
|
|
364
|
+
() => calculateHighlightedChunks(line, searchText),
|
|
365
|
+
[line, searchText]
|
|
366
|
+
);
|
|
367
|
+
const elements = useMemo(
|
|
368
|
+
() => chunks.map(({ text, modifiers, highlight }, index) => /* @__PURE__ */ React.createElement("span", {
|
|
369
|
+
key: index,
|
|
370
|
+
className: classNames(
|
|
371
|
+
getModifierClasses(classes, modifiers),
|
|
372
|
+
highlight !== void 0 && (highlight === highlightResultIndex ? classes.textSelectedHighlight : classes.textHighlight)
|
|
373
|
+
)
|
|
374
|
+
}, text)),
|
|
375
|
+
[chunks, highlightResultIndex, classes]
|
|
376
|
+
);
|
|
350
377
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, elements);
|
|
351
378
|
}
|
|
352
379
|
|
|
@@ -421,7 +448,10 @@ function useLogViewerSearch(lines) {
|
|
|
421
448
|
const searchText = searchInput.toLocaleLowerCase("en-US");
|
|
422
449
|
const [resultIndex, setResultIndex] = useState(0);
|
|
423
450
|
const [shouldFilter, toggleShouldFilter] = useToggle(false);
|
|
424
|
-
const filter = useMemo(
|
|
451
|
+
const filter = useMemo(
|
|
452
|
+
() => applySearchFilter(lines, searchText),
|
|
453
|
+
[lines, searchText]
|
|
454
|
+
);
|
|
425
455
|
const searchResult = filter.results ? filter.results[Math.min(resultIndex, filter.results.length - 1)] : void 0;
|
|
426
456
|
const resultCount = (_a = filter.results) == null ? void 0 : _a.length;
|
|
427
457
|
const resultIndexStep = (decrement) => {
|
|
@@ -475,9 +505,13 @@ function useLogViewerSelection(lines) {
|
|
|
475
505
|
},
|
|
476
506
|
setSelection(line, add) {
|
|
477
507
|
if (add) {
|
|
478
|
-
setSelection(
|
|
508
|
+
setSelection(
|
|
509
|
+
(s) => s ? { start: s.start, end: line } : { start: line, end: line }
|
|
510
|
+
);
|
|
479
511
|
} else {
|
|
480
|
-
setSelection(
|
|
512
|
+
setSelection(
|
|
513
|
+
(s) => (s == null ? void 0 : s.start) === line && (s == null ? void 0 : s.end) === line ? void 0 : { start: line, end: line }
|
|
514
|
+
);
|
|
481
515
|
}
|
|
482
516
|
},
|
|
483
517
|
copySelection() {
|
|
@@ -559,4 +593,4 @@ function RealLogViewer(props) {
|
|
|
559
593
|
}
|
|
560
594
|
|
|
561
595
|
export { RealLogViewer };
|
|
562
|
-
//# sourceMappingURL=RealLogViewer-
|
|
596
|
+
//# sourceMappingURL=RealLogViewer-22a2ee94.esm.js.map
|