refactor(app): details widget migration [EE-5352] (#8886)

2025-07-23 15:29:42 +02:00 · 2023-05-29 15:06:14 +12:00 · 2023-05-29 15:06:14 +12:00 · af77e33993
commit af77e33993
parent fdd79cece8
57 changed files with 2046 additions and 1079 deletions
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx
@ -0,0 +1,142 @@
+import { Pencil, Plus } from 'lucide-react';
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { Pod } from 'kubernetes-types/core/v1';
+
+import { Authorized } from '@/react/hooks/useUser';
+import { useStackFile } from '@/react/common/stacks/stack.service';
+
+import { Widget, WidgetBody } from '@@/Widget';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { Icon } from '@@/Icon';
+
+import {
+  useApplication,
+  useApplicationServices,
+} from '../../application.queries';
+import { isSystemNamespace } from '../../../namespaces/utils';
+import { applicationIsKind, isExternalApplication } from '../../utils';
+import { appStackIdLabel } from '../../constants';
+
+import { RestartApplicationButton } from './RestartApplicationButton';
+import { RedeployApplicationButton } from './RedeployApplicationButton';
+import { RollbackApplicationButton } from './RollbackApplicationButton';
+import { ApplicationServicesTable } from './ApplicationServicesTable';
+import { ApplicationIngressesTable } from './ApplicationIngressesTable';
+import { ApplicationAutoScalingTable } from './ApplicationAutoScalingTable';
+import { ApplicationEnvVarsTable } from './ApplicationEnvVarsTable';
+import { ApplicationVolumeConfigsTable } from './ApplicationVolumeConfigsTable';
+import { ApplicationPersistentDataTable } from './ApplicationPersistentDataTable';
+
+export function ApplicationDetailsWidget() {
+  const stateAndParams = useCurrentStateAndParams();
+  const {
+    params: {
+      namespace,
+      name,
+      'resource-type': resourceType,
+      endpointId: environmentId,
+    },
+  } = stateAndParams;
+
+  // get app info
+  const appQuery = useApplication(environmentId, namespace, name, resourceType);
+  const app = appQuery.data;
+  const externalApp = app && isExternalApplication(app);
+  const appStackId = Number(app?.metadata?.labels?.[appStackIdLabel]);
+  const appStackFileQuery = useStackFile(appStackId);
+  const { data: appServices } = useApplicationServices(
+    environmentId,
+    namespace,
+    name,
+    app
+  );
+
+  return (
+    <Widget>
+      <WidgetBody>
+        {!isSystemNamespace(namespace) && (
+          <div className="mb-4 flex flex-wrap gap-2">
+            <Authorized authorizations="K8sApplicationDetailsW">
+              <Link to="kubernetes.applications.application.edit">
+                <Button
+                  type="button"
+                  color="light"
+                  size="small"
+                  className="hover:decoration-none !ml-0"
+                  data-cy="k8sAppDetail-editAppButton"
+                >
+                  <Icon icon={Pencil} className="mr-1" />
+                  {externalApp
+                    ? 'Edit external application'
+                    : 'Edit this application'}
+                </Button>
+              </Link>
+            </Authorized>
+            {!applicationIsKind<Pod>('Pod', app) && (
+              <>
+                <RestartApplicationButton />
+                <RedeployApplicationButton
+                  environmentId={environmentId}
+                  namespace={namespace}
+                  appName={name}
+                  app={app}
+                />
+              </>
+            )}
+            {!externalApp && (
+              <RollbackApplicationButton
+                environmentId={environmentId}
+                namespace={namespace}
+                appName={name}
+                app={app}
+              />
+            )}
+            {appStackFileQuery.data && (
+              <Link
+                to="kubernetes.templates.custom.new"
+                params={{
+                  fileContent: appStackFileQuery.data.StackFileContent,
+                }}
+              >
+                <Button
+                  type="button"
+                  color="primary"
+                  size="small"
+                  className="hover:decoration-none !ml-0"
+                  data-cy="k8sAppDetail-createCustomTemplateButton"
+                >
+                  <Icon icon={Plus} className="mr-1" />
+                  Create template from application
+                </Button>
+              </Link>
+            )}
+          </div>
+        )}
+        <ApplicationServicesTable
+          environmentId={environmentId}
+          appServices={appServices}
+        />
+        <ApplicationIngressesTable
+          appServices={appServices}
+          environmentId={environmentId}
+          namespace={namespace}
+        />
+        <ApplicationAutoScalingTable
+          environmentId={environmentId}
+          namespace={namespace}
+          appName={name}
+          app={app}
+        />
+        <ApplicationEnvVarsTable namespace={namespace} app={app} />
+        <ApplicationVolumeConfigsTable namespace={namespace} app={app} />
+        <ApplicationPersistentDataTable
+          environmentId={environmentId}
+          namespace={namespace}
+          appName={name}
+          app={app}
+        />
+      </WidgetBody>
+    </Widget>
+  );
+}