diff --git a/packages/images/src/components/empty.js b/packages/images/src/components/empty.js
new file mode 100644
index 00000000..213c7b92
--- /dev/null
+++ b/packages/images/src/components/empty.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+
+import { H3, Card } from 'joyent-ui-toolkit';
+import { NoPackages } from 'joyent-logo-assets';
+
+const NoPackagesTitle = styled(H3)`
+ color: ${props => props.theme.greyDark};
+ text-align: center;
+`;
+
+const FullWidthCard = styled(Card)`
+ width: 100%;
+`;
+
+export default ({ children }) => (
+
+
+
+
+
+
+ {children}
+
+
+
+);
diff --git a/packages/images/src/components/image.js b/packages/images/src/components/image.js
new file mode 100644
index 00000000..a6969c4d
--- /dev/null
+++ b/packages/images/src/components/image.js
@@ -0,0 +1,124 @@
+import React, { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import { Field } from 'redux-form';
+import {
+ Card,
+ Anchor,
+ CardHeader,
+ Divider,
+ ActionsIcon,
+ PopoverTarget,
+ Popover,
+ PopoverItem,
+ PopoverDivider,
+ PopoverContainer,
+ Radio,
+ FormLabel,
+ FormGroup
+} from 'joyent-ui-toolkit';
+
+import Flex, { FlexItem } from 'styled-flex-component';
+import { Padding, Margin } from 'styled-components-spacing';
+
+import { ImageType, OS } from '../constants';
+
+const A = styled(Anchor)`
+ color: ${props => props.theme.text};
+ text-decoration: none;
+ font-weight: ${props => props.theme.font.weight.semibold};
+`;
+
+export const Image = ({ name, os, version, type }) => (
+
+
+
+
+
+
+ {React.createElement(OS[os], {
+ width: '24',
+ height: '24'
+ })}
+
+
+ {name}
+
+
+
+
+
+
+
+
+ {version}
+
+
+
+ {ImageType[type]}
+
+
+
+
+
+
+
+
+
+ {}}>
+ Create Instance
+
+
+ {}}>
+ Remove
+
+
+
+
+
+
+
+);
+
+export const Filters = () => (
+
+
+
+
+
+ All
+
+
+
+
+
+
+
+
+ Virtual machines
+
+
+
+
+
+
+
+
+ Infrastructure container
+
+
+
+
+
+);
diff --git a/packages/images/src/components/summary.js b/packages/images/src/components/summary.js
index 020549aa..14da739c 100644
--- a/packages/images/src/components/summary.js
+++ b/packages/images/src/components/summary.js
@@ -22,14 +22,7 @@ import {
DotIcon
} from 'joyent-ui-toolkit';
-import {
- Linux,
- Freebsd,
- Illumos,
- Smart,
- Windows,
- Placeholder
-} from 'joyent-logo-assets';
+import { ImageType, OS } from '../constants';
const { SmallOnly, Medium } = QueryBreakpoints;
@@ -51,14 +44,6 @@ const GreyLabel = styled(Label)`
padding-right: ${remcalc(3)};
`;
-const ImageType = {
- ZONE_DATASET: 'Hardware Virtual Machine',
- LX_DATASET: 'Infrastructure Container',
- ZVOL: 'Hardware Virtual Machine',
- DOCKER: 'Docker Container',
- OTHER: 'Hardware Virtual Machine'
-};
-
const StateColor = {
ACTIVE: 'green',
UNACTIVATED: 'grey',
@@ -67,15 +52,7 @@ const StateColor = {
FAILED: 'red'
};
-const OS = {
- SMARTOS: Smart,
- LINUX: Linux,
- WINDOWS: Windows,
- BSD: Freebsd,
- ILLUMOS: Illumos,
- OTHER: Placeholder
-};
-
+// eslint-disable-next-line camelcase
export const Meta = ({ name, version, type, published_at, state, os }) => (
diff --git a/packages/images/src/constants.js b/packages/images/src/constants.js
new file mode 100644
index 00000000..edb0ee96
--- /dev/null
+++ b/packages/images/src/constants.js
@@ -0,0 +1,24 @@
+import {
+ Linux,
+ Freebsd,
+ Illumos,
+ Smart,
+ Windows,
+ Placeholder
+} from 'joyent-logo-assets';
+
+export const ImageType = {
+ ZONE_DATASET: 'Hardware Virtual Machine',
+ LX_DATASET: 'Infrastructure Container',
+ ZVOL: 'Hardware Virtual Machine',
+ DOCKER: 'Docker Container',
+ OTHER: 'Hardware Virtual Machine'
+};
+export const OS = {
+ SMARTOS: Smart,
+ LINUX: Linux,
+ WINDOWS: Windows,
+ BSD: Freebsd,
+ ILLUMOS: Illumos,
+ OTHER: Placeholder
+};
diff --git a/packages/images/src/containers/create.js b/packages/images/src/containers/create.js
index 61cba9c0..f5138a5b 100644
--- a/packages/images/src/containers/create.js
+++ b/packages/images/src/containers/create.js
@@ -1,3 +1,3 @@
import React from 'react';
-export default () => (hello world
);
\ No newline at end of file
+export default () => hello world
;
diff --git a/packages/images/src/containers/list.js b/packages/images/src/containers/list.js
index d1288f7e..64253c9b 100644
--- a/packages/images/src/containers/list.js
+++ b/packages/images/src/containers/list.js
@@ -1,14 +1,17 @@
import React, { Fragment } from 'react';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
-import { Link } from 'react-router-dom';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import find from 'lodash.find';
+import Index from '@state/gen-index';
import {
ViewContainer,
Divider,
- Anchor,
StatusLoader,
Message,
MessageTitle,
@@ -16,17 +19,30 @@ import {
} from 'joyent-ui-toolkit';
import ToolbarForm from '@components/toolbar';
+import Empty from '@components/empty';
+
+import { ImageType } from '../constants';
import ListImages from '@graphql/list-images.gql';
-// const TABLE_FORM_NAME = 'images-list-table';
+import { Image, Filters } from '@components/image';
+
+const TOGGLE_FORM_NAME = 'images-list-toggle';
const MENU_FORM_NAME = 'images-list-menu';
-export const List = ({ images = [], loading = false, error = null }) => (
+export const List = ({
+ images = [],
+ allImages = [],
+ loading = false,
+ error = null,
+ history
+}) => (
- {props => }
+ {props => }
+
+
{loading && !images.length ? (
@@ -43,15 +59,26 @@ export const List = ({ images = [], loading = false, error = null }) => (
) : null}
-
- {images.map(({ name }) => (
- -
-
- {name}
-
-
- ))}
-
+
+
+
+ {props => (allImages.length ? : null)}
+
+
+
+ {images.map(image => (
+
+
+
+ ))}
+ {!images.length && !loading ? (
+ No images to see here
+ ) : null}
+
+
);
@@ -64,5 +91,38 @@ export default compose(
error
};
}
+ }),
+ connect(({ form, values }, { index, error, images = [] }) => {
+ const filter = get(form, `${MENU_FORM_NAME}.values.filter`, false);
+ const typeValue = get(form, `${TOGGLE_FORM_NAME}.values.image-type`, 'all');
+
+ const virtual = Object.keys(ImageType).filter(
+ i => ImageType[i] === 'Hardware Virtual Machine'
+ );
+ const container = Object.keys(ImageType).filter(
+ i => ImageType[i] === 'Infrastructure Container'
+ );
+
+ const filtered = filter
+ ? Index(images)
+ .search(filter)
+ .map(({ ref }) => find(images, ['id', ref]))
+ : images;
+
+ return {
+ images: filtered.filter(image => {
+ switch (typeValue) {
+ case 'all':
+ return true;
+ case 'hardware-virtual-machine':
+ return virtual.includes(image.type);
+ case 'infrastructure-container':
+ return container.includes(image.type);
+ default:
+ return true;
+ }
+ }),
+ allImages: images
+ };
})
)(List);
diff --git a/packages/logos/assets/alpine.svg b/packages/logos/assets/alpine.svg
index c4e89cfd..a592a2e7 100644
--- a/packages/logos/assets/alpine.svg
+++ b/packages/logos/assets/alpine.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/apache.svg b/packages/logos/assets/apache.svg
index 0520c3b0..6c9a8557 100644
--- a/packages/logos/assets/apache.svg
+++ b/packages/logos/assets/apache.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/brocade.svg b/packages/logos/assets/brocade.svg
index c8055720..ce29348d 100644
--- a/packages/logos/assets/brocade.svg
+++ b/packages/logos/assets/brocade.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/cassandra.svg b/packages/logos/assets/cassandra.svg
index 41c42092..2c7c2241 100644
--- a/packages/logos/assets/cassandra.svg
+++ b/packages/logos/assets/cassandra.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/centos.svg b/packages/logos/assets/centos.svg
index 19540996..49e5147c 100644
--- a/packages/logos/assets/centos.svg
+++ b/packages/logos/assets/centos.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/couchbase.svg b/packages/logos/assets/couchbase.svg
index a759b170..8635fb90 100644
--- a/packages/logos/assets/couchbase.svg
+++ b/packages/logos/assets/couchbase.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/debian.svg b/packages/logos/assets/debian.svg
index df713340..abf4cb00 100644
--- a/packages/logos/assets/debian.svg
+++ b/packages/logos/assets/debian.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/fedora.svg b/packages/logos/assets/fedora.svg
index c2b7cf56..79022386 100644
--- a/packages/logos/assets/fedora.svg
+++ b/packages/logos/assets/fedora.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/logos/assets/freebsd.svg b/packages/logos/assets/freebsd.svg
old mode 100755
new mode 100644
index cf420559..dcfdb7de
--- a/packages/logos/assets/freebsd.svg
+++ b/packages/logos/assets/freebsd.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/packages/logos/assets/ghost.svg b/packages/logos/assets/ghost.svg
index 4a9e2370..c0a69bf3 100644
--- a/packages/logos/assets/ghost.svg
+++ b/packages/logos/assets/ghost.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/java.svg b/packages/logos/assets/java.svg
index f0ba2899..1e0b7e7a 100644
--- a/packages/logos/assets/java.svg
+++ b/packages/logos/assets/java.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/mariadb.svg b/packages/logos/assets/mariadb.svg
index 8de3aaa2..a514e5e7 100644
--- a/packages/logos/assets/mariadb.svg
+++ b/packages/logos/assets/mariadb.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/mongodb.svg b/packages/logos/assets/mongodb.svg
index 5bf582e2..45d0d70a 100644
--- a/packages/logos/assets/mongodb.svg
+++ b/packages/logos/assets/mongodb.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/multiarch.svg b/packages/logos/assets/multiarch.svg
index d13493e8..ec7c989f 100644
--- a/packages/logos/assets/multiarch.svg
+++ b/packages/logos/assets/multiarch.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/mysql.svg b/packages/logos/assets/mysql.svg
index db3e33c5..febd4b5c 100644
--- a/packages/logos/assets/mysql.svg
+++ b/packages/logos/assets/mysql.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/nginx.svg b/packages/logos/assets/nginx.svg
index a0bc64a6..7e833f7c 100644
--- a/packages/logos/assets/nginx.svg
+++ b/packages/logos/assets/nginx.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/node.svg b/packages/logos/assets/node.svg
index 9734a4aa..16cd387b 100644
--- a/packages/logos/assets/node.svg
+++ b/packages/logos/assets/node.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/logos/assets/openbsd.svg b/packages/logos/assets/openbsd.svg
old mode 100755
new mode 100644
index 90bb151d..09b50623
--- a/packages/logos/assets/openbsd.svg
+++ b/packages/logos/assets/openbsd.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/packages/logos/assets/percona.svg b/packages/logos/assets/percona.svg
index cefb4459..cc9778a0 100644
--- a/packages/logos/assets/percona.svg
+++ b/packages/logos/assets/percona.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/placeholder.svg b/packages/logos/assets/placeholder.svg
index 0e5ed8ef..3e8734b6 100644
--- a/packages/logos/assets/placeholder.svg
+++ b/packages/logos/assets/placeholder.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/postgresql.svg b/packages/logos/assets/postgresql.svg
index 636e8bf5..673b52af 100644
--- a/packages/logos/assets/postgresql.svg
+++ b/packages/logos/assets/postgresql.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/redis.svg b/packages/logos/assets/redis.svg
index 20b696cb..56887cfa 100644
--- a/packages/logos/assets/redis.svg
+++ b/packages/logos/assets/redis.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/scylladb.svg b/packages/logos/assets/scylladb.svg
index d8f0664e..d16985ba 100644
--- a/packages/logos/assets/scylladb.svg
+++ b/packages/logos/assets/scylladb.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/smart.svg b/packages/logos/assets/smart.svg
index d13493e8..ec7c989f 100644
--- a/packages/logos/assets/smart.svg
+++ b/packages/logos/assets/smart.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/ubuntu.svg b/packages/logos/assets/ubuntu.svg
index 2edec6ea..f6e9aaa5 100644
--- a/packages/logos/assets/ubuntu.svg
+++ b/packages/logos/assets/ubuntu.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/assets/windows.svg b/packages/logos/assets/windows.svg
index b54071b4..87d416ca 100644
--- a/packages/logos/assets/windows.svg
+++ b/packages/logos/assets/windows.svg
@@ -1 +1 @@
-
+
diff --git a/packages/logos/convert.js b/packages/logos/convert.js
index c9aa4e8c..5161cfa2 100644
--- a/packages/logos/convert.js
+++ b/packages/logos/convert.js
@@ -20,14 +20,12 @@ main(async () => {
await forEach(files, async file => {
const svg = await readFile(file, 'utf-8');
const jsx = converter.convert(svg);
-
const header = jsx.match(/(^