[Ingest UI] WaffleMap #21871

simianhacker · 2018-08-10T01:22:08Z

After pulling in upstream I realized that this PR was also damaged in yesterday's VS Code/Git/Merge snafu. The original PR was located at #21744

This PR adds the basic functionality for the Waffle Map to the Infra UI. Currently there is nothing configurable via the UI. The options are hard coded in the withMap container query, this will change as the UI features are developed to support it.

How to test in browser:

Point Kibana at the demo-stack Kibana instance via config/kibana.dev.yml (reach out to @simianhacker for actual configuration)
Click on infra icon. You should see something very close to above.

elasticmachine · 2018-08-10T02:51:42Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

weltenwort

Thanks for moving over the files. I've commented on a few problems with the usage of the generated query types and the schema below.

weltenwort · 2018-08-10T10:19:32Z

x-pack/plugins/infra/public/containers/map/with_map.ts

  InfraSource,
  InfraTimerangeInput,
 } from '../../../common/graphql/types';
+import { InfraWaffleMapGroup } from '../../lib/lib';
+import { nodesToWaffleMap } from './nodes_to_wafflemap';
 import { query } from './query';


The query imported here is named Query. That's a very conflict-prone name, especially since it will end up in the generated types. How about we call it something like

export const mapQuery = gql` query MapQuery(...) { ... } `;

Then the generated query namespace would be MapQuery in common/graphql/types.ts (with the query result type as MapQuery.Query and the variables as MapQuery.Variables, see below).

weltenwort · 2018-08-10T10:25:48Z

x-pack/plugins/infra/public/containers/map/with_map.ts

