refactor(docker/containers): migrate inspect view to react [EE-2190] (#11005)

app/react/docker/containers/InspectView/InspectView.tsx

@@ -0,0 +1,79 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { Circle, Code as CodeIcon, File } from 'lucide-react';
+import { useState } from 'react';
+
+import { trimContainerName } from '@/docker/filters/utils';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { JsonTree } from '@@/JsonTree';
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+import { ButtonSelector } from '@@/form-components/ButtonSelector/ButtonSelector';
+import { Code } from '@@/Code';
+
+import { useContainerInspect } from '../queries/useContainerInspect';
+
+export function InspectView() {
+  const environmentId = useEnvironmentId();
+  const {
+    params: { id, nodeName },
+  } = useCurrentStateAndParams();
+  const inspectQuery = useContainerInspect(environmentId, id, { nodeName });
+  const [viewType, setViewType] = useState<'tree' | 'text'>('tree');
+
+  if (!inspectQuery.data) {
+    return null;
+  }
+
+  const containerInfo = inspectQuery.data;
+
+  return (
+    <>
+      <PageHeader
+        title="Container inspect"
+        breadcrumbs={[
+          { label: 'Containers', link: 'docker.containers' },
+          {
+            label: trimContainerName(containerInfo.Name),
+            link: '^',
+            // linkParams: { id: containerInfo.Id },
+          },
+          'Inspect',
+        ]}
+      />
+
+      <div className="row">
+        <div className="col-lg-12 col-md-12 col-xs-12">
+          <Widget>
+            <Widget.Title icon={Circle} title="Inspect">
+              <ButtonSelector<'tree' | 'text'>
+                onChange={(value) => setViewType(value)}
+                value={viewType}
+                options={[
+                  {
+                    label: 'Tree',
+                    icon: CodeIcon,
+                    value: 'tree',
+                  },
+                  {
+                    label: 'Text',
+                    icon: File,
+                    value: 'text',
+                  },
+                ]}
+              />
+            </Widget.Title>
+            <Widget.Body>
+              {viewType === 'text' && (
+                <Code showCopyButton>
+                  {JSON.stringify(containerInfo, undefined, 4)}
+                </Code>
+              )}
+              {viewType === 'tree' && <JsonTree data={containerInfo} />}
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}