adjust explorer chart color and spacing (opensearch-project#1051)

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
derek-ho · Oct 4, 2023 · 45a92f2 · 45a92f2
1 parent b5ad24f
commit 45a92f2
Show file tree

Hide file tree

Showing 14 changed files with 139 additions and 135 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -94,7 +94,7 @@ export const SAVED_OBJECT = '/object';
 // Color Constants
 export const PLOTLY_COLOR = [
   '#3CA1C7',
-  '#8C55A3',
+  '#54B399',
   '#DB748A',
   '#F2BE4B',
   '#68CCC2',

diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -1402,7 +1402,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "barmode": "group",
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -1495,7 +1495,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "barmode": "group",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -2036,7 +2036,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             "layout": Object {
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -2552,7 +2552,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "layout": Object {
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -3082,7 +3082,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -4726,7 +4726,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "barmode": "group",
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -4819,7 +4819,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "barmode": "group",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -12,6 +12,7 @@ import {
   EuiHorizontalRule,
   EuiLink,
   EuiLoadingSpinner,
+  EuiPanel,
   EuiSpacer,
   EuiTabbedContent,
   EuiTabbedContentTab,
@@ -506,108 +507,111 @@ export const Explorer = ({
         </div>
         <div className={`dscWrapper ${mainSectionClassName}`}>
           {explorerData && !isEmpty(explorerData.jsonData) ? (
-            <div className="dscWrapper__content">
-              <div className="dscResults">
-                {countDistribution?.data && !isLiveTailOnRef.current && (
-                  <>
-                    <HitsCounter
-                      hits={_.sum(countDistribution.data['count()'])}
-                      showResetButton={false}
-                      onResetQuery={() => {}}
-                    />
-                    <TimechartHeader
-                      options={timeIntervalOptions}
-                      onChangeInterval={(selectedIntrv) => {
-                        const intervalOptionsIndex = timeIntervalOptions.findIndex(
-                          (item) => item.value === selectedIntrv
-                        );
-                        const intrv = selectedIntrv.replace(/^auto_/, '');
-                        getCountVisualizations(intrv);
-                        selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
-                        getPatterns(intrv, getErrorHandler('Error fetching patterns'));
-                      }}
-                      stateInterval={selectedIntervalRef.current?.value}
-                      startTime={appLogEvents ? startTime : dateRange[0]}
-                      endTime={appLogEvents ? endTime : dateRange[1]}
-                    />
-                    <CountDistribution
-                      countDistribution={countDistribution}
-                      selectedInterval={selectedIntervalRef.current?.value}
-                      startTime={appLogEvents ? startTime : dateRange[0]}
-                      endTime={appLogEvents ? endTime : dateRange[1]}
-                    />
-                    <EuiHorizontalRule margin="xs" />
-                    <LogPatterns
-                      selectedIntervalUnit={selectedIntervalRef.current}
-                      handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
-                    />
-                  </>
-                )}
-
-                <section
-                  className="dscTable dscTableFixedScroll"
-                  aria-labelledby="documentsAriaLabel"
-                >
-                  <h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
-                    <FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
-                  </h2>
-                  <div className="dscDiscover">
-                    {isLiveTailOnRef.current && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+                  <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+                    {countDistribution?.data && !isLiveTailOnRef.current && (
                       <>
-                        <EuiSpacer size="m" />
-                        <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="m">
-                          <EuiLoadingSpinner size="l" />
-                          <EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
-                            <strong>&nbsp;&nbsp;Live streaming</strong>
-                          </EuiText>
-                          <EuiFlexItem grow={false}>
-                            <HitsCounter
-                              hits={totalHits}
-                              showResetButton={false}
-                              onResetQuery={() => {}}
-                            />
-                          </EuiFlexItem>
-                          <EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
-                        </EuiFlexGroup>
-                        <EuiSpacer size="m" />
+                        <HitsCounter
+                          hits={_.sum(countDistribution.data['count()'])}
+                          showResetButton={false}
+                          onResetQuery={() => {}}
+                        />
+                        <TimechartHeader
+                          options={timeIntervalOptions}
+                          onChangeInterval={(selectedIntrv) => {
+                            const intervalOptionsIndex = timeIntervalOptions.findIndex(
+                              (item) => item.value === selectedIntrv
+                            );
+                            const intrv = selectedIntrv.replace(/^auto_/, '');
+                            getCountVisualizations(intrv);
+                            selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
+                            getPatterns(intrv, getErrorHandler('Error fetching patterns'));
+                          }}
+                          stateInterval={selectedIntervalRef.current?.value}
+                          startTime={appLogEvents ? startTime : dateRange[0]}
+                          endTime={appLogEvents ? endTime : dateRange[1]}
+                        />
+                        <CountDistribution
+                          countDistribution={countDistribution}
+                          selectedInterval={selectedIntervalRef.current?.value}
+                          startTime={appLogEvents ? startTime : dateRange[0]}
+                          endTime={appLogEvents ? endTime : dateRange[1]}
+                        />
                       </>
                     )}
-                    {countDistribution?.data && (
-                      <EuiTitle size="s">
-                        <h3 style={{ margin: '0px', textAlign: 'left', marginLeft: '10px' }}>
-                          Events
-                          <span className="event-header-count">
-                            {' '}
-                            (
-                            {reduce(
-                              countDistribution.data['count()'],
-                              (sum, n) => {
-                                return sum + n;
-                              },
-                              0
-                            )}
-                            )
-                          </span>
-                        </h3>
-                      </EuiTitle>
-                    )}
-                    <EuiHorizontalRule margin="xs" />
-                    <DataGrid
-                      http={http}
-                      pplService={pplService}
-                      rows={explorerData.jsonData}
-                      rowsAll={explorerData.jsonDataAll}
-                      explorerFields={explorerFields}
-                      timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
-                      rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
+                  </EuiPanel>
+                </EuiPanel>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+                  <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+                    <LogPatterns
+                      selectedIntervalUnit={selectedIntervalRef.current}
+                      handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
                     />
-                    <a tabIndex={0} id="discoverBottomMarker">
-                      &#8203;
-                    </a>
-                  </div>
-                </section>
-              </div>
-            </div>
+                  </EuiPanel>
+                </EuiPanel>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+                  <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+                    <section
+                      className="dscTable dscTableFixedScroll"
+                      aria-labelledby="documentsAriaLabel"
+                    >
+                      <h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
+                        <FormattedMessage
+                          id="discover.documentsAriaLabel"
+                          defaultMessage="Documents"
+                        />
+                      </h2>
+                      <div className="dscDiscover">
+                        {isLiveTailOnRef.current && (
+                          <>
+                            <EuiSpacer size="m" />
+                            <EuiFlexGroup
+                              justifyContent="center"
+                              alignItems="center"
+                              gutterSize="m"
+                            >
+                              <EuiLoadingSpinner size="l" />
+                              <EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
+                                <strong>&nbsp;&nbsp;Live streaming</strong>
+                              </EuiText>
+                              <EuiFlexItem grow={false}>
+                                <HitsCounter
+                                  hits={totalHits}
+                                  showResetButton={false}
+                                  onResetQuery={() => {}}
+                                />
+                              </EuiFlexItem>
+                              <EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
+                            </EuiFlexGroup>
+                            <EuiSpacer size="m" />
+                          </>
+                        )}
+                        <DataGrid
+                          http={http}
+                          pplService={pplService}
+                          rows={explorerData.jsonData}
+                          rowsAll={explorerData.jsonDataAll}
+                          explorerFields={explorerFields}
+                          timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
+                          rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
+                        />
+                        <a tabIndex={0} id="discoverBottomMarker">
+                          &#8203;
+                        </a>
+                      </div>
+                    </section>
+                  </EuiPanel>
+                </EuiPanel>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           ) : (
             <NoResults />
           )}

diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1581,7 +1581,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -1814,7 +1814,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -2312,7 +2312,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -691,7 +691,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "bargroupgap": 0.030000000000000027,
         "barmode": "group",
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "hovermode": "closest",
@@ -749,7 +749,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
           "bargroupgap": 0.030000000000000027,
           "barmode": "group",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Gauge component Renders gauge component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -703,7 +703,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "margin": Object {
@@ -756,7 +756,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",