-  props: ({ data }) => ({ map: (data && data.source && data.source.map) || {} }),
+  props: ({ data }) => {
+    const nodes = get(data, 'source.map.nodes', []);
+    return { map: nodesToWaffleMap(nodes) };


According to the schema source.map.nodes can be null, which means the nodesToWaffleMap function fails at runtime when the query does not yield any nodes:

The compiler would have warned about this if instead of the hand-written Response, the generated Query.Query (or MapQuery.Query after the proposed renaming above) from common/graphql/types.ts had been used.

How about fixing that by

use the generated query response type and

change the schema and resolver of InfraResponse to always return an array for nodes (empty when no nodes are found)?

The same goes for the Variables. Let's use the generated Query.Variables (or MapQuery.Variables).

simianhacker · 2018-08-10T20:36:48Z

@weltenwort I implemented the changes you requested. The if statements in the withMap HOC are a little meh but technically it's sound. I also had to add an ID to the nodes being returned because GraphQL seem to use that to do deduplication or something beyond my understanding the resulted all the nodes ending up in one path.

elasticmachine · 2018-08-10T20:54:05Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

weltenwort

When we supply an id, apollo-graphql uses it to identify the entity in its cache, so later responses containing that id will overwrite any previous one with the same key. Not sure how it will merge new data coming in when we implement the polling. It's one of the reasons why I want to put the storage logic into the redux store - it's easier to control the merging. I think for our purposes it might be most beneficial to not have ids in the hierarchy beneath maps(), but to associate a fixed key with the whole query using the @connection directive. 🤔

weltenwort · 2018-08-13T09:57:11Z

x-pack/plugins/infra/public/containers/map/with_map.ts

@@ -38,10 +33,10 @@ interface Variables {

 export const withMap = graphql<
  {}, // OptionProps, this will end up being the options that contain index pattern, filters, etc
-  Response,
+  MapQuery.Query,
  Variables,


There is also a generated variable type in MapQuery.Variables.

weltenwort · 2018-08-13T10:12:45Z

x-pack/plugins/infra/public/containers/map/with_map.ts

+    const { nodes } = data.source.map;
+    if (!nodes) {
+      return emptyResponse;
+    }


I usually express that as

props: ({ data }) => ({ map: data && data.source && data.source.map && data.source.map.nodes ? nodesToWaffleMap(data.source.map.nodes) : [], }),

I find that more readable, but that's obviously a matter of taste and habit. What do you think?

weltenwort

When we supply an id, apollo-graphql uses it to identify the entity in its cache, so later responses containing that id will overwrite any previous one with the same key. Not sure how it will merge new data coming in when we implement the polling. I would expect to land in a weird mix of states between old and new data. It's one of the reasons why I want to put the storage logic into the redux store - it's easier to control the merging.

I think for our purposes it might be most beneficial to not have ids in the hierarchy beneath maps(), but to associate a fixed key with the whole map() query using the @connection directive. 🤔

edit: no idea why this was submitted twice, sorry

elasticmachine · 2018-08-13T23:31:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

weltenwort

Seems to work with a no-cache fetchPolicy using the newer apollo-client version 👍 And with the removal of the ids the path argument is a lot lighter too.

I think this is mostly ready to be merged to bring us forward in the feature branch. I just left a small comment about the bucket name handling below.

weltenwort · 2018-08-14T09:16:47Z

x-pack/plugins/infra/server/lib/adapters/nodes/lib/extract_group_paths.ts

  const secondGroup: InfraPathInput = groupBy[1];
-  const paths: InfraNode[] = node[firstGroup!.id].buckets.reduce(
+  const paths: InfraNode[] = node.path_0.buckets.reduce(
    (acc: InfraNode[], bucket: InfraBucket, index: number): InfraNode[] => {
      const nodeItem = createNodeItem(options, node, bucket);
      const key: string = String(bucket.key || index);
      if (secondGroup) {


Should this be node.path_1 for consistency?

weltenwort · 2018-08-14T09:24:11Z

jenkins did not trigger a test run 🤔 jenkins, test this, please

elasticmachine · 2018-08-14T10:50:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

skh

Could we use a less generic name than Container for the outer styled component, and could we use a consistent schema?

Right now, some of them have a name indicating what they are styling, e.g. GroupOfNodesContainer, but a generic StyledContainer (or whatever) that's the same in each component would probably work as well.

skh · 2018-08-14T10:46:59Z

x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx

+  );
+};
+
+export const Container = styled.div`


Could we use a less generic name for this?

What name would have made more sense here?

Keep in mind I think that name is only visible in this file. It doesn't leak outside the file anywhere else, those styled components are isolated to the file. If you look at the page with the React dev tool it shows up under a different name. It was a mistake to export those containers, force of habit :D

We could follow the naming convention you used in the other components, so it would be a GroupOfGroupsContainer in this case. (See also the review comment above.)

skh · 2018-08-14T10:47:23Z

x-pack/plugins/infra/public/components/waffle/index.tsx

+  };
+}
+
+const Container = styled.div`


Could we use a less generic name for this?

skh · 2018-08-14T10:47:45Z

x-pack/plugins/infra/public/components/waffle/node.tsx

+  };
+}
+
+export const Container = styled.div`


Could we use a less generic name for this?

skh · 2018-08-14T10:50:18Z

x-pack/plugins/infra/public/components/waffle/index.tsx

+import { InfraWaffleData, InfraWaffleMapGroup, InfraWaffleOptions } from '../../lib/lib';
+import { applyWaffleMapLayout } from './lib/apply_wafflemap_layout';
+
+interface WafleMapProps {


Typo: WaffleMapProps

…r/kibana into feature-infra-ui-wafflemap-2

simianhacker · 2018-08-14T20:14:16Z

@skh I updated the names to be more specific. I also removed all the exports since I never intended those to be used outside the context of that component.

@weltenwort We should be ready

weltenwort · 2018-08-14T20:22:34Z

jenkins, test this

weltenwort

Jenkins seems unwilling to run the tests at the moment. That aside I'd say merging this would bring us forward a lot 👍 Great job!

weltenwort · 2018-08-14T20:27:39Z

ah, it's running now 🎉

elasticmachine · 2018-08-14T21:49:14Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

weltenwort · 2018-08-14T22:51:44Z

looks like unrelated test failures related to the region map

simianhacker · 2018-08-15T14:58:56Z

Merging... since we are just merging into our own feature branch, if it something we broke we can fix it later. Moving on.

weltenwort · 2018-08-15T15:46:08Z

🎉

Re-commit waffle map

01f664f

simianhacker added :Ingest UI Feature:Metrics UI Metrics UI feature labels Aug 10, 2018

simianhacker requested a review from weltenwort August 10, 2018 01:22

simianhacker mentioned this pull request Aug 10, 2018

[Infra UI] Waffle Map #21744

Closed

Moving files around to amek more sense; adding context menu

57da396

weltenwort requested changes Aug 10, 2018

View reviewed changes

weltenwort mentioned this pull request Aug 10, 2018

[Infra UI] Add graphql query to retrieve log entries from a configured source #21306

Merged

Remane the maps query and use the predefined types

31f8cf1

weltenwort reviewed Aug 13, 2018

View reviewed changes

weltenwort mentioned this pull request Aug 13, 2018

[Metrics UI] Users should be able to define custom dashboard links for drilldown in the data source. #21884

Closed

Remove IDs as much as possible in map response

3bf31d7

Update apollo-client to fix broken fetchPolicy

3a646fa

weltenwort reviewed Aug 14, 2018

View reviewed changes

skh reviewed Aug 14, 2018

View reviewed changes

simianhacker added 4 commits August 14, 2018 12:50

Removing unnecessary exports

16e0a5f

Fixing typo

af92ecb

Merge branch 'feature-infra-ui-wafflemap-2' of github.com:simianhacke…

69d4b7b

…r/kibana into feature-infra-ui-wafflemap-2

Updating component names to be more specific

2aa4690

weltenwort approved these changes Aug 14, 2018

View reviewed changes

simianhacker merged commit 3bf9b5d into elastic:feature-infra-ui Aug 15, 2018

weltenwort mentioned this pull request Aug 15, 2018

[Infra UI] Waffle Map Visualization #20435

Closed

simianhacker deleted the feature-infra-ui-wafflemap-2 branch April 17, 2024 14:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Ingest UI] WaffleMap #21871

[Ingest UI] WaffleMap #21871

simianhacker commented Aug 10, 2018 •

edited

Loading

elasticmachine commented Aug 10, 2018

weltenwort left a comment

weltenwort Aug 10, 2018

weltenwort Aug 10, 2018

simianhacker commented Aug 10, 2018

elasticmachine commented Aug 10, 2018

weltenwort left a comment

weltenwort Aug 13, 2018

weltenwort Aug 13, 2018

weltenwort left a comment •

edited

Loading

elasticmachine commented Aug 13, 2018

weltenwort left a comment

weltenwort Aug 14, 2018

weltenwort commented Aug 14, 2018

elasticmachine commented Aug 14, 2018

skh left a comment

skh Aug 14, 2018

simianhacker Aug 14, 2018

skh Aug 14, 2018

skh Aug 14, 2018

simianhacker Aug 14, 2018

skh Aug 14, 2018

simianhacker Aug 14, 2018

skh Aug 14, 2018

simianhacker Aug 14, 2018 •

edited

Loading

simianhacker commented Aug 14, 2018

weltenwort commented Aug 14, 2018

weltenwort left a comment

weltenwort commented Aug 14, 2018

elasticmachine commented Aug 14, 2018

weltenwort commented Aug 14, 2018

simianhacker commented Aug 15, 2018

weltenwort commented Aug 15, 2018

[Ingest UI] WaffleMap #21871

[Ingest UI] WaffleMap #21871

Conversation

simianhacker commented Aug 10, 2018 • edited Loading

elasticmachine commented Aug 10, 2018

💚 Build Succeeded

weltenwort left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simianhacker commented Aug 10, 2018

elasticmachine commented Aug 10, 2018

💔 Build Failed

weltenwort left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weltenwort left a comment • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Aug 13, 2018

💔 Build Failed

weltenwort left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weltenwort commented Aug 14, 2018

elasticmachine commented Aug 14, 2018

💚 Build Succeeded

skh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simianhacker Aug 14, 2018 • edited Loading

Choose a reason for hiding this comment

simianhacker commented Aug 14, 2018

weltenwort commented Aug 14, 2018

weltenwort left a comment

Choose a reason for hiding this comment

weltenwort commented Aug 14, 2018

elasticmachine commented Aug 14, 2018

💔 Build Failed

weltenwort commented Aug 14, 2018

simianhacker commented Aug 15, 2018

weltenwort commented Aug 15, 2018

simianhacker commented Aug 10, 2018 •

edited

Loading

weltenwort left a comment •

edited

Loading

simianhacker Aug 14, 2018 •

edited

Loading