2018-02-05 17:12:47 +02:00
|
|
|
import React from 'react';
|
|
|
|
import { Link } from 'react-router-dom';
|
2018-04-12 12:53:00 +03:00
|
|
|
import { Margin } from 'styled-components-spacing';
|
2018-02-05 17:12:47 +02:00
|
|
|
import paramCase from 'param-case';
|
|
|
|
import get from 'lodash.get';
|
|
|
|
|
|
|
|
import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
export default ({ match }) => {
|
|
|
|
const image = get(match, 'params.image');
|
2018-02-13 22:03:57 +02:00
|
|
|
const create = get(match, 'params.step');
|
|
|
|
const instance = get(match, 'params.instance');
|
2018-02-05 17:12:47 +02:00
|
|
|
|
|
|
|
const links = [
|
|
|
|
{
|
2018-03-06 03:14:33 +02:00
|
|
|
name: 'Compute',
|
2018-02-05 17:12:47 +02:00
|
|
|
pathname: '/'
|
2018-03-06 03:14:33 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Images',
|
|
|
|
pathname: '/images'
|
2018-02-05 17:12:47 +02:00
|
|
|
}
|
|
|
|
]
|
2018-02-13 22:03:57 +02:00
|
|
|
.concat(
|
|
|
|
create && [
|
|
|
|
{
|
|
|
|
name: 'Create Image',
|
2018-03-06 03:14:33 +02:00
|
|
|
pathname: `/images/~create`
|
2018-02-13 22:03:57 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: instance,
|
2018-03-06 03:14:33 +02:00
|
|
|
pathname: `/images/~create/${instance}`
|
2018-02-13 22:03:57 +02:00
|
|
|
}
|
|
|
|
]
|
|
|
|
)
|
2018-02-05 17:12:47 +02:00
|
|
|
.concat(
|
|
|
|
image && [
|
|
|
|
{
|
|
|
|
name: paramCase(image),
|
2018-03-06 03:14:33 +02:00
|
|
|
pathname: `/images/${image}`
|
2018-02-05 17:12:47 +02:00
|
|
|
}
|
|
|
|
]
|
|
|
|
)
|
|
|
|
.filter(Boolean)
|
|
|
|
.map(({ name, pathname }) => (
|
|
|
|
<BreadcrumbItem key={name} to={pathname} component={Link}>
|
2018-04-12 12:53:00 +03:00
|
|
|
<Margin horizontal={1} vertical={3}>
|
|
|
|
{name}
|
|
|
|
</Margin>
|
2018-02-05 17:12:47 +02:00
|
|
|
</BreadcrumbItem>
|
|
|
|
));
|
|
|
|
|
|
|
|
return <Breadcrumb>{links}</Breadcrumb>;
|
|
|
|
};
|