Skip to content

Instantly share code, notes, and snippets.

@jmelloy
Last active January 15, 2018 23:23
Show Gist options
  • Save jmelloy/40cf4e27fa178ba2a54ce070218d7c77 to your computer and use it in GitHub Desktop.
Save jmelloy/40cf4e27fa178ba2a54ce070218d7c77 to your computer and use it in GitHub Desktop.
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>
);
}
}
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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment