coriolis-web/src/components/modules/DashboardModule/DashboardActivity/DashboardActivity.tsx

/*
Copyright (C) 2017  Cloudbase Solutions SRL
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import * as React from "react";
import { observer } from "mobx-react";
import styled from "styled-components";
import { Link } from "react-router-dom";

import StatusIcon from "@src/components/ui/StatusComponents/StatusIcon";
import StatusImage from "@src/components/ui/StatusComponents/StatusImage";
import Button from "@src/components/ui/Button";
import {
  InfoColumn,
  MainItemInfo,
  ItemReplicaBadge,
  ItemTitle,
  ItemDescription,
} from "@src/components/ui/Dropdowns/NotificationDropdown";

import type { NotificationItemData } from "@src/@types/NotificationItem";

import { ThemePalette, ThemeProps } from "@src/components/Theme";
import replicaImage from "./images/replica.svg";

const Wrapper = styled.div<any>`
  flex-grow: 1;
`;
const Title = styled.div<any>`
  font-size: 24px;
  font-weight: ${ThemeProps.fontWeights.light};
  margin-bottom: 12px;
`;
const Module = styled.div<any>`
  background: ${ThemePalette.grayscale[0]};
  display: flex;
  overflow: hidden;
  border-radius: ${ThemeProps.borderRadius};
  height: 273px;
`;
const LoadingWrapper = styled.div<any>`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
`;
const List = styled.div<any>`
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
`;
const ListItem = styled(Link)`
  padding: 8px 16px 8px 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all ${ThemeProps.animations.swift};

  &:hover {
    background: ${ThemePalette.grayscale[1]};
  }
`;
const NoItems = styled.div<any>`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
`;
const ReplicaImage = styled.div<any>`
  ${ThemeProps.exactSize("148px")}
  background: url('${replicaImage}') center no-repeat;
`;
const Message = styled.div<any>`
  text-align: center;
  margin-bottom: 32px;
`;

type Props = {
  notificationItems: NotificationItemData[];
  style?: React.CSSProperties | null;
  loading?: boolean;
  large?: boolean;
  onNewClick?: () => void;
};
@observer
class DashboardActivity extends React.Component<Props> {
  renderList() {
    return (
      <List>
        {this.props.notificationItems
          .filter((_, i) => i < (this.props.large ? 10 : 5))
          .map((item, i) => {
            const executionsHref =
              item.status === "RUNNING"
                ? item.type === "replica"
                  ? "/executions"
                  : item.type === "migration"
                  ? "/tasks"
                  : ""
                : "";

            return (
              <ListItem
                key={item.id}
                to={`/${item.type}s/${item.id}${executionsHref}`}
                style={{
                  width: `calc(${this.props.large ? 50 : 100}% - 32px)`,
                  paddingTop: i === 0 || i === 5 ? "16px" : "8px",
                }}
              >
                <InfoColumn>
                  <MainItemInfo>
                    <StatusIcon status={item.status} hollow />
                    <ItemReplicaBadge type={item.type}>
                      {item.type === "replica" ? "RE" : "MI"}
                    </ItemReplicaBadge>
                    <ItemTitle nowrap>{item.name}</ItemTitle>
                  </MainItemInfo>
                  <ItemDescription>{item.description}</ItemDescription>
                </InfoColumn>
              </ListItem>
            );
          })}
      </List>
    );
  }

  renderNoItems() {
    return (
      <NoItems>
        <ReplicaImage />
        <Message>
          There is no recent activity
          <br />
          in this project.
        </Message>
        <Button hollow primary transparent onClick={this.props.onNewClick}>
          New Replica / Migration
        </Button>
      </NoItems>
    );
  }

  renderLoading() {
    return (
      <LoadingWrapper>
        <StatusImage status="RUNNING" />
      </LoadingWrapper>
    );
  }

  render() {
    return (
      <Wrapper style={this.props.style}>
        <Title>Recent Activity</Title>
        <Module>
          {this.props.notificationItems.length === 0 && this.props.loading
            ? this.renderLoading()
            : this.props.notificationItems.length
            ? this.renderList()
            : this.renderNoItems()}
        </Module>
      </Wrapper>
    );
  }
}

export default DashboardActivity;