@dataloop-ai/components 0.18.0 → 0.18.2

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/CardViewTable.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="card-view-table">
+        <DlTable
+            :hide-pagination="true"
+            title="Treats"
+            color="dl-color-secondary"
+            :rows="items"
+            :columns="tableColumns"
+            row-key="index"
+            style="height: 100%"
+            virtual-scroll
+            :rows-per-page-options="[0]"
+            :visible-columns="visibleColumns"
+        >
+            <template #header="props">
+                <dl-tr :props="props">
+                    <dl-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                    >
+                        {{ col.label }}
+                    </dl-th>
+                    <dl-th :props="props">
+                        <dl-button
+                            text-color="dl-color-medium"
+                            flat
+                            icon="icon-dl-column"
+                        >
+                            <dl-menu>
+                                <dl-list separator>
+                                    <dl-option-group
+                                        v-model="visibleColumns"
+                                        :options="options"
+                                        :left-label="true"
+                                        max-width="250px"
+                                        type="switch"
+                                        class="table-options"
+                                    />
+                                </dl-list>
+                            </dl-menu>
+                        </dl-button>
+                    </dl-th>
+                </dl-tr>
+            </template>
+            <template #body-cell-name="props">
+                <dl-td :props="props">
+                    <div class="flex items-center">
+                        <div :style="imageStyles(props.row.url)" />
+                        <div style="display: flex; max-width: 400px">
+                            <dl-ellipsis :text="props.row.name" />
+                            {{ props.row.extension }}
+                        </div>
+                    </div>
+                </dl-td>
+            </template>
+            <template #body-cell-createdAt="image">
+                <dl-td :props="image">
+                    {{ formatDate(image.row.createdAt) }}
+                </dl-td>
+            </template>
+            <template #body-cell-updatedAt="image">
+                <dl-td :props="image">
+                    {{ formatDate(image.row.updatedAt) }}
+                </dl-td>
+            </template>
+        </DlTable>
+    </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, PropType } from 'vue-demi'
+import {
+    DlTable,
+    DlTd,
+    DlTr,
+    DlTh,
+    DlOptionGroup,
+    DlList,
+    DlMenu,
+    DlEllipsis,
+    DlButton
+} from '../../../../components'
+import { ImageMetadata } from '../types/imageMetadata'
+
+const columns = [
+    {
+        name: 'name',
+        required: true,
+        label: 'File Name',
+        align: 'left',
+        field: 'name',
+        sortable: true
+    },
+    {
+        name: 'createdAt',
+        align: 'right',
+        label: 'Created At',
+        field: 'createdAt',
+        sortable: true
+    },
+    {
+        name: 'updatedAt',
+        label: 'Updated At',
+        align: 'right',
+        field: 'updatedAt',
+        sortable: true
+    },
+    {
+        name: 'mediaType',
+        label: 'Media Type',
+        field: 'mediaType',
+        align: 'left'
+    },
+    { name: 'state', label: 'State', field: 'state', align: 'left' }
+]
+
+export default defineComponent({
+    name: 'CardViewTable',
+    components: {
+        DlOptionGroup,
+        DlTd,
+        DlTr,
+        DlTh,
+        DlEllipsis,
+        DlTable,
+        DlButton,
+        DlMenu,
+        DlList
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => Array as PropType<ImageMetadata[]>
+        }
+    },
+    setup() {
+        const tableColumns = ref(columns)
+        const separator = ref('horizontal')
+        const formatDate = (date: Date) => {
+            return date
+                .toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    second: '2-digit'
+                })
+                .split(' ')
+                .join(' ')
+        }
+        const log = console.log
+
+        const visibleColumns = ref([
+            'name',
+            'createdAt',
+            'updatedAt',
+            'mediaType',
+            'state'
+        ])
+        const options = tableColumns.value.map((item) => ({
+            label: item.label,
+            value: item.name
+        }))
+        const imageStyles = (url: string): Record<string, string> => ({
+            backgroundImage: `url(${url})`,
+            width: '36px',
+            height: '27px',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            marginRight: '10px'
+        })
+
+        return {
+            separator,
+            formatDate,
+            log,
+            tableColumns,
+            visibleColumns,
+            options,
+            imageStyles
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.card-view-table {
+    width: 100%;
+    overflow-x: scroll;
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/EmptyState/LayoutEmptyState.vue

@@ -0,0 +1,227 @@
+<template>
+    <div class="layout-empty-state grid-cols-2">
+        <div class="flex full-width text-center justify-center">
+            <upload-data />
+        </div>
+        <div class="flex full-width text-center justify-center">
+            <dl-code-editor
+                v-model="codeEditorValue"
+                width="485px"
+                height="547px"
+                :language="language"
+                :theme="theme"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi'
+import UploadData from './UploadData.vue'
+import { DlCodeEditor } from '../../../../../components'
+import { DlCodeEditorTheme } from '../../../../../components/types'
+
+export default defineComponent({
+    name: 'LayoutEmptyState',
+    components: {
+        UploadData,
+        DlCodeEditor
+    },
+    setup() {
+        const codeEditorValue = ref(
+            'import urllib3\n' +
+                'urllib3.disable_warnings()\n' +
+                'from base64 import b64encode\n' +
+                'import os\n' +
+                'import sys\n' +
+                'import json\n' +
+                'import getpass\n' +
+                'from optparse import OptionParser\n' +
+                'from datetime import datetime, timedelta\n' +
+                'import time\n' +
+                'from time import gmtime, strftime, strptime\n' +
+                'from operator import itemgetter, attrgetter\n' +
+                'from purity_fb import PurityFb, FileSystem, FileSystemSnapshot, SnapshotSuffix, rest\n' +
+                '\n' +
+                '# Global Variables\n' +
+                "VERSION = '2.0.0'\n" +
+                "HEADER = 'Pure Storage Take FlashBlade Snapshot (' + VERSION + ')'\n" +
+                "BANNER = ('=' * 132)\n" +
+                'DEBUG_FLAG = False\n' +
+                'VERBOSE_FLAG = False\n' +
+                "COOKIE = ''\n" +
+                '\n' +
+                'def parsecl():\n' +
+                "    usage = 'usage: %prog [options]'\n" +
+                "    version = '%prog ' + VERSION\n" +
+                '    description = "This application has been developed using Pure Storage v1.12 RESTful Web Service interfaces. Developed and tested using Python 3.9.5 Please contact ron@purestorage.com for assistance."\n' +
+                '\n' +
+                '    parser = OptionParser(usage=usage, version=version, description=description)\n' +
+                '\n' +
+                '\n' +
+                "    parser.add_option('-d', '--debug',\n" +
+                "                      action = 'store_true',\n" +
+                "                      dest = 'DEBUG_FLAG',\n" +
+                '                      default = False,\n' +
+                "                      help = 'Debug [default: %default]')\n" +
+                '    \n' +
+                "    parser.add_option('-f', '--filesystem',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'fs',\n" +
+                "                      help = 'FlashBlade File System')\n" +
+                '        \n' +
+                "    parser.add_option('-r', '--replicant',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'flashBladeRep',\n" +
+                "                      help = 'FlashBlade Replicant array')\n" +
+                '                      \n' +
+                "    parser.add_option('-s', '--server',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'flashBlade',\n" +
+                "                      help = 'FlashBlade array')\n" +
+                '    \n' +
+                "    parser.add_option('-t', '--token',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'API_TOKEN',\n" +
+                "                      help = 'Pure API Token')\n" +
+                '\n' +
+                "    parser.add_option('-S', '--suffix',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'suffix',\n" +
+                "                      help = 'File system snapshot suffix')\n" +
+                '\n' +
+                "    parser.add_option('-v', '--verbose',\n" +
+                "                      action = 'store_true',\n" +
+                "                      dest = 'VERBOSE_FLAG',\n" +
+                '                      default = False,\n' +
+                "                      help = 'Verbose [default: %default]')\n" +
+                '\n' +
+                '    (options, args) = parser.parse_args()\n' +
+                '\n' +
+                "    '''\n" +
+                '    print("Options:", options)\n' +
+                '    print("Args:", args)\n' +
+                "    '''\n" +
+                '    \n' +
+                '    return(options)\n' +
+                '\n' +
+                'def main():\n' +
+                '    # Setup variables\n' +
+                '    global DEBUG_FLAG\n' +
+                '    exit_code = 0\n' +
+                '\n' +
+                '    # Check for command line parameters\n' +
+                '    options = parsecl()\n' +
+                '    API_TOKEN = options.API_TOKEN\n' +
+                '    flashBlade = options.flashBlade\n' +
+                '    flashBladeRep = options.flashBladeRep\n' +
+                '    fs = options.fs\n' +
+                '    suffix = options.suffix\n' +
+                '    DEBUG_FLAG = options.DEBUG_FLAG\n' +
+                '    VERBOSE_FLAG = options.VERBOSE_FLAG\n' +
+                '    \n' +
+                '    if DEBUG_FLAG:\n' +
+                "        print('API Token:', API_TOKEN)\n" +
+                "        print('FlashBlade:', flashBlade)\n" +
+                "        print('Relplicant:', flashBladeRep)\n" +
+                "        print('File System:', fs)\n" +
+                "        print('Suffix:', suffix)\n" +
+                "        print('Debug Flag:', DEBUG_FLAG)\n" +
+                "        print('Verbose Flag:', VERBOSE_FLAG)\n" +
+                '\n' +
+                '    if flashBlade == None:\n' +
+                "        sys.exit('Exiting: You must provide FlashBlade details')\n" +
+                '        \n' +
+                '    if API_TOKEN == None:\n' +
+                "        sys.exit('Exiting: You must provide FlashBlade API Token details')\n" +
+                '\n' +
+                '    if fs == None:\n' +
+                "        sys.exit('Exiting: You must provide FlashBlade file system')\n" +
+                '\n' +
+                '    print(BANNER)\n' +
+                "    print(HEADER + ' - ' + flashBlade)\n" +
+                "    print(strftime('%d/%m/%Y %H:%M:%S %Z', gmtime()))\n" +
+                '    print(BANNER)\n' +
+                '\n' +
+                '    # create PurityFb object for a certain array\n' +
+                '    fb = PurityFb(flashBlade)\n' +
+                '    # this is required for versions before Purity//FB 2.1.3 because they only supports self-signed\n' +
+                '    # certificates. in later versions, this may be unnecessary if you have imported a certificate.\n' +
+                '    fb.disable_verify_ssl()\n' +
+                '    \n' +
+                '    try:\n' +
+                '        res= fb.login(API_TOKEN)\n' +
+                '    except rest.ApiException as e:\n' +
+                '        print("Exception when logging in to the array: %s\\n" % e)\n' +
+                '\n' +
+                '    if res:\n' +
+                '        try:\n' +
+                '            if flashBladeRep:\n' +
+                '                if suffix:\n' +
+                '                  # create a snapshot with suffix and replicate to target array\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs],\n' +
+                '                                                                              suffix=SnapshotSuffix(suffix),\n' +
+                '                                                                              send=True,\n' +
+                '                                                                              targets=[flashBladeRep])\n' +
+                '                else:\n' +
+                '                  # create a snapshot without suffix and replicate to target array\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs],\n' +
+                '                                                                              send=True,\n' +
+                '                                                                              targets=[flashBladeRep])\n' +
+                '            else:\n' +
+                '                if suffix:\n' +
+                '                  # create a snapshot with suffix for the file system\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs],\n' +
+                '                                                                             suffix=SnapshotSuffix(suffix))\n' +
+                '                else:\n' +
+                '                  # create a snapshot without suffix for the file system\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs])\n' +
+                '                \n' +
+                '            if VERBOSE_FLAG:\n' +
+                '                print(res)\n' +
+                '            \n' +
+                "            print('Snapshot created for', fs, 'suffix', res.items[0].suffix) \n" +
+                '\n' +
+                '        except rest.ApiException as e:\n' +
+                '            print("Exception when creating file system snapshots: %s\\n" % e)        \n' +
+                '\n' +
+                '    fb.logout()\n' +
+                '    print(BANNER)\n' +
+                "    print(strftime('%d/%m/%Y %H:%M:%S %Z', gmtime()))\n" +
+                '    print(BANNER)\n' +
+                '    sys.exit(exit_code)\n' +
+                '\n' +
+                'main()'
+        )
+        const language = ref('python')
+
+        const theme = computed(() => {
+            if (
+                // @ts-ignore
+                window.DlComponents.isDark.value
+            ) {
+                return DlCodeEditorTheme.Dark
+            }
+            return DlCodeEditorTheme.Light
+        })
+
+        return {
+            codeEditorValue,
+            language,
+            theme
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.layout-empty-state {
+    display: grid;
+    width: 100%;
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/EmptyState/UploadData.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="dl-layout-upload-data">
+        <dl-empty-state
+            icon-size="100px"
+            class="dl-layout-upload-data__empty-state"
+            icon=""
+            title=""
+        >
+            <template #cta="">
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        padding-bottom: 20px;
+                    "
+                >
+                    <dl-icon
+                        icon="icon-dl-upload"
+                        size="20px"
+                        color="dl-color-darker"
+                    />
+                    <dl-typography
+                        size="20px"
+                        color="dl-color-darker"
+                    >
+                        Upload data (files, folders & annotations)
+                    </dl-typography>
+                </div>
+                <dl-typography
+                    size="12px"
+                    color="dl-color-medium"
+                >
+                    Models can be trained, evaluated with data (and if there's
+                    ground-truth, you'll have precision-recall and confusion
+                    matrix), and deployed as a service in the Dataloop platform,
+                    with an endpoint for use from outside.
+                </dl-typography>
+                <div style="padding-top: 20px">
+                    <dl-button label="Upload Data" />
+                </div>
+            </template>
+
+            <template #links>
+                <div style="display: flex; gap: 15px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                        size="s"
+                        color="secondary"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                        size="s"
+                        color="secondary"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                        size="s"
+                        color="secondary"
+                    />
+                </div>
+            </template>
+        </dl-empty-state>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlEmptyState,
+    DlButton,
+    DlTypography,
+    DlIcon
+} from '../../../../../components'
+
+export default defineComponent({
+    name: 'UploadData',
+    components: {
+        DlEmptyState,
+        DlButton,
+        DlTypography,
+        DlIcon
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-layout-upload-data {
+    &__empty-state {
+        min-width: 400px;
+        min-height: 300px;
+        max-width: 400px;
+        padding-top: 100px;
+    }
+}
+</style>