github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/ccl/src/views/clusterviz/containers/map/breadcrumbs.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Licensed as a CockroachDB Enterprise file under the Cockroach Community
     4  // License (the "License"); you may not use this file except in compliance with
     5  // the License. You may obtain a copy of the License at
     6  //
     7  //     https://github.com/cockroachdb/cockroach/blob/master/licenses/CCL.txt
     8  
     9  import React from "react";
    10  import _ from "lodash";
    11  import { Link } from "react-router-dom";
    12  
    13  import { generateLocalityRoute } from "src/util/localities";
    14  import { LocalityTier } from "src/redux/localities";
    15  import { intersperse } from "src/util/intersperse";
    16  import { getLocalityLabel } from "src/util/localities";
    17  import mapPinIcon from "!!raw-loader!assets/mapPin.svg";
    18  import { trustIcon } from "src/util/trust";
    19  import { CLUSTERVIZ_ROOT } from "src/routes/visualization";
    20  
    21  import "./breadcrumbs.styl";
    22  
    23  interface BreadcrumbsProps {
    24    tiers: LocalityTier[];
    25  }
    26  
    27  export class Breadcrumbs extends React.Component<BreadcrumbsProps> {
    28    render() {
    29      const paths = breadcrumbPaths(this.props.tiers);
    30  
    31      return (
    32        <div className="breadcrumbs">
    33          <span
    34            className="breadcrumbs__icon"
    35            dangerouslySetInnerHTML={trustIcon(mapPinIcon)}
    36            />
    37          {intersperse(
    38            paths.map((path, idx) => (
    39              <span key={idx}>
    40                {idx === paths.length - 1
    41                  ? getLocalityLabel(path)
    42                  : <Link
    43                    to={CLUSTERVIZ_ROOT + generateLocalityRoute(path)}
    44                    className="breadcrumbs__link"
    45                  >
    46                      {getLocalityLabel(path)}
    47                    </Link>
    48                }
    49              </span>
    50            )),
    51            <span className="breadcrumbs__separator"> &gt; </span>,
    52          )}
    53        </div>
    54      );
    55    }
    56  }
    57  
    58  function breadcrumbPaths(path: LocalityTier[]): LocalityTier[][] {
    59    const pathSoFar: LocalityTier[] = [];
    60    const output: LocalityTier[][] = [[]];
    61    path.forEach((tier) => {
    62      pathSoFar.push(tier);
    63      output.push(_.clone(pathSoFar));
    64    });
    65    return output;
    66  }