feat(instances): instance list pagination

packages/my-joy-instances/package.json

@@ -47,6 +47,7 @@
     "lodash.isfinite": "^3.3.2",
     "lodash.isfunction": "^3.0.9",
     "lodash.isinteger": "^4.0.4",
+    "lodash.isnan": "^3.0.2",
     "lodash.omit": "^4.5.0",
     "lodash.reduce": "^4.6.0",
     "lodash.reverse": "^4.0.1",

packages/my-joy-instances/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap

@@ -81,7 +81,9 @@ exports[`renders <Images expanded /> without throwing 1`] = `
 </form>
 `;
 
-exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
+exports[
+  `renders <Images images=[{name: stuff, imageName: stuff}] /> without throwing 1`
+] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;

packages/my-joy-instances/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -2912,7 +2912,9 @@ exports[`renders <Packages loading /> without throwing 1`] = `
 </form>
 `;
 
-exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
+exports[
+  `renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`
+] = `
 .c4 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;

packages/my-joy-instances/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap

@@ -259,7 +259,9 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
 </div>
 `;
 
-exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
+exports[
+  `renders <Title icon="Test" label="Instance name"/> without throwing 1`
+] = `
 .c3 {
   font-size: 80%;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;

packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@@ -983,24 +983,6 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c13 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c2 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -1084,6 +1066,24 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
+.c13 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 @media only screen and (min-width:47.9375rem) {
   .c10 {
     width: 10rem;
@@ -1362,24 +1362,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c13 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c2 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -1463,6 +1445,24 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
+.c13 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 @media only screen and (min-width:47.9375rem) {
   .c10 {
     width: 10rem;

packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -6712,7 +6712,9 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 </div>
 `;
 
