[Metrics UI] UX improvements for saved views (#69910)

* Works-ish * Load the default view without throwing error * Design feedback * Update Saved Views design on Metrics explorer * Fix types * UX improvements when saving and editng * Only load default view if there is no state from anywhere else. * Add loading indicator and other polish * Hide saved view menu when opening modals * Fix typecheck * Fix typo * Fix translations
elastic · Jun 29, 2020 · 4703970 · 4703970
1 parent 3f44757
commit 4703970
Show file tree

Hide file tree

Showing 36 changed files with 1,023 additions and 215 deletions.
diff --git a/x-pack/plugins/infra/common/graphql/types.ts b/x-pack/plugins/infra/common/graphql/types.ts
@@ -329,6 +329,10 @@ export interface UpdateSourceInput {
   logAlias?: string | null;
   /** The field mapping to use for this source */
   fields?: UpdateSourceFieldsInput | null;
+  /** Default view for inventory */
+  inventoryDefaultView?: string | null;
+  /** Default view for Metrics Explorer */
+  metricsExplorerDefaultView?: string | null;
   /** The log columns to display for this source */
   logColumns?: UpdateSourceLogColumnInput[] | null;
 }
@@ -875,6 +879,10 @@ export namespace SourceConfigurationFields {
     fields: Fields;
 
     logColumns: LogColumns[];
+
+    inventoryDefaultView: string;
+
+    metricsExplorerDefaultView: string;
   };
 
   export type Fields = {

diff --git a/x-pack/plugins/infra/common/http_api/source_api.ts b/x-pack/plugins/infra/common/http_api/source_api.ts
@@ -69,6 +69,8 @@ export const SavedSourceConfigurationRuntimeType = rt.partial({
   description: rt.string,
   metricAlias: rt.string,
   logAlias: rt.string,
+  inventoryDefaultView: rt.string,
+  metricsExplorerDefaultView: rt.string,
   fields: SavedSourceConfigurationFieldsRuntimeType,
   logColumns: rt.array(SavedSourceConfigurationColumnRuntimeType),
 });
@@ -79,14 +81,25 @@ export interface InfraSavedSourceConfiguration
 export const pickSavedSourceConfiguration = (
   value: InfraSourceConfiguration
 ): InfraSavedSourceConfiguration => {
-  const { name, description, metricAlias, logAlias, fields, logColumns } = value;
+  const {
+    name,
+    description,
+    metricAlias,
+    logAlias,
+    fields,
+    inventoryDefaultView,
+    metricsExplorerDefaultView,
+    logColumns,
+  } = value;
   const { container, host, pod, tiebreaker, timestamp } = fields;
 
   return {
     name,
     description,
     metricAlias,
     logAlias,
+    inventoryDefaultView,
+    metricsExplorerDefaultView,
     fields: { container, host, pod, tiebreaker, timestamp },
     logColumns,
   };
@@ -106,6 +119,8 @@ export const StaticSourceConfigurationRuntimeType = rt.partial({
   description: rt.string,
   metricAlias: rt.string,
   logAlias: rt.string,
+  inventoryDefaultView: rt.string,
+  metricsExplorerDefaultView: rt.string,
   fields: StaticSourceConfigurationFieldsRuntimeType,
   logColumns: rt.array(SavedSourceConfigurationColumnRuntimeType),
 });

diff --git a/x-pack/plugins/infra/common/saved_objects/metrics_explorer_view.ts b/x-pack/plugins/infra/common/saved_objects/metrics_explorer_view.ts
@@ -55,6 +55,9 @@ export const metricsExplorerViewSavedObjectType: SavedObjectsType = {
           aggregation: {
             type: 'keyword',
           },
+          source: {
+            type: 'keyword',
+          },
         },
       },
       chartOptions: {

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx
@@ -63,6 +63,8 @@ describe('ExpressionChart', () => {
         logColumns: [],
         metricAlias: 'metricbeat-*',
         logAlias: 'filebeat-*',
+        inventoryDefaultView: 'host',
+        metricsExplorerDefaultView: 'host',
         fields: {
           timestamp: '@timestamp',
           message: ['message'],

diff --git a/...mponents/saved_views/view_list_flyout.tsx → ...nents/saved_views/manage_views_flyout.tsx b/...mponents/saved_views/view_list_flyout.tsx → ...nents/saved_views/manage_views_flyout.tsx
@@ -19,17 +19,21 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { SavedView } from '../../hooks/use_saved_view';
+import { SavedView } from '../../containers/saved_view/saved_view';
 
 interface Props<ViewState> {
   views: Array<SavedView<ViewState>>;
   loading: boolean;
+  defaultViewId: string;
+  sourceIsLoading: boolean;
   close(): void;
+  makeDefault(id: string): void;
   setView(viewState: ViewState): void;
   deleteView(id: string): void;
 }
 
 interface DeleteConfimationProps {
+  isDisabled?: boolean;
   confirmedAction(): void;
 }
 const DeleteConfimation = (props: DeleteConfimationProps) => {
@@ -46,6 +50,7 @@ const DeleteConfimation = (props: DeleteConfimationProps) => {
             <FormattedMessage defaultMessage="cancel" id="xpack.infra.waffle.savedViews.cancel" />
           </EuiButtonEmpty>
           <EuiButton
+            disabled={props.isDisabled}
             fill={true}
             iconType="trash"
             color="danger"
@@ -64,13 +69,17 @@ const DeleteConfimation = (props: DeleteConfimationProps) => {
   );
 };
 
-export function SavedViewListFlyout<ViewState>({
+export function SavedViewManageViewsFlyout<ViewState>({
   close,
   views,
+  defaultViewId,
   setView,
+  makeDefault,
   deleteView,
   loading,
+  sourceIsLoading,
 }: Props<ViewState>) {
+  const [inProgressView, setInProgressView] = useState<string | null>(null);
   const renderName = useCallback(
     (name: string, item: SavedView<ViewState>) => (
       <EuiButtonEmpty
@@ -89,6 +98,7 @@ export function SavedViewListFlyout<ViewState>({
     (item: SavedView<ViewState>) => {
       return (
         <DeleteConfimation
+          isDisabled={item.isDefault}
           confirmedAction={() => {
             deleteView(item.id);
           }}
@@ -98,6 +108,25 @@ export function SavedViewListFlyout<ViewState>({
     [deleteView]
   );
 
+  const renderMakeDefaultAction = useCallback(
+    (item: SavedView<ViewState>) => {
+      const isDefault = item.id === defaultViewId;
+      return (
+        <>
+          <EuiButtonEmpty
+            isLoading={inProgressView === item.id && sourceIsLoading}
+            iconType={isDefault ? 'starFilled' : 'starEmpty'}
+            onClick={() => {
+              setInProgressView(item.id);
+              makeDefault(item.id);
+            }}
+          />
+        </>
+      );
+    },
+    [makeDefault, defaultViewId, sourceIsLoading, inProgressView]
+  );
+
   const columns = [
     {
       field: 'name',
@@ -112,7 +141,11 @@ export function SavedViewListFlyout<ViewState>({
       }),
       actions: [
         {
-          available: (item: SavedView<ViewState>) => !item.isDefault,
+          available: () => true,
+          render: renderMakeDefaultAction,
+        },
+        {
+          available: (item: SavedView<ViewState>) => true,
           render: renderDeleteAction,
         },
       ],
@@ -124,7 +157,10 @@ export function SavedViewListFlyout<ViewState>({
       <EuiFlyoutHeader>
         <EuiTitle size="m">
           <h2>
-            <FormattedMessage defaultMessage="Load views" id="xpack.infra.openView.flyoutHeader" />
+            <FormattedMessage
+              defaultMessage="Manage saved views"
+              id="xpack.infra.openView.flyoutHeader"
+            />
           </h2>
         </EuiTitle>
       </EuiFlyoutHeader>