From a615d115fd2523d26f35efd19d7790064fa53849 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bror=20Bojl=C3=A9n?= <tao@btao.org>
Date: Wed, 24 Jul 2019 19:25:20 +0300
Subject: [PATCH] show instance type in details

---
 .../lib/backend_web/views/instance_view.ex    |  3 ++-
 frontend/src/components/atoms/GraphKey.tsx    | 14 +++-------
 .../src/components/atoms/InstanceType.tsx     | 27 +++++++++++++++++++
 frontend/src/components/atoms/index.ts        |  1 +
 .../src/components/molecules/SearchResult.tsx | 11 +++-----
 .../src/components/screens/InstanceScreen.tsx |  7 ++++-
 frontend/src/redux/types.ts                   |  1 +
 7 files changed, 44 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/atoms/InstanceType.tsx

diff --git a/backend/lib/backend_web/views/instance_view.ex b/backend/lib/backend_web/views/instance_view.ex
index 8cda1f0..800865e 100644
--- a/backend/lib/backend_web/views/instance_view.ex
+++ b/backend/lib/backend_web/views/instance_view.ex
@@ -49,7 +49,8 @@ defmodule BackendWeb.InstanceView do
           domainCount: length(instance.peers),
           peers: render_many(instance.peers, InstanceView, "instance.json"),
           lastUpdated: last_updated,
-          status: status
+          status: status,
+          type: instance.type
         }
     end
   end
diff --git a/frontend/src/components/atoms/GraphKey.tsx b/frontend/src/components/atoms/GraphKey.tsx
index 0461678..4ce0a54 100644
--- a/frontend/src/components/atoms/GraphKey.tsx
+++ b/frontend/src/components/atoms/GraphKey.tsx
@@ -1,21 +1,16 @@
-import { Button, Classes, H5, H6, Icon, MenuItem } from "@blueprintjs/core";
+import { Button, Classes, H5, H6, MenuItem } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import { ItemRenderer, Select } from "@blueprintjs/select";
 import React from "react";
 import styled from "styled-components";
-import { FloatingCard } from ".";
-import { QUALITATIVE_COLOR_SCHEME } from "../../constants";
+import { FloatingCard, InstanceType } from ".";
 import { IColorSchemeType } from "../../types";
-import { capitalize } from "../../util";
 
 const ColorSchemeSelect = Select.ofType<IColorSchemeType>();
 
 const StyledLi = styled.li`
   margin-top: 2px;
 `;
-const StyledIcon = styled(Icon)`
-  margin-right: 5px;
-`;
 const StyledKeyContainer = styled.div`
   margin-top: 10px;
 `;
