admin(ui): add node configuration page

app/Http/Controllers/Api/Application/Nodes/NodeConfigurationController.php

@@ -14,10 +14,15 @@ class NodeConfigurationController extends ApplicationApiController
      * to remote machines so long as an API key is provided to the machine to make the request
      * with, and the node is known.
      *
-     * @return \Illuminate\Http\JsonResponse
+     * @return string
+     * @throws \Illuminate\Contracts\Container\BindingResolutionException
      */
     public function __invoke(GetNodeRequest $request, Node $node)
     {
+        if ($request->query('format') === 'yaml') {
+            return $node->getYamlConfiguration();
+        }
+
         return new JsonResponse($node->getConfiguration());
     }
 }

resources/scripts/api/admin/nodes/getNodeConfiguration.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (id: number): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nodes/${id}/configuration?format=yaml`)
+            .then(({ data }) => resolve(data))
+            .catch(reject);
+    });
+};

resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx

@@ -0,0 +1,48 @@
+import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
+import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import React, { useEffect, useState } from 'react';
+import AdminBox from '@/components/admin/AdminBox';
+import tw from 'twin.macro';
+import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
+
+export default () => {
+    const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const [ configuration, setConfiguration ] = useState('');
+
+    const node = Context.useStoreState(state => state.node);
+
+    if (node === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    useEffect(() => {
+        getNodeConfiguration(node.id)
+            .then((configuration) => {
+                console.log(configuration);
+                setConfiguration(configuration);
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            });
+    }, []);
+
+    return (
+        <div>
+            <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
+                <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
+                    {configuration}
+                </pre>
+            </AdminBox>
+
+            <AdminBox title={'Auto Deploy'} icon={faDragon}>
+                Never&trade;
+            </AdminBox>
+        </div>
+    );
+};

resources/scripts/components/admin/nodes/NodeEditContainer.tsx

@@ -1,3 +1,4 @@
+import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import tw from 'twin.macro';
@@ -132,7 +133,7 @@ const NodeEditContainer = () => {
                 </Route>
 
                 <Route path={`${match.path}/configuration`} exact>
-                    <p>Configuration</p>
+                    <NodeConfigurationContainer/>
                 </Route>
 
                 <Route path={`${match.path}/allocations`} exact>