diff --git a/packages/icons/src/fabric.js b/packages/icons/src/fabric.js
new file mode 100644
index 00000000..84700d40
--- /dev/null
+++ b/packages/icons/src/fabric.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import rndId from 'rnd-id';
+
+import Colors from './colors';
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+ fill = null,
+ light = false,
+ disabled = false,
+ direction = 'down',
+ style = {},
+ ...rest
+}) => (
+
+ {colors => (
+
+ {({ style: rotateStyle }) => (
+
+ )}
+
+ )}
+
+);
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 586da697..b691ab64 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -33,3 +33,6 @@ export { default as Stop } from './stop';
export { default as Tags } from './tags';
export { default as Triton } from './triton';
export { default as User } from './user';
+export { default as Randomize } from './randomize';
+export { default as Name } from './name';
+export { default as Fabric } from './fabric';
diff --git a/packages/icons/src/name.js b/packages/icons/src/name.js
new file mode 100644
index 00000000..85a6f2d5
--- /dev/null
+++ b/packages/icons/src/name.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import rndId from 'rnd-id';
+
+import Colors from './colors';
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+ fill = null,
+ light = false,
+ disabled = false,
+ direction = 'down',
+ style = {},
+ ...rest
+}) => (
+
+ {colors => (
+
+ {({ style: rotateStyle }) => (
+
+ )}
+
+ )}
+
+);
diff --git a/packages/icons/src/randomize.js b/packages/icons/src/randomize.js
new file mode 100644
index 00000000..f6eadf35
--- /dev/null
+++ b/packages/icons/src/randomize.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import rndId from 'rnd-id';
+
+import Colors from './colors';
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+ fill = null,
+ light = false,
+ disabled = false,
+ direction = 'down',
+ style = {},
+ ...rest
+}) => (
+
+ {colors => (
+
+ {({ style: rotateStyle }) => (
+
+ )}
+
+ )}
+
+);
diff --git a/packages/my-joy-beta/src/components/instances/snapshots.js b/packages/my-joy-beta/src/components/instances/snapshots.js
index 0d01a751..06ff1ef0 100644
--- a/packages/my-joy-beta/src/components/instances/snapshots.js
+++ b/packages/my-joy-beta/src/components/instances/snapshots.js
@@ -1,22 +1,13 @@
import React from 'react';
-import forceArray from 'force-array';
-import find from 'lodash.find';
import { Field } from 'redux-form';
import titleCase from 'title-case';
-import moment from 'moment';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc';
-import InstanceListActions from '@components/instances/footer';
import { KeyValue } from '@components/instances';
-import ReduxForm from 'declarative-redux-form';
-import { Margin } from 'styled-components-spacing';
import {
FormGroup,
- ViewContainer,
StatusLoader,
- Message,
- MessageTitle,
- MessageDescription,
Table,
TableThead,
TableTr,
@@ -67,10 +58,10 @@ export const Item = ({
{titleCase(state)}
,
- {moment.unix(created).fromNow()}
+ {distanceInWordsToNow(created)}
,
- {moment.unix(updated).fromNow()}
+ {distanceInWordsToNow(updated)}
,
diff --git a/packages/my-joy-beta/src/containers/instances/snapshots.js b/packages/my-joy-beta/src/containers/instances/snapshots.js
index 29ce1731..b5871ccb 100644
--- a/packages/my-joy-beta/src/containers/instances/snapshots.js
+++ b/packages/my-joy-beta/src/containers/instances/snapshots.js
@@ -1,8 +1,7 @@
import React from 'react';
-import moment from 'moment';
import forceArray from 'force-array';
import { connect } from 'react-redux';
-import { reduxForm, stopSubmit, startSubmit, change, reset } from 'redux-form';
+import { stopSubmit, startSubmit, change, reset } from 'redux-form';
import { compose, graphql } from 'react-apollo';
import find from 'lodash.find';
import get from 'lodash.get';
@@ -166,13 +165,7 @@ export default compose(
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
- const snapshots = get(instance, 'snapshots', []).map(
- ({ created, updated, ...rest }) => ({
- ...rest,
- created: moment.utc(created).unix(),
- updated: moment.utc(updated).unix()
- })
- );
+ const snapshots = get(instance, 'snapshots', []);
const index = GenIndex(
snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
@@ -247,16 +240,7 @@ export default compose(
};
},
(dispatch, ownProps) => {
- const {
- create,
- start,
- remove,
- instance,
- history,
- match,
- createSnapshot,
- refetch
- } = ownProps;
+ const { instance, createSnapshot, refetch } = ownProps;
return {
handleSortBy: (newSortBy, sortOrder) => {
@@ -396,7 +380,7 @@ export default compose(
};
},
(stateProps, dispatchProps, ownProps) => {
- const { selected, snapshots, sortBy, sortOrder } = stateProps;
+ const { selected, snapshots } = stateProps;
const { toggleSelectAll } = dispatchProps;
return {
diff --git a/packages/ui-toolkit/src/faq.md b/packages/ui-toolkit/src/faq.md
index ff1dc23c..d496fe19 100644
--- a/packages/ui-toolkit/src/faq.md
+++ b/packages/ui-toolkit/src/faq.md
@@ -1,6 +1,8 @@
### How was the Joyent UI Toolkit built?
-The toolkit components were built using
+The style guide was built with the amazing open source project [React Styleguidist](https://react-styleguidist.js.org).
+
+The components were built using
[React](https://facebook.github.io/react/) and
[Styled Components](http://styled-components.com).
diff --git a/packages/ui-toolkit/src/icons/functional.md b/packages/ui-toolkit/src/icons/functional.md
index 45c9faac..6a05df55 100644
--- a/packages/ui-toolkit/src/icons/functional.md
+++ b/packages/ui-toolkit/src/icons/functional.md
@@ -40,7 +40,10 @@ const {
Stop,
Tags,
Triton,
- User
+ User,
+ Name,
+ Randomize,
+ Fabric
} = require('.');
@@ -158,6 +161,12 @@ const {
+
+
+
+
+
+
@@ -212,12 +221,24 @@ const {
+
+
+
+
+
+
+
+
+
+
+
+
@@ -256,3 +277,4 @@ const {
;
```
+
diff --git a/packages/ui-toolkit/src/icons/index.js b/packages/ui-toolkit/src/icons/index.js
index 526c7898..4b6da2ea 100644
--- a/packages/ui-toolkit/src/icons/index.js
+++ b/packages/ui-toolkit/src/icons/index.js
@@ -35,9 +35,15 @@ import {
Stop as BaseStop,
Tags as BaseTags,
Triton as BaseTriton,
- User as BaseUser
+ User as BaseUser,
+ Fabric as BaseFabric,
+ Name as BaseName,
+ Randomize as BaseRandomize
} from 'joyent-icons';
+export const Fabric = Baseline(BaseFabric);
+export const Name = Baseline(BaseName);
+export const Randomize = Baseline(BaseRandomize);
export const Actions = Baseline(BaseActions);
export const Affinity = Baseline(BaseAffinity);
export const Arrow = Baseline(BaseArrow);