-exports[`renders <Summary starting stopping rebooting removing /> without throwing 1`] = `
+exports[
+  `renders <Summary starting stopping rebooting removing /> without throwing 1`
+] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;

packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -331,6 +331,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={undefined}
+      to={undefined}
       type="submit"
     >
       Create
@@ -670,6 +671,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={undefined}
+      to={undefined}
       type="submit"
     >
       Action label
@@ -1031,6 +1033,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={undefined}
+      to={undefined}
       type="submit"
     >
       Create
@@ -1370,6 +1373,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={[Function]}
+      to={undefined}
       type="button"
     >
       Create
@@ -1709,6 +1713,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={undefined}
+      to={undefined}
       type="submit"
     >
       Create
@@ -2048,6 +2053,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={undefined}
+      to={undefined}
       type="submit"
     >
       Create
@@ -2402,6 +2408,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
       href=""
       icon={true}
       onClick={undefined}
+      to={undefined}
       type="submit"
     >
       Create

packages/my-joy-instances/src/components/instances/list.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
@@ -6,6 +6,7 @@ import titleCase from 'title-case';
 import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
 import Flex from 'styled-flex-component';
+import queryString from 'query-string';
 
 import {
   Anchor,
@@ -17,6 +18,8 @@ import {
   TableTh,
   TableTd,
   TableTbody,
+  PaginationTableFoot,
+  PaginationItem,
   StatusLoader,
   Popover,
   PopoverContainer,
@@ -27,7 +30,7 @@ import {
   ActionsIcon
 } from 'joyent-ui-toolkit';
 
-import GLOBAL from '@state/global';
+import GLOBAL, { Global } from '@state/global';
 
 const stateColor = {
   PROVISIONING: 'primary',
@@ -56,6 +59,14 @@ const Actions = styled(Flex)`
   min-width: ${remcalc(48)};
 `;
 
+export const FetchingItem = () => (
+  <TableTr colSpan="6">
+    <TableTd colSpan="6" middle center>
+      <StatusLoader />
+    </TableTd>
+  </TableTr>
+);
+
 export const Item = ({
   id = '',
   name,
@@ -148,71 +159,168 @@ export default ({
   toggleSelectAll = () => null,
   onSortBy = () => null,
   children,
-  noInstances
-}) => (
-  <form>
-    <Table>
-      <TableThead>
-        <TableTr>
-          <TableTh xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
-            <FormGroup paddingTop={remcalc(4)}>
-              <Checkbox
-                checked={allSelected}
-                disabled={submitting || noInstances}
-                onChange={toggleSelectAll}
-                noMargin
-              />
-            </FormGroup>
-          </TableTh>
-          <TableTh
-            onClick={() => onSortBy('name')}
-            sortOrder={sortOrder}
-            showSort={sortBy === 'name'}
-            left
-            middle
-            actionable
-          >
-            <span>Name </span>
-          </TableTh>
-          <TableTh
-            xs="150"
-            onClick={() => onSortBy('state')}
-            sortOrder={sortOrder}
-            showSort={sortBy === 'state'}
-            left
-            middle
-            actionable
-          >
-            <span>Status </span>
-          </TableTh>
-          <TableTh
-            xs="0"
-            sm="160"
-            onClick={() => onSortBy('created')}
-            sortOrder={sortOrder}
-            showSort={sortBy === 'created'}
-            left
-            middle
-            actionable
-          >
-            <span>Created </span>
-          </TableTh>
-          <TableTh
-            xs="0"
-            sm="130"
-            onClick={() => onSortBy('id')}
-            sortOrder={sortOrder}
-            showSort={sortBy === 'id'}
-            left
-            middle
-            actionable
-          >
-            <span>Short ID </span>
-          </TableTh>
-          <TableTh xs="60" padding="0" />
-        </TableTr>
-      </TableThead>
-      <TableTbody>{children}</TableTbody>
-    </Table>
-  </form>
-);
+  noInstances,
+  limit = 0,
+  offset = 0,
+  total = 0
+}) => {
+  const numPages = Math.ceil(total / limit);
+  const currPage = Math.ceil((offset + limit) / limit);
+  const isLast = currPage === numPages;
+  const isFirst = currPage === 1;
+
+  return (
+    <form>
+      <Table>
+        <TableThead>
+          <TableTr>
+            <TableTh xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+              <FormGroup paddingTop={remcalc(4)}>
+                <Checkbox
+                  checked={allSelected}
+                  disabled={submitting || noInstances}
+                  onChange={toggleSelectAll}
+                  noMargin
+                />
+              </FormGroup>
+            </TableTh>
+            <TableTh
+              onClick={() => onSortBy('name')}
+              sortOrder={sortOrder}
+              showSort={sortBy === 'name'}
+              left
+              middle
+              actionable
+            >
+              <span>Name </span>
+            </TableTh>
+            <TableTh
+              xs="150"
+              onClick={() => onSortBy('state')}
+              sortOrder={sortOrder}
+              showSort={sortBy === 'state'}
+              left
+              middle
+              actionable
+            >
+              <span>Status </span>
+            </TableTh>
+            <TableTh
+              xs="0"
+              sm="160"
+              onClick={() => onSortBy('created')}
+              sortOrder={sortOrder}
+              showSort={sortBy === 'created'}
+              left
+              middle
+              actionable
+            >
+              <span>Created </span>
+            </TableTh>
+            <TableTh
+              xs="0"
+              sm="130"
+              onClick={() => onSortBy('id')}
+              sortOrder={sortOrder}
+              showSort={sortBy === 'id'}
+              left
+              middle
+              actionable
+            >
+              <span>Short ID </span>
+            </TableTh>
+            <TableTh xs="60" padding="0" />
+          </TableTr>
+        </TableThead>
+        <TableTbody>{children}</TableTbody>
+        {!noInstances ? (
+          <PaginationTableFoot colSpan="6">
+            <PaginationItem
+              to={`${Global().pathname}?${queryString.stringify({
+                ...Global().query,
+                limit,
+                offset: offset - limit
+              })}`}
+              component={Link}
+              disabled={isFirst}
+              prev
+            >
+              Prev
+            </PaginationItem>
+            {currPage - 2 > 0 ? (
+              <Fragment>
+                {currPage - 2 > 1 ? (
+                  <PaginationItem
+                    to={`${Global().pathname}?${queryString.stringify({
+                      ...Global().query,
+                      limit,
+                      offset: 0
+                    })}`}
+                    component={Link}
+                  >
+                    1
+                  </PaginationItem>
+                ) : null}
+                <PaginationItem disabled>...</PaginationItem>
+              </Fragment>
+            ) : null}
+            {currPage > 1 ? (
+              <PaginationItem
+                to={`${Global().pathname}?${queryString.stringify({
+                  ...Global().query,
+                  limit,
+                  offset: offset - limit
+                })}`}
+                component={Link}
+              >
+                {currPage - 1}
+              </PaginationItem>
+            ) : null}
+            <PaginationItem active>{currPage}</PaginationItem>
+            {numPages > currPage ? (
+              <PaginationItem
+                to={`${Global().pathname}?${queryString.stringify({
+                  ...Global().query,
+                  limit,
+                  offset: offset + limit
+                })}`}
+                component={Link}
+              >
+                {currPage + 1}
+              </PaginationItem>
+            ) : null}
+            {currPage + 2 <= numPages ? (
+              <Fragment>
+                <PaginationItem disabled>...</PaginationItem>
+                {numPages - currPage > 2 ? (
+                  <PaginationItem
+                    to={`${Global().pathname}?${queryString.stringify({
+                      ...Global().query,
+                      limit,
+                      offset: total - limit
+                    })}`}
+                    component={Link}
+                  >
+                    {numPages}
+                  </PaginationItem>
+                ) : null}
+              </Fragment>
+            ) : null}
+            <PaginationItem
+              to={`${Global().pathname}?${queryString.stringify({
+                ...Global().query,
+                limit,
+                offset: offset + limit
+              })}`}
+              component={Link}
+              disabled={isLast}
+              next
+            >
+              Next
+            </PaginationItem>
+          </PaginationTableFoot>
+        ) : null}
+      </Table>
+    </form>
+  );
+};

packages/my-joy-instances/src/components/instances/toolbar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Field } from 'redux-form';
 import Flex from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
+import { Link } from 'react-router-dom';
 import remcalc from 'remcalc';
 
 import {
@@ -18,7 +19,8 @@ export const Toolbar = ({
   searchable = true,
   actionLabel = 'Create',
   actionable = true,
-  onActionClick
+  onActionClick,
+  actionTo
 }) => (
   <Flex justifyBetween>
     <FormGroup name="filter" field={Field}>
@@ -30,8 +32,10 @@ export const Toolbar = ({
     <FormGroup right>
       <Divider height={remcalc(21)} transparent />
       <Button
-        type={onActionClick ? 'button' : 'submit'}
+        type={actionTo || onActionClick ? 'button' : 'submit'}
         disabled={!actionable}
+        component={actionTo ? Link : undefined}
+        to={actionTo}
         onClick={onActionClick}
         icon
         fluid