瀏覽代碼

delete redundant eventcard

Justin Rhee 2 年之前
父節點
當前提交
561ebe3831
共有 1 個文件被更改,包括 0 次插入276 次删除
  1. 0 276
      dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/EventCard.tsx

+ 0 - 276
dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/EventCard.tsx

@@ -1,276 +0,0 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-
-import { timeElapsed } from "shared/string_utils";
-
-import app_event from "assets/app_event.png";
-import build from "assets/build.png";
-import deploy from "assets/deploy.png";
-import pre_deploy from "assets/pre_deploy.png";
-import loading from "assets/loading.gif";
-import healthy from "assets/status-healthy.png";
-import failure from "assets/failure.png";
-import run_for from "assets/run_for.png";
-import refresh from "assets/refresh.png";
-
-import Text from "components/porter/Text";
-import Container from "components/porter/Container";
-import Spacer from "components/porter/Spacer";
-import Link from "components/porter/Link";
-import Icon from "components/porter/Icon";
-import Modal from "components/porter/Modal";
-
-type Props = {
-  event: any;
-};
-
-const EventCard: React.FC<Props> = ({
-  event,
-  i,
-}) => {
-  const [showModal, setShowModal] = useState<boolean>(false);
-  const [modalContent, setModalContent] = useState<React.ReactNode>(null);
-
-  const getIcon = (eventType: string) => {
-    switch (eventType) {
-      case "APP_EVENT":
-        return app_event;
-      case "BUILD":
-        return build;
-      case "DEPLOY":
-        return deploy;
-      case "PRE_DEPLOY":
-        return pre_deploy;
-      default:
-        return app_event;
-    };
-  };
-
-  const getTitle = (eventType: string) => {
-    switch (eventType) {
-      case "APP_EVENT":
-        return "Some application event";
-      case "BUILD":
-        return "Application build";
-      case "DEPLOY":
-        return "Application deploy";
-      case "PRE_DEPLOY":
-        return "Application pre-deploy";
-      default:
-        return "";
-    };
-  };
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "SUCCESS":
-        return healthy;
-      case "FAILED":
-        return failure;
-      case "PROGRESSING":
-        return loading;
-      default:
-        return loading;
-    };
-  };
-
-  const renderStatusText = (event: any) => {
-    if (event.type === "BUILD") {
-      switch (event.status) {
-        case "SUCCESS":
-          return <Text color="#68BF8B">Build succeeded</Text>
-        case "FAILED":
-          return <Text color="#FF6060">Build failed</Text>
-        default:
-          return <Text color="#aaaabb66">Build in progress . . </Text>
-      };
-    };
-    
-    if (event.type === "DEPLOY") {
-      switch (event.status) {
-        case "SUCCESS":
-          return <Text color="#68BF8B">Deployed v100</Text>
-        case "FAILED":
-          return <Text color="#FF6060">Deploying v100 failed</Text>
-        default:
-          return <Text color="#aaaabb66">Deploying v100 . . .</Text>
-      };
-    };
-    
-    if (event.type === "PRE_DEPLOY") {
-      switch (event.status) {
-        case "SUCCESS":
-          return <Text color="#68BF8B">Pre-deploy succeeded . . </Text>
-        case "FAILED":
-          return <Text color="#FF6060">Pre-deploy failed . . </Text>
-        default:
-          return <Text color="#aaaabb66">Pre-deploy in progress . . </Text>
-      };
-    };
-  };
-
-  const renderInfoCta = (event: any) => {
-    if (event.type === "APP_EVENT") {
-      return (
-        <>
-          <Link hasunderline onClick={() => {
-            setModalContent(
-              <>
-                <Container row>
-                  <Icon height="20px" src={app_event} />
-                  <Spacer inline width="10px" />
-                  <Text size={16}>Event details</Text>
-                </Container>
-                <Spacer y={1} />
-                <Text>TODO: display event logs</Text>
-              </>
-            )
-            setShowModal(true);
-          }}>View details</Link>
-          <Spacer inline x={1} />
-        </>
-      );
-    };
-
-    if (event.type === "BUILD") {
-      switch (event.status) {
-        case "SUCCESS":
-          return (
-            <>
-              <Link hasunderline onClick={() => alert("TODO: open GHA logs modal")}>View logs</Link>
-              <Spacer inline x={1} />
-            </>
-          );
-        case "FAILED":
-          return (
-            <>
-              <Link hasunderline onClick={() => alert("TODO: open GHA logs modal")}>View logs</Link>
-              <Spacer inline x={1} />
-            </>
-          );
-        default:
-          return (
-            <>
-              <Link hasunderline onClick={() => alert("TODO: link to GHA")}>View live logs</Link>
-              <Spacer inline x={1} />
-            </>
-          );
-      };
-    };
-    
-    if (event.type === "DEPLOY") {
-      if (event.type === "FAILED") {
-        return (
-          <>
-            <Link hasunderline onClick={() => alert("TODO: open deploy logs modal")}>View logs</Link>
-            <Spacer inline x={1} />
-          </>
-        );
-      } else {
-        return;
-      };
-    };
-    
-    if (event.type === "PRE_DEPLOY") {
-      return (
-        <>
-          <Link hasunderline onClick={() => alert("TODO: open logs modal")}>View logs</Link>
-          <Spacer inline x={1} />
-        </>
-      );
-    };
-  };
-
-  const getElapsed = (event: any) => {
-    if (event.status === "SUCCESS" || event.status === "FAILED") {
-      return timeElapsed(event.updated_at, event.created_at);
-    } else {
-      return timeElapsed(new Date().toISOString(), event.created_at);
-    }
-  };
-
-  return (
-    <StyledEventCard>
-      <Container row spaced>
-        <Container row>
-          <Icon height="18px" src={getIcon(event.type)} />
-          <Spacer inline width="10px" />
-          <Text size={14}>{getTitle(event.type)}</Text>
-        </Container>
-        <Container row>
-          {getElapsed(event) !== "0s" && (
-            <>
-              <Icon height="14px" src={run_for} />
-              <Spacer inline width="6px" />
-              <Text color="helper">{getElapsed(event)}</Text>
-            </>
-          )}
-        </Container>
-      </Container>
-      <Spacer y={1} />
-      <Container row spaced>
-        <Container row>
-          {event.type !== "APP_EVENT" && (
-            <>
-              <Icon height="18px" src={getStatusIcon(event.status)} />
-              <Spacer inline width="10px" />
-            </>
-          )}
-          {renderStatusText(event)}
-          {event.type !== "APP_EVENT" && (
-            <Spacer inline x={1} />
-          )}
-          {renderInfoCta(event)}
-          {event.status === "FAILED" && event.type !== "APP_EVENT" && (
-            <>
-              <Link hasunderline>
-                <Container row>
-                  <Icon height="10px" src={refresh} />
-                  <Spacer inline width="5px" />
-                  Retry
-                </Container>
-              </Link>
-            </>
-          )}
-        </Container>
-        {false && (
-          <Text color="helper">user@email.com</Text>
-        )}
-      </Container>
-      {showModal && (
-        <Modal closeModal={() => setShowModal(false)}>
-          {modalContent}
-        </Modal>
-      )}
-    </StyledEventCard>
-  );
-};
-
-export default EventCard;
-
-const StyledEventCard = styled.div`
-  width: 100%;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 85px;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.fg};
-  border: 1px solid ${({ theme }) => theme.border};
-  opacity: 0;
-  animation: slideIn 0.5s 0s;
-  animation-fill-mode: forwards;
-  @keyframes slideIn {
-    from {
-      margin-left: -10px;
-      opacity: 0;
-      margin-right: 10px;
-    }
-    to {
-      margin-left: 0;
-      opacity: 1;
-      margin-right: 0;
-    }
-  }
-`;