Merge branch 'dev' of https://github.com/zenml-io/zenml-dashboard into ahsan/feat/auth-screens

Author: AhsanKhan7

.github/workflows/release.yml

@@ -13,8 +13,9 @@ jobs:
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
+      - name: Get the version from the github tag ref
+        id: get_version
+        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
       - uses: actions/setup-node@v3
         with:
           node-version: 14.20.0
@@ -27,12 +28,7 @@ jobs:
         env:
           REACT_APP_BASE_API_URL: "/api/v1"
           REACT_APP_MOCKAPI_RESPONSE: false
-          REACT_APP_VERSION: ${{ github.ref }}
-
-      - name: Get the version from the github tag ref
-        id: get_version
-        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
-
+          REACT_APP_VERSION: ${{ steps.get_version.outputs.VERSION }}
       - name: Generate Changelog
         uses: heinrichreimer/[email protected]
         with:
@@ -43,18 +39,15 @@ jobs:
           issuesWoLabels: "true"
           stripHeaders: "true"
       - name: Create release archive
-        uses: a7ul/[email protected]
-        id: compress
-        with:
-          command: c
-          cwd: ./build
-          files: |
-            *
-          outPath: zenml-dashboard.tar.gz
+        run: |
+          tar -zcf zenml-dashboard.tar.gz -C build --transform="s#\.\/##" .
+          sha256sum -b zenml-dashboard.tar.gz > zenml-dashboard.tar.gz.sha256
       - name: Release to GitHub
         uses: softprops/action-gh-release@v1
         with:
-          files: zenml-dashboard.tar.gz
+          files: |
+            zenml-dashboard.tar.gz
+            zenml-dashboard.tar.gz.sha256
           body_path: ./CHANGELOG.md
           prerelease: "true"
         env:

src/ui/components/Filters/index.tsx

@@ -214,6 +214,11 @@ export const getInitialFilterStateForRuns = () => {
           label: 'Pipeline Name',
           type: 'string',
         },
+        {
+          value: 'status',
+          label: 'Status',
+          type: 'status',
+        },
         {
           value: 'stackName',
           label: 'Stack Name',
@@ -289,6 +294,26 @@ export const getInitialFilterStateForRuns = () => {
           label: 'false',
           type: 'boolean',
         },
+        {
+          value: 'completed',
+          label: 'Completed',
+          type: 'status',
+        },
+        {
+          value: 'running',
+          label: 'Running',
+          type: 'status',
+        },
+        {
+          value: 'failed',
+          label: 'Failed',
+          type: 'status',
+        },
+        {
+          value: 'cached',
+          label: 'Cached',
+          type: 'status',
+        },
       ],
     },
     filterValue: '',
@@ -386,6 +411,7 @@ const FilterComponent = ({
 
   return (
     <FlexBox.Column fullWidth>
+      {console.log(filters)}
       <FlexBox
         fullWidth
         className="border border-primary rounded rounded-4 p-2 align-item-center mb-3"
@@ -405,9 +431,52 @@ const FilterComponent = ({
             color={iconColors.white}
           />
         </Box>
+        {console.log(filters)}
         <Box style={{ padding: '5px 0px 0px 7px' }} className="text-muted h5">
-          {' '}
-          Filter your stack
+          {/* Filter your stack */}
+          {!applyFilter && !filters[0]?.column?.selectedValue?.label
+            ? 'Filter your stack'
+            : filters[0]?.column?.selectedValue.label && !applyFilter
+            ? filters.map((filter: any, index: number) => {
+                return (
+                  <FlexBox.Row>
+                    <Box
+                      onClick={() => hanldeDelete(index)}
+                      style={{
+                        width: '33px',
+                        height: '33px',
+                        // background: '#8045FF',
+                        borderRadius: '4px',
+                      }}
+                    >
+                      {`${filter.column.selectedValue.label} ${filter.filterValue}`}
+                    </Box>
+                  </FlexBox.Row>
+                );
+              })
+            : 'Filter your stack'}
+          {!applyFilter && !filters[0]?.column?.selectedValue?.label ? (
+            'Filter your stack'
+          ) : filters[0]?.column?.selectedValue.label && !applyFilter ? (
+            <Box
+              onClick={() => setFilter([])}
+              style={{
+                marginTop: '23px',
+                width: '130px',
+                height: '40px',
+                border: '1px solid #c9cbd0',
+                borderRadius: '4px',
+              }}
+            >
+              <icons.delete
+                style={{ padding: '7px 0px 0px 7px' }}
+                size={iconSizes.md}
+                color={iconColors.grey}
+              />
+            </Box>
+          ) : (
+            'Filter your stack'
+          )}
         </Box>
       </FlexBox>
       {applyFilter && (