Merge pull request #7 from smartcontractkit/feature/sc-33623

Show TOML Config

Author: jmank88

.changeset/forty-chairs-play.md

@@ -0,0 +1,7 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+Add ability to show TOML config
+
+On the configuration screen, the user is now able to view their node's TOML config

schema/type/configv2.graphql

@@ -0,0 +1,4 @@
+type ConfigV2Payload {
+  user: String!
+  effective: String!
+}

src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx

@@ -44,7 +44,7 @@ export const ConfigurationCard = () => {
 
   return (
     <KeyValueListCard
-      title="Configuration"
+      title="ENV Configuration (legacy)"
       error={error?.message}
       loading={loading}
       entries={entries}

src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import { gql, useQuery } from '@apollo/client'
+
+import Card from '@material-ui/core/Card'
+import CardHeader from '@material-ui/core/CardHeader'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableRow from '@material-ui/core/TableRow'
+import Grid from '@material-ui/core/Grid'
+
+export const CONFIG_V2_QUERY = gql`
+  query FetchConfigV2 {
+    configv2 {
+      user
+      effective
+    }
+  }
+`
+export const ConfigurationV2Card = () => {
+  const { data, loading, error } = useQuery<
+    FetchConfigV2,
+    FetchConfigV2Variables
+  >(CONFIG_V2_QUERY, {
+    fetchPolicy: 'cache-and-network',
+  })
+
+  var user: string[] = []
+  if (data != undefined) {
+    user = data?.configv2.user.split(/\n/).map((l) => {
+      return l
+    })
+  } else {
+    user = []
+  }
+  var effective: string[] = []
+  if (data != undefined) {
+    effective = data?.configv2.effective.split(/\n/).map((l) => {
+      return l
+    })
+  } else {
+    effective = []
+  }
+
+  return (
+    <>
+      <Grid item xs={12}>
+        <TOMLCard
+          title="TOML Configuration (user-specified)"
+          error={error?.message}
+          loading={loading}
+          entries={user}
+          showHead
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <TOMLCard
+          title="TOML Configuration (effective)"
+          error={error?.message}
+          loading={loading}
+          entries={effective}
+          showHead
+        />
+      </Grid>
+    </>
+  )
+}
+
+interface Props {
+  entries: Array<string>
+  loading: boolean
+  showHead?: boolean
+  title?: string
+  error?: string
+}
+
+const SpanRow: React.FC = ({ children }) => (
+  <TableRow>
+    <TableCell component="th" scope="row" colSpan={3}>
+      {children}
+    </TableCell>
+  </TableRow>
+)
+
+const FetchingRow = () => <SpanRow>...</SpanRow>
+
+const ErrorRow: React.FC = ({ children }) => <SpanRow>{children}</SpanRow>
+
+const TOMLCard = ({ loading, entries, error = '', title }: Props) => {
+  if (error) {
+    return <ErrorRow>{error}</ErrorRow>
+  }
+
+  if (loading) {
+    return <FetchingRow />
+  }
+
+  return (
+    <Card>
+      {title && <CardHeader title={title} />}
+      <Table>
+        <TableBody>
+          {entries.map((k, i) => (
+            <TableRow key={title + k + i}>
+              <TableCell>{k}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Card>
+  )
+}

src/screens/Configuration/ConfigurationView.test.tsx

@@ -18,7 +18,7 @@ describe('ConfigurationView', () => {
       </BuildInfoProvider>,
     )
 
-    expect(await findByText('Configuration')).toBeInTheDocument()
+    expect(await findByText('ENV Configuration (legacy)')).toBeInTheDocument()
     expect(await findByText('Node')).toBeInTheDocument()
     expect(await findByText('Job Runs')).toBeInTheDocument()
     expect(await findByText('Logging')).toBeInTheDocument()

src/screens/Configuration/ConfigurationView.tsx

@@ -6,14 +6,20 @@ import { LoggingCard } from 'src/pages/Configuration/LoggingCard'
 import { JobRuns } from 'src/pages/Configuration/JobRuns'
 
 import { ConfigurationCard } from './ConfigurationCard/ConfigurationCard'
+import { ConfigurationV2Card } from './ConfigurationV2Card/ConfigurationV2Card'
 import { NodeInfoCard } from './NodeInfoCard/NodeInfoCard'
 
 export const ConfigurationView = () => {
   return (
     <Content>
       <Grid container>
         <Grid item sm={12} md={8}>
-          <ConfigurationCard />
+          <Grid container>
+            <Grid item xs={12}>
+              <ConfigurationCard />
+            </Grid>
+            <ConfigurationV2Card />
+          </Grid>
         </Grid>
         <Grid item sm={12} md={4}>
           <Grid container>