@appscode/design-system 1.0.43-alpha.16 → 1.0.43-alpha.162

package/vue-components/v2/table/Table.vue

@@ -23,12 +23,41 @@
             :key="idx"
             :class="{
               sorting: headerSortables[idx] && headerSortables[idx].enabled,
-              'sorting-desc': headerSortables[idx] && headerSortables[idx].mode === 'desc',
-              'sorting-asc': headerSortables[idx] && headerSortables[idx].mode === 'asc',
+              'sorting-desc':
+                headerSortables[idx] && headerSortables[idx].mode === 'desc',
+              'sorting-asc':
+                headerSortables[idx] && headerSortables[idx].mode === 'asc',
+              'has-text-centered':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'center',
+              'has-text-left':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'left',
+              'has-text-right':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'right',
             }"
-            @click.prevent="headerSortables[idx] && headerSortables[idx].enabled && emitSortEvent(idx)"
+            @click.prevent="
+              headerSortables[idx] &&
+                headerSortables[idx].enabled &&
+                emitSortEvent(idx)
+            "
           >
             {{ headerLabels[idx] }}
+            <span
+              v-if="
+                tableHeader.dashboard &&
+                tableHeader.dashboard.status &&
+                tableHeader.dashboard.status !== 'Success'
+              "
+              class="icon has-text-danger"
+              :title="tableHeader.dashboard && tableHeader.dashboard.message"
+            >
+              <i class="fa fa-exclamation-triangle" />
+            </span>
           </th>
           <th
             ref="action-section"
@@ -146,7 +175,7 @@ export default {
     },
     headerLabels() {
       return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th.label || "Label"
+        typeof th === "string" ? th : th.name || "Label"
       );
     },
   },
