Release prod version: 25.1, version: 17.3.0

appknox · Jan 17, 2025 · 8648746 · 8648746
1 parent 807a9ca
commit 8648746
Show file tree

Hide file tree

Showing 30 changed files with 658 additions and 5 deletions.
diff --git a/app/components/app-monitoring/details/skeleton-loader/index.hbs b/app/components/app-monitoring/details/skeleton-loader/index.hbs
@@ -0,0 +1,88 @@
+<AkSkeleton @width='250px' @height='14px' class='mt-2' />
+
+<AkStack
+  @direction='column'
+  @width='full'
+  local-class='app-details-container'
+  class='pt-3'
+>
+  <AkStack
+    @direction='column'
+    @tag='section'
+    @width='full'
+    local-class='app-details-wrapper'
+  >
+    <AkStack
+      @direction='row'
+      @justifyContent='space-between'
+      @alignItems='stretch'
+      @width='full'
+      local-class='overview-container'
+    >
+      <AkStack @direction='column' @tag='article'>
+        <AkStack @direction='row' @spacing='1.5' local-class='overview-icons'>
+          <AkSkeleton @width='40px' @height='40px' />
+
+          <AkSkeleton @width='40px' @height='40px' />
+        </AkStack>
+
+        <AkSkeleton @width='100px' @height='20px' class='mb-1' />
+
+        <AkSkeleton @width='200px' @height='16px' />
+      </AkStack>
+
+      <AkStack
+        @direction='column'
+        @alignItems='flex-start'
+        @justifyContent='center'
+        local-class='monitoring-toggle-container'
+      >
+        <AkSkeleton @width='125px' @height='16px' class='mb-1' />
+
+        <AkStack @alignItems='center' @spacing='1'>
+          <AkSkeleton @width='35px' @height='20px' class='mb-1' />
+        </AkStack>
+      </AkStack>
+    </AkStack>
+
+    <AkStack @direction='column' local-class='monitoring-details-container'>
+      <div local-class='monitoring-details-group'>
+        <AkStack>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='30px' @height='16px' />
+        </AkStack>
+
+        <AkStack>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='100px' @height='16px' />
+        </AkStack>
+      </div>
+
+      <div local-class='monitoring-details-group'>
+        <AkStack>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='40px' @height='16px' />
+        </AkStack>
+
+        <AkStack class='mb-2'>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='60px' @height='16px' />
+        </AkStack>
+      </div>
+    </AkStack>
+  </AkStack>
+
+  <AkStack class='mt-2 ml-2'>
+    <AkSkeleton @width='140px' @height='20px' class='mr-3' />
+
+    <AkSkeleton @width='140px' @height='20px' />
+  </AkStack>
+</AkStack>
+
+<AkSkeleton @width='500px' @height='20px' class='ml-2 mb-2' />
+
+<AppMonitoring::Loading @loadingText='{{t "loading"}}...' />
diff --git a/app/components/app-monitoring/details/skeleton-loader/index.scss b/app/components/app-monitoring/details/skeleton-loader/index.scss
@@ -0,0 +1,41 @@
+.app-details-container {
+  padding-bottom: 1.3571em;
+
+  .app-details-wrapper {
+    padding: 1.5em;
+    border: 1px solid var(--appmonitoring-details-skeleton-loader-border-color);
+    margin-bottom: 1.5714em;
+
+    .overview-container {
+      height: fit-content;
+      margin-bottom: 1.4286em;
+
+      .overview-icons {
+        margin-bottom: 0.857em;
+      }
+
+      .monitoring-toggle-container {
+        border-left: 1px solid
+          var(--appmonitoring-details-skeleton-loader-toggle-border-color);
+        padding-left: 1.214em;
+      }
+    }
+
+    .monitoring-details-container {
+      width: 100%;
+
+      .monitoring-details-group {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 400px);
+
+        &:first-of-type {
+          border-bottom: 1px solid
+            var(--appmonitoring-details-skeleton-loader-border-color);
+          padding-bottom: 0.6428em;
+          margin-bottom: 0.6428em;
+        }
+      }
+    }
+  }
+}
diff --git a/app/components/app-monitoring/details/skeleton-loader/index.ts b/app/components/app-monitoring/details/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class AppMonitoringDetailsSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'AppMonitoring::Details::SkeletonLoader': typeof AppMonitoringDetailsSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/app-monitoring/skeleton-loader/index.hbs b/app/components/app-monitoring/skeleton-loader/index.hbs
@@ -0,0 +1,40 @@
+<AkStack
+  @width='full'
+  @direction='column'
+  local-class='header-app-moitoring-page'
+>
+  <AkStack
+    @width='full'
+    @justifyContent='space-between'
+    @alignItems='center'
+    @spacing='1.5'
+    local-class='header-app-moitoring-page-title'
+  >
+    <AkStack @direction='column' @spacing='0.5'>
+      <AkSkeleton @width='100px' @height='20px' class='mb-1' />
+
+      <AkSkeleton @width='650px' @height='15px' />
+
+      <AkSkeleton @width='250px' @height='15px' />
+    </AkStack>
+
+    <AkSkeleton @width='35px' @height='16px' />
+  </AkStack>
+
+  <AkDivider @color='dark' />
+
+  <AkStack
+    @alignItems='center'
+    @justifyContent='space-between'
+    @width='full'
+    local-class='header-app-moitoring-page-sorting-filter'
+  >
+    <AkSkeleton @width='115px' @height='32px' />
+
+    <AkSkeleton @width='200px' @height='30px' />
+  </AkStack>
+</AkStack>
+
+<div local-class='app-monitoring-table-container'>
+  <AppMonitoring::Loading @loadingText='{{t "loading"}}...' />
+</div>
diff --git a/app/components/app-monitoring/skeleton-loader/index.scss b/app/components/app-monitoring/skeleton-loader/index.scss
@@ -0,0 +1,17 @@
+.header-app-moitoring-page {
+  border: 1px solid var(--appmonitoring-skeleton-loader-header-border-color);
+  border-radius: var(--appmonitoring-skeleton-loader-header-border-radius);
+  padding-top: 0.714em;
+
+  .header-app-moitoring-page-title {
+    padding: 1em 1.285em;
+  }
+}
+
+.header-app-moitoring-page-sorting-filter {
+  padding: 0.785em 1.285em;
+}
+
+.app-monitoring-table-container {
+  margin-top: 1.25em;
+}
diff --git a/app/components/app-monitoring/skeleton-loader/index.ts b/app/components/app-monitoring/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class AppMonitoringSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'AppMonitoring::SkeletonLoader': typeof AppMonitoringSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/file-compare/skeleton-loader/index.hbs b/app/components/file-compare/skeleton-loader/index.hbs
@@ -0,0 +1,67 @@
+<AkSkeleton @width='250px' @height='16px' class='mt-2 mb-3' />
+
+<AkStack @direction='column' @width='full'>
+  <AkStack
+    @width='full'
+    @justifyContent='space-between'
+    @alignItems='center'
+    local-class='file-compare-header-project-overview'
+  >
+    <AkStack @width='full' @alignItems='center' @spacing='1.5'>
+      <AkStack @alignItems='center' @spacing='1'>
+        <AkSkeleton @width='25px' @height='25px' />
+
+        <AkSkeleton @width='75px' @height='16px' />
+      </AkStack>
+
+      <AkDivider @direction='vertical' @height='26px' />
+
+      <AkStack @alignItems='center' @spacing='0.5'>
+        <AkSkeleton @width='25px' @height='25px' />
+
+        <AkSkeleton @width='75px' @height='16px' />
+      </AkStack>
+
+      <AkDivider @direction='vertical' @height='26px' />
+
+      <AkStack @alignItems='center'>
+        <AkSkeleton @width='25px' @height='25px' />
+      </AkStack>
+    </AkStack>
+  </AkStack>
+
+  <AkStack
+    @width='full'
+    @justifyContent='space-between'
+    @alignItems='center'
+    local-class='file-compare-header-info'
+  >
+    <AkStack
+      @direction='column'
+      @spacing='1.5'
+      data-test-fileCompareHeader-fileCompare-content
+    >
+      <AkSkeleton @width='75px' @height='22px' />
+
+      <AkSkeleton @width='200px' @height='16px' />
+    </AkStack>
+
+    <AkSkeleton @width='25px' @height='25px' />
+  </AkStack>
+</AkStack>
+
+<div local-class='file-compare-tabs' class='pb-3'>
+  <AkStack @spacing='6' class='p-2'>
+    <AkSkeleton @width='100px' @height='16px' />
+
+    <AkSkeleton @width='100px' @height='16px' />
+
+    <AkSkeleton @width='100px' @height='16px' />
+
+    <AkSkeleton @width='100px' @height='16px' />
+  </AkStack>
+
+  <AkDivider @color='dark' />
+</div>
+
+<FileCompare::Loader @loadingText='{{t "loading"}}...' />
diff --git a/app/components/file-compare/skeleton-loader/index.scss b/app/components/file-compare/skeleton-loader/index.scss
@@ -0,0 +1,18 @@
+.file-compare-header-project-overview {
+  background-color: var(--file-compare-skeleton-loader-background-color);
+  border: 1px solid var(--file-compare-skeleton-loader-border-color);
+  padding: 1em 1.5em;
+}
+
+.file-compare-header-info {
+  padding: 1.4286em;
+  border: 1px solid var(--file-compare-skeleton-loader-border-color);
+  border-top: none;
+  box-shadow: var(--file-compare-skeleton-loader-box-shadow);
+  background-color: var(--file-compare-skeleton-loader-background-color);
+}
+
+.file-compare-tabs {
+  margin-top: 1.4286em;
+  background: var(--file-compare-skeleton-loader-background-color);
+}
diff --git a/app/components/file-compare/skeleton-loader/index.ts b/app/components/file-compare/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class FileCompareSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'FileCompare::SkeletonLoader': typeof FileCompareSkeletonLoaderComponent;
+  }
+}