[Infra UI] Refactor Inventory Models #46403

simianhacker · 2019-09-23T23:09:19Z

Summary

This PR refactors ALL the different models into one structure instead of everything being spread all over the project or hard coded in components. The goal is to put all these definitions in one common place and then re-use them on the client and server. These models define the following for each node type (view type):

Metric detail layout
Snapshot metrics for the inventory page
TSVB Metrics for the metric detail page
~~Toolbar for the inventory page~~ (coming in follow up PR)

This should allow us to add new inventory views by just defining the file structures under inventory_models. The only time we would need to touch the react code is if there is a new section required like the APM section on the metric detail page OR a new toolbar section for the inventory page (required for AWS).

Additionally, this PR also consolidates all the different types (from GraphQL and pure Typescript files) scattered about into one place near the models. All the types are written in IO-TS. This will help with the transition from GraphQL.

Anatomy of an inventory model

<type> # Top level of the inventory type, examples include: host, container, pod, aws_ec2, etc
├── index.ts # Exports layout, metrics and toolbar
├── layout.ts # The layout for the metrics detail page
├── metrics # All the metric models for the inventory and detail page
│   ├── index.ts # exports all the metrics (snapshot & tsvb)
│   ├── snapshot/ # The models/aggregations for the inventory page
│   └── tsvb/ # The TSVB models for the metric detail page
└── toolbar.ts # The toolbar definition for the inventory page (to be added in follow up PR

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~This was checked for cross-browser compatibility, including a check against IE11~~
~~Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~Documentation was added for features that require explanation or tutorials~~
~~Unit or functional tests were updated or added to match the most common scenarios~~
~~This was checked for keyboard-only and screenreader accessibility~~

elasticmachine · 2019-09-24T00:44:33Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-24T23:16:43Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-25T00:42:24Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-25T17:55:25Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

jasonrhodes · 2019-09-26T20:19:07Z

@simianhacker help me out, what's "DSL" stand for here? I only know this as "domain-specific language"…

simianhacker · 2019-09-26T22:01:19Z

@jasonrhodes That's correct sort of like the ES Query DSL but really more accurate would just be Inventory Models.

elasticmachine · 2019-10-10T00:44:46Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: b081d36

elasticmachine · 2019-10-10T17:51:00Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 3730074

elasticmachine · 2019-10-10T23:39:53Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: c27c8ee

elasticmachine · 2019-10-11T01:24:08Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 944aad6

elasticmachine · 2019-10-14T18:28:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: f4e5c19

elasticmachine · 2019-10-14T19:53:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 1d94ea4

elasticmachine · 2019-10-15T22:33:48Z

Pinging @elastic/infra-logs-ui (Team:infra-logs-ui)

elasticmachine · 2019-10-16T00:01:20Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 443537b

afgomez · 2019-10-21T12:51:06Z

I did a first pass and for a person not familiar with the code I could get the gist of it, so 👍.

I don't feel comfortable to approve it yet though. Maybe you could walk me through the code on a call (or wait for someone who is more familiar with it).

phillipb

I think my main takeaway is that all the layout's code should just be react components. I think doing that will help us with maintenance in the long run and make it easier for people to grok.

It's a large refractor and hard for me to understand completely how all of the pieces tie together, so I think it'd be good to add some docs. Mainly, I'd like to know what steps need to be taken to add a new type of inventory? What files would need to be created and where?

phillipb · 2019-10-21T13:38:15Z

x-pack/legacy/plugins/infra/common/inventory_models/container/layout.ts


