billing.js

import React, {Component} from 'react';

export default class ResourceBill extends Component {
    constructor(props) {
        super(props);

        this.state = {
            resource: props.resource,
            billing_records: [{}]
        };
    }

    encodeQueryData(data) {
        let ret = [];
        for (let d in data)
            ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
        return ret.join('&');
    }


    // gets called when this route is navigated to
    componentDidMount() {
        let params = this.encodeQueryData({
            resource: this.state.resource
        });

        fetch('https://tc655t9dof.execute-api.us-west-2.amazonaws.com/dev/billing/resource?' + params,)
            .then(r => r.json())
            .then(rs => {
                this.setState({
                    billing_records: rs
                });

            });

    }

    render() {
        let br = this.state.billing_records;

        return (
            <div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Usage</th>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Cost</th>
                    </tr>
                    </thead>
                    <tbody>
                    {br.map(rec => (
                        <tr>
                            <td>{rec.usage}</td>
                            <td>{rec.description}</td>
                            <td>{rec.quantity}</td>
                            <td>{rec.cost}</td>
                        </tr>
                    ))}

                    </tbody>
                </table>

            </div>
        );
    }
}

index.js

import React, {Component} from 'react';
import {
    Link
} from 'react-router-dom'

import ResourceBill from '../../components/billing'

import './style.css'

export default class Instance extends Component {
    constructor(props) {
        console.log(props);
        console.log(props.params);
        super(props);

        this.state = {
            instance_id: props.match.params.id,
            region: props.match.params.region,
            account: props.match.params.account,
            instance: {
                InstanceId: "",
                Placement: {},
                Monitoring: {},
                State: {},
                BlockDeviceMappings: [{
                    Ebs: {}
                }],
                NetworkInterfaces: [{}],
                Tags: [{}],
                SecurityGroups: [{}],
                IamInstanceProfile: [{}]
            }
        };
    }

    encodeQueryData(data) {
        let ret = [];
        for (let d in data)
            ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
        return ret.join('&');
    }


    // gets called when this route is navigated to
    componentDidMount() {

        let params = this.encodeQueryData({
            account: this.state.account,
            region: this.state.region,
            instance: this.state.instance_id
        });

        fetch('https://tc655t9dof.execute-api.us-west-2.amazonaws.com/dev/ec2/instance?' + params,)
            .then(r => r.json())
            .then(instance => {
                console.log("comp", instance);
                this.setState({
                    instance: instance
                });

            });

    }

