Service map updates (opensearch-project#2230) (opensearch-project#2254)

* adjusting service table and focus search * revert starting zoom to default behavior * add reset button, and enlarge focused node * adjust filter options, so only available are shown in flyout * handle empty items * loading state, borders, no movement, focus * refresh on filter cleared * update focus functionality to set filter, bug fixes * handle clearing focus * hide focus in the flyout --------- (cherry picked from commit fdebf79) Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Adam Tackett <[email protected]>
ps48 · Nov 12, 2024 · 9982eae · 9982eae
1 parent e971a6f
commit 9982eae
Show file tree

Hide file tree

Showing 11 changed files with 2,093 additions and 776 deletions.
diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -184,8 +184,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
@@ -195,10 +199,10 @@ export function getServiceMapGraph(
       };
     } else {
       styleOptions = {
-        borderWidth: 1.0,
+        borderWidth: 3,
         chosen: false,
         color: {
-          border: '#DADADC',
+          border: '#4A4A4A',
           background: '#FFFFFF',
         },
       };

diff --git a/...trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap b/...trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
@@ -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 [
@@ -34,25 +35,70 @@ exports[`Service map component renders service map 1`] = `
     <EuiHorizontalRule
       margin="m"
     />
-    <EuiFlexGroup
-      justifyContent="spaceBetween"
-    >
+    <EuiFlexGroup>
       <EuiFlexItem
         grow={7}
       >
-        <EuiCompressedFieldSearch
-          compressed={true}
-          fullWidth={false}
-          incremental={false}
-          isClearable={true}
-          isInvalid={false}
-          isLoading={false}
-          onChange={[Function]}
-          onSearch={[Function]}
-          placeholder="Service name"
-          prepend="Focus on"
-          value=""
-        />
+        <EuiPopover
+          anchorPosition="downLeft"
+          button={
+            <EuiFieldSearch
+              append={
+                <EuiButtonIcon
+                  iconType="refresh"
+                  onClick={[Function]}
+                  size="s"
+                />
+              }
+              aria-controls="service-select-dropdown"
+              compressed={true}
+              fullWidth={false}
+              incremental={false}
+              isClearable={true}
+              isInvalid={false}
+              isLoading={false}
+              onChange={[Function]}
+              onClick={[Function]}
+              placeholder="Service name"
+              prepend="Focus on"
+              value=""
+            />
+          }
+          closePopover={[Function]}
+          display="inlineBlock"
+          hasArrow={true}
+          id="service-select-dropdown"
+          isOpen={false}
+          ownFocus={false}
+          panelPaddingSize="none"
+          repositionOnScroll={true}
+        >
+          <EuiSelectable
+            isPreFiltered={false}
+            listProps={
+              Object {
+                "bordered": true,
+                "style": Object {
+                  "width": "300px",
+                },
+              }
+            }
+            onChange={[Function]}
+            options={Array []}
+            searchProps={
+              Object {
+                "autoFocus": true,
+                "isClearable": true,
+                "onInput": [Function],
+                "value": "",
+              }
+            }
+            searchable={true}
+            singleSelection={true}
+          >
+            <Component />
+          </EuiSelectable>
+        </EuiPopover>
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer />
@@ -67,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}