show instance type in details

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

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>

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;

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";

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>
     );
   }

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>

frontend/src/redux/types.ts

@@ -47,6 +47,7 @@ export interface IInstanceDetails {
   peers?: IInstance[];
   lastUpdated?: string;
   status: string;
+  type?: string;
 }
 
 interface IGraphNode {