commit output, network output, keeper version output

client/src/components/molecules/VersionNumbers/VersionNumber.module.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/variables';
+
+.spinner {
+    composes: spinner, small from '../../atoms/Spinner.module.scss';
+    margin-right: $spacer;
+}
+
+.commit {
+    margin-left: $spacer / 8;
+
+    code {
+        color: $brand-grey-light;
+        font-size: $font-size-mini;
+    }
+}
+
+.network {
+    color: $brand-grey-light;
+    text-transform: capitalize;
+    margin-left: $spacer / 8;
+    font-size: $font-size-mini;
+}

client/src/components/molecules/VersionNumbers/VersionNumber.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import slugify from '@sindresorhus/slugify'
+import Spinner from '../../atoms/Spinner'
+import styles from './VersionNumber.module.scss'
+
+const VersionNumber = ({
+    name,
+    version,
+    network,
+    status,
+    commit
+}: {
+    name: string
+    version?: string
+    network?: string
+    status?: OceanPlatformTechStatus
+    commit?: string
+}) =>
+    version ? (
+        <>
+            <a
+                href={`https://github.com/oceanprotocol/${slugify(
+                    name
+                )}/releases/tag/v${version}`}
+                title="Go to release on GitHub"
+            >
+                <code>v{version}</code>
+            </a>
+            {commit && (
+                <a
+                    href={`https://github.com/oceanprotocol/${slugify(
+                        name
+                    )}/commit/${commit}`}
+                    className={styles.commit}
+                    title={`Go to commit ${commit} on GitHub`}
+                >
+                    <code>{commit.substring(0, 7)}</code>
+                </a>
+            )}
+            {network && <span className={styles.network}>{` ${network}`}</span>}
+        </>
+    ) : (
+        <span>
+            {status === OceanPlatformTechStatus.Loading ? (
+                <Spinner className={styles.spinner} small />
+            ) : (
+                status || 'Could not get version'
+            )}
+        </span>
+    )
+
+export default VersionNumber

client/src/components/molecules/VersionNumbers/VersionStatus.module.scss

@@ -33,4 +33,5 @@
 .indicatorLabel {
     font-family: $font-family-title;
     color: $brand-grey;
+    text-transform: capitalize;
 }

client/src/components/molecules/VersionNumbers/VersionStatus.tsx

@@ -19,7 +19,9 @@ const VersionStatus = ({
                     >
                         {value}
                     </span>
-                    <span className={styles.indicatorLabel}>{key}</span>
+                    <span className={styles.indicatorLabel}>
+                        {key === 'ok' ? 'components' : key}
+                    </span>
                 </div>
             ))}
         </div>

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -23,12 +23,20 @@
         td {
             padding: $spacer / 6 $spacer / 2;
 
-            // stylelint-disable-next-line selector-max-compound-selectors
+            // stylelint-disable selector-max-compound-selectors
             &,
             code {
                 font-size: $font-size-mini;
             }
         }