@@ -51,10 +46,9 @@ const GraphKey: React.FC<IGraphKeyProps> = ({ current, colorSchemes, onItemSelec
         <StyledKeyContainer>
           <H6>Key</H6>
           <ul className={Classes.LIST_UNSTYLED}>
-            {current.values.map((v, idx) => (
+            {current.values.map(v => (
               <StyledLi>
-                <StyledIcon icon={IconNames.FULL_CIRCLE} color={QUALITATIVE_COLOR_SCHEME[idx]} />
-                {capitalize(v)}
+                <InstanceType type={v} />
               </StyledLi>
             ))}
           </ul>
diff --git a/frontend/src/components/atoms/InstanceType.tsx b/frontend/src/components/atoms/InstanceType.tsx
new file mode 100644
index 0000000..2113be1
--- /dev/null
+++ b/frontend/src/components/atoms/InstanceType.tsx
@@ -0,0 +1,27 @@
+import { Icon } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+import React from "react";
+import { QUALITATIVE_COLOR_SCHEME } from "../../constants";
+import { typeColorScheme } from "../../types";
+import { capitalize } from "../../util";
+
+interface IInstanceTypeProps {
+  type: string;
+  colorAfterName?: boolean;
+}
+/**
+ * By default, renders the color followed by the name of the instance type.
+ * You can change this by passing `colorAfterName={true}`.
+ */
+const InstanceType: React.FC<IInstanceTypeProps> = ({ type, colorAfterName }) => {
+  const idx = typeColorScheme.values.indexOf(type);
+  const name = " " + capitalize(type);
+  return (
+    <>
+      {!!colorAfterName && name}
+      <Icon icon={IconNames.SYMBOL_CIRCLE} color={QUALITATIVE_COLOR_SCHEME[idx]} />
+      {!colorAfterName && name}
+    </>
+  );
+};
+export default InstanceType;
diff --git a/frontend/src/components/atoms/index.ts b/frontend/src/components/atoms/index.ts
index b98dfd5..1b966d4 100644
--- a/frontend/src/components/atoms/index.ts
+++ b/frontend/src/components/atoms/index.ts
@@ -2,3 +2,4 @@ export { default as Page } from "./Page";
 export { default as FloatingCard } from "./FloatingCard";
 export { default as GraphKey } from "./GraphKey";
 export { default as GraphResetButton } from "./GraphResetButton";
+export { default as InstanceType } from "./InstanceType";
diff --git a/frontend/src/components/molecules/SearchResult.tsx b/frontend/src/components/molecules/SearchResult.tsx
index 806057a..a627180 100644
--- a/frontend/src/components/molecules/SearchResult.tsx
+++ b/frontend/src/components/molecules/SearchResult.tsx
@@ -1,14 +1,11 @@
-import { Card, Classes, Elevation, H4, Icon } from "@blueprintjs/core";
-import { IconNames } from "@blueprintjs/icons";
+import { Card, Classes, Elevation, H4 } from "@blueprintjs/core";
 import inflection from "inflection";
 import * as numeral from "numeral";
 import React from "react";
 import sanitize from "sanitize-html";
 import styled from "styled-components";
-import { QUALITATIVE_COLOR_SCHEME } from "../../constants";
 import { ISearchResultInstance } from "../../redux/types";
-import { typeColorScheme } from "../../types";
-import { capitalize } from "../../util";
+import { InstanceType } from "../atoms";
 
 const StyledCard = styled(Card)`
   width: 80%;
@@ -50,11 +47,9 @@ const SearchResult: React.FC<ISearchResultProps> = ({ result, onClick }) => {
 
   let typeIcon;
   if (result.type) {
-    const idx = typeColorScheme.values.indexOf(result.type);
     typeIcon = (
       <StyledType className={Classes.TEXT_MUTED}>
-        <Icon icon={IconNames.SYMBOL_CIRCLE} color={QUALITATIVE_COLOR_SCHEME[idx]} />
-        {" " + capitalize(result.type)}
+        <InstanceType type={result.type} />
       </StyledType>
     );
   }
diff --git a/frontend/src/components/screens/InstanceScreen.tsx b/frontend/src/components/screens/InstanceScreen.tsx
index 0f42808..fe3337c 100644
--- a/frontend/src/components/screens/InstanceScreen.tsx
+++ b/frontend/src/components/screens/InstanceScreen.tsx
@@ -30,6 +30,7 @@ import { Dispatch } from "redux";
 import styled from "styled-components";
 import { IAppState, IGraph, IInstanceDetails } from "../../redux/types";
 import { domainMatchSelector, getFromApi, isSmallScreen } from "../../util";
+import { InstanceType } from "../atoms";
 import { Cytoscape, ErrorState } from "../molecules/";
 
 const InstanceScreenContainer = styled.div`
@@ -258,7 +259,7 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
     if (!this.props.instanceDetails) {
       throw new Error("Did not receive instance details as expected!");
     }
-    const { version, userCount, statusCount, domainCount, lastUpdated, insularity } = this.props.instanceDetails;
+    const { version, userCount, statusCount, domainCount, lastUpdated, insularity, type } = this.props.instanceDetails;
     return (
       <StyledHTMLTable small={true} striped={true}>
         <tbody>
@@ -266,6 +267,10 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
             <td>Version</td>
             <td>{<Code>{version}</Code> || "Unknown"}</td>
           </tr>
+          <tr>
+            <td>Instance type</td>
+            <td>{(type && <InstanceType type={type} colorAfterName={true} />) || "Unknown"}</td>
+          </tr>
           <tr>
             <td>Users</td>
             <td>{(userCount && numeral.default(userCount).format("0,0")) || "Unknown"}</td>
diff --git a/frontend/src/redux/types.ts b/frontend/src/redux/types.ts
index a136aec..49d810b 100644
--- a/frontend/src/redux/types.ts
+++ b/frontend/src/redux/types.ts
@@ -47,6 +47,7 @@ export interface IInstanceDetails {
   peers?: IInstance[];
   lastUpdated?: string;
   status: string;
+  type?: string;
 }
 
 interface IGraphNode {