@@ -157,8 +186,15 @@ export default {
       handler(n) {
         if (this.headerSortables.length === n.length) {
           n.forEach((th, idx) => {
-            if (this.headerSortables[idx].enabled !== !!th.sortable) {
-              this.headerSortables[idx].enabled = !!th.sortable;
+            if (
+              this.headerSortables[idx].enabled !==
+              !!(th && th.sort && th.sort.enable)
+            ) {
+              this.headerSortables[idx].enabled = !!(
+                th &&
+                th.sort &&
+                th.sort.enable
+              );
               this.headerSortables[idx].mode = "";
             }
           });
@@ -171,7 +207,7 @@ export default {
               };
             } else {
               return {
-                enabled: !!th.sortable,
+                enabled: !!(th && th.sort && th.sort.enable),
                 mode: "",
               };
             }
@@ -198,7 +234,7 @@ export default {
     emitSortEvent(index) {
       const emitValue = {
         index,
-        label: this.tableHeaders[index].label,
+        label: this.tableHeaders[index].name,
         mode: "",
       };
 

package/vue-components/v2/table/TableRow.vue

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate">
+    <tr class="is-link" @click="navigate">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"
@@ -14,9 +14,14 @@
       />
     </tr>
   </router-link>
+
   <tr
     v-else
-    :class="{ 'is-selected': isSelected, 'is-hoverless': !isSelected }"
+    :class="{
+      'is-selected': isSelected,
+      'is-hoverless': !isSelected,
+      'is-disabled': isDisabled
+    }"
     @click.prevent="$emit('rowselect', true)"
   >
     <slot />
@@ -32,21 +37,25 @@ export default {
   props: {
     link: {
       type: String,
-      default: "",
+      default: ""
     },
     isSelected: {
       type: Boolean,
-      default: false,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
     },
     fakeCellWidth: {
       type: Number,
-      default: 0,
-    },
+      default: 0
+    }
   },
 
   components: {
     TableCell: () => import("./TableCell.vue"),
-    FakeTableCell: () => import("./FakeTableCell.vue"),
-  },
+    FakeTableCell: () => import("./FakeTableCell.vue")
+  }
 };
 </script>

package/vue-components/v2/table/table-cell/CellValue.vue

@@ -1,8 +1,13 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" />
+    <content-loader
+      :height="10"
+      :width="computedCellWidth || 300"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
+    />
   </div>
-  <div v-else class="haha" ref="cellDiv">
+  <div v-else ref="cellDiv">
     <object-cell
       v-if="valueType === 'object'"
       :obj="value"
@@ -16,7 +21,7 @@
       :max-character-length="maxCharacterLength"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="value">{{
+      <span class="is-ellipsis-1" :title="tooltip">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -24,6 +29,13 @@
 </template>
 
 <script>
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
+
 export default {
   props: {
     isLoaderActive: {
@@ -38,6 +50,10 @@ export default {
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: () =>
@@ -49,13 +65,24 @@ export default {
   computed: {
     valueType() {
       if (typeof this.value === "object") {
-        if (Array.isArray(this.value)) return "array";
+        if (this.value === null) return "null";
+        else if (Array.isArray(this.value)) return "array";
         else return "object";
       } else return typeof this.value;
     },
     maxCharacterLength() {
       return Math.ceil(this.computedCellWidth / 8);
     },
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
   },
 
   data() {

package/vue-components/v2/table/table-cell/GenericCell.vue

@@ -0,0 +1,56 @@
+<template>
+  <span
+    :class="{
+      'is-flex': cellDescriptor.type !== 'object',
+      'is-align-items-center': cellValue.icon,
+      'is-justify-content-center': cellDescriptor.textAlign === 'center',
+      'is-justify-content-left': cellDescriptor.textAlign === 'left',
+      'is-justify-content-right': cellDescriptor.textAlign === 'right'
+    }"
+  >
+    <span v-if="cellValue.icon" class="icon p-0 mr-10">
+      <img width="15" :src="cellValue.icon" />
+    </span>
+    <router-link v-if="cellValue.link" :to="getCellLink(cellValue)">
+      {{ cellValue.data }}
+    </router-link>
+    <tag v-else-if="cellValue.color" :class="`is-${cellValue.color}`">
+      {{ cellValue.data }}
+    </tag>
+    <cell-value
+      v-else
+      :cell-title="cellDescriptor.name"
+      :value="cellValue.data || '-'"
+      :tooltip="cellValue.tooltip || JSON.stringify(cellValue.data)"
+    />
+  </span>
+</template>
+<script>
+export default {
+  components: {
+    Tag: () => import("../../tag/Tag.vue"),
+    CellValue: () => import("../table-cell/CellValue.vue")
+  },
+  props: {
+    cellDescriptor: {
+      type: Object,
+      default: () => ({})
+    },
+    cellValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    getCellLink(cell) {
+      const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
+      const { user, cluster } = this.$route.params;
+      const link = inject(cell.link || "", {
+        username: user,
+        clustername: cluster
+      });
+      return link;
+    }
+  }
+};
+</script>

package/vue-components/v2/table/table-cell/ObjectCell.vue

@@ -68,7 +68,10 @@ export default {
     },
     printableStringObjs() {
       return this.objKeys.map((key) => {
-        const value = this.obj[key];
+        let value = this.obj[key];
+        if (typeof value === "object" && value !== null) {
+          value = JSON.stringify(value);
+        }
         const keyValue = `${key}: ${value}`;
         const exceededLength = keyValue.length > 30;
         const print = exceededLength ? key : keyValue;

package/vue-components/v2/tabs/EditorTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabs-body class="mt-20">
+  <tabs-body>
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>

package/vue-components/v3/button/Button.vue

@@ -4,6 +4,7 @@
     :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
     :disabled="disabled ? true : null"
     @click="handleClick"
+    :title="tooltip"
   >
     <span v-if="iconClass || iconImage" class="icon is-small">
       <img
@@ -28,6 +29,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: undefined
+    },
     // for loader
     isLoaderActive: {
       type: Boolean,

package/vue-components/v3/content/ContentTable.vue

@@ -2,6 +2,7 @@
   <content-layout>
     <template #content-header>
       <content-header
+        v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
@@ -38,6 +39,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     ContentLayout: defineAsyncComponent(() =>

package/vue-components/v3/editor/Editor.vue

@@ -7,7 +7,6 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
@@ -16,10 +15,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: readOnly,
-        scrollBeyondLastLine: false,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
       }"
     />
     <monaco-editor
@@ -30,10 +31,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: true,
-        scrollBeyondLastLine: false,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
       :diff-editor="true"
@@ -43,55 +46,65 @@
 
 <script>
 import { defineComponent, defineAsyncComponent, h } from "vue";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
 export default defineComponent({
   props: {
-    value: {
+    modelValue: {
       type: String,
-      default: "",
+      default: ""
     },
     originalValue: {
       type: String,
-      default: "",
+      default: ""
     },
     readOnly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     language: {
       type: String,
-      default: "yaml",
+      default: "yaml"
     },
     showMinimap: {
       type: Boolean,
-      default: true,
+      default: true
     },
     editorHeight: {
       type: Number,
-      default: 40,
+      default: 40
     },
+    editorTheme: {
+      type: String,
+      default: ""
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
+    }
   },
 
   emits: ["update:modelValue"],
 
   components: {
     EditorTabs: defineAsyncComponent(() =>
-      import("../tabs/EditorTabs.vue").then((module) => module.default)
-    ),
-    MonacoEditor: defineAsyncComponent(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      import("vue-monaco").then((module) => {
-        module.default.render = () => h("div");
-        return module.default;
-      })
+      import("../tabs/EditorTabs.vue").then(module => module.default)
     ),
+    MonacoEditor: defineAsyncComponent({
+      loader: () => import("./MonacoEditor.vue").then(module => module.default),
+
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 100000
+    })
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: "",
+      originalEditorContent: ""
     };
   },
 
@@ -100,16 +113,24 @@ export default defineComponent({
       const noOfLines = this.editorContent.split("\n").length;
       return this.showMinimap && noOfLines * 2 > this.editorHeight;
     },
+    theme() {
+      return (
+        this.editorTheme ||
+        (document.documentElement.classList.contains("is-dark-theme")
+          ? "vs-dark"
+          : "vs")
+      );
+    }
   },
 
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
       handler(n) {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      },
+      }
     },
     originalValue: {
       immediate: true,
@@ -117,21 +138,20 @@ export default defineComponent({
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
     onChange(e) {
       if (typeof e === "string") this.editorContent = e;
     },
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("update:modelValue", this.editorContent);
       });
-    },
-  },
+    }
+  }
 });
 </script>

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="ac-preview is-active is-not-fixed">
+    <div class="ac-preview-inner">
+      <!-- preview body start  -->
+      <div class="ac-preview-body mt-0 pt-20">
+        <div
+          v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
+          class="left-content"
+        >
+          <div class="ac-files pt-0">
+            <ul v-if="!isPreviewLoading">
+              <li
+                v-for="(previewYaml, idx) in filteredYamls"
+                :key="previewYaml.name + idx"
+                :class="{ 'is-active': activeKey === previewYaml.uid }"
+              >
+                <a @click.prevent="setActivePreview(previewYaml.uid)">
+                  <span>
+                    <img
+                      src="~@appscode/design-system-images/icons/file-icon.svg"
+                      alt=""
+                    />
+                  </span>
+                  <span>{{ previewYaml.name }}</span>
+                </a>
+              </li>
+            </ul>
+            <sidebar-loader v-else />
+          </div>
+        </div>
+        <div class="right-content">
+          <div class="right-content">
+            <resource-loader v-if="isPreviewLoading" />
+            <editor
+              v-else-if="!isPreviewLoading && !hideValue"
+              v-model="activeFile.content"
+              :original-value="originalValue"
+              :language="activeFile.format"
+              :read-only="isEditorReadOnly"
+              :editor-height="editorHeight"
+              :show-minimap="showMinimap"
+            />
+            <span v-else> *************** </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
+export default defineComponent({
+  components: {
+    Editor: defineAsyncComponent({
+      loader: () =>
+        import("../editor/Editor.vue").then(module => module.default),
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 100000
+    }),
+    ResourceLoader: defineAsyncComponent(() =>
+      import("../loaders/ResourceLoader.vue")
+    ),
+    SidebarLoader: defineAsyncComponent(() =>
+      import("../loaders/SidebarLoader.vue")
+    )
+  },
+  props: {
+    searchText: {
+      type: String,
+      default: ""
+    },
+    toggleHideValue: {
+      type: Boolean,
+      default: true
+    },
+    isPreviewLoading: {
+      type: Boolean,
+      default: false
+    },
+    isEditorReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    previewYamls: {
+      type: Array,
+      default: () => {
+        [];
+      }
+    },
+    showMinimap: {
+      type: Boolean,
+      default: false
+    },
+    editorHeight: {
+      type: Number,
+      default: 60
+    }
+  },
+  emits: ["setActiveKey"],
+  data() {
+    return {
+      activeKey: "",
+      hideValue: ""
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.filteredYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return activeFile || { content: "", format: "yaml" };
+    },
+    originalValue() {
+      const activeFile = this.filteredYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return (activeFile && activeFile.initContent) || "";
+    },
+    filteredYamls() {
+      if (this.searchText) {
+        return this.previewYamls.filter(
+          element => JSON.stringify(element).search(this.searchText) > -1
+        );
+      } else return this.previewYamls;
+    },
+    isKeyAvailable() {
+      const val = this.previewYamls.find(element => {
+        return element.uid === this.activeKey;
+      });
+      return val === undefined ? false : true;
+    }
+  },
+  methods: {
+    initActivePreview() {
+      if (!this.isKeyAvailable) {
+        this.activeKey = this.previewYamls[0].uid;
+        this.hideValue = this.activeFile.isSecret;
+        this.$emit("setActiveKey", this.activeKey);
+      }
+    },
+    setActivePreview(uid) {
+      this.activeKey = uid;
+      this.hideValue = this.activeFile.isSecret;
+      this.$emit("setActiveKey", this.activeKey);
+    }
+  },
+  watch: {
+    previewYamls: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        if (n.length) {
+          this.initActivePreview();
+        }
+      }
+    },
+    toggleHideValue(n) {
+      this.hideValue = n;
+    }
+  }
+});
+</script>