refactor(docker): migrate dashboard to react [EE-2191] (#11574)

app/react/docker/DashboardView/EnvironmentInfo.tsx

@@ -0,0 +1,70 @@
+import { GaugeIcon } from 'lucide-react';
+
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { stripProtocol } from '@/portainer/filters/filters';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import {
+  isAgentEnvironment,
+  isEdgeEnvironment,
+} from '@/react/portainer/environments/utils';
+
+import { DetailsTable } from '@@/DetailsTable';
+import { Widget } from '@@/Widget';
+
+import { useIsSwarmManager } from '../proxy/queries/useInfo';
+
+import { GpuInfo } from './EnvironmentInfo.GpuInfo';
+import { SnapshotStats } from './EnvironmentInfo.SnapshotStats';
+import { DockerInfo } from './EnvironmentInfo.DockerInfo';
+import { TagsInfo } from './EnvironmentInfo.TagsInfo';
+import { ClusterVisualizerLink } from './ClusterVisualizerLink';
+
+export function EnvironmentInfo() {
+  const environmentId = useEnvironmentId();
+  const envQuery = useCurrentEnvironment();
+
+  const isSwarmManager = useIsSwarmManager(environmentId);
+
+  if (!envQuery.data) {
+    return null;
+  }
+
+  const environment = envQuery.data;
+
+  const isAgent = isAgentEnvironment(environment.Type);
+  const isEdgeAgent = isEdgeEnvironment(environment.Type);
+
+  const isEnvUrlVisible = !isEdgeAgent;
+
+  return (
+    <Widget>
+      <Widget.Title icon={GaugeIcon} title="Environment info" />
+      <Widget.Body className="!px-5 !py-0">
+        <DetailsTable dataCy="environment-info">
+          <DetailsTable.Row label="Environment">
+            <div className="flex items-center gap-2">
+              {environment.Name}
+              <SnapshotStats snapshot={environment.Snapshots[0]} />-
+              <DockerInfo isAgent={isAgent} />
+            </div>
+          </DetailsTable.Row>
+
+          {isEnvUrlVisible && (
+            <DetailsTable.Row label="URL">
+              {stripProtocol(environment.URL)}
+            </DetailsTable.Row>
+          )}
+
+          <GpuInfo
+            gpus={environment.Gpus || []}
+            snapshot={environment.Snapshots[0]}
+          />
+
+          <TagsInfo ids={environment.TagIds} />
+
+          {isSwarmManager && <ClusterVisualizerLink />}
+        </DetailsTable>
+      </Widget.Body>
+    </Widget>
+  );
+}