job filterrow

dashboard/src/components/RadioFilter.tsx

@@ -9,6 +9,7 @@ type Props = {
   options: { value: any; label: string }[];
   selected: any;
   setSelected: any;
+  noMargin?: boolean;
 };
 
 const RadioFilter: React.FC<Props> = (props) => {
@@ -80,6 +81,7 @@ const RadioFilter: React.FC<Props> = (props) => {
       <StyledRadioFilter
         onClick={() => setExpanded(!expanded)}
         ref={parentRef}
+        noMargin={props.noMargin}
       >
         {props.icon && <FilterIcon src={props.icon} />}
         {props.name}
@@ -230,7 +232,7 @@ const FilterIcon = styled.img`
   margin-right: 9px;
 `;
 
-const StyledRadioFilter = styled.div`
+const StyledRadioFilter = styled.div<{ noMargin?: boolean }>`
   height: 30px;
   font-size: 13px;
   position: relative;
@@ -239,7 +241,7 @@ const StyledRadioFilter = styled.div`
   border-radius: 5px;
   display: flex;
   align-items: center;
-  margin-right: 10px;
+  margin-right: ${props => props.noMargin ? "" : "10px"};
   cursor: pointer;
   border: 1px solid #494b4f;
   :hover {

dashboard/src/components/Table.tsx

@@ -365,7 +365,7 @@ const SearchInput = styled.input`
   width: 100%;
   color: white;
   padding: 0;
-  height: 20px;
+  height: 21px;
 `;
 
 const SearchRow = styled.div`
@@ -376,7 +376,7 @@ const SearchRow = styled.div`
   border-radius: 4px;
   user-select: none;
   align-items: center;
-  padding: 10px 0px;
+  padding: 7px 0px;
   min-width: 300px;
   max-width: min-content;
   background: #ffffff11;
@@ -386,7 +386,7 @@ const SearchRow = styled.div`
     height: 18px;
     margin-left: 12px;
     margin-right: 12px;
-    font-size: 20px;
+    font-size: 18px;
   }
 `;
 

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -29,7 +29,6 @@ import LastRunStatusSelector from "./LastRunStatusSelector";
 import loadable from "@loadable/component";
 import Loading from "components/Loading";
 import JobRunTable from "./chart/JobRunTable";
-import TabSelector from "components/TabSelector";
 import TagFilter from "./TagFilter";
 
 // @ts-ignore
@@ -221,30 +220,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
 
     return (
       <>
-        <TabSelector
-          currentTab={this.state.showRuns ? "job_runs" : "chart_list"}
-          options={[
-            { label: "Jobs", value: "chart_list" },
-            { label: "Runs", value: "job_runs" },
-          ]}
-          setCurrentTab={(value) => {
-            if (value === "job_runs") {
-              this.setState({ showRuns: true });
-            } else {
-              this.setState({ showRuns: false });
-            }
-          }}
-        />
         <ControlRow style={{ marginTop: "35px" }}>
-          {isAuthorizedToAdd && (
-            <Button
-              onClick={() =>
-                pushFiltered(this.props, "/launch", ["project_id"])
-              }
-            >
-              <i className="material-icons">add</i> Launch template
-            </Button>
-          )}
           <FilterWrapper>
             <LastRunStatusSelector
               lastRunStatus={this.state.lastRunStatus}
@@ -254,6 +230,32 @@ class ClusterDashboard extends Component<PropsType, StateType> {
             />
             {this.renderCommonFilters()}
           </FilterWrapper>
+          <Flex>
+            <ToggleButton>
+              <ToggleOption 
+                onClick={() => this.setState({ showRuns: false})}
+                selected={!this.state.showRuns}
+              >
+                Jobs
+              </ToggleOption>
+              <ToggleOption 
+                nudgeLeft
+                onClick={() => this.setState({ showRuns: true })}
+                selected={this.state.showRuns}
+              >
+                Runs
+              </ToggleOption>
+            </ToggleButton>
+            {isAuthorizedToAdd && (
+              <Button
+                onClick={() =>
+                  pushFiltered(this.props, "/launch", ["project_id"])
+                }
+              >
+                <i className="material-icons">add</i> Launch template
+              </Button>
+            )}
+          </Flex>
         </ControlRow>
         <HidableElement show={this.state.showRuns}>
           <JobRunTable
@@ -346,6 +348,31 @@ ClusterDashboard.contextType = Context;
 
 export default withRouter(withAuth(ClusterDashboard));
 
+const ToggleOption = styled.div<{ selected: boolean, nudgeLeft?: boolean }>`
+  padding: 0 10px;
+  color: ${props => props.selected ? "" : "#494b4f"};
+  border: 1px solid #494b4f;
+  height: 100%;
+  display: flex;
+  margin-left: ${props => props.nudgeLeft ? "-1px" : ""};
+  align-items: center;
+  border-radius: ${props => props.nudgeLeft ? "0 5px 5px 0" : "5px 0 0 5px"};
+  :hover {
+    border: 1px solid #7a7b80;
+    z-index: 999;
+  }
+`;
+
+const ToggleButton = styled.div`
+  background: #26292e;
+  border-radius: 5px;
+  font-size: 13px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
 const HidableElement = styled.div<{ show: boolean }>`
   display: ${(props) => (props.show ? "unset" : "none")};
 `;
@@ -367,11 +394,13 @@ const Button = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-left: 10px;
   justify-content: space-between;
   font-size: 13px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
   border-radius: 5px;
+  font-weight: 500;
   color: white;
   height: 30px;
   padding: 0 8px;

dashboard/src/main/home/cluster-dashboard/SortSelector.tsx

@@ -49,10 +49,11 @@ export default class SortSelector extends Component<PropsType, StateType> {
       <StyledSortSelector>
         <RadioFilter
           selected={this.props.sortType}
-          setSelected={(sortType) => this.props.setSortType(sortType)}
+          setSelected={(sortType: any) => this.props.setSortType(sortType)}
           options={this.getSortOptions()}
           name="Sort"
           icon={sort}
+          noMargin
         />
       </StyledSortSelector>
     );

dashboard/src/main/home/cluster-dashboard/chart/JobRunTable.tsx

@@ -253,7 +253,7 @@ const JobRunTable: React.FC<Props> = ({
         },
       },
       {
-        Header: "Commit/Image tag",
+        Header: "Image tag",
         id: "commit_or_image_tag",
         accessor: (originalRow) => {
           const container = originalRow.spec?.template?.spec?.containers[0];
@@ -419,7 +419,7 @@ const CommandString = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 300px;
+  max-width: 160px;
   color: #ffffff55;
   margin-right: 27px;
   font-family: monospace;

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -176,6 +176,7 @@ const ControlRow = styled.div`
 
 const Button = styled.div`
   display: flex;
+  margin-left: 10px;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;

dashboard/src/main/home/cluster-dashboard/preview-environments/components/ButtonEnablePREnvironments.tsx

@@ -125,7 +125,7 @@ const Button = styled(DynamicLink)`
   font-family: "Work Sans", sans-serif;
   border-radius: 5px;
   color: white;
-  height: 35px;
+  height: 30px;
   padding: 0px 8px;
   padding-bottom: 1px;
   margin-right: 10px;

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -49,7 +49,8 @@ const Dashboard = () => {
         <Flex>
           <RadioFilter
             selected={currentSort}
-            setSelected={(sortType) => setCurrentSort(sortType as any)}
+            noMargin
+            setSelected={(sortType: any) => setCurrentSort(sortType as any)}
             options={[
               {
                 value: "created_at",
@@ -96,6 +97,7 @@ const Button = styled(DynamicLink)`
   font-family: "Work Sans", sans-serif;
   border-radius: 5px;
   color: white;
+  margin-left: 10px;
   height: 30px;
   padding: 0 8px;
   padding-right: 13px;