github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/stores/Stores.tsx (about)

     1  import React, { FC } from 'react';
     2  import { RouteComponentProps } from '@reach/router';
     3  import { UncontrolledAlert } from 'reactstrap';
     4  import { withStatusIndicator } from '../../../components/withStatusIndicator';
     5  import { useFetch } from '../../../hooks/useFetch';
     6  import PathPrefixProps from '../../../types/PathPrefixProps';
     7  import { Store } from './store';
     8  import { StorePoolPanel } from './StorePoolPanel';
     9  
    10  export interface StoreListProps {
    11    [storeType: string]: Store[];
    12  }
    13  
    14  export const StoreContent: FC<{ data: StoreListProps }> = ({ data }) => {
    15    const storePools = Object.keys(data);
    16    return (
    17      <>
    18        {storePools.length > 0 ? (
    19          storePools.map<JSX.Element>((storeGroup) => (
    20            <StorePoolPanel key={storeGroup} title={storeGroup} storePool={data[storeGroup]} />
    21          ))
    22        ) : (
    23          <UncontrolledAlert color="warning">No stores registered.</UncontrolledAlert>
    24        )}
    25      </>
    26    );
    27  };
    28  
    29  const StoresWithStatusIndicator = withStatusIndicator(StoreContent);
    30  
    31  export const Stores: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' }) => {
    32    const { response, error, isLoading } = useFetch<StoreListProps>(`${pathPrefix}/api/v1/stores`);
    33    const { status: responseStatus } = response;
    34    const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
    35  
    36    return (
    37      <StoresWithStatusIndicator
    38        data={response.data}
    39        error={badResponse ? new Error(responseStatus) : error}
    40        isLoading={isLoading}
    41      />
    42    );
    43  };
    44  
    45  export default Stores;