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

app/react/docker/containers/queries/useContainerInspect.ts

@@ -0,0 +1,39 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { genericHandler } from '@/docker/rest/response/handlers';
+
+import { ContainerId } from '../types';
+import { urlBuilder } from '../containers.service';
+import { addNodeName } from '../../proxy/addNodeName';
+
+import { queryKeys } from './query-keys';
+import { ContainerJSON } from './container';
+
+export function useContainerInspect(
+  environmentId: EnvironmentId,
+  id: ContainerId,
+  params: { nodeName?: string } = {}
+) {
+  return useQuery({
+    queryKey: [...queryKeys.container(environmentId, id), params] as const,
+    queryFn: () => inspectContainer(environmentId, id, params),
+  });
+}
+
+export async function inspectContainer(
+  environmentId: EnvironmentId,
+  id: ContainerId,
+  { nodeName }: { nodeName?: string } = {}
+) {
+  try {
+    const { data } = await axios.get<ContainerJSON>(
+      urlBuilder(environmentId, id, 'json'),
+      { transformResponse: genericHandler, headers: addNodeName(nodeName) }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed starting container');
+  }
+}