fix(instances): route by id

2018-03-21 11:25:37 +00:00 · 2018-03-21 11:25:37 +00:00 · 9674225a79
parent f5fbe0a169
commit 9674225a79
17 changed files with 95 additions and 65 deletions
--- a/packages/my-joy-instances/src/components/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-instances/src/components/instances/tests/snapshots/list.spec.js.snap
@ -4548,12 +4548,15 @@ exports[`renders <Item /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c20 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:47.9375rem) {
@ -4632,7 +4635,7 @@ exports[`renders <Item /> without throwing 1`] = `
      >
        <a
          className="c11 c12 c13"
-          to="/instances/undefined"
+          to="/instances/"
        />
      </td>
      <td
@ -5067,12 +5070,15 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c20 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:47.9375rem) {
@ -5151,7 +5157,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
      >
        <a
          className="c11 c12 c13"
-          to="/instances/name"
+          to="/instances/id"
        >
          name
        </a>
@ -5588,12 +5594,15 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c20 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:47.9375rem) {
@ -5672,7 +5681,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
      >
        <a
          className="c11 c12 c13"
-          to="/instances/undefined"
+          to="/instances/"
        />
      </td>
      <td
@ -6106,6 +6115,11 @@ exports[`renders <Item mutating /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

@media only screen and (min-width:47.9375rem) {
@ -6184,7 +6198,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
      >
        <a
          className="c11 c12 c13"
-          to="/instances/undefined"
+          to="/instances/"
        />
      </td>
      <td
--- a/packages/my-joy-instances/src/components/instances/list.js
+++ b/packages/my-joy-instances/src/components/instances/list.js
@ -45,6 +45,11 @@ const A = styled(Anchor)`
  color: ${props => props.theme.text};
  text-decoration: none;
  font-weight: ${props => props.theme.font.weight.semibold};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 `;

 const ItemAnchor = styled(Anchor)`
@ -54,9 +59,7 @@ const ItemAnchor = styled(Anchor)`
 `;

 const Actions = styled(Flex)`
-  width: ${remcalc(48)};
  height: ${remcalc(48)};
-  min-width: ${remcalc(48)};
 `;

 export const FetchingItem = () => (
@ -88,7 +91,7 @@ export const Item = ({
      </FormGroup>
    </TableTd>
    <TableTd middle left>
-      <A to={`/instances/${name}`} component={Link}>
+      <A to={`/instances/${id}`} component={Link}>
        {name}
      </A>
    </TableTd>
--- a/packages/my-joy-instances/src/containers/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-instances/src/containers/instances/tests/snapshots/list.spec.js.snap
@ -3526,12 +3526,15 @@ exports[`renders <List instances /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c42 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:48em) {
@ -3839,7 +3842,7 @@ exports[`renders <List instances /> without throwing 1`] = `
          >
            <a
              className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/"
            >
              2252839a
            </a>
@ -3975,7 +3978,7 @@ exports[`renders <List instances /> without throwing 1`] = `
          >
            <a
              className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/"
            >
              f1bd1730
            </a>
@ -5731,12 +5734,15 @@ exports[`renders <List instances selected /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c42 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:48em) {
@ -6105,7 +6111,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
          >
            <a
              className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
            >
              2252839a
            </a>
@ -6241,7 +6247,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
          >
            <a
              className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
            >
              f1bd1730
            </a>
@ -8325,12 +8331,15 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c42 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:48em) {
@ -8699,7 +8708,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
          >
            <a
              className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
            >
              2252839a
            </a>
@ -8835,7 +8844,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
          >
            <a
              className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
            >
              f1bd1730
            </a>
@ -11132,12 +11141,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }

 .c42 {
-  width: 3rem;
  height: 3rem;
-  min-width: 3rem;
 }

@media only screen and (min-width:48em) {
@ -11506,7 +11518,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
          >
            <a
              className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
            >
              2252839a
            </a>
@ -11642,7 +11654,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
          >
            <a
              className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
            >
              f1bd1730
            </a>
--- a/packages/my-joy-instances/src/containers/instances/cns.js
+++ b/packages/my-joy-instances/src/containers/instances/cns.js
@ -147,14 +147,14 @@ export default compose(
      ssr: false,
      variables: {
        fetchPolicy: 'network-only',
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data }) => {
      const { loading, error, variables, refetch, ...rest } = data;
-      const { name } = variables;
+      const { id } = variables;

-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
+      const instance = find(get(rest, 'machines.results', []), ['id', id]);
      const tags = get(instance, 'tags', []);

      return {
--- a/packages/my-joy-instances/src/containers/instances/firewall.js
+++ b/packages/my-joy-instances/src/containers/instances/firewall.js
@ -138,14 +138,14 @@ export default compose(
      ssr: false,
      variables: {
        fetchPolicy: 'network-only',
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data }) => {
      const { loading, error, variables, refetch, ...rest } = data;
-      const { name } = variables;
+      const { id } = variables;

-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
+      const instance = find(get(rest, 'machines.results', []), ['id', id]);
      const enabled = get(instance, 'firewall_enabled');
      const rules = get(instance, 'firewall_rules', []);

--- a/packages/my-joy-instances/src/containers/instances/metadata.js
+++ b/packages/my-joy-instances/src/containers/instances/metadata.js
@ -161,13 +161,13 @@ export default compose(
      ssr: false,
      pollInterval: 1000,
      variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
-      const { name } = variables;
+      const { id } = variables;

-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
+      const instance = find(get(rest, 'machines.results', []), ['id', id]);
      const values = get(instance, 'metadata', []).filter(
        ({ name = '' }) => name !== 'user-script'
      );
--- a/packages/my-joy-instances/src/containers/instances/networks.js
+++ b/packages/my-joy-instances/src/containers/instances/networks.js
@ -82,15 +82,15 @@ export default compose(
  graphql(GetNetworks, {
    options: ({ match }) => ({
      variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data }) => {
      const { loading, error, variables } = data;
-      const { name } = variables;
+      const { id } = variables;

      const machines = get(data, 'machines.results', []);
-      const instance = find(forceArray(machines), ['name', name]);
+      const instance = find(forceArray(machines), ['id', id]);
      const values = get(instance, 'networks', []);
      const networks = reverse(sortBy(values, 'public'));

--- a/packages/my-joy-instances/src/containers/instances/snapshots.js
+++ b/packages/my-joy-instances/src/containers/instances/snapshots.js
@ -171,12 +171,12 @@ export default compose(
      ssr: false,
      pollInterval: 1000,
      variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
-      const { name } = variables;
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
+      const { id } = variables;
+      const instance = find(get(rest, 'machines.results', []), ['id', id]);
      const snapshots = get(instance, 'snapshots', []);

      const index = new Fuse(snapshots, {
--- a/packages/my-joy-instances/src/containers/instances/summary.js
+++ b/packages/my-joy-instances/src/containers/instances/summary.js
@ -38,6 +38,7 @@ export const Summary = ({
  rebooting,
  removing
 }) => {
+  console.log(instance);
  const _loading = loading || !instance ? <StatusLoader /> : null;
  const _summary = !_loading &&
    instance && (
@ -142,13 +143,13 @@ export default compose(
      ssr: false,
      pollInterval: 1000,
      variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data: { loading, error, variables, ...rest } }) => {
      let instance = find(get(rest, 'machines.results', []), [
-        'name',
-        variables.name
+        'id',
+        variables.id
      ]);

      if (instance) {
--- a/packages/my-joy-instances/src/containers/instances/tags.js
+++ b/packages/my-joy-instances/src/containers/instances/tags.js
@ -152,13 +152,13 @@ export default compose(
      ssr: false,
      pollInterval: 1000,
      variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
-      const { name } = variables;
+      const { id } = variables;

-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
+      const instance = find(get(rest, 'machines.results', []), ['id', id]);
      const tags = get(instance, 'tags', []).filter(
        ({ name = '' }) => !/^triton\.cns\./i.test(name)
      );
--- a/packages/my-joy-instances/src/containers/instances/user-script.js
+++ b/packages/my-joy-instances/src/containers/instances/user-script.js
@ -57,14 +57,14 @@ export default compose(
      ssr: false,
      variables: {
        fetchPolicy: 'network-only',
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
      }
    }),
    props: ({ data }) => {
      const { loading, error, variables, refetch, ...rest } = data;
-      const { name } = variables;
+      const { id } = variables;

-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
+      const instance = find(get(rest, 'machines.results', []), ['id', id]);
      const metadata = get(instance, 'metadata', [])
        .filter(({ name = '' }) => name === 'user-script')
        .shift();
--- a/packages/my-joy-instances/src/graphql/get-instance.gql
+++ b/packages/my-joy-instances/src/graphql/get-instance.gql
@ -1,5 +1,5 @@
-query instance($name: String) {
-  machines(name: $name) {
+query instance($id: ID) {
+  machines(id: $id) {
    results {
      id
      state
--- a/packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql
+++ b/packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql
@ -1,5 +1,5 @@
-query instance($name: String!) {
-  machines(name: $name) {
+query instance($id: ID!) {
+  machines(id: $id) {
    results {
      id
      name
--- a/packages/my-joy-instances/src/graphql/list-instance-networks.gql
+++ b/packages/my-joy-instances/src/graphql/list-instance-networks.gql
@ -1,5 +1,5 @@
-query instance($name: String!) {
-  machines(name: $name) {
+query instance($id: ID!) {
+  machines(id: $id) {
    results {
      id
      name
--- a/packages/my-joy-instances/src/graphql/list-metadata.gql
+++ b/packages/my-joy-instances/src/graphql/list-metadata.gql
@ -1,5 +1,5 @@
-query instance($name: String!) {
-  machines(name: $name) {
+query instance($id: ID!) {
+  machines(id: $id) {
    results {
      id
      name
--- a/packages/my-joy-instances/src/graphql/list-snapshots.gql
+++ b/packages/my-joy-instances/src/graphql/list-snapshots.gql
@ -1,5 +1,5 @@
-query instance($name: String!) {
-  machines(name: $name) {
+query instance($id: ID!) {
+  machines(id: $id) {
    results {
      id
      name
--- a/packages/my-joy-instances/src/graphql/list-tags.gql
+++ b/packages/my-joy-instances/src/graphql/list-tags.gql
@ -1,5 +1,5 @@
-query instance($name: String!) {
-  machines(name: $name) {
+query instance($id: ID!) {
+  machines(id: $id) {
    results {
      id
      name