Improve/design logs n metrics (#83)

* 🎨 Improved design for logs component improved design for logs and disabled network_io and disk_io for apps * 🔖 Updated build
kloudlite · Feb 8, 2024 · 016dbaf · 016dbaf
1 parent dad0f34
commit 016dbaf
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 14 deletions.
diff --git a/.github/workflows/build-container.yaml b/.github/workflows/build-container.yaml
@@ -75,6 +75,12 @@ jobs:
           echo "IMAGE_TAG=$IMAGE_TAG" >> $GITHUB_ENV
           echo "OVERRIDE_PUSHED_IMAGE=false" >> $GITHUB_ENV
 
+      - name: Build
+        if: "!startsWith(github.ref, 'refs/heads/release-') && !startsWith(github.ref, 'refs/tags/')"
+        run: |
+          image_name="ghcr.io/${{ github.repository }}/${{matrix.app}}"
+          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t "$image_name:test"
+
       - name: Build & Push Image
         if: startsWith(github.ref, 'refs/heads/release-') || startsWith(github.ref, 'refs/tags/')
         run: |
@@ -92,12 +98,3 @@ jobs:
           
           docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t "$image_name:$IMAGE_TAG" --push
 
-
-#      - name: Build & Push Image
-#        if: startsWith(github.ref, 'refs/heads/release')
-#        run: |
-#          branch_name=${GITHUB_REF#refs/heads/}
-#          version_string="v${branch_name#release-}-nightly"
-#
-#          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t ghcr.io/kloudlite/web/${{matrix.app}}:$version_string --push
-#          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t ghcr.io/kloudlite/web/${{matrix.app}}:commit-${GITHUB_SHA} --push
diff --git a/src/apps/console/components/charts/charts-client.tsx b/src/apps/console/components/charts/charts-client.tsx
@@ -18,7 +18,7 @@ const Chart = (
     className?: string;
   }
 ) => {
-  const { height, width, className, title } = props;
+  const { height, width, className, title, disabled } = props;
   return (
     <Suspense
       fallback={
@@ -54,6 +54,12 @@ const Chart = (
             {title}
           </div>
           <div className="relative">
+            {disabled && (
+              <div className="flex absolute inset-0 justify-center items-center bg-surface-basic-default z-10 headingSm">
+                Not Available
+              </div>
+            )}
+
             <ChartsMain {...props} />
           </div>
         </div>

diff --git a/src/apps/console/components/logger.tsx b/src/apps/console/components/logger.tsx
@@ -845,11 +845,41 @@ const LogComp = ({
       }}
     >
       {subscribed && logs.length === 0 && (
-        <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex justify-center items-center inset-0 rounded-md">
-          <div className="text-text-on-primary bodyXl-medium p-3xl">
-            Connected to logs stream, and waiting for the logs to be generated.
+        <Pulsable isLoading>
+          <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex inset-0 rounded-md">
+            <div className="flex flex-col w-full">
+              <div className="flex justify-between items-center border-b border-border-tertiary p-lg">
+                <div>Logs</div>
+
+                <div className="flex items-center gap-xl">
+                  <div className="flex gap-xl items-center text-sm">
+                    <div className="pulsable">
+                      <input
+                        className="bg-transparent border border-surface-tertiary-default rounded-md px-lg py-xs w-[10rem]"
+                        placeholder="Search"
+                      />
+                    </div>
+                    <div className="cursor-pointer active:translate-y-[1px] transition-all">
+                      <span className={classNames('font-medium pulsable', {})}>
+                        <List color="currentColor" size={16} />
+                      </span>
+                    </div>
+                    <code
+                      className={classNames('text-xs font-bold pulsable', {})}
+                    >
+                      00 matches
+                    </code>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col items-center justify-center flex-1">
+                <div className="headingMd">
+                  No logs produced in the last 3 hours.
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
+        </Pulsable>
       )}
 
       {!subscribed && logs.length === 0 && <LoadingComp />}