Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

show store location topology #719

Merged
merged 22 commits into from Aug 14, 2020
Merged

Conversation

baurine
Copy link
Collaborator

@baurine baurine commented Aug 4, 2020

resolve #688

API response example:

{
  "location_labels": "zone,rack,host",
  "stores": [
    {
      "address": "127.0.0.1:20160",
      "labels": {
        "host": "h1",
        "rack": "r1",
        "zone": "sh"
      }
    },
    {
      "address": "127.0.0.1:20161",
      "labels": {
        "host": "h2",
        "rack": "r1",
        "zone": "sh"
      }
    },
    {
      "address": "127.0.0.1:20162",
      "labels": {
        "host": "h1",
        "rack": "r1",
        "zone": "bj"
      }
    },
    {
      "address": "127.0.0.1:3930",
      "labels": {
        "engine": "tiflash",
        "zone": "bj"
      }
    }
  ]
}

Aggregate to tree nodes:

{
  "name": "zone",
  "value": "",
  "children": [
    {
      "name": "zone",
      "value": "sh",
      "children": [
        {
          "name": "rack",
          "value": "r1",
          "children": [
            {
              "name": "host",
              "value": "h1",
              "children": [
                {
                  "name": "address",
                  "value": "127.0.0.1:20160",
                  "children": []
                }
              ]
            },
            {
              "name": "host",
              "value": "h2",
              "children": [
                {
                  "name": "address",
                  "value": "127.0.0.1:20161",
                  "children": []
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "name": "zone",
      "value": "bj",
      "children": [
        {
          "name": "rack",
          "value": "r1",
          "children": [
            {
              "name": "host",
              "value": "h1",
              "children": [
                {
                  "name": "address",
                  "value": "127.0.0.1:20162",
                  "children": []
                }
              ]
            }
          ]
        },
        {
          "name": "address",
          "value": "127.0.0.1:3930",
          "children": []
        }
      ]
    }
  ]
}

Currently, it is displayed in a new tab in the cluster-info page:

image

@baurine baurine marked this pull request as draft August 4, 2020 08:59
children: TreeNode[]
}

function buildTopology(data: TopologyStoreLocation | undefined) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is easier to do the aggregation in the frontend, so I didn't do it in the backend.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree

@baurine baurine marked this pull request as ready for review August 5, 2020 03:46
@baurine
Copy link
Collaborator Author

baurine commented Aug 5, 2020

Hi, @breeswish @HunDunDM please help take a look, thanks! the UI component to show the tree is WIP by the intern.

@baurine
Copy link
Collaborator Author

baurine commented Aug 13, 2020

Current effect:

image

TODO:

  • Use d3 to render instead of echarts

@breezewish
Copy link
Member

Good job! I suggest to assign different colors to distinguish a Label and an Instance.

@baurine
Copy link
Collaborator Author

baurine commented Aug 13, 2020

Good job! I suggest to assign different colors to distinguish a Label and an Instance.

Got it!

Final effect:

26

@breeswish PTAL, thanks!

@baurine
Copy link
Collaborator Author

baurine commented Aug 14, 2020

Changed colors for label and instance:

image

@breezewish breezewish merged commit fb43f5b into pingcap:master Aug 14, 2020
@breezewish
Copy link
Member

Very cool!

@baurine baurine deleted the store-locations-vis branch August 14, 2020 07:52
breezewish pushed a commit that referenced this pull request Sep 8, 2020
breezewish added a commit that referenced this pull request Sep 8, 2020
* feature: Query Editor (#713)
* Backend: replace UNIX_TIMESTAMP with FROM_UNIXTIME in statement query (#731)
* test: Stablize e2e tests (#732)
* ui: Add store location tree (#728)
* log_search: Display instance port (#722)
* ui: show store location topology (#719)
* ui: Online Config (#733)
* ui: Support sharing session (#741)
* doc: Update to sig-diagnosis (#742)
* statement: Display number of plans in the list (#746)
* log search: return zip instead of tar or gzip (#724)
@baurine
Copy link
Collaborator Author

baurine commented Sep 27, 2020

How to create the test cluster: see etc/manualTestEnv/multiReplica/README.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Visualize Location Topology
2 participants