diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 34087e24b..d3c6ad1f2 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -99,7 +99,7 @@ export interface ILogExplorerProps { ) => void; savedObjectId: string; getExistingEmptyTab: (params: EmptyTabParams) => string; - qm: QueryManager; + queryManager: QueryManager; } export interface IExplorerProps { @@ -130,7 +130,7 @@ export interface IExplorerProps { appBaseQuery?: string; callback?: any; callbackInApp?: any; - qm: QueryManager; + queryManager: QueryManager; } export interface SavedQuery { @@ -316,13 +316,13 @@ export interface EventAnalyticsProps { timestampUtils: TimestampUtils; http: HttpStart; notifications: NotificationsStart; - qm: QueryManager; + queryManager: QueryManager; } export interface DataConfigPanelProps { fieldOptionList: IField[]; visualizations: IVisualizationContainerProps; - qm?: QueryManager; + queryManager?: QueryManager; } export interface GetTooltipHoverInfoType { tooltipMode: string; diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx index 6e69cd69d..307a0edcf 100644 --- a/dashboards-observability/public/components/app.tsx +++ b/dashboards-observability/public/components/app.tsx @@ -25,7 +25,7 @@ interface ObservabilityAppDeps { dslService: any; savedObjects: any; timestampUtils: any; - qm: QueryManager; + queryManager: QueryManager; } // for cypress to test redux store @@ -40,7 +40,7 @@ export const App = ({ dslService, savedObjects, timestampUtils, - qm, + queryManager, }: ObservabilityAppDeps) => { const { chrome, http, notifications } = CoreStartProp; const parentBreadcrumb = { @@ -133,7 +133,7 @@ export const App = ({ timestampUtils={timestampUtils} http={http} notifications={notifications} - qm={qm} + queryManager={queryManager} {...props} /> ); diff --git a/dashboards-observability/public/components/common/field_button/field_button.scss b/dashboards-observability/public/components/common/field_button/field_button.scss index 8ae66b433..e9fdd6a30 100644 --- a/dashboards-observability/public/components/common/field_button/field_button.scss +++ b/dashboards-observability/public/components/common/field_button/field_button.scss @@ -78,3 +78,45 @@ margin-right: $euiSizeXS; } } + +.shard__fieldSelectorField { + &:hover, + &:focus-within, + &[class*='-isActive'] { + .dscSidebarItem__action { + opacity: 1; + } + } + + & > .osdFieldButton__button { + padding: 0; + } + + & .osdFieldButton__name { + padding: $euiSizeS $euiSizeS $euiSizeS 0; + } + + & > button { + align-items: stretch; + } + + & .osdFieldIcon { + box-shadow: none; + height: 100%; + flex-shrink: 0; + line-height: 0; + } + + & .osdFieldButton__fieldIcon { + box-shadow: none; + margin-right: 8px; + } +} + +#vis__mainContent .explorer__fieldSelectorField { + @include euiBottomShadowSmall; + + background-color: $euiColorEmptyShade; + border: $euiBorderThin; + margin-top: $euiSizeS; +} diff --git a/dashboards-observability/public/components/common/field_button/field_button.tsx b/dashboards-observability/public/components/common/field_button/field_button.tsx index 5ceac9875..963cdf84a 100644 --- a/dashboards-observability/public/components/common/field_button/field_button.tsx +++ b/dashboards-observability/public/components/common/field_button/field_button.tsx @@ -76,6 +76,7 @@ export function FieldButton({ buttonProps, ...rest }: FieldButtonProps) { + const classes = classNames( 'osdFieldButton', size ? sizeToClassNameMap[size] : null, diff --git a/dashboards-observability/public/components/common/field_icon/field_icon.tsx b/dashboards-observability/public/components/common/field_icon/field_icon.tsx index a63dfe5ad..467c2c7c0 100644 --- a/dashboards-observability/public/components/common/field_icon/field_icon.tsx +++ b/dashboards-observability/public/components/common/field_icon/field_icon.tsx @@ -26,7 +26,7 @@ export interface FieldIconProps extends Omit { } // defaultIcon => a unknown datatype -const defaultIcon = { iconType: 'questionInCircle', color: 'gray' }; +const defaultIcon = { iconType: 'tokenString' }; export const typeToEuiIconMap: Partial> = { boolean: { iconType: 'tokenBoolean' }, @@ -50,13 +50,12 @@ export const typeToEuiIconMap: Partial> = { export function FieldIcon({ type, label, - size = 's', + size = 'l', scripted, className, ...rest }: FieldIconProps) { const token = typeToEuiIconMap[type] || defaultIcon; - return ( { const dispatch = useDispatch(); const requestParams = { tabId }; @@ -497,6 +497,7 @@ export const Explorer = ({ handleQuerySearch(availability); }; + /** * Toggle fields between selected and unselected sets * @param field field to be toggled @@ -585,7 +586,7 @@ export const Explorer = ({ data-test-subj="eventExplorer__sidebar" > {!isSidebarClosed && ( -
+
); }; @@ -925,8 +926,7 @@ export const Explorer = ({ if (selectedContentTabId === TAB_CHART_ID) { // parse stats section on every search - const qm = new QueryManager(); - const statsTokens = qm.queryParser().parse(tempQuery).getStats(); + const statsTokens = queryManager.queryParser().parse(tempQuery).getStats(); const updatedDataConfig = getUpdatedDataConfig(statsTokens); await dispatch( diff --git a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss index 772a5b873..ae6d83409 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss +++ b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss @@ -25,6 +25,10 @@ } } +// #queryTabs { +// height: calc(100vh - 98px); +// } + .tab-title { display: inline-block; margin-right: 5px; diff --git a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx index 1d84a5815..9996b1948 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx @@ -49,7 +49,7 @@ export const LogExplorer = ({ history, notifications, http, - qm, + queryManager, }: ILogExplorerProps) => { const dispatch = useDispatch(); const tabIds = useSelector(selectQueryTabs).queryTabIds.filter( @@ -185,7 +185,7 @@ export const LogExplorer = ({ curSelectedTabId={curSelectedTabIdRef} http={http} searchBarConfigs={searchBarConfigs} - qm={qm} + queryManager={queryManager} /> ), diff --git a/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap index 30d744eb9..f2c5f5cb9 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap @@ -21,7 +21,7 @@ exports[`Field component Renders a sidebar field 1`] = ` anchorPosition="rightUp" button={ @@ -67,7 +67,7 @@ exports[`Field component Renders a sidebar field 1`] = ` } isActive={false} onClick={[Function]} - size="s" + size="m" /> } closePopover={[Function]} @@ -85,7 +85,7 @@ exports[`Field component Renders a sidebar field 1`] = ` className="euiPopover__anchor" > @@ -131,10 +131,10 @@ exports[`Field component Renders a sidebar field 1`] = ` } isActive={false} onClick={[Function]} - size="s" + size="m" >
-
- - - - - - - - - - -
-
- -
-
- - - -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    + + + -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - size="s" + -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - + + + + +
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - ip_count - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" + -
    +
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - ip_count - - } - isActive={false} - onClick={[Function]} - size="s" +
      -
      - -
      - - - - - + + + + + + + + + + + + + + + + double_per_ip_bytes + + + +
      + + + + + + + + + + +
      +
      + +
      +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + host + + } + isActive={false} + onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    - - - - - -
    - - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + host + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - per_ip_bytes - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + ip_count + + } + isActive={false} + onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - per_ip_bytes - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - + + + + + + + + + + + + + + + + ip_count + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + per_ip_bytes + + } + isActive={false} + onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    - - - - - -
    - - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + per_ip_bytes + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - resp_code - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + resp_code + + } + isActive={false} + onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - resp_code - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - + + + + + + + + + + + + + + + + resp_code + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + sum_bytes + + } + isActive={false} + onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    - - - - - -
    - - + +
    + + + + + + + + + + +
    + + + + +     +     +
    • + - - - -
  • + + + + +
    + + + + Selected Fields + + + } + id="fieldSelector__selectedFields" + initialIsOpen={true} + isLoading={false} + isLoadingMessage={false} + paddingSize="xs" + > +
    - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - sum_bytes - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" + -
    - - - - - - - - - - -
    -
    - + + + + + + + + Selected Fields + + + + +
    +
    + +
    +
    +
    - - -
    • - - -

    - - Selected Fields - -

    -     + + + +
    -
      -
      - -

      - + Available Fields - -

      -       + + + } + id="fieldSelector__availableFields" + initialIsOpen={true} + isLoading={false} + isLoadingMessage={false} + paddingSize="xs" + >
      - - -
      -
      -
        -
      • - +
        - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" + -
        +
        - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - size="s" +
          -
          - -
          - - - - - - + + + + + + + + + + + + + + + + agent + + + +
          + + + + + + + + + + +
          +
          + +
          +
        + + +
        • +
      • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + bytes + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
        +
        - - - - -
        -
        - -
    - - - - -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + bytes + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - bytes - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + clientip + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - bytes - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + + + + + + + + + clientip + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + event + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + event + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - clientip - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + extension + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - clientip - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + + + + + + + + extension + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + geo + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + geo + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - event - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + host + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - event - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + + + + + + + + + host + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + index + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + index + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - extension - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - extension - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    - - -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - geo - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - geo - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - index - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - index - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - ip - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - ip - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - machine - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - machine - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - memory - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - memory - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - message - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - message - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - phpmemory - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - phpmemory - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - referer - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - referer - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - - - - - -
    -
    -     -
    -
    -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - request - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - - request - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + ip + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - -
    -
    - - -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + ip + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - response - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + machine + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - response - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + + + + + + + + + machine + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + memory + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + memory + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - tags - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + message + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - tags - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + + + + + + + + + message + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + phpmemory + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - Default Timestamp - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + phpmemory + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - timestamp - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - Default Timestamp - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + referer + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - timestamp - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - Default Timestamp - - - - - - - + + + + + + + + + + + + + + + + referer + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + request + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + request + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - url - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - - - + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + response + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - url - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - - - - + + + + + + + + + + + + + + + + response + + + +
    + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + tags + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - - - -     -     -
    • -
  • - - - - - - Override - - - - - - - - - - } - fieldIcon={ - - } - fieldName={ - + + + + + + + + + + + + + + + + tags + + + +
    + + + + + + + + + + +
    + + + + +     +     +
    • +
  • - utc_time - - } - isActive={false} - onClick={[Function]} - size="s" - /> - } - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="dscSidebarItem__fieldPopoverPanel" - panelPaddingSize="m" - > -
    -
    - - - - - Override - - - - - - + + + + + Default Timestamp + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + timestamp + + } + isActive={false} onClick={[Function]} + size="m" /> - - - - } - fieldIcon={ - - } - fieldName={ - - utc_time - - } - isActive={false} - onClick={[Function]} - size="s" - > -
    - -
    - - - + + + + + + + + + + + + + + + + timestamp + + + +
    + + + + + Default Timestamp + + + + + + + + + + + +
    +
    + +
    +
    + + +
    • +
  • + + + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + url + + } + isActive={false} onClick={[Function]} - size="s" + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - - - - + + + + + + + + + + + + + + + + url + + + +
    + + + + + + + + + + +
    +
    + +
    + +     +     +
    • +
  • + + + + + + Override + + + + + + + + + + } + fieldIcon={ + + } + fieldName={ + + utc_time + + } + isActive={false} onClick={[Function]} + size="m" + /> + } + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelClassName="dscSidebarItem__fieldPopoverPanel" + panelPaddingSize="m" + > +
    +
    - - - - -
    -
    - + +
    + + + + + + + + + + + + + + +
    + + + + +     +     +
    • + - - - - + + + + diff --git a/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx index efeacf5c1..14ef7ddbe 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx @@ -10,11 +10,8 @@ import { EuiPopover, EuiButtonIcon, EuiToolTip, - EuiButton, EuiMark, EuiLoadingSpinner, - EuiPopoverTitle, - EuiPanel, EuiFlexGroup, EuiFlexItem, EuiTitle, @@ -150,8 +147,8 @@ export const Field = (props: IFieldProps) => { panelClassName="dscSidebarItem__fieldPopoverPanel" button={ } diff --git a/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss index 8ef4cc875..c29dc31d7 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss +++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss @@ -37,25 +37,11 @@ background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade); } -.dscFieldChooser { - padding-left: $euiSize; -} - .dscFieldChooser__toggle { color: $euiColorMediumShade; margin-left: $euiSizeS !important; } -.dscSidebarItem { - &:hover, - &:focus-within, - &[class*='-isActive'] { - .dscSidebarItem__action { - opacity: 1; - } - } -} - /** * 1. Only visually hide the action, so that it's still accessible to screen readers. * 2. When tabbed to, this element needs to be visible for keyboard accessibility. @@ -110,3 +96,41 @@ .override_timestamp_loading { vertical-align: middle; } + +.explorerFieldSelector { + padding: $euiSizeS; +} + +#vis__mainContent { + .explorer__insights { + min-height: 0; + display: grid; + grid-template-columns: 50% 50%; + height: 100%; + .explorerFieldSelector, .explorer__vizDataConfig { + padding: $euiSizeS; + + &__fieldGroups { + @include euiYScrollWithShadows; + + overflow-y: auto; + margin-right: -$euiSizeS; + padding-right: $euiSizeS; + margin-top: $euiSizeS; + } + + &__fieldGroup { + margin-top: $euiSizeS; + + &:first-child { + margin-top: 0; + } + } + } + .explorerFieldSelector { + .sidebar-list { + height: 100%; + } + } + } +} \ No newline at end of file diff --git a/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx index c949c9e49..47037a8a1 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx @@ -7,10 +7,8 @@ import './sidebar.scss'; import React, { useState } from 'react'; import { isEmpty } from 'lodash'; -import { EuiTitle, EuiSpacer, EuiButtonIcon, EuiFieldSearch } from '@elastic/eui'; -import { i18n } from '@osd/i18n'; -import { FormattedMessage, I18nProvider } from '@osd/i18n/react'; -import { cssNumber } from 'jquery'; +import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui'; +import { I18nProvider } from '@osd/i18n/react'; import { Field } from './field'; import { IExplorerFields, IField } from '../../../../../common/types/explorer'; @@ -45,7 +43,6 @@ export const Sidebar = (props: ISidebarProps) => { return (
    -
    { !isEmpty(explorerFields.availableFields)) && ( <> {explorerFields?.queriedFields && explorerFields.queriedFields?.length > 0 && ( - <> - -

    - -

    -     - + + Query fields + + } + paddingSize="xs" + >
      {explorerFields.queriedFields && @@ -101,90 +98,28 @@ export const Sidebar = (props: ISidebarProps) => { ); })}
    - +     )} - -

    - -

    -     - -
      - {explorerData && - !isEmpty(explorerData.jsonData) && - explorerFields.selectedFields && - explorerFields.selectedFields.map((field) => { - return ( -
    • - -
      • - ); - })} -
    -
    - -

    - -

    -     -
    - setShowFields(!showFields)} - aria-label={ - showFields - ? i18n.translate( - 'discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel', - { - defaultMessage: 'Hide fields', - } - ) - : i18n.translate( - 'discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel', - { - defaultMessage: 'Show fields', - } - ) - } - /> -
    -
    -
      + + Selected Fields + + } + paddingSize="xs" > - {explorerFields.availableFields && - explorerFields.availableFields - .filter((field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1) - .map((field) => { +
        + {explorerData && + !isEmpty(explorerData.jsonData) && + explorerFields.selectedFields && + explorerFields.selectedFields.map((field) => { return (
      • { selectedTimestamp={selectedTimestamp} isOverridingTimestamp={isOverridingTimestamp} handleOverrideTimestamp={handleOverrideTimestamp} - onToggleField={handleAddField} - selected={false} + selected={true} isFieldToggleButtonDisabled={isFieldToggleButtonDisabled} showTimestampOverrideButton={true} + onToggleField={handleRemoveField} />
        • ); })} -
      +
    + + + + Available Fields + + } + paddingSize="xs" + > +
      + {explorerFields.availableFields && + explorerFields.availableFields + .filter((field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1) + .map((field) => { + return ( +
    • + +
      • + ); + })} +
    +     )}
    diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss index ef67ba34b..8f4e129e9 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss @@ -3,74 +3,15 @@ * SPDX-License-Identifier: Apache-2.0 */ -.lnsAppWrapper { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.lnsApp { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; -} - -.lnsApp__header { - border-bottom: $euiBorderThin; -} - -.lnsApp__frame { - position: relative; - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.containerPanel { - padding: 0 16px; -} - .dataConfigContainer { height: 1242px; overflow: auto; } -::-webkit-scrollbar { - width: 10px; -} - -::-webkit-scrollbar-track { - background: #f1f1f1; -} - -::-webkit-scrollbar-thumb { - background: #c2c2c2; -} - -.euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) { - height: 24px; - width: 24px; - top: 0; - left: inherit; - box-shadow: none; -} - -.lensChartIcon__subdued { - fill: $euiTextSubduedColor; - - // Not great, but the easiest way to fix the gray fill when stuck in a button with a fill - // Like when selected in a button group - .euiButton--fill & { - fill: currentColor; - } -} - -.lensChartIcon__accent { - fill: $euiColorVis0; +.explorerViz__commonPanel { + display: grid; + grid-template-rows: auto 1fr; + grid-area: workspace; + background-color: #FFF; + height: 100%; } diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 3a5752339..2ab71e6a1 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -552,7375 +552,7816 @@ exports[`Config panel component Renders config panel with visualization data 1`] } } > -
    - -
    - -
    - - -
    - +
    + - -
    -
    -
    - + +
    +
    +
    + - + - - + + - - - Vertical bar - - - - - - - - - - - - -
    - -
    -
    - -
    - -
    - - - -
    -     -
    -
    - - -
    - - -
    - -
    - - -
    - -
    - + + + Vertical bar + + + + + + + + + + + + +
    + +
    +
    + +
    + +
    + + + +
    +     +
    +
    +     + +
    + +
    +
    + , - "id": "data-panel", - "name": "Style", - } - } - tabs={ - Array [ + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, Object { - "content": , - "id": "data-panel", - "name": "Style", + ], + }, + }, + Object { + "component": [Function], + "defaultState": 0.7, + "eleType": "slider", + "mapTo": "groupWidth", + "name": "Group width", + "props": Object { + "max": 1, + "step": 0.01, + }, + }, + Object { + "component": [Function], + "defaultState": 0.97, + "eleType": "slider", + "mapTo": "barWidth", + "name": "Bar width", + "props": Object { + "max": 1, + "step": 0.01, + }, + }, + Object { + "component": [Function], + "defaultState": 1, + "eleType": "slider", + "mapTo": "lineWidth", + "name": "Line width", + "props": Object { + "max": 10, + }, + }, + Object { + "component": [Function], + "defaultState": 80, + "eleType": "slider", + "mapTo": "fillOpacity", + "name": "Fill opacity", + "props": Object { + "max": 100, + }, + }, + ], }, Object { - "content": , - "id": "style-panel", - "name": "Layout", + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], }, - Object { - "content": , + "id": "data-panel", + "name": "Style", + } + } + tabs={ + Array [ + Object { + "content": , + "id": "data-panel", + "name": "Style", + }, + Object { + "content": , + "id": "style-panel", + "name": "Layout", + }, + Object { + "content": , + "id": "availability-panel", + "name": "Availability", + }, + ] + } + > +
    + +
    + + + + + + + + + +
    +     +
    + , - "id": "availability-panel", - "name": "Availability", + ], + "metrics": Array [ + Object { + "label": "count()", + "name": "count()", + "side": "left", + "type": "integer", + }, + ], + }, + }, }, - ] - } - > -
    - -
    - - - - - - - - - -
    -     -
    - +
    + +
    +
    - -
    - -
    -
    - + +
    +
    + +
    +
    + +
    -
    - -
    -
    - -
    - -
    - -
    -
    - - - -
    -
    - - -
    -
    - - - - -
    -
    -     -     - -
    - Name your visualization. -
    -     -
    -
    -     - + +
    +
    + +
    - - - -
    -
    - - -