github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/Pages/Environments/EnvironmentsPage.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import { useEnvironmentGroups, useEnvironments, useGlobalLoadingState } from '../../utils/store';
    17  import { EnvironmentCard, EnvironmentGroupCard } from '../../components/EnvironmentCard/EnvironmentCard';
    18  import { LoadingStateSpinner } from '../../utils/LoadingStateSpinner';
    19  import React from 'react';
    20  import { TopAppBar } from '../../components/TopAppBar/TopAppBar';
    21  
    22  export const EnvironmentsPage: React.FC = () => {
    23      const envsGroups = useEnvironmentGroups();
    24      const envs = useEnvironments();
    25      // note that in all cases, envsGroups.length <= envs.length
    26      // if they are equal (envsGroups.length === envs.length), then there are effectively no groups, but the cd-server still returns each env wrapped in a group
    27      const useGroups = envsGroups.length !== envs.length;
    28  
    29      const [everythingLoaded, loadingState] = useGlobalLoadingState();
    30      if (!everythingLoaded) {
    31          return <LoadingStateSpinner loadingState={loadingState} />;
    32      }
    33  
    34      const mainContent: JSX.Element = useGroups ? (
    35          <main className="main-content">
    36              {envsGroups.map((envGroup) => (
    37                  <EnvironmentGroupCard environmentGroup={envGroup} key={envGroup.environmentGroupName} />
    38              ))}
    39          </main>
    40      ) : (
    41          <main className="main-content">
    42              {/*if there are no groups, wrap everything in one group: */}
    43              <div className="environment-group-lane">
    44                  {envs.map((env) => (
    45                      <EnvironmentCard environment={env} key={env.name} group={undefined} />
    46                  ))}
    47              </div>
    48          </main>
    49      );
    50      return (
    51          <div>
    52              <TopAppBar showAppFilter={false} showTeamFilter={false} showWarningFilter={false} />
    53              {mainContent}
    54          </div>
    55      );
    56  };