Skip to content

Commit

Permalink
loading state, borders, no movement, focus
Browse files Browse the repository at this point in the history
Signed-off-by: Adam Tackett <[email protected]>
  • Loading branch information
Adam Tackett committed Nov 6, 2024
1 parent b4aea70 commit cbd00af
Show file tree
Hide file tree
Showing 8 changed files with 265 additions and 82 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -1841,7 +1843,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -3058,7 +3062,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -4250,7 +4256,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -5535,7 +5543,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -6727,7 +6737,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -7939,7 +7951,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -9092,7 +9106,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -10307,7 +10323,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -11465,7 +11483,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -12714,7 +12734,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -13906,7 +13928,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -15123,7 +15147,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -16315,7 +16341,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -17570,7 +17598,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down Expand Up @@ -18848,7 +18878,9 @@ Object {
>
<legend
class="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
<div
class="euiButtonGroup__buttons"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -705,6 +705,7 @@ exports[`Service Config component renders empty service config 1`] = `
buttonSize="s"
color="text"
idSelected="latency"
legend="Select metric for service map display"
onChange={[Function]}
options={
Array [
Expand All @@ -730,7 +731,9 @@ exports[`Service Config component renders empty service config 1`] = `
<EuiScreenReaderOnly>
<legend
className="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
</EuiScreenReaderOnly>
<div
className="euiButtonGroup__buttons"
Expand Down Expand Up @@ -2048,6 +2051,7 @@ exports[`Service Config component renders with one service selected 1`] = `
buttonSize="s"
color="text"
idSelected="latency"
legend="Select metric for service map display"
onChange={[Function]}
options={
Array [
Expand All @@ -2073,7 +2077,9 @@ exports[`Service Config component renders with one service selected 1`] = `
<EuiScreenReaderOnly>
<legend
className="euiScreenReaderOnly"
/>
>
Select metric for service map display
</legend>
</EuiScreenReaderOnly>
<div
className="euiButtonGroup__buttons"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,12 @@ export function getServiceMapGraph(
const percent = (value - ticks[0]) / (ticks[ticks.length - 1] - ticks[0]);
const color = getServiceMapScaleColor(percent, idSelected);
styleOptions = {
borderWidth: 0,
color: relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`,
borderWidth: 3,
color: {
border: '#4A4A4A',
background:
relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`,
},
font: {
color:
relatedServices!.indexOf(service) >= 0
Expand All @@ -194,10 +198,10 @@ export function getServiceMapGraph(
};
} else {
styleOptions = {
borderWidth: 1.0,
borderWidth: 3,
chosen: false,
color: {
border: '#DADADC',
border: '#4A4A4A',
background: '#FFFFFF',
},
};
Expand Down Expand Up @@ -540,9 +544,14 @@ interface JsonMapping {
}

export const extractAttributes = (
mapping: AttributeMapping['properties'],
mapping: AttributeMapping['properties'] | undefined,
prefix: string
): string[] => {
if (!mapping) {
console.warn('Mapping is missing or undefined.');
return [];
}

let attributes: string[] = [];

for (const [key, value] of Object.entries(mapping)) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ exports[`Service map component renders service map 1`] = `
buttonSize="s"
color="text"
idSelected="latency"
legend="Select metric for service map display"
onChange={[Function]}
options={
Array [
Expand Down Expand Up @@ -112,7 +113,28 @@ exports[`Service map component renders service map 1`] = `
"position": "relative",
}
}
/>
>
<div
style={
Object {
"alignItems": "center",
"backgroundColor": "rgba(255, 255, 255, 0.8)",
"bottom": 0,
"display": "flex",
"justifyContent": "center",
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 1000,
}
}
>
<EuiLoadingSpinner
size="xl"
/>
</div>
</div>
</EuiFlexItem>
<EuiFlexItem
grow={false}
Expand Down
Loading

0 comments on commit cbd00af

Please sign in to comment.