    render() {
        let instance = this.state.instance;
        console.log(instance);

        return (
            <div>
                <h2>{instance.Name || instance.InstanceId} - {instance.App || instance.Platform} - {instance.Env}</h2>

                <div class="row">
                    <div class="col-md-9">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>InstanceId</td>
                                <td>{instance.InstanceId}</td>
                            </tr>
                            <tr>
                                <td>State</td>
                                <td>{instance.State.Name} ({instance.StateTransitionReason})</td>
                            </tr>
                            <tr>
                                <td>Private IP</td>
                                <td>{instance.PrivateIpAddress} ({instance.PrivateDnsName})</td>
                            </tr>
                            <tr>
                                <td>Public IP</td>
                                <td>{instance.PublicIpAddress} ({instance.PublicDnsName})</td>
                            </tr>
                            <tr>
                                <td>Key Name</td>
                                <td>{instance.KeyName}</td>
                            </tr>
                            <tr>
                                <td>Instance Type</td>
                                <td>{instance.InstanceType}</td>
                            </tr>
                            <tr>
                                <td>Launch Time</td>
                                <td>{instance.LaunchTime}</td>
                            </tr>
                            <tr>
                                <td>Zone</td>
                                <td>{instance.Placement.AvailabilityZone} {instance.Placement.GroupName}</td>
                            </tr>
                            <tr>
                                <td>Platform</td>
                                <td>{instance.Platform}</td>
                            </tr>
                            <tr>
                                <td>Detailed Monitoring</td>
                                <td>{instance.Monitoring.State}</td>
                            </tr>
                            <tr>
                                <td>Block Device Mappings</td>
                                <td>{instance.BlockDeviceMappings.map(bdm => (
                                    <p>{bdm.DeviceName} -
                                    (<Link to={"/volume/" + this.state.account + "/" +
                                        this.state.region + "/" +
                                        bdm.Ebs.VolumeId}>{bdm.Ebs.VolumeId}</Link>)</p>
                                ))}
                                </td>
                            </tr>
                            <tr>
                                <td>Tags</td>
                                <td>
                                    <table>
                                        {instance.Tags.map(tag => (
                                            <tr>
                                                <th>{tag.Key}</th>
                                                <td> {tag.Value}</td>
                                            </tr>
                                        ))}
                                    </table>
                                </td>
                            </tr>

                            <tr>
                                <td>Security Groups</td>
                                <td>
                                    {instance.SecurityGroups.map(g => (
                                        <p>{g.GroupName} ({g.GroupId})</p>
                                    ))}
                                </td>
                            </tr>
                            <tr>
                                <td>Network Interfaces</td>
                                <td>{instance.NetworkInterfaces.map(g => (
                                    <p>{g.NetworkInterfaceId} ({g.PrivateIpAddress})</p>
                                ))}
                                </td>
                            </tr>

                            <tr>
                                <td>Iam Instance Profile</td>
                                <td>{/*instance.IamInstanceProfile.Arn*/}</td>
                            </tr>
                            <tr>
                                <td>EBS Optimized</td>
                                <td>{instance.EbsOptimized}</td>
                            </tr>
                            <tr class="boring">
                                <td>ImageId</td>
                                <td>{instance.ImageId}</td>
                            </tr>

                            <tr class="boring">
                                <td>Subnet Id</td>
                                <td>{instance.SubnetId}</td>
                            </tr>
                            <tr class="boring">
                                <td>VPC Id</td>
                                <td>{instance.VpcId}</td>
                            </tr>
                            <tr class="boring">
                                <td>Root Device</td>
                                <td>{instance.RootDeviceName} ({instance.RootDeviceType})</td>
                            </tr>

                            <tr class="boring">
                                <td>Ami Launch Index</td>
                                <td>{instance.AmiLaunchIndex}</td>
                            </tr>

                            <tr class="boring">
                                <td>Kernel Id</td>
                                <td>{instance.KernelId}</td>
                            </tr>
                            <tr class="boring">
                                <td>Ramdisk Id</td>
                                <td>{instance.RamdiskId}</td>
                            </tr>

                            <tr class="boring">
                                <td>Architecture</td>
                                <td>{instance.Architecture}</td>
                            </tr>

                            <tr class="boring">
                                <td>Virtualization Type</td>
                                <td>{instance.VirtualizationType}</td>
                            </tr>
                            <tr class="boring">
                                <td>Instance Lifecycle</td>
                                <td>{instance.InstanceLifecycle}</td>
                            </tr>
                            <tr class="boring">
                                <td>Spot Instance RequestId</td>
                                <td>{instance.SpotInstanceRequestId}</td>
                            </tr>
                            <tr class="boring">
                                <td>License</td>
                                <td>{instance.License}</td>
                            </tr>
                            <tr class="boring">
                                <td>Client Token</td>
                                <td>{instance.ClientToken}</td>
                            </tr>

                            <tr class="boring">
                                <td>SourceDestCheck</td>
                                <td>{instance.SourceDestCheck}</td>
                            </tr>
                            <tr class="boring">
                                <td>Hypervisor</td>
                                <td>{instance.Hypervisor}</td>
                            </tr>
                            </tbody>
                        </table>

                        <ResourceBill resource={instance.InstanceId} />
                    </div>
                </div>
            </div>

        );
    }
}