-export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
+export const layout: InventoryDetailLayoutCreator = theme => [


After thinking about this, I still think layouts are best expressed on the frontend as react components. Mainly, I think it gives us more flexibility, reduces complexity, and will gives us a better developer experience.

phillipb · 2019-10-21T13:42:49Z

.../legacy/plugins/infra/common/inventory_models/container/metrics/tsvb/container_diskio_ops.ts

@@ -22,17 +25,17 @@ export const containerDiskIOOps: InfraMetricModelCreator = (timeField, indexPatt
        {
          field: 'docker.diskio.read.ops',
          id: 'max-diskio-read-ops',
-          type: InfraMetricModelMetricType.max,
+          type: 'max',


Just curious, why remove enums?

Those enums are managed by GraphQL, as part of cleaning up the tech debt I'm making an effort to move everything to IO-TS types which doesn't support enums, but each of those types have been replaced with a t.keyOf({ ... }) which restricts which string it can be.

simianhacker · 2019-10-21T18:17:43Z

@phillipb Here is the issue for converting the layout JSON to a React component. #48808. I will work on adding a README.md file to the top of the inventory_models directory to explain the steps for adding additional sections.

elasticmachine · 2019-10-21T18:39:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: f963531

simianhacker · 2019-10-21T20:34:36Z

After discussing this with @phillipb, we've decided to defer writing the documentation till after we've gotten everything working. Here is the issue for adding documentation: #48823

* [Infra UI] Refactor Inventory DSL * Updating types * Adding types * moving from metric_models to inventory_models * Fixing Kubernetes toolbars * Add models to index file * Removing snapshot metric aggregations in favor of inventory models * Removing TSVB models and replacing with inventory models * Fixing the glorious types * Removing obsolete layouts * removing obsolete message * removing toolbar

* [Infra UI] Refactor Inventory Models (#46403) * [Infra UI] Refactor Inventory DSL * Updating types * Adding types * moving from metric_models to inventory_models * Fixing Kubernetes toolbars * Add models to index file * Removing snapshot metric aggregations in favor of inventory models * Removing TSVB models and replacing with inventory models * Fixing the glorious types * Removing obsolete layouts * removing obsolete message * removing toolbar * Removing obsolete translations * Removing obsolete translations

[Infra UI] Refactor Inventory DSL

2724183

simianhacker added 4 commits September 24, 2019 10:52

Updating types

fbb1b77

Adding types

98c22b8

moving from metric_models to inventory_models

ce21c8a

Fixing Kubernetes toolbars

d602390

Add models to index file

22c74d8

Merge branch 'master' of github.com:elastic/kibana into inventory-models

78bb6d6

simianhacker changed the title ~~[Infra UI] Refactor Inventory DSL~~ [Infra UI] Refactor Inventory Models Sep 26, 2019

simianhacker added 2 commits October 9, 2019 14:23

Merge branch 'master' of github.com:elastic/kibana into inventory-models

bb426c3

Removing snapshot metric aggregations in favor of inventory models

b081d36

Removing TSVB models and replacing with inventory models

3730074

Merge branch 'master' of github.com:elastic/kibana into inventory-models

c27c8ee

Fixing the glorious types

944aad6

Removing obsolete layouts

f4e5c19

removing obsolete message

1d94ea4

simianhacker added 2 commits October 15, 2019 13:48

Merge branch 'master' of github.com:elastic/kibana into inventory-models

1b25fea

removing toolbar

443537b

simianhacker self-assigned this Oct 15, 2019

simianhacker added Feature:Metrics UI Metrics UI feature release_note:skip Skip the PR/issue when compiling release notes Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v7.6.0 v8.0.0 labels Oct 15, 2019

simianhacker marked this pull request as ready for review October 15, 2019 22:34

simianhacker requested a review from a team as a code owner October 15, 2019 22:34

phillipb reviewed Oct 21, 2019

View reviewed changes

Merge branch 'master' of github.com:elastic/kibana into inventory-models

f963531

phillipb approved these changes Oct 21, 2019

View reviewed changes

simianhacker merged commit f916d92 into elastic:master Oct 21, 2019

simianhacker mentioned this pull request Nov 18, 2019

[7.x] [Infra UI] Refactor Inventory Models (#46403) #50933

Merged

simianhacker deleted the inventory-models branch April 17, 2024 15:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Infra UI] Refactor Inventory Models #46403

[Infra UI] Refactor Inventory Models #46403

simianhacker commented Sep 23, 2019 •

edited

Loading

elasticmachine commented Sep 24, 2019

elasticmachine commented Sep 24, 2019

elasticmachine commented Sep 25, 2019

elasticmachine commented Sep 25, 2019

jasonrhodes commented Sep 26, 2019

simianhacker commented Sep 26, 2019

elasticmachine commented Oct 10, 2019

elasticmachine commented Oct 10, 2019

elasticmachine commented Oct 10, 2019

elasticmachine commented Oct 11, 2019

elasticmachine commented Oct 14, 2019

elasticmachine commented Oct 14, 2019

elasticmachine commented Oct 15, 2019

elasticmachine commented Oct 16, 2019

afgomez commented Oct 21, 2019

phillipb left a comment

phillipb Oct 21, 2019

phillipb Oct 21, 2019

simianhacker Oct 21, 2019

simianhacker commented Oct 21, 2019

elasticmachine commented Oct 21, 2019

simianhacker commented Oct 21, 2019


		export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
		export const layout: InventoryDetailLayoutCreator = theme => [

[Infra UI] Refactor Inventory Models #46403

[Infra UI] Refactor Inventory Models #46403

Conversation

simianhacker commented Sep 23, 2019 • edited Loading

Summary

Anatomy of an inventory model

Checklist

elasticmachine commented Sep 24, 2019

💚 Build Succeeded

elasticmachine commented Sep 24, 2019

💔 Build Failed

elasticmachine commented Sep 25, 2019

💚 Build Succeeded

elasticmachine commented Sep 25, 2019

💚 Build Succeeded

jasonrhodes commented Sep 26, 2019

simianhacker commented Sep 26, 2019

elasticmachine commented Oct 10, 2019

💔 Build Failed

elasticmachine commented Oct 10, 2019

💔 Build Failed

elasticmachine commented Oct 10, 2019

💔 Build Failed

elasticmachine commented Oct 11, 2019

💔 Build Failed

elasticmachine commented Oct 14, 2019

💔 Build Failed

elasticmachine commented Oct 14, 2019

💚 Build Succeeded

elasticmachine commented Oct 15, 2019

elasticmachine commented Oct 16, 2019

💚 Build Succeeded

afgomez commented Oct 21, 2019

phillipb left a comment

Choose a reason for hiding this comment

phillipb Oct 21, 2019

Choose a reason for hiding this comment

phillipb Oct 21, 2019

Choose a reason for hiding this comment

simianhacker Oct 21, 2019

Choose a reason for hiding this comment

simianhacker commented Oct 21, 2019

elasticmachine commented Oct 21, 2019

💚 Build Succeeded

simianhacker commented Oct 21, 2019

simianhacker commented Sep 23, 2019 •

edited

Loading