Add static timeline panel

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Feb 8, 2023 · a496f75 · a496f75
1 parent 0353534
commit a496f75
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 7 deletions.
diff --git a/src/plugins/vis_augmenter/public/components/styles.scss b/src/plugins/vis_augmenter/public/components/styles.scss
@@ -1,9 +1,11 @@
+$event-vis-height: 75px;
+
 .view-events-flyout {
     &__baseVis {
       min-height: 25vh; // Visualizations require the container to have a valid width and height to render
     }
     &__eventVis {
-      height: 75px;
+      height: $event-vis-height
     }
     &__visDescription {
       width: 200px;
@@ -35,6 +37,6 @@
     height: 45px;
   }
 
-  .footer-panel-height {
-    height: 45px;
+  .timeline-panel-height {
+    height: $event-vis-height
   }
diff --git a/src/plugins/vis_augmenter/public/components/timeline_panel.tsx b/src/plugins/vis_augmenter/public/components/timeline_panel.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { getEmbeddable } from '../services';
+import './styles.scss';
+import { VisualizeEmbeddable } from '../../../visualizations/public';
+
+interface Props {
+  embeddable: VisualizeEmbeddable;
+}
+
+export function TimelinePanel(props: Props) {
+  const PanelComponent = getEmbeddable().getEmbeddablePanel();
+  return (
+    <EuiFlexGroup direction="row" gutterSize="s">
+      <EuiFlexItem grow={false} className="view-events-flyout__visDescription">
+        This will be the static timeline chart
+      </EuiFlexItem>
+      <EuiFlexItem grow={true} className="view-events-flyout__eventVis">
+        <PanelComponent
+          embeddable={props.embeddable}
+          hideHeader={true}
+          hasBorder={false}
+          hasShadow={false}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/plugins/vis_augmenter/public/components/view_events_flyout.tsx b/src/plugins/vis_augmenter/public/components/view_events_flyout.tsx
@@ -23,6 +23,7 @@ import { isPointInTimeEventsVisLayer, PointInTimeEventsVisLayer, VisLayer } from
 import { DateRangeItem } from './date_range_item';
 import { LoadingFlyout } from './loading_flyout';
 import { EventsPanel } from './events_panel';
+import { TimelinePanel } from './timeline_panel';
 
 interface Props {
   onClose: () => void;
@@ -45,6 +46,9 @@ export function ViewEventsFlyout(props: Props) {
   const [eventVisEmbeddablesMap, setEventVisEmbeddablesMap] = useState<
     EventVisEmbeddablesMap | undefined
   >(undefined);
+  const [timelineVisEmbeddable, setTimelineVisEmbeddable] = useState<
+    VisualizeEmbeddable | undefined
+  >(undefined);
   const [timeRange, setTimeRange] = useState<TimeRange | undefined>(undefined);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
@@ -152,25 +156,54 @@ export function ViewEventsFlyout(props: Props) {
     }
   }
 
+  async function createTimelineEmbeddable(visEmbeddable: VisualizeEmbeddable) {
+    try {
+      const contextInput = {
+        filters: visEmbeddable.getInput().filters,
+        query: visEmbeddable.getInput().query,
+        timeRange: visEmbeddable.getInput().timeRange,
+        // TODO: add some field in the visualize embeddable to define
+        // showing any data at all
+      };
+
+      const embeddable = (await embeddableVisFactory?.createFromSavedObject(
+        props.savedObjectId,
+        contextInput
+      )) as VisualizeEmbeddable;
+      embeddable.updateInput({
+        // @ts-ignore
+        refreshConfig: {
+          value: 0,
+          pause: true,
+        },
+      });
+      setTimelineVisEmbeddable(embeddable);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
   useEffect(() => {
     fetchVisEmbeddable();
   }, [props.savedObjectId]);
 
   useEffect(() => {
     if (visEmbeddable?.visLayers) {
       createEventEmbeddables(visEmbeddable);
+      createTimelineEmbeddable(visEmbeddable);
     }
   }, [visEmbeddable?.visLayers]);
 
   useEffect(() => {
     if (
       visEmbeddable !== undefined &&
       eventVisEmbeddablesMap !== undefined &&
-      timeRange !== undefined
+      timeRange !== undefined &&
+      timelineVisEmbeddable !== undefined
     ) {
       setIsLoading(false);
     }
-  }, [visEmbeddable, eventVisEmbeddablesMap, timeRange]);
+  }, [visEmbeddable, eventVisEmbeddablesMap, timeRange, timelineVisEmbeddable]);
 
   return (
     <>
@@ -198,10 +231,10 @@ export function ViewEventsFlyout(props: Props) {
                 <EventsPanel eventVisEmbeddablesMap={eventVisEmbeddablesMap} />
               </EuiFlexItem>
               <EuiFlexItem
-                className="view-events-flyout__contentPanel hide-y-scroll footer-panel-height"
+                className="view-events-flyout__contentPanel hide-y-scroll timeline-panel-height"
                 grow={false}
               >
-                <EuiText>Footer item placeholder</EuiText>
+                <TimelinePanel embeddable={timelineVisEmbeddable}></TimelinePanel>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlyoutBody>