iguazio.dashboard-react-controls 3.0.4 → 3.1.1

package/dist/scss/details.scss

@@ -0,0 +1,376 @@
+@use './colors';
+@use './mixins';
+@use './borders';
+@use './shadows';
+
+.table {
+  &__item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 250px);
+    height: 100%;
+    padding: 20px 30px;
+    overflow-y: auto;
+    color: colors.$mulledWine;
+    background-color: colors.$white;
+    border: 1px solid colors.$magnoliaWhite;
+    border-radius: 0 4px 4px 0;
+
+    &_big {
+      width: 100%;
+    }
+
+    &-popup {
+      border-radius: 8px;
+    }
+
+    .error {
+      margin-bottom: 10px;
+    }
+
+    .item {
+      &-header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        justify-content: flex-end;
+        margin: 0 0 1em 0;
+
+        &-wrapper {
+          position: sticky;
+          top: 0;
+          left: 0;
+          z-index: 6;
+          background-color: inherit;
+        }
+
+        &__title {
+          display: flex;
+          align-items: center;
+        }
+
+        &__status {
+          color: colors.$topaz;
+          line-height: 25px;
+
+          &-row {
+            display: flex;
+            flex: 1 0 100%;
+            flex-flow: row wrap;
+            align-items: center;
+            margin-bottom: 5px;
+
+            .info-banner {
+              display: flex;
+              gap: 8px;
+              align-items: center;
+              max-width: 100%;
+              height: 36px;
+              padding: 4px 8px;
+              background-color: colors.$magnoliaWhite;
+              border-radius: 4px;
+            }
+          }
+        }
+
+        &__back-btn {
+          margin-right: 5px;
+
+          & > * {
+            margin: 0;
+          }
+        }
+
+        &__navigation-buttons {
+          display: flex;
+        }
+
+        &__pods {
+          &-error {
+            color: colors.$spunPearl;
+          }
+        }
+
+        &__data {
+          flex: 1 0 0;
+          min-width: 250px;
+          margin-right: auto;
+
+          h3 {
+            margin: 0 0 5px 0;
+            font-size: 24px;
+            line-height: 28px;
+          }
+
+          .state {
+            display: inline-block;
+            min-width: 18px;
+
+            i {
+              margin: 0 10px 0 5px;
+            }
+          }
+
+          .error-container {
+            flex: 1;
+            margin-left: 0;
+
+            &:not(:last-child) {
+              margin-right: 1em;
+              padding-right: 1em;
+              border-right: borders.$secondaryBorder;
+            }
+          }
+        }
+
+        &__custom-elements {
+          z-index: 7;
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+        }
+
+        &__buttons {
+          z-index: 7;
+          display: flex;
+          align-items: center;
+
+          a {
+            display: inline-block;
+            margin: 21px 21px 21px 10px;
+
+            &.details-close-btn {
+              margin: 0;
+            }
+          }
+
+          .btn {
+            margin: 0 0.2rem;
+          }
+
+          .table-actions-container {
+            display: block;
+          }
+
+          .actions-menu {
+            &__container {
+              display: block;
+
+              .btn {
+                padding: 0;
+                border: none;
+
+                &:hover {
+                  background-color: transparent;
+                }
+
+                :first-child {
+                  margin-right: 0;
+                }
+              }
+            }
+          }
+
+          .details-date-picker {
+            margin-right: 12px;
+          }
+        }
+      }
+
+      &__content {
+        border-top: borders.$secondaryBorder;
+      }
+    }
+
+    &_inputs {
+      width: 100%;
+
+      @include mixins.resetSpaces;
+
+      &_item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 27px 24px;
+        border-bottom: borders.$secondaryBorder;
+
+        div {
+          min-width: 237px;
+          padding: 0 5px;
+        }
+      }
+    }
+
+    &-logs {
+      position: relative;
+      display: flex;
+      flex: 1;
+      width: 100%;
+      min-height: 200px;
+      padding: 10px 0;
+      color: colors.$white;
+      font-family: 'Source Code Pro', 'Courier New', monospace;
+      white-space: pre-wrap;
+      background-color: colors.$black;
+
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+
+      &-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      &-content {
+        width: 100%;
+        height: 100%;
+        padding: 0 10px;
+        overflow-y: scroll;
+
+        /* Define the thumb style */
+        &::-webkit-scrollbar-thumb {
+          background: colors.$doveGray;
+          border-radius: 5px;
+        }
+      }
+
+      &-panel {
+        padding: 0 10px;
+
+        .logs-refresh {
+          .btn {
+            min-width: 40px;
+            padding: 0;
+            border-radius: 50%;
+
+            & > * {
+              margin: 0;
+            }
+          }
+        }
+
+        .logs-loader {
+          width: 40px;
+          height: 40px;
+        }
+      }
+    }
+
+    &_artifacts {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      &_wrapper {
+        width: 100%;
+      }
+    }
+
+    .details-item {
+      &__buttons-block {
+        display: flex;
+      }
+
+      &__apply-btn-wrapper {
+        width: 30px;
+      }
+
+      &__apply-btn {
+        display: block;
+        min-width: 30px;
+        height: 30px;
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    .preview_container {
+      display: flex;
+      flex-flow: column;
+      width: 100%;
+      height: 100%;
+
+      &__header {
+        display: flex;
+        justify-content: space-between;
+
+        &-text {
+          align-self: center;
+        }
+      }
+
+      .inputs_container {
+        width: 100%;
+      }
+
+      .accordion {
+        &__container {
+          &.open {
+            .accordion__body {
+              overflow: initial;
+            }
+          }
+        }
+      }
+
+      .preview {
+        &_popout {
+          margin: 0;
+          padding: 0;
+          background: colors.$white;
+          border: none;
+          outline: none;
+          cursor: pointer;
+        }
+      }
+
+      .json {
+        padding: 0 15px;
+      }
+
+      .preview-table {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        overflow: auto;
+
+        .table-header {
+          top: 0;
+        }
+      }
+    }
+
+    &_code {
+      flex: 1;
+      overflow: auto;
+
+      h3 {
+        text-align: center;
+        vertical-align: middle;
+      }
+
+      pre {
+        padding: 8px 16px;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+    }
+
+    &.pop-up-dialog-opened {
+      overflow-y: hidden;
+    }
+
+    .chips {
+      &-wrapper {
+        flex-wrap: wrap;
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/scss/mixins.scss

@@ -8,7 +8,7 @@
   left: 0;
 }
 
-@mixin jobsFlex {
+@mixin displayFlex {
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;

package/dist/scss/table.scss

@@ -0,0 +1,283 @@
+@use './variables';
+@use './colors';
+@use './mixins';
+@use './borders';
+@use './shadows';
+
+@mixin tableCellWidth {
+  flex: 0 0 auto;
+  min-width: 75px;
+}
+
+.table {
+  &__flex {
+    display: flex;
+    flex: 1;
+    flex-flow: row wrap;
+  }
+
+  &__content {
+    position: relative;
+    flex: 1;
+
+    [class*='icon'] {
+      flex-wrap: nowrap;
+    }
+
+    .text-bold {
+      font-weight: 500;
+    }
+  }
+
+  &__wrapper {
+    .content & {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 2;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      color: colors.$mulledWine;
+      background-color: colors.$white;
+    }
+  }
+
+  & [class*='table-cell-'] {
+    @include tableCellWidth;
+  }
+
+  .table-row {
+    .table-cell {
+      &-1 {
+        flex: 1;
+      }
+
+      &-2 {
+        flex: 2;
+      }
+
+      &-3 {
+        flex: 3;
+      }
+
+      &-4 {
+        flex: 4;
+      }
+
+      &-5 {
+        flex: 5;
+      }
+
+      &-6 {
+        flex: 6;
+      }
+
+      &-7 {
+        flex: 7;
+      }
+
+      &-8 {
+        flex: 8;
+      }
+
+      &-9 {
+        flex: 9;
+      }
+
+      &-10 {
+        flex: 10;
+      }
+
+      &-extra-small {
+        flex: 1;
+        max-width: 85px;
+      }
+
+      &-small {
+        flex: 1;
+        max-width: 150px;
+      }
+    }
+
+    &:has(.actions-menu__container-active) {
+      background-color: colors.$ghostWhite;
+    }
+  }
+
+  &.table {
+    &__scrolled {
+      .table-cell-name {
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 5px;
+          background-color: inherit;
+          border-right: borders.$secondaryBorder;
+          box-shadow: 2px 0 2px -1px rgba(colors.$black, 0.2);
+          content: '';
+        }
+      }
+
+      .parent-row_expanded {
+        .row_grouped-by {
+          .table-cell-name {
+            border-right: none;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+
+  .targets-cell {
+    flex-wrap: nowrap;
+    min-width: 130px;
+
+    svg {
+      margin: 0 5px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &__panel-container {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: auto;
+    border-left: borders.$primaryBorder;
+    box-shadow: shadows.$tablePanelShadow;
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  &__panel {
+    height: 100%;
+    overflow: hidden auto;
+  }
+
+  .error-message {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .table {
+    &-header {
+      &__cell {
+        @include tableCellWidth;
+
+        &.buttonPopout,
+        &.buttonDownload {
+          @include mixins.tableColumnFlex(0.5, 80px);
+        }
+
+        &.align-right {
+          justify-content: flex-end;
+        }
+
+        .tip-container {
+          margin-left: 2px;
+        }
+      }
+
+      .icons-container {
+        min-width: 150px;
+      }
+    }
+
+    &-body {
+      color: colors.$mulledWine;
+
+      &__cell {
+        @include tableCellWidth;
+
+        &_hidden {
+          font-size: 0;
+
+          * {
+            visibility: hidden;
+          }
+
+          .chip {
+            visibility: hidden;
+          }
+        }
+
+        .cell_name {
+          position: relative;
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          margin: 0;
+        }
+
+        .text_small {
+          min-width: 100%;
+          max-width: 50px;
+        }
+
+        &.align-right {
+          justify-content: flex-end;
+        }
+
+        &_type {
+          display: inline-flex;
+          text-transform: capitalize;
+        }
+
+        a {
+          position: relative;
+          width: 100%;
+          margin: 0;
+          text-decoration: none;
+
+          span {
+            display: block;
+            width: 100%;
+          }
+        }
+
+        i {
+          margin-right: 5px;
+        }
+
+        button {
+          display: flex;
+          font-size: 15px;
+          background-color: transparent;
+          border: none;
+
+          &:disabled {
+            cursor: default;
+          }
+
+          &:not(:disabled) {
+            cursor: pointer;
+          }
+        }
+
+        .path-tooltip {
+          cursor: pointer;
+        }
+
+        .chip_short {
+          max-width: 100px;
+        }
+
+        .alert-icon-cell {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+        }
+      }
+    }
+  }
+}

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 export const BUTTON_VARIANTS: any;
 export const CHIP: any;
 export const CHIP_INPUT_LIST: any;
+export const DENSITY_OPTIONS: any;
 export const CHIP_OPTIONS: any;
 export const CHIPS: any;
 export const POP_UP_CUSTOM_POSITION: any;
@@ -22,4 +23,9 @@ export const ALLOW_SORT_BY: any;
 export const DEFAULT_SORT_BY: any;
 export const EXCLUDE_SORT_BY: any;
 export const DENSITY: any;
+export const VIRTUALIZATION_CONFIG: any;
+export const SLIDER_TABS: any;
+export const DETAILS_MENU: any;
+export const ACTION_BUTTON: any;
+export const ACTIONS_MENU: any;
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.js"],"names":[],"mappings":"AA+BA,kCAME;AAEF,uBAIE;AAEF,kCASC;AAED,+BAgBE;AAEF,wBAA4C;AAE5C,yCAKE;AAEF,8BAAgG;AAEhG,+CAIE;AACF,yCAAgG;AAChG,+CAIE;AAEF,sCAQC;AAED,6BAGE;AAEF,gCASE;AAEF,iCAA8D;AAE9D,yCAOC;AAED,2CAMC;AAED,4CAMC;AAED,0CAMC;AAED,0CAQE;AAEF,6BAIE;AAEF,gCAIE;AAEF,kCAAwF;AAExF,kCAIE;AAEF,0BAA+E"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.js"],"names":[],"mappings":"AAmCA,kCAME;AAEF,uBAIE;AAEF,kCASC;AAED,kCAKE;AAEF,+BAgBE;AAEF,wBAA4C;AAE5C,yCAKE;AAEF,8BAAgG;AAEhG,+CAIE;AACF,yCAAgG;AAChG,+CAIE;AAEF,sCAQC;AAED,6BAGE;AAEF,gCASE;AAEF,iCAA8D;AAE9D,yCAOC;AAED,2CAMC;AAED,4CAMC;AAED,0CAMC;AAED,0CAQE;AAEF,6BAIE;AAEF,gCAIE;AAEF,kCAAwF;AAExF,kCAIE;AAEF,0BAA+E;AAE/E,wCAIE;AAEF,8BAOC;AAED,+BAMC;AAED,gCAOE;AAUF,+BAGE"}