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

Add integration with GraphQL #134

Merged
merged 7 commits into from Jun 6, 2017

Conversation

Projects
None yet
2 participants
@c-w
Copy link
Contributor

commented May 19, 2017

This pull request adds a connection and data-source for GraphQL.

To test the integration, place the following content into a file called graphql.private.js in the server/dashboards folder:

return {
  id: "graphql",
  name: "GraphQL",
  icon: "dashboard",
  url: "graphql",
  description: "A basic sample to see how a GraphQL service is connected to graphs",
  preview: "/images/bot-framework-preview.png",
  config: {
    connections: {
      graphql: { serviceUrl: "https://pokeapi-graphiql.herokuapp.com" }
    },
    layout: {
      isDraggable: true,
      isResizable: true,
      rowHeight: 30,
      verticalCompact: false,
      cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
      breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
    }
  },
  dataSources: [
    {
      id: "pokeIds",
      type: "Constant",
      params: { values: [12, 13, 14], selectedValue: 12 },
      calculated: (state, dependencies) => {
        return { variables: { pokeId: state.selectedValue } };
      }
    },
    {
      id: "graphql",
      type: "GraphQL",
      dependencies: { variables: "pokeIds:variables" },
      params: { 
        query: "query($pokeId:Int!){pokemon(number:$pokeId){name}}"
      },
      calculated: (state, dependencies) => {
        return { pokemons: [state.data.pokemon] };
      }
    }
  ],
  filters: [
    {
      type: "TextFilter",
      title: "PokeId",
      dependencies: { selectedValue: "pokeIds", values: "pokeIds:values" },
      actions: { onChange: "pokeIds:updateSelectedValue" },
      first: true
    },
  ],
  elements: [
    {
      id: "names",
      type: "Table",
      size: { w: 4, h: 8 },
      dependencies: {
        values: "graphql:pokemons"
      },
      props: {
        cols: [
          { header: "Name", field: "name" }
        ]
      },
    }
  ],
  dialogs: []
}

Open the thus-defined dashboard to fetch the name for a Pokemon from the GraphQL PokeAPI and display it in an Ibex table:

image

@morsh

This comment has been minimized.

Copy link
Contributor

commented May 21, 2017

@c-w not sure if this should be approved prior event hub. Plus, add this sample (minus the connection string) to the dashboard samples once you added event hub integration and add html instructions how to add the connection string (under connection => editor)

@morsh
Copy link
Contributor

left a comment

@c-w - very small comments. Great work!
Please get the latest changes and solve the conflicts, if there are any.

}

const params = this.getParams();
const query = params.query;

This comment has been minimized.

Copy link
@morsh

morsh Jun 4, 2017

Contributor

const params = this.getParams() || {};
const { query } = params || {};

This comment has been minimized.

Copy link
@c-w

c-w Jun 6, 2017

Author Contributor

The suggested code doesn't compile, but I managed to add default values in 4dcbd0e.


updateSelectedValues(dependencies: IDictionary, selectedValues: any) {
if (Array.isArray(selectedValues)) {
return Object.assign(dependencies, { 'selectedValues': selectedValues });

This comment has been minimized.

Copy link
@morsh

morsh Jun 4, 2017

Contributor

I find that using lodash is more readable, especially if you have it in your project. But that is just a recommendation, not a must. Plus, you can use a simpler form of assign to property:

Object.assign(dependencies, { selectedValues });

This comment has been minimized.

Copy link
@c-w

c-w Jun 6, 2017

Author Contributor

This is copied from other updateSelectedValues implementations (e.g. Sample.ts, Azure.ts) so I'd say that we should clean this up in bulk in the future.

@c-w c-w changed the base branch from master to ibex-version-1.0 Jun 6, 2017

@morsh morsh merged commit 1eb7dd5 into Azure:ibex-version-1.0 Jun 6, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.