+
+        tr:first-child td {
+            &,
+            code {
+                font-size: $font-size-small;
+            }
+        }
+        // stylelint-enable selector-max-compound-selectors
     }
 
     td {

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -2,18 +2,32 @@ import React from 'react'
 import { VersionNumbersState } from '.'
 import VersionTableRow from './VersionTableRow'
 import styles from './VersionTable.module.scss'
+import VersionNumber from './VersionNumber'
 
 export const VersionTableContracts = ({
     contracts,
-    network
+    network,
+    keeperVersion
 }: {
     contracts: {
         [contractName: string]: string
     }
     network: string
+    keeperVersion?: string
 }) => (
     <table>
         <tbody>
+            <tr>
+                <td>
+                    <strong>Keeper Contracts</strong>
+                </td>
+                <td>
+                    <VersionNumber
+                        name={'Keeper Contracts'}
+                        version={keeperVersion}
+                    />
+                </td>
+            </tr>
             {contracts &&
                 Object.keys(contracts)
                     // sort alphabetically

client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss

@@ -12,8 +12,3 @@
     cursor: pointer;
     color: $brand-grey-light;
 }
-
-.spinner {
-    composes: spinner, small from '../../atoms/Spinner.module.scss';
-    margin-right: $spacer;
-}

client/src/components/molecules/VersionNumbers/VersionTableRow.tsx

@@ -1,42 +1,9 @@
 import React from 'react'
 import useCollapse from 'react-collapsed'
-import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
 import slugify from '@sindresorhus/slugify'
-import Spinner from '../../atoms/Spinner'
 import styles from './VersionTableRow.module.scss'
 import { VersionTableContracts } from './VersionTable'
-
-const VersionNumber = ({
-    name,
-    version,
-    network,
-    status
-}: {
-    name: string
-    version?: string
-    network?: string
-    status: OceanPlatformTechStatus
-}) =>
-    version ? (
-        <>
-            <a
-                href={`https://github.com/oceanprotocol/${slugify(
-                    name
-                )}/releases/tag/v${version}`}
-            >
-                <code>v{version}</code>
-            </a>
-            {network && `(${network})`}
-        </>
-    ) : (
-        <span>
-            {status === OceanPlatformTechStatus.Loading ? (
-                <Spinner className={styles.spinner} small />
-            ) : (
-                status || 'Could not get version'
-            )}
-        </span>
-    )
+import VersionNumber from './VersionNumber'
 
 const VersionTableRow = ({ value }: { value: any }) => {
     const collapseStyles = {
@@ -79,6 +46,7 @@ const VersionTableRow = ({ value }: { value: any }) => {
                         version={value.version}
                         status={value.status}
                         network={value.network}
+                        commit={value.commit}
                     />
                 </td>
             </tr>
@@ -88,6 +56,7 @@ const VersionTableRow = ({ value }: { value: any }) => {
                         <VersionTableContracts
                             contracts={value.contracts}
                             network={value.network || ''}
+                            keeperVersion={value.keeperVersion}
                         />
                     </td>
                 </tr>

client/src/components/molecules/VersionNumbers/index.tsx

@@ -8,14 +8,17 @@ import axios from 'axios'
 import { version } from '../../../../package.json'
 import styles from './index.module.scss'
 
-import { faucetUri } from '../../../config'
+import { nodeUri, faucetUri } from '../../../config'
 import { User } from '../../../context'
 
 import VersionTable from './VersionTable'
 import VersionStatus from './VersionStatus'
 
+// construct values which are not part of any response
 export const commonsVersion =
     process.env.NODE_ENV === 'production' ? version : `${version}-dev`
+const commonsNetwork = new URL(nodeUri).hostname.split('.')[0]
+const faucetNetwork = new URL(faucetUri).hostname.split('.')[1]
 
 interface VersionNumbersProps {
     minimal?: boolean
@@ -25,10 +28,12 @@ export interface VersionNumbersState extends OceanPlatformVersions {
     commons: {
         name: string
         version: string
+        network: string
     }
     faucet: {
         name: string
         version: string
+        network: string
         status: OceanPlatformTechStatus
     }
 }
@@ -39,9 +44,11 @@ export default class VersionNumbers extends PureComponent<
 > {
     public static contextType = User
 
+    // define a minimal default state to fill UI
     public state: VersionNumbersState = {
         commons: {
             name: 'Commons',
+            network: commonsNetwork,
             version: commonsVersion
         },
         squid: {
@@ -54,12 +61,12 @@ export default class VersionNumbers extends PureComponent<
         },
         brizo: {
             name: 'Brizo',
-            network: 'Nile',
             status: OceanPlatformTechStatus.Loading
         },
         faucet: {
             name: 'Faucet',
             version: '',
+            network: faucetNetwork,
             status: OceanPlatformTechStatus.Loading
         },
         status: {